]>
Commit | Line | Data |
---|---|---|
91e44d91 S |
1 | // Contents |
2 | // | |
3 | // Navbar | |
4 | // Navbar brand | |
5 | // Navbar nav | |
6 | // Navbar text | |
7 | // Navbar divider | |
8 | // Responsive navbar | |
9 | // Navbar position | |
10 | // Navbar themes | |
11 | ||
12 | ||
13 | // Navbar | |
14 | // | |
15 | // Provide a static navbar from which we expand to create full-width, fixed, and | |
16 | // other navbar variations. | |
17 | ||
18 | .navbar { | |
19 | position: relative; | |
20 | display: flex; | |
21 | flex-direction: column; | |
22 | padding: $navbar-padding-y $navbar-padding-x; | |
23 | } | |
24 | ||
25 | ||
26 | // Navbar brand | |
27 | // | |
28 | // Used for brand, project, or site names. | |
29 | ||
30 | .navbar-brand { | |
31 | display: inline-block; | |
32 | padding-top: .25rem; | |
33 | padding-bottom: .25rem; | |
34 | margin-right: $navbar-padding-x; | |
35 | font-size: $font-size-lg; | |
36 | line-height: inherit; | |
37 | white-space: nowrap; | |
38 | ||
39 | @include hover-focus { | |
40 | text-decoration: none; | |
41 | } | |
42 | } | |
43 | ||
44 | ||
45 | // Navbar nav | |
46 | // | |
47 | // Custom navbar navigation (doesn't require `.nav`, but does make use of `.nav-link`). | |
48 | ||
49 | .navbar-nav { | |
50 | display: flex; | |
51 | flex-direction: column; // cannot use `inherit` to get the `.navbar`s value | |
52 | padding-left: 0; | |
53 | margin-bottom: 0; | |
54 | list-style: none; | |
55 | ||
56 | .nav-link { | |
57 | padding-right: 0; | |
58 | padding-left: 0; | |
59 | } | |
60 | } | |
61 | ||
62 | ||
63 | // Navbar text | |
64 | // | |
65 | // | |
66 | ||
67 | .navbar-text { | |
68 | display: inline-block; | |
69 | padding-top: .425rem; | |
70 | padding-bottom: .425rem; | |
71 | } | |
72 | ||
73 | ||
74 | // Responsive navbar | |
75 | // | |
76 | // Custom styles for responsive collapsing and toggling of navbar contents. | |
77 | // Powered by the collapse Bootstrap JavaScript plugin. | |
78 | ||
79 | // Button for toggling the navbar when in its collapsed state | |
80 | .navbar-toggler { | |
81 | align-self: flex-start; // Prevent toggler from growing to full width when it's the only visible navbar child | |
82 | padding: $navbar-toggler-padding-y $navbar-toggler-padding-x; | |
83 | font-size: $navbar-toggler-font-size; | |
84 | line-height: 1; | |
85 | background: transparent; // remove default button style | |
86 | border: $border-width solid transparent; // remove default button style | |
87 | @include border-radius($navbar-toggler-border-radius); | |
88 | ||
89 | @include hover-focus { | |
90 | text-decoration: none; | |
91 | } | |
92 | } | |
93 | ||
94 | // Keep as a separate element so folks can easily override it with another icon | |
95 | // or image file as needed. | |
96 | .navbar-toggler-icon { | |
97 | display: inline-block; | |
98 | width: 1.5em; | |
99 | height: 1.5em; | |
100 | vertical-align: middle; | |
101 | content: ""; | |
102 | background: no-repeat center center; | |
103 | background-size: 100% 100%; | |
104 | } | |
105 | ||
106 | // Use `position` on the toggler to prevent it from being auto placed as a flex | |
107 | // item and allow easy placement. | |
108 | .navbar-toggler-left { | |
109 | position: absolute; | |
110 | left: $navbar-padding-x; | |
111 | } | |
112 | .navbar-toggler-right { | |
113 | position: absolute; | |
114 | right: $navbar-padding-x; | |
115 | } | |
116 | ||
117 | // Generate series of `.navbar-toggleable-*` responsive classes for configuring | |
118 | // where your navbar collapses. | |
119 | .navbar-toggleable { | |
120 | @each $breakpoint in map-keys($grid-breakpoints) { | |
121 | $next: breakpoint-next($breakpoint, $grid-breakpoints); | |
122 | $infix: breakpoint-infix($breakpoint, $grid-breakpoints); | |
123 | ||
124 | &#{$infix} { | |
125 | @include media-breakpoint-down($breakpoint) { | |
126 | .navbar-nav { | |
127 | .dropdown-menu { | |
128 | position: static; | |
129 | float: none; | |
130 | } | |
131 | } | |
132 | ||
133 | > .container { | |
134 | padding-right: 0; | |
135 | padding-left: 0; | |
136 | } | |
137 | } | |
138 | ||
139 | @include media-breakpoint-up($next) { | |
140 | flex-direction: row; | |
141 | flex-wrap: nowrap; | |
142 | align-items: center; | |
143 | ||
144 | .navbar-nav { | |
145 | flex-direction: row; | |
146 | ||
147 | .nav-link { | |
148 | padding-right: .5rem; | |
149 | padding-left: .5rem; | |
150 | } | |
151 | } | |
152 | ||
153 | // For nesting containers, have to redeclare for alignment purposes | |
154 | > .container { | |
155 | display: flex; | |
156 | flex-wrap: nowrap; | |
157 | align-items: center; | |
158 | } | |
159 | ||
160 | // scss-lint:disable ImportantRule | |
161 | .navbar-collapse { | |
162 | display: flex !important; | |
163 | width: 100%; | |
164 | } | |
165 | // scss-lint:enable ImportantRule | |
166 | ||
167 | .navbar-toggler { | |
168 | display: none; | |
169 | } | |
170 | } | |
171 | } | |
172 | } | |
173 | } | |
174 | ||
175 | ||
176 | // Navbar themes | |
177 | // | |
178 | // Styles for switching between navbars with light or dark background. | |
179 | ||
180 | // Dark links against a light background | |
181 | .navbar-light { | |
182 | .navbar-brand, | |
183 | .navbar-toggler { | |
184 | color: $navbar-light-active-color; | |
185 | ||
186 | @include hover-focus { | |
187 | color: $navbar-light-active-color; | |
188 | } | |
189 | } | |
190 | ||
191 | .navbar-nav { | |
192 | .nav-link { | |
193 | color: $navbar-light-color; | |
194 | ||
195 | @include hover-focus { | |
196 | color: $navbar-light-hover-color; | |
197 | } | |
198 | ||
199 | &.disabled { | |
200 | color: $navbar-light-disabled-color; | |
201 | } | |
202 | } | |
203 | ||
204 | .open > .nav-link, | |
205 | .active > .nav-link, | |
206 | .nav-link.open, | |
207 | .nav-link.active { | |
208 | color: $navbar-light-active-color; | |
209 | } | |
210 | } | |
211 | ||
212 | .navbar-toggler { | |
213 | border-color: $navbar-light-toggler-border; | |
214 | } | |
215 | ||
216 | .navbar-toggler-icon { | |
217 | background-image: $navbar-light-toggler-bg; | |
218 | } | |
219 | ||
220 | .navbar-text { | |
221 | color: $navbar-light-color; | |
222 | } | |
223 | } | |
224 | ||
225 | // White links against a dark background | |
226 | .navbar-inverse { | |
227 | .navbar-brand, | |
228 | .navbar-toggler { | |
229 | color: $navbar-inverse-active-color; | |
230 | ||
231 | @include hover-focus { | |
232 | color: $navbar-inverse-active-color; | |
233 | } | |
234 | } | |
235 | ||
236 | .navbar-nav { | |
237 | .nav-link { | |
238 | color: $navbar-inverse-color; | |
239 | ||
240 | @include hover-focus { | |
241 | color: $navbar-inverse-hover-color; | |
242 | } | |
243 | ||
244 | &.disabled { | |
245 | color: $navbar-inverse-disabled-color; | |
246 | } | |
247 | } | |
248 | ||
249 | .open > .nav-link, | |
250 | .active > .nav-link, | |
251 | .nav-link.open, | |
252 | .nav-link.active { | |
253 | color: $navbar-inverse-active-color; | |
254 | } | |
255 | } | |
256 | ||
257 | .navbar-toggler { | |
258 | border-color: $navbar-inverse-toggler-border; | |
259 | } | |
260 | ||
261 | .navbar-toggler-icon { | |
262 | background-image: $navbar-inverse-toggler-bg; | |
263 | } | |
264 | ||
265 | .navbar-text { | |
266 | color: $navbar-inverse-color; | |
267 | } | |
268 | } |