From ffecf365ff67f0e9f33ca3250c0e2ca675cf06ce Mon Sep 17 00:00:00 2001 From: "louismaxime.piton" Date: Wed, 13 Dec 2023 12:33:22 +0100 Subject: [PATCH] Fix `.local-nav` and `.nav-underline` --- scss/_local-navigation.scss | 18 +++++------------- scss/_nav.scss | 2 +- scss/_root.scss | 6 ------ scss/_variables-dark.scss | 6 ------ scss/_variables.scss | 5 ++--- 5 files changed, 8 insertions(+), 29 deletions(-) diff --git a/scss/_local-navigation.scss b/scss/_local-navigation.scss index 5ee8f9baee..9a6c9f51d8 100644 --- 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 index 35076362a4..8de0c48c43 100644 --- 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 index 9a7fdd859b..a174b00404 100644 --- 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 index 83a360e1bb..718c2bac61 100644 --- 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 index cd4976e963..2183353955 100644 --- 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 @@ -2464,7 +2463,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;