@keenmate/pure-admin-core 1.0.0-rc03 → 1.0.0-rc04

package/src/scss/utilities.scss

@@ -319,6 +319,203 @@ $spacers: (
   height: auto !important;
 }
 
+// ============================================================================
+// REM-BASED SIZING UTILITIES
+// Use 'r' suffix to distinguish from percentage-based utilities
+// Values: 1-10, 15, 20, 25 (rem)
+// ============================================================================
+
+// Width (rem)
+.wr-1 { width: 1rem !important; }
+.wr-2 { width: 2rem !important; }
+.wr-3 { width: 3rem !important; }
+.wr-4 { width: 4rem !important; }
+.wr-5 { width: 5rem !important; }
+.wr-6 { width: 6rem !important; }
+.wr-7 { width: 7rem !important; }
+.wr-8 { width: 8rem !important; }
+.wr-9 { width: 9rem !important; }
+.wr-10 { width: 10rem !important; }
+.wr-15 { width: 15rem !important; }
+.wr-20 { width: 20rem !important; }
+.wr-25 { width: 25rem !important; }
+
+// Min-width (rem)
+.minwr-1 { min-width: 1rem !important; }
+.minwr-2 { min-width: 2rem !important; }
+.minwr-3 { min-width: 3rem !important; }
+.minwr-4 { min-width: 4rem !important; }
+.minwr-5 { min-width: 5rem !important; }
+.minwr-6 { min-width: 6rem !important; }
+.minwr-7 { min-width: 7rem !important; }
+.minwr-8 { min-width: 8rem !important; }
+.minwr-9 { min-width: 9rem !important; }
+.minwr-10 { min-width: 10rem !important; }
+.minwr-15 { min-width: 15rem !important; }
+.minwr-20 { min-width: 20rem !important; }
+.minwr-25 { min-width: 25rem !important; }
+
+// Max-width (rem)
+.maxwr-1 { max-width: 1rem !important; }
+.maxwr-2 { max-width: 2rem !important; }
+.maxwr-3 { max-width: 3rem !important; }
+.maxwr-4 { max-width: 4rem !important; }
+.maxwr-5 { max-width: 5rem !important; }
+.maxwr-6 { max-width: 6rem !important; }
+.maxwr-7 { max-width: 7rem !important; }
+.maxwr-8 { max-width: 8rem !important; }
+.maxwr-9 { max-width: 9rem !important; }
+.maxwr-10 { max-width: 10rem !important; }
+.maxwr-15 { max-width: 15rem !important; }
+.maxwr-20 { max-width: 20rem !important; }
+.maxwr-25 { max-width: 25rem !important; }
+
+// Height (rem)
+.hr-1 { height: 1rem !important; }
+.hr-2 { height: 2rem !important; }
+.hr-3 { height: 3rem !important; }
+.hr-4 { height: 4rem !important; }
+.hr-5 { height: 5rem !important; }
+.hr-6 { height: 6rem !important; }
+.hr-7 { height: 7rem !important; }
+.hr-8 { height: 8rem !important; }
+.hr-9 { height: 9rem !important; }
+.hr-10 { height: 10rem !important; }
+.hr-15 { height: 15rem !important; }
+.hr-20 { height: 20rem !important; }
+.hr-25 { height: 25rem !important; }
+
+// Min-height (rem)
+.minhr-1 { min-height: 1rem !important; }
+.minhr-2 { min-height: 2rem !important; }
+.minhr-3 { min-height: 3rem !important; }
+.minhr-4 { min-height: 4rem !important; }
+.minhr-5 { min-height: 5rem !important; }
+.minhr-6 { min-height: 6rem !important; }
+.minhr-7 { min-height: 7rem !important; }
+.minhr-8 { min-height: 8rem !important; }
+.minhr-9 { min-height: 9rem !important; }
+.minhr-10 { min-height: 10rem !important; }
+.minhr-15 { min-height: 15rem !important; }
+.minhr-20 { min-height: 20rem !important; }
+.minhr-25 { min-height: 25rem !important; }
+
+// Max-height (rem)
+.maxhr-1 { max-height: 1rem !important; }
+.maxhr-2 { max-height: 2rem !important; }
+.maxhr-3 { max-height: 3rem !important; }
+.maxhr-4 { max-height: 4rem !important; }
+.maxhr-5 { max-height: 5rem !important; }
+.maxhr-6 { max-height: 6rem !important; }
+.maxhr-7 { max-height: 7rem !important; }
+.maxhr-8 { max-height: 8rem !important; }
+.maxhr-9 { max-height: 9rem !important; }
+.maxhr-10 { max-height: 10rem !important; }
+.maxhr-15 { max-height: 15rem !important; }
+.maxhr-20 { max-height: 20rem !important; }
+.maxhr-25 { max-height: 25rem !important; }
+
+// ============================================================================
+// PERCENTAGE-BASED MIN/MAX UTILITIES
+// Extends existing w-* and h-* utilities with min/max variants
+// ============================================================================
+
+// Min-width (percentage) - 5% increments
+.minw-5 { min-width: 5% !important; }
+.minw-10 { min-width: 10% !important; }
+.minw-15 { min-width: 15% !important; }
+.minw-20 { min-width: 20% !important; }
+.minw-25 { min-width: 25% !important; }
+.minw-30 { min-width: 30% !important; }
+.minw-35 { min-width: 35% !important; }
+.minw-40 { min-width: 40% !important; }
+.minw-45 { min-width: 45% !important; }
+.minw-50 { min-width: 50% !important; }
+.minw-55 { min-width: 55% !important; }
+.minw-60 { min-width: 60% !important; }
+.minw-65 { min-width: 65% !important; }
+.minw-70 { min-width: 70% !important; }
+.minw-75 { min-width: 75% !important; }
+.minw-80 { min-width: 80% !important; }
+.minw-85 { min-width: 85% !important; }
+.minw-90 { min-width: 90% !important; }
+.minw-95 { min-width: 95% !important; }
+.minw-100 { min-width: 100% !important; }
+.minw-1-3 { min-width: 33.333333% !important; }
+.minw-2-3 { min-width: 66.666667% !important; }
+
+// Max-width (percentage) - 5% increments
+.maxw-5 { max-width: 5% !important; }
+.maxw-10 { max-width: 10% !important; }
+.maxw-15 { max-width: 15% !important; }
+.maxw-20 { max-width: 20% !important; }
+.maxw-25 { max-width: 25% !important; }
+.maxw-30 { max-width: 30% !important; }
+.maxw-35 { max-width: 35% !important; }
+.maxw-40 { max-width: 40% !important; }
+.maxw-45 { max-width: 45% !important; }
+.maxw-50 { max-width: 50% !important; }
+.maxw-55 { max-width: 55% !important; }
+.maxw-60 { max-width: 60% !important; }
+.maxw-65 { max-width: 65% !important; }
+.maxw-70 { max-width: 70% !important; }
+.maxw-75 { max-width: 75% !important; }
+.maxw-80 { max-width: 80% !important; }
+.maxw-85 { max-width: 85% !important; }
+.maxw-90 { max-width: 90% !important; }
+.maxw-95 { max-width: 95% !important; }
+.maxw-100 { max-width: 100% !important; }
+.maxw-1-3 { max-width: 33.333333% !important; }
+.maxw-2-3 { max-width: 66.666667% !important; }
+
+// Min-height (percentage)
+.minh-5 { min-height: 5% !important; }
+.minh-10 { min-height: 10% !important; }
+.minh-15 { min-height: 15% !important; }
+.minh-20 { min-height: 20% !important; }
+.minh-25 { min-height: 25% !important; }
+.minh-30 { min-height: 30% !important; }
+.minh-35 { min-height: 35% !important; }
+.minh-40 { min-height: 40% !important; }
+.minh-45 { min-height: 45% !important; }
+.minh-50 { min-height: 50% !important; }
+.minh-55 { min-height: 55% !important; }
+.minh-60 { min-height: 60% !important; }
+.minh-65 { min-height: 65% !important; }
+.minh-70 { min-height: 70% !important; }
+.minh-75 { min-height: 75% !important; }
+.minh-80 { min-height: 80% !important; }
+.minh-85 { min-height: 85% !important; }
+.minh-90 { min-height: 90% !important; }
+.minh-95 { min-height: 95% !important; }
+.minh-100 { min-height: 100% !important; }
+.minh-1-3 { min-height: 33.333333% !important; }
+.minh-2-3 { min-height: 66.666667% !important; }
+
+// Max-height (percentage)
+.maxh-5 { max-height: 5% !important; }
+.maxh-10 { max-height: 10% !important; }
+.maxh-15 { max-height: 15% !important; }
+.maxh-20 { max-height: 20% !important; }
+.maxh-25 { max-height: 25% !important; }
+.maxh-30 { max-height: 30% !important; }
+.maxh-35 { max-height: 35% !important; }
+.maxh-40 { max-height: 40% !important; }
+.maxh-45 { max-height: 45% !important; }
+.maxh-50 { max-height: 50% !important; }
+.maxh-55 { max-height: 55% !important; }
+.maxh-60 { max-height: 60% !important; }
+.maxh-65 { max-height: 65% !important; }
+.maxh-70 { max-height: 70% !important; }
+.maxh-75 { max-height: 75% !important; }
+.maxh-80 { max-height: 80% !important; }
+.maxh-85 { max-height: 85% !important; }
+.maxh-90 { max-height: 90% !important; }
+.maxh-95 { max-height: 95% !important; }
+.maxh-100 { max-height: 100% !important; }
+.maxh-1-3 { max-height: 33.333333% !important; }
+.maxh-2-3 { max-height: 66.666667% !important; }
+
 // Position utilities
 .position-static {
   position: static !important;

package/src/scss/variables/_components.scss

@@ -48,21 +48,19 @@ $composite-badge-label-hover-bg: $secondary-lighter-bg !default;
 // ============================================================================
 // BUTTON SYSTEM
 // ============================================================================
-$btn-group-gap: 0.32rem !default;          // 3.2px - default gap
-$btn-group-gap-compact: 0.16rem !default;  // 1.6px - tight grouping
-$btn-group-gap-loose: 0.8rem !default;     // 8px - spacious grouping
-
-// Button specific - linear size progression (10px base)
-$btn-padding-v: 0.8rem !default;           // 8px (was 0.5rem)
-$btn-padding-h: 1.2rem !default;           // 12px (was 0.75rem)
-$btn-padding-xs-v: 0.4rem !default;        // 4px (was 0.25rem)
-$btn-padding-xs-h: 0.8rem !default;        // 8px (was 0.5rem)
-$btn-padding-sm-v: 0.6rem !default;        // 6px (was 0.375rem)
-$btn-padding-sm-h: 1rem !default;          // 10px (was 0.625rem)
-$btn-padding-lg-v: 1rem !default;          // 10px (was 0.625rem)
-$btn-padding-lg-h: 1.4rem !default;        // 14px (was 0.875rem)
-$btn-padding-xl-v: 1.2rem !default;        // 12px (was 0.75rem)
-$btn-padding-xl-h: 1.6rem !default;        // 16px (was 1rem)
+$btn-group-gap: 0.3rem !default;           // 3px - default gap (use gap-* utilities for other sizes)
+
+// Button specific - vertical padding matches input padding for height alignment
+$btn-padding-v: 0.8rem !default;           // 8px - matches input default
+$btn-padding-h: 1.2rem !default;           // 12px
+$btn-padding-xs-v: 0.6rem !default;        // 6px - matches input-xs
+$btn-padding-xs-h: 0.8rem !default;        // 8px
+$btn-padding-sm-v: 0.8rem !default;        // 8px - matches input default
+$btn-padding-sm-h: 1rem !default;          // 10px
+$btn-padding-lg-v: 0.8rem !default;        // 8px - matches input default
+$btn-padding-lg-h: 1.4rem !default;        // 14px
+$btn-padding-xl-v: 0.8rem !default;        // 8px - matches input default
+$btn-padding-xl-h: 1.6rem !default;        // 16px
 $btn-border-width: 1px !default;
 $btn-icon-only-size-xs: 2.8rem !default;   // 28px (was 1.75rem)
 $btn-icon-only-size-sm: 3.2rem !default;   // 32px (was 2rem)
@@ -139,6 +137,7 @@ $profile-button-padding-v: $spacing-sm !default;
 $profile-button-padding-h: $spacing-md !default;
 $profile-role-letter-spacing: 0.5px !default;
 $profile-panel-mobile-max-width: 40rem !default;  // 400px (was 25rem)
+$profile-panel-content-padding: 1.6rem !default;  // Matches sidebar-padding horizontal (16px)
 
 // ============================================================================
 // CARD SYSTEM