Skip to content

Commit

Permalink
fix(navbar): Use :where() to reduce navbar dark/light styles to min…
Browse files Browse the repository at this point in the history
…imal specificity
  • Loading branch information
gadenbuie committed Dec 4, 2024
1 parent ece9fbf commit abf741b
Show file tree
Hide file tree
Showing 2 changed files with 23 additions and 22 deletions.
19 changes: 10 additions & 9 deletions inst/lib/bs5/scss/_navbar.scss
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
// other navbar variations.

.navbar,
:where([data-bs-theme="light"] .navbar) { // bslib-patched: explicitly set navbar props in light mode regions
: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};
Expand Down Expand Up @@ -299,8 +299,8 @@
}

.navbar-dark,
:where([data-bs-theme="dark"] .navbar), // bslib-patched: dark mode inside dark regions
:where(.navbar[data-bs-theme="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};
--#{$prefix}navbar-hover-color: #{$navbar-dark-hover-color};
Expand All @@ -327,7 +327,7 @@
}
}

:where(.navbar[data-bs-theme="light"]) {
.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};
Expand All @@ -336,8 +336,9 @@
--#{$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};
}
:where(.navbar[data-bs-theme="light"] .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)};
}

.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)};
}
}
26 changes: 13 additions & 13 deletions tools/patches/034-bs5-navbar-bg.patch
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
diff --git a/inst/lib/bs5/scss/_navbar.scss b/inst/lib/bs5/scss/_navbar.scss
index 988bbe09..cbeef8d0 100644
index 988bbe09..d4e32d1f 100644
--- a/inst/lib/bs5/scss/_navbar.scss
+++ b/inst/lib/bs5/scss/_navbar.scss
@@ -3,7 +3,8 @@
Expand All @@ -8,7 +8,7 @@ index 988bbe09..cbeef8d0 100644

-.navbar {
+.navbar,
+:where([data-bs-theme="light"] .navbar) { // bslib-patched: explicitly set navbar props in light mode regions
+: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};
Expand All @@ -22,17 +22,15 @@ index 988bbe09..cbeef8d0 100644
position: relative;
display: flex;
display: -webkit-flex;
@@ -296,7 +299,8 @@
@@ -296,6 +299,7 @@
}

.navbar-dark,
-.navbar[data-bs-theme="dark"] {
+:where([data-bs-theme="dark"] .navbar), // bslib-patched: dark mode inside dark regions
+:where(.navbar[data-bs-theme="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};
--#{$prefix}navbar-hover-color: #{$navbar-dark-hover-color};
@@ -309,10 +313,31 @@
@@ -309,10 +313,32 @@
// scss-docs-end navbar-dark-css-vars
}

Expand All @@ -51,7 +49,7 @@ index 988bbe09..cbeef8d0 100644
}
}
+
+:where(.navbar[data-bs-theme="light"]) {
+.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};
Expand All @@ -60,8 +58,10 @@ index 988bbe09..cbeef8d0 100644
+ --#{$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};
+}
+:where(.navbar[data-bs-theme="light"] .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)};
+
+ .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)};
+ }
+}
\ No newline at end of file

0 comments on commit abf741b

Please sign in to comment.