sdga-ui 1.0.18 → 1.0.20

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sdga-ui",
-  "version": "1.0.18",
+  "version": "1.0.20",
   "description": "DGA UI - Government-Style Bootstrap Theme",
   "keywords": [
     "sdga",

package/theme/customizations/_tabs.scss

@@ -32,7 +32,8 @@ $tab-v-height-sm: map-get($spacers, 5); // 24px
 .nav {
   padding: 0;
 }
-// Sizes Mixin
+
+// Sizes Mixin (Helper for Horizontal)
 @mixin nav-size($height, $padding-y, $padding-x, $font-size) {
   .nav-link {
     height: $height !important;
@@ -45,18 +46,24 @@ $tab-v-height-sm: map-get($spacers, 5); // 24px
   }
 }
 
-.nav-tabs {
+// ============================================
+// MIXINS DEFINITION
+// ============================================
+
+@mixin tabs-horizontal {
   --#{$prefix}nav-tabs-border-width: 0;
   --#{$prefix}nav-tabs-border-radius: 0;
   --#{$prefix}nav-tabs-link-active-bg: transparent;
 
   position: relative; // Establish positioning context
   border-bottom: 3px solid transparent; // Maintain space but make transparent
+  border-right: 0; // Reset vertical
   gap: map-get($spacers, 2); // 8px
 
   // Rounded bottom border line
   &::before {
     content: '';
+    display: block; // Ensure it's visible (reset display:none from vertical)
     position: absolute;
     left: 0;
     bottom: -3px; // Align with the transparent border
@@ -78,6 +85,11 @@ $tab-v-height-sm: map-get($spacers, 5); // 24px
     display: flex;
     align-items: center;
     gap: map-get($spacers, 1); // 4px gap between icon and text (from sample)
+    
+    // Reset vertical specific
+    width: auto; 
+    justify-content: center;
+    margin-bottom: 0;
 
     // Hover State & Pseudo-Hover (exclude active tabs)
     &:hover:not(.disabled):not(.active),
@@ -106,135 +118,130 @@ $tab-v-height-sm: map-get($spacers, 5); // 24px
       pointer-events: none;
       cursor: not-allowed;
     }
-  }
-}
 
-// ============================================
-// HORIZONTAL TABS - ACTIVE INDICATOR
-// ============================================
-// Bottom underline indicator for horizontal tabs only
-// Bumped specificity to override _nav.scss
-.nav-tabs.nav-tabs:not(.flex-column) .nav-link {
+    // Active indicator as ::before pseudo-element (bottom underline)
+    &::before {
+      content: '';
+      position: absolute;
+      inset-inline-start: map-get($spacers, 4); // 16px from start
+      inset-inline-end: map-get($spacers, 4); // 16px from end
+      bottom: 0;
+      top: auto; // Reset vertical
+      width: auto; // Reset vertical
+      height: 3px;
+      background-color: transparent; 
+      border-radius: $radius-full; // Rounded ends
+      z-index: 1; // Ensure it sits on top of the border
+      transition: background-color 0.2s ease; // Smooth transition
+      margin-bottom: -2.75px;
+    }
 
-  // Active indicator as ::before pseudo-element (bottom underline)
-  // Changed from ::after to avoid conflict with dropdown caret
-  &::before {
-    content: '';
-    position: absolute;
-    inset-inline-start: map-get($spacers, 4); // 16px from start
-    inset-inline-end: map-get($spacers, 4); // 16px from end
-    bottom: 0;
-    height: 3px;
-    background-color: transparent; 
-    border-radius: $radius-full; // Rounded ends
-    z-index: 1; // Ensure it sits on top of the border
-    transition: background-color 0.2s ease; // Smooth transition
-    margin-bottom: -2.75px;
+    // Flush variant (no left/right gap for indicator)
+    // Using @at-root to break out of .nav-link nesting but keep context if needed, 
+    // actually inside mixin standard nesting works best.
+    // However, flush needs to target the generic parent .flush class. 
+    // Since we are inside .nav-tabs context when including, & refers to .nav-tabs
+    // We need to check if parent has flush. 
+    // Simpler: Just rely on the fact that standard BS navs work.
+    // The original code used @at-root .nav-tabs.flush .nav-link...
   }
-
-  // Flush variant (no left/right gap for indicator)
-  @at-root .nav-tabs.nav-tabs.flush .nav-link::before {
-    inset-inline-start: 0;
-    inset-inline-end: 0;
+  
+  // Flush handling needs to be careful about not breaking when inside responsive classes
+  &.flush .nav-link::before {
+      inset-inline-start: 0;
+      inset-inline-end: 0;
   }
 
-  &.active::before {
-    background-color: $nav-link-selection-indicator; // #1B8354 green
-  }
+  // Links styling (Continued)
+  .nav-link {
+    &.active::before {
+        background-color: $nav-link-selection-indicator; // #1B8354 green
+    }
 
-  // Hover & Pressed state for non-active, non-disabled tabs
-  &:hover:not(.active):not(.disabled)::before,
-  &.pseudo-hover:not(.active):not(.disabled)::before,
-  &:active:not(.active):not(.disabled)::before,
-  &.pseudo-active:not(.active):not(.disabled)::before {
-    background-color: $nav-link-selection-indicator-default;
-  }
+    // Hover & Pressed state for non-active
+    &:hover:not(.active):not(.disabled)::before,
+    &.pseudo-hover:not(.active):not(.disabled)::before,
+    &:active:not(.active):not(.disabled)::before,
+    &.pseudo-active:not(.active):not(.disabled)::before {
+        background-color: $nav-link-selection-indicator-default;
+    }
 
-  // If disabled AND active, show gray indicator
-  &.disabled.active::before {
-    background-color: $nav-link-disabled-color; // Gray indicator for disabled selected tabs
+    // If disabled AND active, show gray indicator
+    &.disabled.active::before {
+        background-color: $nav-link-disabled-color; 
+    }
   }
-}
-
-// ============================================
-// HORIZONTAL TABS - SIZES
-// ============================================
-// Bumped specificity to override _nav.scss
-.nav-tabs.nav-tabs:not(.flex-column) {
 
-  // Sizes
+  // Sizes logic embedded
   &.nav-lg {
-    @include nav-size($tab-height-lg, map-get($spacers, 4), map-get($spacers, 4), $font-size-sm); // 16px padding, 14px font
+    @include nav-size($tab-height-lg, map-get($spacers, 4), map-get($spacers, 4), $font-size-sm);
   }
 
   &.nav-md {
-    @include nav-size($tab-height-md, map-get($spacers, 3), map-get($spacers, 4), $font-size-sm); // 12px padding, 14px font
+    @include nav-size($tab-height-md, map-get($spacers, 3), map-get($spacers, 4), $font-size-sm);
   }
 
   &.nav-sm {
-    @include nav-size($tab-height-sm, map-get($spacers, 2), map-get($spacers, 3), $font-size-sm); // 8px padding, 12px padding, 14px font
+    @include nav-size($tab-height-sm, map-get($spacers, 2), map-get($spacers, 3), $font-size-sm);
   }
 }
 
-// Vertical Tabs Customization
-// Based on samples in: c:\Users\amro_\source\repos\dga-ui\samples\vertical tabs
-// Applies ONLY to vertical tabs (.nav.flex-column.nav-tabs), not horizontal tabs
-.nav.flex-column.nav-tabs {
+@mixin tabs-vertical {
   border-bottom: 0;
+  border-right: 0;
+  gap: 0;
+  
   &::before {
     display: none; // Hide the rounded horizontal border
   }
-  border-right: 0;
-  gap: 0;
 
   .nav-link {
     width: 100%;
     justify-content: flex-start;
-    border: none; // Remove all default button/link borders
+    border: none; 
     border-bottom: none;
     border-radius: $radius-sm;
     margin-bottom: map-get($spacers, 1); // 4px
-    font-weight: $font-weight-base; // 400 (default from samples)
-    color: $nav-link-color; // #384250 default
-    position: relative; // For ::before positioning
+    font-weight: $font-weight-base; 
+    color: $nav-link-color; 
+    position: relative; 
     display: flex;
-    align-items: center; // Vertically center content
-    gap: map-get($spacers, 2); // 8px gap between icon and text
+    align-items: center; 
+    gap: map-get($spacers, 2); 
 
     // Enable indicator rendering but keep transparent by default
     &::before {
       content: '';
       position: absolute;
       inset-inline-start: 0; // Logical property for LTR left / RTL right
+      inset-inline-end: auto; // Reset horizontal
       top: map-get($spacers, 1); // 4px from top
       bottom: map-get($spacers, 1); // 4px from bottom
       width: 3px;
+      height: auto; // Reset horizontal
       background-color: transparent; 
-      border-radius: $radius-full; // rounded ends like in samples
+      border-radius: $radius-full; 
       transition: background-color 0.2s ease;
+      margin-bottom: 0; // Reset horizontal
     }
 
-    // Ensure icon is vertically centered
-    i,
-    img,
-    svg {
+    // Icons
+    i, img, svg {
       display: inline-flex;
       align-items: center;
       justify-content: center;
     }
 
-    // Remove default button outline for buttons used as nav-links
-    &:focus,
-    &:focus-visible {
-      outline: none; // Remove browser default outline
+    &:focus, &:focus-visible {
+      outline: none;
       border: none;
     }
 
-    // Hover State for non-active
+    // Hover State
     &:hover:not(.disabled):not(.active),
     &.pseudo-hover:not(.active) {
-      background-color: $nav-link-hover-bg; // #f3f4f6
-      color: $nav-link-color; // No color change on hover
+      background-color: $nav-link-hover-bg; 
+      color: $nav-link-color; 
 
       &::before {
         background-color: $nav-link-selection-indicator-default;
@@ -244,7 +251,7 @@ $tab-v-height-sm: map-get($spacers, 5); // 24px
     // Pressed State
     &:active:not(.disabled):not(.active),
     &.pseudo-active:not(.active) {
-      background-color: $nav-link-pressed-bg; // #e5e7eb 
+      background-color: $nav-link-pressed-bg; 
       color: $black;
 
       &::before {
@@ -255,41 +262,38 @@ $tab-v-height-sm: map-get($spacers, 5); // 24px
     // Selected/Active State
     &.active {
       background-color: transparent;
-      color: $nav-link-active-color; // #161616
+      color: $nav-link-active-color; 
       font-weight: $font-weight-semibold; // 600
       position: relative;
 
       &::before {
-        background-color: $nav-link-selection-indicator; // #1B8354 green
+        background-color: $nav-link-selection-indicator; 
       }
 
       // When selected tab is hovered
       &:hover:not(.disabled),
       &.pseudo-hover {
-        background-color: transparent; // No background change on hover for selected
+        background-color: transparent; 
       }
 
       // When selected tab is pressed
       &:active:not(.disabled),
       &.pseudo-active {
-        background-color: transparent; // No background change on press for selected
+        background-color: transparent; 
       }
     }
 
     // Disabled State
-    &.disabled,
-    &:disabled {
-      color: $nav-link-disabled-color; // #9da4ae
-      background-color: transparent !important; // Override any hover/pressed backgrounds
+    &.disabled, &:disabled {
+      color: $nav-link-disabled-color; 
+      background-color: transparent !important; 
       pointer-events: none;
       cursor: not-allowed;
 
-      // If disabled AND active/selected, show gray indicator instead of green
       &.active::before {
-        background-color: $nav-link-disabled-color; // Gray indicator for disabled selected tabs
+        background-color: $nav-link-disabled-color; 
       }
 
-      // If disabled but NOT selected, hide indicator (transparent)
       &:not(.active)::before {
         background-color: transparent;
       }
@@ -299,37 +303,70 @@ $tab-v-height-sm: map-get($spacers, 5); // 24px
   // Size Variants - matches samples for large/medium/small
   &.nav-lg {
     .nav-link {
-      min-height: $tab-v-height-lg; // 40px
-      padding: map-get($spacers, 2) map-get($spacers, 2); // 8px vertical, 8px horizontal (reduced gap from indicator)
-      font-size: $font-size-base; // 16px
+        height: auto !important; // Reset nav-size mixin if previously applied
+        min-height: $tab-v-height-lg; // 40px
+        padding: map-get($spacers, 2) map-get($spacers, 2) !important; 
+        font-size: $font-size-base; 
 
       &.active {
-        font-weight: $font-weight-semibold; // 600
+        font-weight: $font-weight-semibold; 
       }
     }
   }
 
   &.nav-md {
     .nav-link {
-      min-height: $tab-v-height-md; // 32px
-      padding: map-get($spacing-tokens, 'spacing-sm') map-get($spacers, 2); // 6px vertical, 8px horizontal (reduced gap from indicator)
-      font-size: $font-size-sm; // 14px
+        height: auto !important;
+        min-height: $tab-v-height-md; // 32px
+        padding: map-get($spacing-tokens, 'spacing-sm') map-get($spacers, 2) !important;
+        font-size: $font-size-sm; 
 
       &.active {
-        font-weight: $font-weight-semibold; // 600 for selected medium tabs
+        font-weight: $font-weight-semibold; 
       }
     }
   }
 
   &.nav-sm {
     .nav-link {
-      min-height: $tab-v-height-sm; // 24px
-      padding: map-get($spacing-tokens, 'spacing-xxs') map-get($spacing-tokens, 'spacing-sm'); // 2px vertical, 6px horizontal
-      font-size: $font-size-sm; // 14px
+        height: auto !important;
+        min-height: $tab-v-height-sm; // 24px
+        padding: map-get($spacing-tokens, 'spacing-xxs') map-get($spacing-tokens, 'spacing-sm') !important;
+        font-size: $font-size-sm; 
 
       &.active {
-        font-weight: $font-weight-medium; // 500 for small tabs (from sample analysis)
+        font-weight: $font-weight-medium; 
       }
     }
   }
+}
+
+// ============================================
+// APPLY STYLES
+// ============================================
+
+.nav-tabs {
+  @include tabs-horizontal;
+}
+
+.nav-tabs.flex-column {
+  @include tabs-vertical;
+}
+
+// Responsive Loops
+// Iterate over breakpoints to generate classes like .flex-md-row, .flex-lg-column
+@each $breakpoint in map-keys($grid-breakpoints) {
+    @include media-breakpoint-up($breakpoint) {
+        $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
+
+        // If class is flex-*-row, use horizontal tabs
+        .nav-tabs.flex#{$infix}-row {
+            @include tabs-horizontal;
+        }
+
+        // If class is flex-*-column, use vertical tabs
+        .nav-tabs.flex#{$infix}-column {
+            @include tabs-vertical;
+        }
+    }
 }