@keenmate/pure-admin-core 2.3.1 → 2.3.2

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

@@ -1,293 +1,293 @@
-// ============================================================================
-// NATIVE GRID SYSTEM
-// ============================================================================
-// Flexbox-based grid with percentage and fraction columns
-// Replaces PureCSS grid dependency
-@use '../variables' as *;
-//
-// Naming convention:
-// - .pa-row            → flex container
-// - .pa-col            → auto-equal width column
-// - .pa-col-{n}        → percentage width in 5% increments (5, 10, 15... 100)
-// - .pa-col-{x}-{y}    → fraction width (1-2, 1-3, 2-3, 1-4, 3-4, 1-6, 5-6, etc.)
-// - .pa-col-{bp}-{n}   → responsive variants (sm, md, lg, xl)
-// - .pa-offset-{n}     → left margin offset
-// ============================================================================
-
-@use "sass:math";
-
-// Configuration (note: $grid-breakpoints is in _variables.scss for shared use)
-$grid-gutter: 0.8rem !default; // 8px gutter on each side (with 10px base), total gap = 16px
-
-// Column sizes - 5% increments (n*5, n=1-20)
-$grid-columns-5: (5, 10, 15, 20, 25, 30, 35, 40, 45, 50, 55, 60, 65, 70, 75, 80, 85, 90, 95, 100);
-
-// Column sizes - fractions (for unintuitive percentages)
-$grid-columns-fractions: (
-  '1-2': 50%,
-  '1-3': 33.333%,
-  '2-3': 66.667%,
-  '1-4': 25%,
-  '3-4': 75%,
-  '1-5': 20%,
-  '2-5': 40%,
-  '3-5': 60%,
-  '4-5': 80%,
-  '1-6': 16.667%,
-  '5-6': 83.333%,
-  '1-12': 8.333%,
-  '5-12': 41.667%,
-  '7-12': 58.333%,
-  '11-12': 91.667%
-);
-
-// ============================================================================
-// ROW (Container)
-// ============================================================================
-.pa-row {
-  display: flex;
-  flex-wrap: wrap;
-  margin-inline: -$grid-gutter; // RTL: flips automatically
-  row-gap: $grid-gutter; // Vertical gap when columns wrap (half the horizontal gutter total)
-
-  // Nested rows reset margins
-  .pa-row {
-    margin-inline: 0;
-  }
-}
-
-// Row modifiers
-.pa-row--no-gutter {
-  margin-inline: 0;
-
-  > [class*="pa-col"] {
-    padding-inline: 0;
-  }
-}
-
-.pa-row--center {
-  justify-content: center;
-}
-
-.pa-row--end {
-  justify-content: flex-end;
-}
-
-.pa-row--between {
-  justify-content: space-between;
-}
-
-.pa-row--around {
-  justify-content: space-around;
-}
-
-.pa-row--stretch {
-  align-items: stretch;
-}
-
-.pa-row--top {
-  align-items: flex-start;
-}
-
-.pa-row--middle {
-  align-items: center;
-}
-
-.pa-row--bottom {
-  align-items: flex-end;
-}
-
-.pa-row--same-height {
-  > [class*="pa-col"] {
-    > .pa-card {
-      height: 100%;
-    }
-  }
-}
-
-// ============================================================================
-// COLUMN (Base)
-// ============================================================================
-.pa-col {
-  flex: 1;
-  padding-inline: $grid-gutter; // RTL: flips automatically
-  min-width: 0; // Prevent content overflow
-}
-
-// Auto-width column
-.pa-col-auto {
-  flex: 0 0 auto;
-  width: auto;
-  padding-inline: $grid-gutter;
-}
-
-// ============================================================================
-// PERCENTAGE COLUMNS (Base - 5% increments)
-// ============================================================================
-@each $size in $grid-columns-5 {
-  .pa-col-#{$size} {
-    flex: 0 0 math.percentage(math.div($size, 100));
-    max-width: math.percentage(math.div($size, 100));
-    padding-inline: $grid-gutter; // RTL: flips automatically
-    min-width: 0; // Prevent content overflow
-  }
-}
-
-// ============================================================================
-// FRACTION COLUMNS (Base - intuitive naming)
-// ============================================================================
-@each $name, $width in $grid-columns-fractions {
-  .pa-col-#{$name} {
-    flex: 0 0 $width;
-    max-width: $width;
-    padding-inline: $grid-gutter; // RTL: flips automatically
-    min-width: 0; // Prevent content overflow
-  }
-}
-
-// ============================================================================
-// OFFSETS (Base - 5% increments)
-// ============================================================================
-@each $size in $grid-columns-5 {
-  @if $size < 100 {
-    .pa-offset-#{$size} {
-      margin-inline-start: math.percentage(math.div($size, 100)); // RTL: flips to margin-right
-    }
-  }
-}
-
-// ============================================================================
-// RESPONSIVE COLUMNS & OFFSETS (Container-query based)
-// Requires a containment context ancestor: .pa-layout__main (automatic) or .pa-cq
-// ============================================================================
-@each $bp, $min-width in $grid-breakpoints {
-  @container (min-width: #{$min-width}) {
-    // Responsive percentage columns (5% increments)
-    @each $size in $grid-columns-5 {
-      .pa-col-#{$bp}-#{$size} {
-        flex: 0 0 math.percentage(math.div($size, 100));
-        max-width: math.percentage(math.div($size, 100));
-        padding-inline: $grid-gutter; // RTL: flips automatically
-        min-width: 0; // Prevent content overflow
-      }
-    }
-
-    // Responsive fraction columns
-    @each $name, $width in $grid-columns-fractions {
-      .pa-col-#{$bp}-#{$name} {
-        flex: 0 0 $width;
-        max-width: $width;
-        padding-inline: $grid-gutter; // RTL: flips automatically
-        min-width: 0; // Prevent content overflow
-      }
-    }
-
-    // Responsive offsets (5% increments)
-    @each $size in $grid-columns-5 {
-      @if $size < 100 {
-        .pa-offset-#{$bp}-#{$size} {
-          margin-inline-start: math.percentage(math.div($size, 100)); // RTL: flips to margin-right
-        }
-      }
-    }
-
-    // Responsive auto column
-    .pa-col-#{$bp}-auto {
-      flex: 0 0 auto;
-      width: auto;
-    }
-  }
-}
-
-// ============================================================================
-// COLUMN MODIFIERS
-// ============================================================================
-.pa-col--no-padding {
-  padding-inline: 0;
-}
-
-.pa-col--grow {
-  flex-grow: 1;
-}
-
-.pa-col--shrink {
-  flex-shrink: 1;
-}
-
-// ============================================================================
-// VISIBILITY HELPERS (Responsive)
-// ============================================================================
-.pa-hide {
-  display: none !important;
-}
-
-.pa-show {
-  display: block !important;
-}
-
-@each $bp, $min-width in $grid-breakpoints {
-  // Hide at breakpoint and up
-  @media (min-width: $min-width) {
-    .pa-hide-#{$bp} {
-      display: none !important;
-    }
-
-    .pa-show-#{$bp} {
-      display: block !important;
-    }
-  }
-
-  // Hide below breakpoint
-  @media (max-width: $min-width - 1px) {
-    .pa-hide-below-#{$bp} {
-      display: none !important;
-    }
-
-    .pa-show-below-#{$bp} {
-      display: block !important;
-    }
-  }
-}
-
-// ============================================================================
-// REMOVE BOTTOM PADDING IN CARDS
-// ============================================================================
-// Remove bottom padding from grid columns inside cards to avoid conflicts
-.pa-card__body .pa-row > [class*="pa-col"] {
-  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%;
-    }
-  }
-
-  // Reset base offsets when stacking
-  @each $size in $grid-columns-5 {
-    @if $size < 100 {
-      .pa-offset-#{$size} {
-        margin-inline-start: 0;
-      }
-    }
-  }
-}
-
+// ============================================================================
+// NATIVE GRID SYSTEM
+// ============================================================================
+// Flexbox-based grid with percentage and fraction columns
+// Replaces PureCSS grid dependency
+@use '../variables' as *;
+//
+// Naming convention:
+// - .pa-row            → flex container
+// - .pa-col            → auto-equal width column
+// - .pa-col-{n}        → percentage width in 5% increments (5, 10, 15... 100)
+// - .pa-col-{x}-{y}    → fraction width (1-2, 1-3, 2-3, 1-4, 3-4, 1-6, 5-6, etc.)
+// - .pa-col-{bp}-{n}   → responsive variants (sm, md, lg, xl)
+// - .pa-offset-{n}     → left margin offset
+// ============================================================================
+
+@use "sass:math";
+
+// Configuration (note: $grid-breakpoints is in _variables.scss for shared use)
+$grid-gutter: 0.8rem !default; // 8px gutter on each side (with 10px base), total gap = 16px
+
+// Column sizes - 5% increments (n*5, n=1-20)
+$grid-columns-5: (5, 10, 15, 20, 25, 30, 35, 40, 45, 50, 55, 60, 65, 70, 75, 80, 85, 90, 95, 100);
+
+// Column sizes - fractions (for unintuitive percentages)
+$grid-columns-fractions: (
+  '1-2': 50%,
+  '1-3': 33.333%,
+  '2-3': 66.667%,
+  '1-4': 25%,
+  '3-4': 75%,
+  '1-5': 20%,
+  '2-5': 40%,
+  '3-5': 60%,
+  '4-5': 80%,
+  '1-6': 16.667%,
+  '5-6': 83.333%,
+  '1-12': 8.333%,
+  '5-12': 41.667%,
+  '7-12': 58.333%,
+  '11-12': 91.667%
+);
+
+// ============================================================================
+// ROW (Container)
+// ============================================================================
+.pa-row {
+  display: flex;
+  flex-wrap: wrap;
+  margin-inline: -$grid-gutter; // RTL: flips automatically
+  row-gap: $grid-gutter; // Vertical gap when columns wrap (half the horizontal gutter total)
+
+  // Nested rows reset margins
+  .pa-row {
+    margin-inline: 0;
+  }
+}
+
+// Row modifiers
+.pa-row--no-gutter {
+  margin-inline: 0;
+
+  > [class*="pa-col"] {
+    padding-inline: 0;
+  }
+}
+
+.pa-row--center {
+  justify-content: center;
+}
+
+.pa-row--end {
+  justify-content: flex-end;
+}
+
+.pa-row--between {
+  justify-content: space-between;
+}
+
+.pa-row--around {
+  justify-content: space-around;
+}
+
+.pa-row--stretch {
+  align-items: stretch;
+}
+
+.pa-row--top {
+  align-items: flex-start;
+}
+
+.pa-row--middle {
+  align-items: center;
+}
+
+.pa-row--bottom {
+  align-items: flex-end;
+}
+
+.pa-row--same-height {
+  > [class*="pa-col"] {
+    > .pa-card {
+      height: 100%;
+    }
+  }
+}
+
+// ============================================================================
+// COLUMN (Base)
+// ============================================================================
+.pa-col {
+  flex: 1;
+  padding-inline: $grid-gutter; // RTL: flips automatically
+  min-width: 0; // Prevent content overflow
+}
+
+// Auto-width column
+.pa-col-auto {
+  flex: 0 0 auto;
+  width: auto;
+  padding-inline: $grid-gutter;
+}
+
+// ============================================================================
+// PERCENTAGE COLUMNS (Base - 5% increments)
+// ============================================================================
+@each $size in $grid-columns-5 {
+  .pa-col-#{$size} {
+    flex: 0 0 math.percentage(math.div($size, 100));
+    max-width: math.percentage(math.div($size, 100));
+    padding-inline: $grid-gutter; // RTL: flips automatically
+    min-width: 0; // Prevent content overflow
+  }
+}
+
+// ============================================================================
+// FRACTION COLUMNS (Base - intuitive naming)
+// ============================================================================
+@each $name, $width in $grid-columns-fractions {
+  .pa-col-#{$name} {
+    flex: 0 0 $width;
+    max-width: $width;
+    padding-inline: $grid-gutter; // RTL: flips automatically
+    min-width: 0; // Prevent content overflow
+  }
+}
+
+// ============================================================================
+// OFFSETS (Base - 5% increments)
+// ============================================================================
+@each $size in $grid-columns-5 {
+  @if $size < 100 {
+    .pa-offset-#{$size} {
+      margin-inline-start: math.percentage(math.div($size, 100)); // RTL: flips to margin-right
+    }
+  }
+}
+
+// ============================================================================
+// RESPONSIVE COLUMNS & OFFSETS (Container-query based)
+// Requires a containment context ancestor: .pa-layout__main (automatic) or .pa-cq
+// ============================================================================
+@each $bp, $min-width in $grid-breakpoints {
+  @container (min-width: #{$min-width}) {
+    // Responsive percentage columns (5% increments)
+    @each $size in $grid-columns-5 {
+      .pa-col-#{$bp}-#{$size} {
+        flex: 0 0 math.percentage(math.div($size, 100));
+        max-width: math.percentage(math.div($size, 100));
+        padding-inline: $grid-gutter; // RTL: flips automatically
+        min-width: 0; // Prevent content overflow
+      }
+    }
+
+    // Responsive fraction columns
+    @each $name, $width in $grid-columns-fractions {
+      .pa-col-#{$bp}-#{$name} {
+        flex: 0 0 $width;
+        max-width: $width;
+        padding-inline: $grid-gutter; // RTL: flips automatically
+        min-width: 0; // Prevent content overflow
+      }
+    }
+
+    // Responsive offsets (5% increments)
+    @each $size in $grid-columns-5 {
+      @if $size < 100 {
+        .pa-offset-#{$bp}-#{$size} {
+          margin-inline-start: math.percentage(math.div($size, 100)); // RTL: flips to margin-right
+        }
+      }
+    }
+
+    // Responsive auto column
+    .pa-col-#{$bp}-auto {
+      flex: 0 0 auto;
+      width: auto;
+    }
+  }
+}
+
+// ============================================================================
+// COLUMN MODIFIERS
+// ============================================================================
+.pa-col--no-padding {
+  padding-inline: 0;
+}
+
+.pa-col--grow {
+  flex-grow: 1;
+}
+
+.pa-col--shrink {
+  flex-shrink: 1;
+}
+
+// ============================================================================
+// VISIBILITY HELPERS (Responsive)
+// ============================================================================
+.pa-hide {
+  display: none !important;
+}
+
+.pa-show {
+  display: block !important;
+}
+
+@each $bp, $min-width in $grid-breakpoints {
+  // Hide at breakpoint and up
+  @media (min-width: $min-width) {
+    .pa-hide-#{$bp} {
+      display: none !important;
+    }
+
+    .pa-show-#{$bp} {
+      display: block !important;
+    }
+  }
+
+  // Hide below breakpoint
+  @media (max-width: $min-width - 1px) {
+    .pa-hide-below-#{$bp} {
+      display: none !important;
+    }
+
+    .pa-show-below-#{$bp} {
+      display: block !important;
+    }
+  }
+}
+
+// ============================================================================
+// REMOVE BOTTOM PADDING IN CARDS
+// ============================================================================
+// Remove bottom padding from grid columns inside cards to avoid conflicts
+.pa-card__body .pa-row > [class*="pa-col"] {
+  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%;
+    }
+  }
+
+  // Reset base offsets when stacking
+  @each $size in $grid-columns-5 {
+    @if $size < 100 {
+      .pa-offset-#{$size} {
+        margin-inline-start: 0;
+      }
+    }
+  }
+}
+

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';