Fix .local-nav and .nav-underline

Orange-OpenSource · Dec 14, 2023 · 5e5825a · 5e5825a
1 parent db6a8fc
commit 5e5825a
Show file tree

Hide file tree

Showing 5 changed files with 8 additions and 29 deletions.
diff --git a/scss/_local-navigation.scss b/scss/_local-navigation.scss
@@ -20,7 +20,7 @@
     width: 100%;
     padding: subtract(var(--#{$prefix}local-nav-padding-y), var(--#{$prefix}local-nav-border-width)) 0 var(--#{$prefix}local-nav-padding-y);
     font-weight: $font-weight-bold;
-    color: var(--#{$prefix}local-nav-hover-color);
+    color: var(--#{$prefix}local-nav-color);
     background-color: transparent;
     border: 0;
 
@@ -30,19 +30,14 @@
 
       &::after {
         margin-right: 0;
-        color: var(--#{$prefix}local-nav-color);
       }
     }
 
     &:not(.collapsed) {
       border-bottom: var(--#{$prefix}local-nav-border-color) solid var(--#{$prefix}local-nav-border-width);
 
-      > [class*="container"] {
-        @include caret(up, $accordion: true);
-
-        &::after {
-          margin-right: 0;
-        }
+      > [class*="container"]::after {
+        transform: rotateZ(180deg);
       }
     }
   }
@@ -61,6 +56,7 @@
 
   .navbar {
     --bs-navbar-padding-y: 0px;
+    --bs-navbar-bg: var(--#{$prefix}local-nav-bg);
     --bs-navbar-border-color: transparent;
 
     .nav-item {
@@ -90,11 +86,7 @@
     }
 
     .nav-link.active {
-      color: var(--#{$prefix}local-nav-color);
-
-      @include media-breakpoint-up(lg) {
-        color: var(--#{$prefix}local-nav-hover-color);
-      }
+      --#{$prefix}navbar-active-color: var(--#{$prefix}local-nav-color);
 
       &::before {
         bottom: calc(-1 * var(--#{$prefix}local-nav-border-width)); // stylelint-disable-line function-disallowed-list

diff --git a/scss/_nav.scss b/scss/_nav.scss
@@ -190,7 +190,7 @@
 
   .nav-link.active,
   .nav-item.show .nav-link {
-    color: var(--#{$prefix}nav-underline-link-active-color);
+    --#{$prefix}nav-link-color: var(--#{$prefix}nav-underline-link-active-color);
     background-color: var(--#{$prefix}nav-underline-link-active-bg);
     border-color: var(--#{$prefix}nav-underline-link-active-border-color);
   }

diff --git a/scss/_root.scss b/scss/_root.scss
@@ -168,9 +168,6 @@
 
   // Breadcrumb-specific styles
   --#{$prefix}breadcrumb-divider-filter: #{$breadcrumb-divider-filter};
-
-  // Navigation-specific styles
-  --#{$prefix}nav-link-active-color: #{$nav-link-active-color};
   // End mod
 }
 
@@ -267,9 +264,6 @@
 
     // Breadcrumb-specific styles
     --#{$prefix}breadcrumb-divider-filter: #{$breadcrumb-divider-filter-dark};
-
-    // Navigation-specific styles
-    --#{$prefix}nav-link-active-color: #{$nav-link-active-color-dark};
     // End mod
     // scss-docs-end root-dark-mode-vars
   }

diff --git a/scss/_variables-dark.scss b/scss/_variables-dark.scss
@@ -146,12 +146,6 @@ $form-invalid-border-color-dark:        var(--#{$prefix}danger) !default; // Boo
 
 $breadcrumb-divider-filter-dark:      $invert-filter !default; // Boosted mod
 
-//
-// Navs & Tabs
-//
-
-$nav-link-active-color-dark:          $supporting-orange !default; // Boosted mod
-
 //
 // Tables
 //

diff --git a/scss/_variables.scss b/scss/_variables.scss
@@ -1441,7 +1441,6 @@ $nav-link-font-size:                null !default;
 $nav-link-font-weight:              $font-weight-bold !default;
 $nav-link-color:                    inherit !default; // Boosted mod: instead of `var(--#{$prefix}link-color)`
 $nav-link-hover-color:              var(--#{$prefix}link-hover-color) !default;
-$nav-link-active-color:             $body-color !default; // Boosted mod
 $nav-link-transition:               null !default; // Boosted mod
 $nav-link-disabled-color:           var(--#{$prefix}disabled-color) !default; // Boosted mod: instead of `var(--#{$prefix}secondary-color)`
 // Boosted mod: no `$nav-link-focus-box-shadow`
@@ -1468,7 +1467,7 @@ $nav-underline-gap-lg:                    $spacer * .5 !default; // Boosted mod
 $nav-underline-border-width:              calc(var(--#{$prefix}border-width) * .5) !default; // Boosted mod: instead of `.125rem`
 $nav-underline-border-color:              var(--#{$prefix}border-color-subtle) !default; // Boosted mod
 $nav-underline-border-radius:             var(--#{$prefix}border-radius) !default; // Boosted mod
-$nav-underline-link-active-color:         var(--#{$prefix}nav-link-active-color) !default; // Boosted mod instead of `var(--#{$prefix}emphasis-color)`
+$nav-underline-link-active-color:         var(--#{$prefix}emphasis-color) !default;
 $nav-underline-link-padding-x:            1.8125rem !default; // Boosted mod
 $nav-underline-link-hover-color:          var(--#{$prefix}link-hover-color) !default; // Boosted mod
 // stylelint-disable-next-line function-disallowed-list
@@ -2461,7 +2460,7 @@ $tag-font-size-sm:                  $font-size-sm !default;
 $local-nav-padding-y:           $navbar-nav-link-padding-y !default;
 $local-nav-color:               null !default;
 $local-nav-bg:                  var(--#{$prefix}body-bg) !default;
-$local-nav-hover-color:         var(--#{$prefix}nav-link-active-color) !default;
+$local-nav-hover-color:         var(--#{$prefix}link-hover-color) !default;
 $local-nav-hover-bg:            var(--#{$prefix}secondary-bg) !default;
 $local-nav-active-color:        var(--#{$prefix}primary) !default;
 $local-nav-active-bg:           var(--#{$prefix}tertiary-active-bg) !default;