-
Notifications
You must be signed in to change notification settings - Fork 58
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat: Improve navbar compatiblity for Bootstrap 5 and light/dark modes (
#1145) * fix(navbar): Don't flip navbar bg in dark mode This rule only changes the background color of the navbar, which is not enough to fully restyle the navbar in dark mode. It might work in the default cases, but it certainly does not work if users have set $navbar-dark-bg or $navbar-light-bg to appropriate values. Note that Bootstrap expects the navbar colors to be static (i.e. the same in light and dark mode), so if we want to support different navbar colors we'll need to implement something better. * fix(bootstrap): Navbar toggler icon should follow navbar color mode Bootstrap has the navbar toggler icon follow the global color mode, which makes the icon invisible when placed on a light background in dark mode. Outside of this rule, Bootstrap expects the navbar color to be consistent in light and dark mode. * fix(bootstrap): Keep global color mode follow * fix: Fix `_navbar.scss` patch * feat: Only use `.navbar-default` and `.navbar-inverse` classes in BS <5 * fix(navbar_compat): navbar light background * feat: account for navbar in light mode region * feat: use `--bslib-navbar-{light,dark}-bg` variables * feat(shiny-preset): Use border-bottom for default navbar not in a dashboard page * refactor(shiny-preset): Use Sass vars to set navbar light/dark bg * fix(bs5): Selector on light-region navbar-toggler-icon * fix(navbar): Dark/light adjustments need to have the lowest specificity possible Otherwise they get in the way of local classes, e.g. `bg-blue` or `bg-primary`, which are the primary mechanism for setting navbar color in BS5 https://getbootstrap.com/docs/5.3/components/navbar/#color-schemes * fix(navbar): Use `:where()` to reduce navbar dark/light styles to minimal specificity * fix(navbar): Use `:where()` when setting navbar bg to ensure that utility classes will win * feat!(navbars): Don't use BS3 compat for navbars in BS5+ * chore: whitespace fixes
- Loading branch information
Showing
6 changed files
with
163 additions
and
34 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,66 @@ | ||
| diff --git a/inst/lib/bs5/scss/_navbar.scss b/inst/lib/bs5/scss/_navbar.scss | ||
| index 988bbe09..ec497278 100644 | ||
| --- a/inst/lib/bs5/scss/_navbar.scss | ||
| +++ b/inst/lib/bs5/scss/_navbar.scss | ||
| @@ -3,7 +3,8 @@ | ||
| // Provide a static navbar from which we expand to create full-width, fixed, and | ||
| // other navbar variations. | ||
|
|
||
| -.navbar { | ||
| +.navbar, | ||
| +:where([data-bs-theme="light"]) .navbar { // bslib-patched: explicitly set navbar props in light mode regions | ||
| // scss-docs-start navbar-css-vars | ||
| --#{$prefix}navbar-padding-x: #{if($navbar-padding-x == null, 0, $navbar-padding-x)}; | ||
| --#{$prefix}navbar-padding-y: #{$navbar-padding-y}; | ||
| @@ -26,7 +27,9 @@ | ||
| --#{$prefix}navbar-toggler-focus-width: #{$navbar-toggler-focus-width}; | ||
| --#{$prefix}navbar-toggler-transition: #{$navbar-toggler-transition}; | ||
| // scss-docs-end navbar-css-vars | ||
| +} | ||
|
|
||
| +.navbar { | ||
| position: relative; | ||
| display: flex; | ||
| display: -webkit-flex; | ||
| @@ -296,6 +299,7 @@ | ||
| } | ||
|
|
||
| .navbar-dark, | ||
| +:where([data-bs-theme="dark"]) .navbar, // bslib-patched: dark mode inside dark regions | ||
| .navbar[data-bs-theme="dark"] { | ||
| // scss-docs-start navbar-dark-css-vars | ||
| --#{$prefix}navbar-color: #{$navbar-dark-color}; | ||
| @@ -309,10 +313,32 @@ | ||
| // scss-docs-end navbar-dark-css-vars | ||
| } | ||
|
|
||
| +:where(.navbar[data-bs-theme="dark"] .navbar-toggler-icon) { | ||
| + // bslib-patched: toggler icon should follow closest navbar color mode over global mode | ||
| + --#{$prefix}navbar-toggler-icon-bg: #{escape-svg($navbar-dark-toggler-icon-bg)}; | ||
| +} | ||
| + | ||
| @if $enable-dark-mode { | ||
| @include color-mode(dark) { | ||
| - .navbar-toggler-icon { | ||
| + // bslib-patched: toggler follows global theme unless in a light region | ||
| + :where(.navbar:not([data-bs-theme="light"]) .navbar-toggler-icon) { | ||
| --#{$prefix}navbar-toggler-icon-bg: #{escape-svg($navbar-dark-toggler-icon-bg)}; | ||
| } | ||
| } | ||
| } | ||
| + | ||
| +.navbar[data-bs-theme="light"] { | ||
| + // bslib-patched: Make sure local light navbar overrides page global | ||
| + --#{$prefix}navbar-color: #{$navbar-light-color}; | ||
| + --#{$prefix}navbar-hover-color: #{$navbar-light-hover-color}; | ||
| + --#{$prefix}navbar-disabled-color: #{$navbar-light-disabled-color}; | ||
| + --#{$prefix}navbar-active-color: #{$navbar-light-active-color}; | ||
| + --#{$prefix}navbar-brand-color: #{$navbar-light-brand-color}; | ||
| + --#{$prefix}navbar-brand-hover-color: #{$navbar-light-brand-hover-color}; | ||
| + --#{$prefix}navbar-toggler-border-color: #{$navbar-light-toggler-border-color}; | ||
| + | ||
| + .navbar-toggler-icon { | ||
| + // bslib-patched: Make sure toggler icon follows local light mode, too | ||
| + --#{$prefix}navbar-toggler-icon-bg: #{escape-svg($navbar-light-toggler-icon-bg)}; | ||
| + } | ||
| +} |