0.5.8-panel-upgrade-community-crud-fix

panel/styles/Button.module.css

@@ -0,0 +1,94 @@
+.button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5rem;
+  border: none;
+  border-radius: var(--border-radius-md);
+  font-weight: var(--font-weight-medium);
+  cursor: pointer;
+  transition: all var(--transition-fast);
+  position: relative;
+}
+
+/* Variants */
+.button-primary {
+  background-color: var(--primary-color);
+  color: white;
+}
+
+.button-primary:hover:not(:disabled) {
+  background-color: var(--primary-color-dark);
+}
+
+.button-secondary {
+  background-color: var(--secondary-color-light);
+  color: var(--secondary-color-dark);
+}
+
+.button-secondary:hover:not(:disabled) {
+  background-color: var(--secondary-color);
+  color: white;
+}
+
+.button-danger {
+  background-color: var(--error-color);
+  color: white;
+}
+
+.button-danger:hover:not(:disabled) {
+  background-color: var(--error-color-dark);
+}
+
+/* Sizes */
+.button-small {
+  padding: 0.5rem 1rem;
+  font-size: var(--font-size-sm);
+}
+
+.button-medium {
+  padding: 0.75rem 1.5rem;
+  font-size: var(--font-size-base);
+}
+
+.button-large {
+  padding: 1rem 2rem;
+  font-size: var(--font-size-lg);
+}
+
+/* States */
+.button:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+
+.button-loading {
+  color: transparent;
+}
+
+.button-full-width {
+  width: 100%;
+}
+
+/* Loading Spinner */
+.loading-spinner {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 1.25em;
+  height: 1.25em;
+  border: 2px solid currentColor;
+  border-radius: 50%;
+  border-right-color: transparent;
+  animation: spin 0.75s linear infinite;
+}
+
+@keyframes spin {
+  from {
+    transform: translate(-50%, -50%) rotate(0deg);
+  }
+  to {
+    transform: translate(-50%, -50%) rotate(360deg);
+  }
+}