fix(navbar): minor fixes (#1498)

* Add a `.mb-3` to offcanvases navbar examples to add some space between the last link and the search bar in mobile viewport * New `$navbar-dark-border-color` used in `--bs-navbar-border-color` for `.navbar-dark` * Change the default value of `$navbar-border-color` now used only for light navbars Co-authored-by: Louis-Maxime Piton <[email protected]> Co-authored-by: Julien Déramond <[email protected]>
Orange-OpenSource · Sep 14, 2022 · 5bd74eb · 5bd74eb
1 parent a1d25dc
commit 5bd74eb
Show file tree

Hide file tree

Showing 3 changed files with 5 additions and 3 deletions.
diff --git a/scss/_navbar.scss b/scss/_navbar.scss
@@ -505,6 +505,7 @@
 
 .navbar-dark {
  // scss-docs-start navbar-dark-css-vars
+ --#{$prefix}navbar-border-color: #{$navbar-dark-border-color}; // Boosted mod
  --#{$prefix}navbar-color: #{$navbar-dark-color};
  --#{$prefix}navbar-hover-color: #{$navbar-dark-hover-color};
  --#{$prefix}navbar-disabled-color: #{$navbar-dark-disabled-color};

diff --git a/scss/_variables.scss b/scss/_variables.scss
@@ -1287,7 +1287,7 @@ $navbar-brand-logo-transition: width $navbar-transition-duration $n
 $navbar-active-transition: bottom $navbar-transition-duration $navbar-transition-timing-function !default;
 
 $navbar-border-width: $border-width * .5 !default;
-$navbar-border-color: $gray-700 !default;
+$navbar-border-color: $gray-500 !default;
 
 $navbar-brand-margin-y-xs: $spacer * .5 !default;
 $navbar-brand-logo-size-xs: $spacer * 1.5 !default;
@@ -1327,6 +1327,7 @@ $navbar-badge-margin-top: .375rem !default;
 // End mod
 
 // scss-docs-start navbar-dark-variables
+$navbar-dark-border-color: $gray-700 !default;
 $navbar-dark-color: $white !default;
 $navbar-dark-hover-color: $primary !default;
 $navbar-dark-active-color: $primary !default;

diff --git a/site/content/docs/5.2/components/navbar.md b/site/content/docs/5.2/components/navbar.md
@@ -541,7 +541,7 @@ In the example below, to create an offcanvas navbar that is always collapsed acr
   <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
   </div>
   <div class="offcanvas-body">
-  <ul class="navbar-nav justify-content-end flex-grow-1 pe-3">
+  <ul class="navbar-nav justify-content-end flex-grow-1 pe-3 mb-3">
   <li class="nav-item">
   <a class="nav-link active" aria-current="page" href="#">Home</a>
   </li>
@@ -600,7 +600,7 @@ When using offcanvas in a dark navbar, be aware that you may need to have a dark
   <button type="button" class="btn-close btn-close-white" data-bs-dismiss="offcanvas" aria-label="Close"></button>
   </div>
   <div class="offcanvas-body">
-  <ul class="navbar-nav justify-content-end flex-grow-1 pe-3">
+  <ul class="navbar-nav justify-content-end flex-grow-1 pe-3 mb-3">
   <li class="nav-item">
   <a class="nav-link active" aria-current="page" href="#">Home</a>
   </li>