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
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
|
$navbar-expand-breakpoint: if($bootstrap-version>=5, lg, sm) !default;
// bs4 navbars require .navbar-expand[-sm|-md|-lg|-xl], but bs3 navbars
// don't have them. This selector matches .navbar without .navbar-expand
// and defaults it to .navbar-expand-sm.
.navbar:not(.navbar-expand):not(.navbar-expand-sm):not(.navbar-expand-md):not(.navbar-expand-lg):not(.navbar-expand-xl) {
@extend .navbar-expand-#{$navbar-expand-breakpoint};
}
// Unfortunately the @extend above, combined with the @extend .nav-link below
// results in .navbar-expand's padding rules taking precedence over
// .nav-underline's padding rules (and unfortunately :where()/css-layers doesn't
// help here, so just re-apply the padding rules)
.navbar .nav.nav-underline {
--#{$prefix}navbar-nav-link-padding-x: 0;
}
.navbar:not(.fixed-bottom):not(.navbar-fixed-bottom) {
// Instead of exactly re-doing bs3's .navbar { margin-bottom }, set
// margin-top on each pane (so 'fill' panes can be flush with navbar)
& + div > .tab-content > .tab-pane {
--bslib-navbar-margin: #{$navbar-margin-bottom};
margin-top: var(--bslib-navbar-margin);
}
}
// Map BS3 navbar positioning to general utilities
.navbar-fixed-top {
@extend .fixed-top;
}
.navbar-fixed-bottom {
@extend .fixed-bottom;
}
.navbar-sticky-top {
@extend .sticky-top;
}
ul.nav.navbar-nav {
flex: 1;
-webkit-flex: 1;
&.navbar-right {
flex: unset;
-webkit-flex: unset;
display: flex;
display: -webkit-flex;
justify-content: flex-end;
-webkit-justify-content: flex-end;
}
}
// :where() lowers the specificity of the eventually @extend selector, which is
// important to make sure those selectors don't get an artificial specificity
// boost (e.g., we don't want `ul.nav.navbar-nav>li>a` to be more specific than
// `.nav-underline .nav-link`)
:where(ul.nav.navbar-nav > li) {
&:not(.dropdown) {
@extend .nav-item;
}
> a {
@extend .nav-link;
}
&.active, &.show {
> a {
color: var(--#{$prefix}navbar-active-color);
}
}
&.bslib-nav-item {
color: var(--#{$prefix}navbar-active-color);
}
}
:root {
--bslib-navbar-light-bg: var(--bslib-navbar-default-bg, var(--#{$prefix}light));
--bslib-navbar-dark-bg: var(--bslib-navbar-inverse-bg, var(--#{$prefix}black));
}
@mixin navbar-background-dark($important: false) {
background-color: var(--bslib-navbar-dark-bg) if($important, !important, null);
}
@mixin navbar-background-light($important: false) {
background-color: var(--bslib-navbar-light-bg) if($important, !important, null);
}
.navbar {
// Defaults to null (and in that case, we don't want to define the CSS var)
@if $navbar-light-bg {
--bslib-navbar-light-bg: #{$navbar-light-bg};
}
@if $navbar-dark-bg {
--bslib-navbar-dark-bg: #{$navbar-dark-bg};
}
@if $bootstrap-version < 5 {
// BS3 .navbar-default -> BS4 .navbar-light
&.navbar-default {
// Sets a variety of fg colors which are configurable via $navbar-light-* options
@extend .navbar-light;
@include navbar-background-light($important: true);
}
// BS3 .navbar-inverse -> BS4 .navbar-dark
&.navbar-inverse {
// Sets a variety of fg colors which are configurable via $navbar-dark-* options
@extend .navbar-dark;
@include navbar-background-dark($important: true);
}
}
}
@if $bootstrap-version >= 5 {
.navbar {
background-color: $navbar-bg;
}
[data-bs-theme="dark"] :where(.navbar) { @include navbar-background-dark(); }
[data-bs-theme="light"] :where(.navbar), :where(.navbar) { @include navbar-background-light(); }
// These are defined *after* the above rules because we want the local version
// to win without having to resort to specificity tricks.
:where(.navbar)[data-bs-theme="dark"] { @include navbar-background-dark(); }
:where(.navbar)[data-bs-theme="light"] { @include navbar-background-light(); }
}
// Implement bs3 navbar toggler; used in Rmd websites, i.e.
// https://github.com/rstudio/rmarkdown-website/blob/453e1802b32b5baf1c8a67f80947adcc53e49b7f/_navbar.html
.navbar-toggle {
@extend .navbar-toggler;
}
.navbar-toggle {
> .icon-bar {
display: none;
&:last-child {
@extend .navbar-toggler-icon;
}
}
}
// Make sure .navbar-toggle is right and center aligned when navbar is collapsed
@if $bootstrap-version>=5 {
@include media-breakpoint-down($navbar-expand-breakpoint) {
.navbar-header {
width: 100%;
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
.navbar-toggle {
order: 2;
}
}
}
} @else {
// In BS4, media-breakpoint-down() does the _next_ breakpoint (xs->sm)
@include media-breakpoint-down(xs) {
.navbar-header {
width: 100%;
.navbar-toggle {
float: right;
}
}
}
}
|
