From 5c59187a38f5dd044300d9e460973df6ef907a76 Mon Sep 17 00:00:00 2001 From: "louismaxime.piton" Date: Wed, 7 Dec 2022 16:14:30 +0100 Subject: [PATCH 1/4] First draft --- scss/_nav.scss | 1 + scss/_navbar.scss | 100 +++++++++++++++-------- scss/_orange-navbar.scss | 16 ++-- site/layouts/partials/docs-versions.html | 2 +- 4 files changed, 74 insertions(+), 45 deletions(-) diff --git a/scss/_nav.scss b/scss/_nav.scss index 0bbff97ab3..a6ca322fbb 100644 --- a/scss/_nav.scss +++ b/scss/_nav.scss @@ -25,6 +25,7 @@ display: flex; // Boosted mod align-items: center; // Boosted mod padding: var(--#{$prefix}nav-link-padding-y) var(--#{$prefix}nav-link-padding-x); + margin: var(--#{$prefix}nav-link-margin-y) var(--#{$prefix}nav-link-margin-x); @include font-size(var(--#{$prefix}nav-link-font-size)); font-weight: var(--#{$prefix}nav-link-font-weight); color: var(--#{$prefix}nav-link-color); diff --git a/scss/_navbar.scss b/scss/_navbar.scss index 7af9b0ce72..da7f755e89 100644 --- a/scss/_navbar.scss +++ b/scss/_navbar.scss @@ -28,13 +28,13 @@ --#{$prefix}navbar-nav-font-size: #{$font-size-base}; // Boosted mod --#{$prefix}navbar-nav-line-height: #{$line-height-base}; // Boosted mod --#{$prefix}navbar-nav-letter-spacing: #{$letter-spacing-base}; // Boosted mod - --#{$prefix}navbar-nav-link-padding-y: #{$navbar-nav-link-padding-y}; // Boosted mod - --#{$prefix}navbar-nav-link-padding-x: #{$navbar-nav-link-padding-x-xs}; // Boosted mod - --#{$prefix}navbar-nav-icon-padding-y: #{$navbar-nav-icon-padding-y-xs}; // Boosted mod - --#{$prefix}navbar-nav-icon-padding-x: #{$navbar-nav-icon-padding-x-xs}; // Boosted mod + --#{$prefix}navbar-nav-link-spacing-y: #{$navbar-nav-link-padding-y}; // Boosted mod + --#{$prefix}navbar-nav-link-spacing-x: #{$navbar-nav-link-padding-x-xs}; // Boosted mod + --#{$prefix}navbar-nav-icon-spacing-y: #{$navbar-nav-icon-padding-y-xs}; // Boosted mod + --#{$prefix}navbar-nav-icon-spacing-x: #{$navbar-nav-icon-padding-x-xs}; // Boosted mod --#{$prefix}navbar-nav-icon-size: #{$navbar-icon-size-xs}; // Boosted mod - --#{$prefix}navbar-toggler-padding-y: #{$navbar-toggler-padding-y}; - --#{$prefix}navbar-toggler-padding-x: #{$navbar-toggler-padding-x}; + --#{$prefix}navbar-toggler-spacing-y: #{$navbar-toggler-padding-y}; + --#{$prefix}navbar-toggler-spacing-x: #{$navbar-toggler-padding-x}; --#{$prefix}navbar-toggler-font-size: #{$navbar-toggler-font-size-xs}; // Boosted mod --#{$prefix}navbar-toggler-icon-bg: #{escape-svg($navbar-light-toggler-icon-bg-small)}; // Boosted mod --#{$prefix}navbar-toggler-icon-filter: none; // Boosted mod @@ -65,12 +65,12 @@ --#{$prefix}navbar-brand-logo-size: #{$navbar-brand-logo-size}; --#{$prefix}navbar-brand-font-size: #{$navbar-brand-font-size}; --#{$prefix}navbar-brand-letter-spacing: #{$navbar-brand-letter-spacing}; - --#{$prefix}navbar-nav-link-padding-x: #{$navbar-nav-link-padding-x}; - --#{$prefix}navbar-nav-icon-padding-y: #{$navbar-nav-icon-padding-y}; - --#{$prefix}navbar-nav-icon-padding-x: #{$navbar-nav-icon-padding-x}; + --#{$prefix}navbar-nav-link-spacing-x: #{$navbar-nav-link-padding-x}; + --#{$prefix}navbar-nav-icon-spacing-y: #{$navbar-nav-icon-padding-y}; + --#{$prefix}navbar-nav-icon-spacing-x: #{$navbar-nav-icon-padding-x}; --#{$prefix}navbar-nav-icon-size: #{$navbar-icon-size}; - --#{$prefix}navbar-toggler-padding-y: #{$navbar-nav-icon-padding-y}; - --#{$prefix}navbar-toggler-padding-x: #{$navbar-nav-icon-padding-x}; + --#{$prefix}navbar-toggler-spacing-y: #{$navbar-nav-icon-padding-y}; + --#{$prefix}navbar-toggler-spacing-x: #{$navbar-nav-icon-padding-x}; --#{$prefix}navbar-toggler-font-size: #{$navbar-toggler-font-size}; --#{$prefix}navbar-toggler-icon-bg: #{escape-svg($navbar-light-toggler-icon-bg)}; } @@ -162,8 +162,8 @@ .navbar-nav { // scss-docs-start navbar-nav-css-vars - --#{$prefix}nav-link-padding-x: var(--#{$prefix}navbar-nav-link-padding-x); // Boosted mod - --#{$prefix}nav-link-padding-y: var(--#{$prefix}navbar-nav-link-padding-y); // Boosted mod + --#{$prefix}nav-link-margin-x: var(--#{$prefix}navbar-nav-link-spacing-x); // Boosted mod + --#{$prefix}nav-link-margin-y: var(--#{$prefix}navbar-nav-link-spacing-y); // Boosted mod @include rfs(var(--#{$prefix}navbar-nav-font-size, $font-size-base), --#{$prefix}nav-link-font-size); // Boosted mod --#{$prefix}nav-link-font-weight: #{$nav-link-font-weight}; --#{$prefix}nav-link-color: var(--#{$prefix}navbar-color); @@ -183,12 +183,22 @@ // Boosted mod: Handle .nav-link and .nav-icon slightly differently than Bs .nav-link { position: relative; - padding-top: subtract(var(--#{$prefix}navbar-nav-link-padding-y), var(--#{$prefix}navbar-border-width)); - margin-left: calc(-1 * var(--#{$prefix}navbar-nav-link-padding-x)); /* stylelint-disable-line function-disallowed-list */ + margin-top: subtract(var(--#{$prefix}navbar-nav-link-spacing-y), var(--#{$prefix}navbar-border-width)); + margin-left: 0; word-break: break-all; outline-offset: $spacer; @include transition($navbar-transition); + &::before { + position: absolute; + top: calc(-1 * var(--#{$prefix}navbar-nav-link-spacing-y, 7px)); // stylelint-disable-line function-disallowed-list + right: calc(-1 * var(--#{$prefix}navbar-nav-link-spacing-x, 0px)); // stylelint-disable-line function-disallowed-list + bottom: calc(-1 * var(--#{$prefix}navbar-nav-link-spacing-y, 7px)); // stylelint-disable-line function-disallowed-list + left: calc(-1 * var(--#{$prefix}navbar-nav-link-spacing-x, 0px)); // stylelint-disable-line function-disallowed-list + z-index: $stretched-link-z-index; + content: ""; + } + &:hover, &:focus { z-index: 1; @@ -205,10 +215,17 @@ } .nav-link.nav-icon { - padding: var(--#{$prefix}navbar-nav-icon-padding-y) var(--#{$prefix}navbar-nav-icon-padding-x); - margin-left: calc(-1 * var(--#{$prefix}navbar-nav-icon-padding-x)); /* stylelint-disable-line function-disallowed-list */ + margin: var(--#{$prefix}navbar-nav-icon-spacing-y) var(--#{$prefix}navbar-nav-icon-spacing-x); + margin-left: 0; white-space: nowrap; + &::before { + top: calc(-1 * var(--#{$prefix}navbar-nav-icon-spacing-y)); // stylelint-disable-line function-disallowed-list + right: calc(-1 * var(--#{$prefix}navbar-nav-icon-spacing-x)); // stylelint-disable-line function-disallowed-list + bottom: calc(-1 * var(--#{$prefix}navbar-nav-icon-spacing-y)); // stylelint-disable-line function-disallowed-list + left: calc(-1 * var(--#{$prefix}navbar-nav-icon-spacing-x)); // stylelint-disable-line function-disallowed-list + } + svg, img { width: var(--#{$prefix}navbar-nav-icon-size); @@ -217,7 +234,7 @@ } &:not(:first-of-type) > .nav-icon { - margin-left: 0; + margin-left: var(--#{$prefix}navbar-nav-icon-spacing-x); } } @@ -243,7 +260,7 @@ .navbar-text { // Boosted mod: no padding-top - padding-bottom: var(--#{$prefix}navbar-nav-link-padding-y); // Boosted mod + margin-bottom: var(--#{$prefix}navbar-nav-link-spacing-y); // Boosted mod color: var(--#{$prefix}navbar-color); a, @@ -255,7 +272,7 @@ // Boosted mod: Navbar item .navbar-item { - margin-bottom: var(--#{$prefix}navbar-nav-icon-padding-y); + margin-bottom: var(--#{$prefix}navbar-nav-icon-spacing-y); } // End mod @@ -294,8 +311,10 @@ // Button for toggling the navbar when in its collapsed state .navbar-toggler { - padding: var(--#{$prefix}navbar-toggler-padding-y) calc(var(--#{$prefix}navbar-toggler-padding-x) / 2) var(--#{$prefix}navbar-toggler-padding-y) var(--#{$prefix}navbar-toggler-padding-x); /* stylelint-disable-line function-disallowed-list */ // Boosted mod - margin-right: calc(-.5 * var(--#{$prefix}navbar-toggler-padding-x)); /* stylelint-disable-line function-disallowed-list */ // Boosted mod + position: relative; + padding: 0; + margin: var(--#{$prefix}navbar-toggler-spacing-y) var(--#{$prefix}navbar-toggler-spacing-x); // Boosted mod + margin-right: 0; // Boosted mod @include font-size(var(--#{$prefix}navbar-toggler-font-size)); line-height: 1; color: var(--#{$prefix}navbar-color); @@ -306,13 +325,22 @@ @include border-radius(var(--#{$prefix}navbar-toggler-border-radius)); @include transition(var(--#{$prefix}navbar-toggler-transition)); + &::before { + position: absolute; + top: calc(-1 * var(--#{$prefix}navbar-toggler-spacing-y)); // stylelint-disable-line function-disallowed-list + right: calc(-1 * var(--#{$prefix}navbar-toggler-spacing-x)); // stylelint-disable-line function-disallowed-list + bottom: calc(-1 * var(--#{$prefix}navbar-toggler-spacing-y)); // stylelint-disable-line function-disallowed-list + left: calc(-1 * var(--#{$prefix}navbar-toggler-spacing-x)); // stylelint-disable-line function-disallowed-list + z-index: $stretched-link-z-index; + content: ""; + } + &:hover { text-decoration: none; } &:focus { text-decoration: none; - outline-offset: calc(-1 * var(--#{$prefix}navbar-border-width)); /* stylelint-disable-line function-disallowed-list */ // Boosted mod box-shadow: 0 0 0 var(--#{$prefix}navbar-toggler-focus-width); } @@ -382,13 +410,13 @@ // Boosted mod .nav-link { - margin-left: 0; + margin-left: var(--#{$prefix}navbar-nav-link-spacing-x); - &.active::before { + &.active::after { position: absolute; - right: var(--#{$prefix}navbar-nav-link-padding-x); - bottom: calc(-1 * var(--#{$prefix}navbar-padding-y)); // stylelint-disable-line function-disallowed-list - left: var(--#{$prefix}navbar-nav-link-padding-x); + right: 0; + bottom: calc(-1 * add(var(--#{$prefix}navbar-padding-y), var(--#{$prefix}navbar-nav-link-spacing-y))); // stylelint-disable-line function-disallowed-list + left: 0; height: calc(var(--#{$prefix}navbar-border-width) * 4); // stylelint-disable-line function-disallowed-list content: ""; background-color: currentcolor; @@ -400,19 +428,19 @@ border: 0; &:first-child > .nav-link { - margin-left: calc(-1 * var(--#{$prefix}navbar-nav-link-padding-x)); /* stylelint-disable-line function-disallowed-list */ + margin-left: 0; } &:last-child > .nav-link { - margin-right: calc(-1 * var(--#{$prefix}navbar-nav-link-padding-x)); /* stylelint-disable-line function-disallowed-list */ + margin-right: 0; } &:first-child > .nav-icon { - margin-left: calc(-1 * var(--#{$prefix}navbar-nav-icon-padding-x)); /* stylelint-disable-line function-disallowed-list */ + margin-left: 0; } &:last-child > .nav-icon { - margin-right: calc(-1 * var(--#{$prefix}navbar-nav-icon-padding-x)); /* stylelint-disable-line function-disallowed-list */ + margin-right: 0; } } // End mod @@ -437,17 +465,17 @@ } &.header-minimized { - --#{$prefix}navbar-nav-link-padding-y: .75rem; + --#{$prefix}navbar-nav-link-spacing-y: .75rem; } &:not(.supra) + .navbar { margin-top: 0; .nav-link{ - padding-bottom: add(var(--#{$prefix}navbar-nav-link-padding-y), .0625rem); + margin-bottom: add(var(--#{$prefix}navbar-nav-link-spacing-y), .0625rem); - &.active::before{ - bottom: 0; + &.active::after{ + bottom: calc(-1 * add(var(--#{$prefix}navbar-nav-link-spacing-y), .0625rem)); // stylelint-disable-line function-disallowed-list } } } diff --git a/scss/_orange-navbar.scss b/scss/_orange-navbar.scss index 6ccda5005e..f913412360 100644 --- a/scss/_orange-navbar.scss +++ b/scss/_orange-navbar.scss @@ -7,20 +7,20 @@ --#{$prefix}navbar-padding-y: 0px; /* stylelint-disable-line length-zero-no-unit */ --#{$prefix}navbar-nav-font-size: #{$font-size-sm}; --#{$prefix}navbar-nav-line-height: #{$line-height-sm}; - --#{$prefix}navbar-nav-link-padding-y: #{$navbar-supra-link-padding-y}; - --#{$prefix}navbar-nav-link-padding-x: #{$navbar-supra-link-padding-x}; - --#{$prefix}navbar-nav-icon-padding-y: #{$navbar-supra-icon-padding-y}; - --#{$prefix}navbar-nav-icon-padding-x: #{$navbar-supra-icon-padding-x}; + --#{$prefix}navbar-nav-link-spacing-y: #{$navbar-supra-link-padding-y}; + --#{$prefix}navbar-nav-link-spacing-x: #{$navbar-supra-link-padding-x}; + --#{$prefix}navbar-nav-icon-spacing-y: #{$navbar-supra-icon-padding-y}; + --#{$prefix}navbar-nav-icon-spacing-x: #{$navbar-supra-icon-padding-x}; --#{$prefix}navbar-nav-icon-size: #{$navbar-supra-icon-size}; // scss-docs-end supra-navbar-css-vars display: none; .navbar-nav .nav-link { - padding-top: var(--#{$prefix}navbar-nav-link-padding-y); + margin-top: var(--#{$prefix}navbar-nav-link-spacing-y); &.nav-icon { - padding-top: add(var(--#{$prefix}navbar-nav-icon-padding-y), .3125rem); + margin-top: add(var(--#{$prefix}navbar-nav-icon-spacing-y), .3125rem); } } } @@ -33,8 +33,8 @@ --#{$prefix}navbar-brand-logo-size: #{$navbar-brand-logo-size-xs}; --#{$prefix}navbar-brand-font-size: #{$navbar-brand-font-size-xs}; --#{$prefix}navbar-brand-letter-spacing: #{$navbar-brand-letter-spacing-xs}; - --#{$prefix}navbar-nav-icon-padding-y: #{$navbar-minimized-nav-icon-padding-y}; - --#{$prefix}navbar-toggler-padding-y: #{$navbar-minimized-toggler-padding-y}; + --#{$prefix}navbar-nav-icon-spacing-y: #{$navbar-minimized-nav-icon-padding-y}; + --#{$prefix}navbar-toggler-spacing-y: #{$navbar-minimized-toggler-padding-y}; .two-lined { --#{$prefix}navbar-brand-font-size: #{$navbar-brand-font-size-two-lined-xs}; diff --git a/site/layouts/partials/docs-versions.html b/site/layouts/partials/docs-versions.html index 0bf2a9a04e..b66420113c 100644 --- a/site/layouts/partials/docs-versions.html +++ b/site/layouts/partials/docs-versions.html @@ -11,7 +11,7 @@ {{- end }}
  • - @@ -318,6 +339,12 @@ Learn more by reading the new [color modes documentation]({{< docsref "/customiz
  • --bs-nav-underline-link-hover-bg
  • --bs-nav-underline-link-hover-color
  • --bs-nav-underline-link-padding-x
    • +
  • --bs-navbar-nav-icon-margin-x
    • +
  • --bs-navbar-nav-icon-margin-y
    • +
  • --bs-navbar-nav-link-margin-x
    • +
  • --bs-navbar-nav-link-margin-y
    • +
  • --bs-navbar-toggler-margin-x
    • +
  • --bs-navbar-toggler-margin-y
  • --bs-modal-footer-margin-top
  • --bs-offcanvas-transition
  • --bs-primary-bg-subtle
    • @@ -438,6 +465,21 @@ Learn more by reading the new [color modes documentation]({{< docsref "/customiz
  • $nav-underline-link-border-width
  • $nav-underline-link-hover-color
  • $nav-underline-link-padding-x
    • +
  • $navbar-minimized-nav-icon-margin-y
    • +
  • $navbar-minimized-toggler-margin-y
    • +
  • $navbar-nav-icon-margin-x
    • +
  • $navbar-nav-icon-margin-x-xs
    • +
  • $navbar-nav-icon-margin-y
    • +
  • $navbar-nav-icon-margin-y-xs
    • +
  • $navbar-nav-link-margin-x
    • +
  • $navbar-nav-link-margin-x-xs
    • +
  • $navbar-nav-link-margin-y
    • +
  • $navbar-supra-icon-margin-x
    • +
  • $navbar-supra-icon-margin-y
    • +
  • $navbar-supra-link-margin-x
    • +
  • $navbar-supra-link-margin-y
    • +
  • $navbar-toggler-margin-x
    • +
  • $navbar-toggler-margin-y
  • $modal-footer-margin-top
  • $modal-footer-margin-top-sm
  • $modal-scrollable-footer-margin-top
    • From 6f408ac1241c885a6128ccc64d6c2d3dfe736a31 Mon Sep 17 00:00:00 2001 From: "louismaxime.piton" Date: Mon, 13 Mar 2023 17:47:06 +0100 Subject: [PATCH 3/4] fix(review) --- scss/_navbar.scss | 20 ++++++++++++-------- 1 file changed, 12 insertions(+), 8 deletions(-) diff --git a/scss/_navbar.scss b/scss/_navbar.scss index 454554af72..9e23f02bbd 100644 --- a/scss/_navbar.scss +++ b/scss/_navbar.scss @@ -189,10 +189,12 @@ &::before { position: absolute; - top: calc(-1 * var(--#{$prefix}nav-link-margin-y, 5px)); // stylelint-disable-line function-disallowed-list - right: calc(-1 * var(--#{$prefix}nav-link-margin-x, 0px)); // stylelint-disable-line function-disallowed-list - bottom: calc(-1 * var(--#{$prefix}nav-link-margin-y, 5px)); // stylelint-disable-line function-disallowed-list - left: calc(-1 * var(--#{$prefix}nav-link-margin-x, 0px)); // stylelint-disable-line function-disallowed-list + // stylelint-disable function-disallowed-list + top: calc(-1 * var(--#{$prefix}nav-link-margin-y, 5px)); + right: calc(-1 * var(--#{$prefix}nav-link-margin-x, 0px)); + bottom: calc(-1 * var(--#{$prefix}nav-link-margin-y, 5px)); + left: calc(-1 * var(--#{$prefix}nav-link-margin-x, 0px)); + // stylelint-enable function-disallowed-list z-index: $stretched-link-z-index; content: ""; } @@ -317,10 +319,12 @@ // Boosted mod &::before { position: absolute; - top: calc(-1 * var(--#{$prefix}navbar-toggler-margin-y)); // stylelint-disable-line function-disallowed-list - right: calc(-.25 * var(--#{$prefix}gutter-x)); // stylelint-disable-line function-disallowed-list - bottom: calc(-1 * var(--#{$prefix}navbar-toggler-margin-y)); // stylelint-disable-line function-disallowed-list - left: calc(-1 * var(--#{$prefix}navbar-toggler-margin-x)); // stylelint-disable-line function-disallowed-list + // stylelint-disable function-disallowed-list + top: calc(-1 * var(--#{$prefix}navbar-toggler-margin-y)); + right: calc(-.25 * var(--#{$prefix}gutter-x)); + bottom: calc(-1 * var(--#{$prefix}navbar-toggler-margin-y)); + left: calc(-1 * var(--#{$prefix}navbar-toggler-margin-x)); + // stylelint-enable function-disallowed-list z-index: $stretched-link-z-index; content: ""; } From 5d0ae882a74b578e4c25fdc22d676ab52abcc658 Mon Sep 17 00:00:00 2001 From: "louismaxime.piton" Date: Wed, 6 Dec 2023 14:24:40 +0100 Subject: [PATCH 4/4] Different focus for 4local nav and global header --- scss/_local-navigation.scss | 16 +++++++++++----- scss/_variables.scss | 2 +- 2 files changed, 12 insertions(+), 6 deletions(-) diff --git a/scss/_local-navigation.scss b/scss/_local-navigation.scss index 9acd8b49e1..19d6e5fb3d 100644 --- a/scss/_local-navigation.scss +++ b/scss/_local-navigation.scss @@ -73,15 +73,21 @@ &:hover { color: var(--#{$prefix}local-nav-hover-color); - &::before { + &::after { color: var(--#{$prefix}local-nav-active-color); } } @include media-breakpoint-down(lg) { - --bs-nav-link-padding-x: 0; --bs-navbar-border-width: 0px; + padding: var(--bs-nav-link-margin-y) 0; + margin: 0 calc(-1 * var(--bs-nav-link-margin-x)); // stylelint-disable-line function-disallowed-list + + &::before { + content: none; + } + &:hover { color: var(--#{$prefix}local-nav-color); background-color: var(--#{$prefix}local-nav-hover-bg); @@ -96,15 +102,15 @@ color: var(--#{$prefix}local-nav-hover-color); } - &::before { - bottom: calc(-1 * var(--#{$prefix}local-nav-border-width)); // stylelint-disable-line function-disallowed-list + &::after { + bottom: calc(-1 * (var(--#{$prefix}local-nav-border-width) + var(--bs-nav-link-margin-y))); // stylelint-disable-line function-disallowed-list color: var(--#{$prefix}local-nav-active-color); } @include media-breakpoint-down(lg) { background-color: var(--#{$prefix}local-nav-active-bg); - &::before { + &::after { position: absolute; top: 0; bottom: 0; diff --git a/scss/_variables.scss b/scss/_variables.scss index ff191f8722..fe5bc269fd 100644 --- a/scss/_variables.scss +++ b/scss/_variables.scss @@ -2464,7 +2464,7 @@ $tag-active-decoration-color-dark: $white !default; // Local navigation // scss-docs-start local-nav-variables -$local-nav-padding-y: $navbar-nav-link-padding-y !default; +$local-nav-padding-y: $navbar-nav-link-margin-y !default; $local-nav-color: var(--#{$prefix}body-color) !default; $local-nav-bg: var(--#{$prefix}body-bg) !default; $local-nav-hover-color: $local-nav-color !default;