better_ui 0.5.0 → 0.5.1

data/lib/generators/better_ui/templates/components/_panel.scss

@@ -1,144 +1,104 @@
-/* ==============================
- * Panel Component
- * ============================== */
-
-/* Struttura di base */
-.bui-panel-base {
-  @apply border shadow-sm;
-}
-
-/* Intestazione */
-.bui-panel-header {
-  @apply px-4 py-3 border-b;
-}
-
-/* Corpo */
-.bui-panel-body {
-  @apply p-4;
-}
-
-.bui-panel-body-content {
-  @apply overflow-x-auto break-words;
-}
-
-/* Piè di pagina */
-.bui-panel-footer {
-  @apply px-4 py-3 border-t;
-}
-
-/* Titolo */
-.bui-panel-title {
-  @apply text-lg font-medium;
-}
-
-/* Opzioni di padding */
-.bui-panel-padding-none {
-  @apply p-0;
-}
-
-.bui-panel-padding-small {
-  @apply p-2;
-}
-
-.bui-panel-padding-medium {
-  @apply p-4;
-}
-
-.bui-panel-padding-large {
-  @apply p-6;
-}
-
-/* Opzioni di border-radius */
-.bui-panel-radius-none {
-  @apply rounded-none;
-}
-
-.bui-panel-radius-small {
-  @apply rounded-md;
-}
-
-.bui-panel-radius-medium {
-  @apply rounded-lg;
-}
-
-.bui-panel-radius-large {
-  @apply rounded-xl;
-}
-
-.bui-panel-radius-full {
-  @apply rounded-full;
-}
-
-/* Temi di colore per header */
-.bui-panel-default-header {
-  @apply bg-black text-white;
-}
-
-.bui-panel-white-header {
-  @apply bg-white text-black;
-}
-
-.bui-panel-red-header {
-  @apply bg-red-500 text-white;
-}
-
-.bui-panel-rose-header {
-  @apply bg-rose-500 text-white;
-}
-
-.bui-panel-orange-header {
-  @apply bg-orange-500 text-white;
-}
-
-.bui-panel-green-header {
-  @apply bg-green-500 text-white;
-}
-
-.bui-panel-blue-header {
-  @apply bg-blue-500 text-white;
-}
-
-.bui-panel-yellow-header {
-  @apply bg-yellow-500 text-black;
-}
-
-.bui-panel-violet-header {
-  @apply bg-violet-500 text-white;
-}
-
-/* Temi di colore per footer */
-.bui-panel-default-footer {
-  @apply bg-black text-white;
-}
-
-.bui-panel-white-footer {
-  @apply bg-white text-black;
-}
-
-.bui-panel-red-footer {
-  @apply bg-red-500 text-white;
-}
-
-.bui-panel-rose-footer {
-  @apply bg-rose-500 text-white;
-}
-
-.bui-panel-orange-footer {
-  @apply bg-orange-500 text-white;
-}
-
-.bui-panel-green-footer {
-  @apply bg-green-500 text-white;
-}
-
-.bui-panel-blue-footer {
-  @apply bg-blue-500 text-white;
-}
-
-.bui-panel-yellow-footer {
-  @apply bg-yellow-500 text-black;
-}
-
-.bui-panel-violet-footer {
-  @apply bg-violet-500 text-white;
+@layer components {
+  // Classe base per il pannello (Block)
+  .bui-panel {
+    @apply border shadow-sm;
+    
+    // Elements
+    &__header {
+      @apply px-4 py-3 border-b;
+    }
+    
+    &__body {
+      @apply p-4;
+    }
+    
+    &__footer {
+      @apply px-4 py-3 border-t;
+    }
+    
+    &__title {
+      @apply text-lg font-medium;
+    }
+    
+    // Modifiers (varianti colore)
+    &--default {
+      @apply bg-black text-white border-gray-900;
+      
+      .bui-panel__header {
+        @apply bg-gray-900;
+      }
+      
+      .bui-panel__footer {
+        @apply bg-gray-900;
+      }
+    }
+    
+    &--white {
+      @apply bg-white text-black border-gray-200;
+      
+      .bui-panel__header {
+        @apply bg-gray-50;
+      }
+      
+      .bui-panel__footer {
+        @apply bg-gray-50;
+      }
+    }
+    
+    &--red {
+      @apply bg-red-50 text-red-900 border-red-200;
+      
+      .bui-panel__header {
+        @apply bg-red-100 text-red-800;
+      }
+      
+      .bui-panel__footer {
+        @apply bg-red-100;
+      }
+    }
+    
+    // ... altre varianti di colore ...
+    
+    // Modifiers (varianti di padding)
+    &--padding-none {
+      .bui-panel__body {
+        @apply p-0;
+      }
+    }
+    
+    &--padding-small {
+      .bui-panel__body {
+        @apply p-2;
+      }
+    }
+    
+    &--padding-medium {
+      .bui-panel__body {
+        @apply p-4;
+      }
+    }
+    
+    &--padding-large {
+      .bui-panel__body {
+        @apply p-6;
+      }
+    }
+    
+    // Modifiers (border radius)
+    &--radius-none {
+      @apply rounded-none;
+    }
+    
+    &--radius-small {
+      @apply rounded-md;
+    }
+    
+    &--radius-medium {
+      @apply rounded-lg;
+    }
+    
+    &--radius-large {
+      @apply rounded-xl;
+    }
+  }
 } 

data/lib/generators/better_ui/templates/components/_spinner.scss

@@ -1,132 +1,129 @@
-/* ==============================
- * Spinner Component
- * ============================== */
-
-/* Stile base */
-.bui-spinner {
-  @apply inline-flex flex-col items-center justify-center;
-}
-
-/* Animazione dello spinner */
-.bui-spinner-animation {
-  @apply inline-block rounded-full animate-spin;
-  border-top-color: transparent;
-}
-
-/* Base per il contenuto */
-.bui-spinner-label {
-  @apply mt-2 text-center;
-}
-
-.bui-spinner-content {
-  @apply mt-4;
-}
-
-/* Modalità fullscreen */
-.bui-spinner-fullscreen {
-  @apply fixed inset-0 flex items-center justify-center z-50 bg-black bg-opacity-50;
-}
-
-/* Varianti di dimensione */
-.bui-spinner-small .bui-spinner-animation {
-  @apply w-5 h-5 border-2;
-}
-
-.bui-spinner-medium .bui-spinner-animation {
-  @apply w-8 h-8 border-3;
-}
-
-.bui-spinner-large .bui-spinner-animation {
-  @apply w-12 h-12 border-4;
-}
-
-/* Varianti di colore */
-.bui-spinner-default {
-  .bui-spinner-animation {
-    @apply border-gray-200 border-t-gray-800;
-  }
-
-  .bui-spinner-label {
-    @apply text-gray-800;
-  }
-}
-
-.bui-spinner-white {
-  .bui-spinner-animation {
-    @apply border-gray-100 border-t-white;
-  }
-
-  .bui-spinner-label {
-    @apply text-white;
-  }
-}
-
-.bui-spinner-red {
-  .bui-spinner-animation {
-    @apply border-red-100 border-t-red-600;
-  }
-
-  .bui-spinner-label {
-    @apply text-red-600;
-  }
-}
-
-.bui-spinner-rose {
-  .bui-spinner-animation {
-    @apply border-rose-100 border-t-rose-600;
-  }
-
-  .bui-spinner-label {
-    @apply text-rose-600;
-  }
-}
-
-.bui-spinner-orange {
-  .bui-spinner-animation {
-    @apply border-orange-100 border-t-orange-500;
-  }
-
-  .bui-spinner-label {
-    @apply text-orange-500;
-  }
-}
-
-.bui-spinner-green {
-  .bui-spinner-animation {
-    @apply border-green-100 border-t-green-600;
-  }
-
-  .bui-spinner-label {
-    @apply text-green-600;
-  }
-}
-
-.bui-spinner-blue {
-  .bui-spinner-animation {
-    @apply border-blue-100 border-t-blue-600;
-  }
-
-  .bui-spinner-label {
-    @apply text-blue-600;
-  }
-}
-
-.bui-spinner-yellow {
-  .bui-spinner-animation {
-    @apply border-yellow-100 border-t-yellow-500;
-  }
-
-  .bui-spinner-label {
-    @apply text-yellow-500;
-  }
-}
-
-.bui-spinner-violet {
-  .bui-spinner-animation {
-    @apply border-violet-100 border-t-violet-600;
-  }
-
-  .bui-spinner-label {
-    @apply text-violet-600;
+@layer components {
+  // Classe base per lo spinner (Block)
+  .bui-spinner {
+    @apply inline-flex flex-col items-center justify-center;
+    
+    // Elements
+    &__animation {
+      @apply inline-block rounded-full animate-spin;
+      border-top-color: transparent;
+    }
+    
+    &__label {
+      @apply mt-2 text-center;
+    }
+    
+    &__content {
+      @apply mt-4;
+    }
+    
+    // Modifiers (dimensioni)
+    &--small &__animation {
+      @apply w-5 h-5 border-2;
+    }
+    
+    &--medium &__animation {
+      @apply w-8 h-8 border-3;
+    }
+    
+    &--large &__animation {
+      @apply w-12 h-12 border-4;
+    }
+    
+    // Modifiers (temi colore)
+    &--default {
+      .bui-spinner__animation {
+        @apply border-gray-200 border-t-gray-800;
+      }
+      
+      .bui-spinner__label {
+        @apply text-gray-800;
+      }
+    }
+    
+    &--white {
+      .bui-spinner__animation {
+        @apply border-gray-100 border-t-white;
+      }
+      
+      .bui-spinner__label {
+        @apply text-white;
+      }
+    }
+    
+    &--red {
+      .bui-spinner__animation {
+        @apply border-red-100 border-t-red-600;
+      }
+      
+      .bui-spinner__label {
+        @apply text-red-600;
+      }
+    }
+    
+    &--rose {
+      .bui-spinner__animation {
+        @apply border-rose-100 border-t-rose-600;
+      }
+      
+      .bui-spinner__label {
+        @apply text-rose-600;
+      }
+    }
+    
+    &--orange {
+      .bui-spinner__animation {
+        @apply border-orange-100 border-t-orange-500;
+      }
+      
+      .bui-spinner__label {
+        @apply text-orange-500;
+      }
+    }
+    
+    &--green {
+      .bui-spinner__animation {
+        @apply border-green-100 border-t-green-600;
+      }
+      
+      .bui-spinner__label {
+        @apply text-green-600;
+      }
+    }
+    
+    &--blue {
+      .bui-spinner__animation {
+        @apply border-blue-100 border-t-blue-600;
+      }
+      
+      .bui-spinner__label {
+        @apply text-blue-600;
+      }
+    }
+    
+    &--yellow {
+      .bui-spinner__animation {
+        @apply border-yellow-100 border-t-yellow-500;
+      }
+      
+      .bui-spinner__label {
+        @apply text-yellow-500;
+      }
+    }
+    
+    &--violet {
+      .bui-spinner__animation {
+        @apply border-violet-100 border-t-violet-600;
+      }
+      
+      .bui-spinner__label {
+        @apply text-violet-600;
+      }
+    }
+    
+    // Modifiers (stati)
+    &--fullscreen {
+      @apply fixed inset-0 flex items-center justify-center z-50 bg-black bg-opacity-50;
+    }
   }
 }