@keenmate/pure-admin-core 1.0.0-rc06 → 1.1.0

package/src/scss/core-components/_forms.scss

@@ -1,16 +1,16 @@
-/* ========================================
-   Form Components
-   Form groups, inputs, selects, textareas, checkboxes, radio buttons, states
-   ======================================== */
-
-// ============================================================================
-// BACKWARD COMPATIBILITY AGGREGATOR
-// This file re-exports all form components from the modular forms/ directory.
-// For new code, prefer importing from forms/ directly:
-//   @use 'forms' as *;
-// or specific modules:
-//   @use 'forms/form-inputs';
-//   @use 'forms/checkboxes-radios';
-// ============================================================================
-
-@forward 'forms/index';
+/* ========================================
+   Form Components
+   Form groups, inputs, selects, textareas, checkboxes, radio buttons, states
+   ======================================== */
+
+// ============================================================================
+// BACKWARD COMPATIBILITY AGGREGATOR
+// This file re-exports all form components from the modular forms/ directory.
+// For new code, prefer importing from forms/ directly:
+//   @use 'forms' as *;
+// or specific modules:
+//   @use 'forms/form-inputs';
+//   @use 'forms/checkboxes-radios';
+// ============================================================================
+
+@forward 'forms/index';

package/src/scss/core-components/_grid.scss

@@ -262,3 +262,28 @@ $grid-columns-fractions: (
   padding-bottom: 0;
 }
 
+// ============================================================================
+// AUTO-STACK ON MOBILE
+// ============================================================================
+// Base percentage/fraction columns auto-stack to 100% on mobile
+// Use explicit responsive classes (pa-col-sm-*, pa-col-md-*) to override
+@media (max-width: $mobile-breakpoint) {
+  // Stack percentage columns
+  @each $size in $grid-columns-5 {
+    @if $size < 100 {
+      .pa-col-#{$size} {
+        flex: 0 0 100%;
+        max-width: 100%;
+      }
+    }
+  }
+
+  // Stack fraction columns
+  @each $name, $width in $grid-columns-fractions {
+    .pa-col-#{$name} {
+      flex: 0 0 100%;
+      max-width: 100%;
+    }
+  }
+}
+

package/src/scss/core-components/_layout.scss

@@ -1,15 +1,15 @@
-/* ========================================
-   Layout V2 - Based on Testbench Structure
-   ======================================== */
-
-// ============================================================================
-// BACKWARD COMPATIBILITY AGGREGATOR
-// This file re-exports all layout components from the modular layout/ directory.
-// For new code, prefer importing from layout/ directly:
-//   @use 'layout' as *;
-// or specific modules:
-//   @use 'layout/navbar';
-//   @use 'layout/sidebar';
-// ============================================================================
-
-@forward 'layout/index';
+/* ========================================
+   Layout V2 - Based on Testbench Structure
+   ======================================== */
+
+// ============================================================================
+// BACKWARD COMPATIBILITY AGGREGATOR
+// This file re-exports all layout components from the modular layout/ directory.
+// For new code, prefer importing from layout/ directly:
+//   @use 'layout' as *;
+// or specific modules:
+//   @use 'layout/navbar';
+//   @use 'layout/sidebar';
+// ============================================================================
+
+@forward 'layout/index';

package/src/scss/core-components/_lists.scss

@@ -120,7 +120,7 @@
 
   dt {
     font-weight: $font-weight-semibold;
-    color: var(--pa-text-primary);
+    color: var(--pa-text-color-1);
     margin-bottom: $spacing-xs;
     margin-top: $spacing-base;
 
@@ -132,7 +132,7 @@
   dd {
     margin-left: $spacing-lg;
     margin-bottom: $spacing-sm;
-    color: var(--pa-text-secondary);
+    color: var(--pa-text-color-2);
     line-height: 1.6;
   }
 
@@ -173,7 +173,7 @@
     }
 
     &:hover {
-      background-color: var(--pa-primary-bg);
+      background-color: var(--pa-main-bg);
     }
   }
 
@@ -181,7 +181,7 @@
     width: $btn-icon-only-size;
     height: $btn-icon-only-size;
     border-radius: 50%;
-    background-color: var(--pa-primary-bg);
+    background-color: var(--pa-main-bg);
     display: flex;
     align-items: center;
     justify-content: center;
@@ -194,18 +194,18 @@
 
   &__title {
     font-weight: $font-weight-medium;
-    color: var(--pa-text-primary);
+    color: var(--pa-text-color-1);
     margin-bottom: $spacing-xs;
   }
 
   &__subtitle {
-    color: var(--pa-text-secondary);
+    color: var(--pa-text-color-2);
     font-size: $font-size-sm;
     margin-bottom: $spacing-xs;
   }
 
   &__meta {
-    color: var(--pa-text-secondary);
+    color: var(--pa-text-color-2);
     font-size: $font-size-xs;
   }
 }