1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
|
diff --git a/inst/lib/bs5/scss/_variables.scss b/inst/lib/bs5/scss/_variables.scss
index 91bdbfdf..709feeb2 100644
--- a/inst/lib/bs5/scss/_variables.scss
+++ b/inst/lib/bs5/scss/_variables.scss
@@ -1214,25 +1214,40 @@ $navbar-toggler-border-radius: $btn-border-radius !default;
$navbar-toggler-focus-width: $btn-focus-width !default;
$navbar-toggler-transition: box-shadow .15s ease-in-out !default;
-$navbar-light-color: rgba(var(--#{$prefix}emphasis-color-rgb), .65) !default;
-$navbar-light-hover-color: rgba(var(--#{$prefix}emphasis-color-rgb), .8) !default;
-$navbar-light-active-color: rgba(var(--#{$prefix}emphasis-color-rgb), 1) !default;
-$navbar-light-disabled-color: rgba(var(--#{$prefix}emphasis-color-rgb), .3) !default;
-$navbar-light-icon-color: rgba($body-color, .75) !default;
+$navbar-bg: null !default; // Background color for any navbarPage()
+$navbar-light-bg: $navbar-bg !default; // Background color for navbarPage(inverse = FALSE)
+$navbar-dark-bg: $navbar-bg !default; // Background color for navbarPage(inverse = TRUE)
+
+$navbar-light-contrast: if(
+ type-of($navbar-light-bg) == color,
+ color-contrast($navbar-light-bg),
+ var(--#{$prefix}emphasis-color-rgb)
+) !default; // Deepest contrasting color for navbarPage(inverse = FALSE).
+$navbar-dark-contrast: if(
+ type-of($navbar-dark-bg) == color,
+ color-contrast($navbar-dark-bg),
+ var(--#{$prefix}emphasis-color-rgb)
+) !default; // Deepest contrasting color for navbarPage(inverse = TRUE).
+
+$navbar-light-color: rgba($navbar-light-contrast, .65) !default;
+$navbar-light-hover-color: rgba($navbar-light-contrast, .8) !default;
+$navbar-light-active-color: rgba($navbar-light-contrast, 1) !default;
+$navbar-light-disabled-color: rgba($navbar-light-contrast, .3) !default;
+$navbar-light-icon-color: rgba(if(type-of($navbar-light-contrast)==color, $navbar-light-contrast, $body-color), .75) !default;
$navbar-light-toggler-icon-bg: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'><path stroke='#{$navbar-light-icon-color}' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/></svg>") !default;
-$navbar-light-toggler-border-color: rgba(var(--#{$prefix}emphasis-color-rgb), .15) !default;
+$navbar-light-toggler-border-color: rgba($navbar-light-contrast, .15) !default;
$navbar-light-brand-color: $navbar-light-active-color !default;
$navbar-light-brand-hover-color: $navbar-light-active-color !default;
// scss-docs-end navbar-variables
// scss-docs-start navbar-dark-variables
-$navbar-dark-color: rgba($white, .55) !default;
-$navbar-dark-hover-color: rgba($white, .75) !default;
-$navbar-dark-active-color: $white !default;
-$navbar-dark-disabled-color: rgba($white, .25) !default;
-$navbar-dark-icon-color: $navbar-dark-color !default;
+$navbar-dark-color: rgba($navbar-dark-contrast, .55) !default;
+$navbar-dark-hover-color: rgba($navbar-dark-contrast, .75) !default;
+$navbar-dark-active-color: rgba($navbar-dark-contrast, 1) !default;
+$navbar-dark-disabled-color: rgba($navbar-dark-contrast, .25) !default;
+$navbar-dark-icon-color: rgba(if(type-of($navbar-dark-contrast)==color, $navbar-dark-contrast, $white), .75) !default;
$navbar-dark-toggler-icon-bg: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'><path stroke='#{$navbar-dark-icon-color}' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/></svg>") !default;
-$navbar-dark-toggler-border-color: rgba($white, .1) !default;
+$navbar-dark-toggler-border-color: rgba($navbar-dark-contrast, .1) !default;
$navbar-dark-brand-color: $navbar-dark-active-color !default;
$navbar-dark-brand-hover-color: $navbar-dark-active-color !default;
// scss-docs-end navbar-dark-variables
|
