corrade-http-templates – Blame information for rev 62
?pathlinks?
Rev | Author | Line No. | Line |
---|---|---|---|
62 | office | 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-wrap: wrap; // allow us to do the line break for collapsing content |
||
22 | align-items: center; |
||
23 | justify-content: space-between; // space out brand from logo |
||
24 | padding: $navbar-padding-y $navbar-padding-x; |
||
25 | |||
26 | // Because flex properties aren't inherited, we need to redeclare these first |
||
27 | // few properties so that content nested within behave properly. |
||
28 | > .container, |
||
29 | > .container-fluid { |
||
30 | display: flex; |
||
31 | flex-wrap: wrap; |
||
32 | align-items: center; |
||
33 | justify-content: space-between; |
||
34 | } |
||
35 | } |
||
36 | |||
37 | |||
38 | // Navbar brand |
||
39 | // |
||
40 | // Used for brand, project, or site names. |
||
41 | |||
42 | .navbar-brand { |
||
43 | display: inline-block; |
||
44 | padding-top: $navbar-brand-padding-y; |
||
45 | padding-bottom: $navbar-brand-padding-y; |
||
46 | margin-right: $navbar-padding-x; |
||
47 | font-size: $navbar-brand-font-size; |
||
48 | line-height: inherit; |
||
49 | white-space: nowrap; |
||
50 | |||
51 | @include hover-focus { |
||
52 | text-decoration: none; |
||
53 | } |
||
54 | } |
||
55 | |||
56 | |||
57 | // Navbar nav |
||
58 | // |
||
59 | // Custom navbar navigation (doesn't require `.nav`, but does make use of `.nav-link`). |
||
60 | |||
61 | .navbar-nav { |
||
62 | display: flex; |
||
63 | flex-direction: column; // cannot use `inherit` to get the `.navbar`s value |
||
64 | padding-left: 0; |
||
65 | margin-bottom: 0; |
||
66 | list-style: none; |
||
67 | |||
68 | .nav-link { |
||
69 | padding-right: 0; |
||
70 | padding-left: 0; |
||
71 | } |
||
72 | |||
73 | .dropdown-menu { |
||
74 | position: static; |
||
75 | float: none; |
||
76 | } |
||
77 | } |
||
78 | |||
79 | |||
80 | // Navbar text |
||
81 | // |
||
82 | // |
||
83 | |||
84 | .navbar-text { |
||
85 | display: inline-block; |
||
86 | padding-top: $nav-link-padding-y; |
||
87 | padding-bottom: $nav-link-padding-y; |
||
88 | } |
||
89 | |||
90 | |||
91 | // Responsive navbar |
||
92 | // |
||
93 | // Custom styles for responsive collapsing and toggling of navbar contents. |
||
94 | // Powered by the collapse Bootstrap JavaScript plugin. |
||
95 | |||
96 | // When collapsed, prevent the toggleable navbar contents from appearing in |
||
97 | // the default flexbox row orientation. Requires the use of `flex-wrap: wrap` |
||
98 | // on the `.navbar` parent. |
||
99 | .navbar-collapse { |
||
100 | flex-basis: 100%; |
||
101 | flex-grow: 1; |
||
102 | // For always expanded or extra full navbars, ensure content aligns itself |
||
103 | // properly vertically. Can be easily overridden with flex utilities. |
||
104 | align-items: center; |
||
105 | } |
||
106 | |||
107 | // Button for toggling the navbar when in its collapsed state |
||
108 | .navbar-toggler { |
||
109 | padding: $navbar-toggler-padding-y $navbar-toggler-padding-x; |
||
110 | font-size: $navbar-toggler-font-size; |
||
111 | line-height: 1; |
||
112 | background-color: transparent; // remove default button style |
||
113 | border: $border-width solid transparent; // remove default button style |
||
114 | @include border-radius($navbar-toggler-border-radius); |
||
115 | |||
116 | @include hover-focus { |
||
117 | text-decoration: none; |
||
118 | } |
||
119 | |||
120 | // Opinionated: add "hand" cursor to non-disabled .navbar-toggler elements |
||
121 | &:not(:disabled):not(.disabled) { |
||
122 | cursor: pointer; |
||
123 | } |
||
124 | } |
||
125 | |||
126 | // Keep as a separate element so folks can easily override it with another icon |
||
127 | // or image file as needed. |
||
128 | .navbar-toggler-icon { |
||
129 | display: inline-block; |
||
130 | width: 1.5em; |
||
131 | height: 1.5em; |
||
132 | vertical-align: middle; |
||
133 | content: ""; |
||
134 | background: no-repeat center center; |
||
135 | background-size: 100% 100%; |
||
136 | } |
||
137 | |||
138 | // Generate series of `.navbar-expand-*` responsive classes for configuring |
||
139 | // where your navbar collapses. |
||
140 | .navbar-expand { |
||
141 | @each $breakpoint in map-keys($grid-breakpoints) { |
||
142 | $next: breakpoint-next($breakpoint, $grid-breakpoints); |
||
143 | $infix: breakpoint-infix($next, $grid-breakpoints); |
||
144 | |||
145 | &#{$infix} { |
||
146 | @include media-breakpoint-down($breakpoint) { |
||
147 | > .container, |
||
148 | > .container-fluid { |
||
149 | padding-right: 0; |
||
150 | padding-left: 0; |
||
151 | } |
||
152 | } |
||
153 | |||
154 | @include media-breakpoint-up($next) { |
||
155 | flex-flow: row nowrap; |
||
156 | justify-content: flex-start; |
||
157 | |||
158 | .navbar-nav { |
||
159 | flex-direction: row; |
||
160 | |||
161 | .dropdown-menu { |
||
162 | position: absolute; |
||
163 | } |
||
164 | |||
165 | .nav-link { |
||
166 | padding-right: $navbar-nav-link-padding-x; |
||
167 | padding-left: $navbar-nav-link-padding-x; |
||
168 | } |
||
169 | } |
||
170 | |||
171 | // For nesting containers, have to redeclare for alignment purposes |
||
172 | > .container, |
||
173 | > .container-fluid { |
||
174 | flex-wrap: nowrap; |
||
175 | } |
||
176 | |||
177 | .navbar-collapse { |
||
178 | display: flex !important; // stylelint-disable-line declaration-no-important |
||
179 | |||
180 | // Changes flex-bases to auto because of an IE10 bug |
||
181 | flex-basis: auto; |
||
182 | } |
||
183 | |||
184 | .navbar-toggler { |
||
185 | display: none; |
||
186 | } |
||
187 | } |
||
188 | } |
||
189 | } |
||
190 | } |
||
191 | |||
192 | |||
193 | // Navbar themes |
||
194 | // |
||
195 | // Styles for switching between navbars with light or dark background. |
||
196 | |||
197 | // Dark links against a light background |
||
198 | .navbar-light { |
||
199 | .navbar-brand { |
||
200 | color: $navbar-light-active-color; |
||
201 | |||
202 | @include hover-focus { |
||
203 | color: $navbar-light-active-color; |
||
204 | } |
||
205 | } |
||
206 | |||
207 | .navbar-nav { |
||
208 | .nav-link { |
||
209 | color: $navbar-light-color; |
||
210 | |||
211 | @include hover-focus { |
||
212 | color: $navbar-light-hover-color; |
||
213 | } |
||
214 | |||
215 | &.disabled { |
||
216 | color: $navbar-light-disabled-color; |
||
217 | } |
||
218 | } |
||
219 | |||
220 | .show > .nav-link, |
||
221 | .active > .nav-link, |
||
222 | .nav-link.show, |
||
223 | .nav-link.active { |
||
224 | color: $navbar-light-active-color; |
||
225 | } |
||
226 | } |
||
227 | |||
228 | .navbar-toggler { |
||
229 | color: $navbar-light-color; |
||
230 | border-color: $navbar-light-toggler-border-color; |
||
231 | } |
||
232 | |||
233 | .navbar-toggler-icon { |
||
234 | background-image: $navbar-light-toggler-icon-bg; |
||
235 | } |
||
236 | |||
237 | .navbar-text { |
||
238 | color: $navbar-light-color; |
||
239 | a { |
||
240 | color: $navbar-light-active-color; |
||
241 | |||
242 | @include hover-focus { |
||
243 | color: $navbar-light-active-color; |
||
244 | } |
||
245 | } |
||
246 | } |
||
247 | } |
||
248 | |||
249 | // White links against a dark background |
||
250 | .navbar-dark { |
||
251 | .navbar-brand { |
||
252 | color: $navbar-dark-active-color; |
||
253 | |||
254 | @include hover-focus { |
||
255 | color: $navbar-dark-active-color; |
||
256 | } |
||
257 | } |
||
258 | |||
259 | .navbar-nav { |
||
260 | .nav-link { |
||
261 | color: $navbar-dark-color; |
||
262 | |||
263 | @include hover-focus { |
||
264 | color: $navbar-dark-hover-color; |
||
265 | } |
||
266 | |||
267 | &.disabled { |
||
268 | color: $navbar-dark-disabled-color; |
||
269 | } |
||
270 | } |
||
271 | |||
272 | .show > .nav-link, |
||
273 | .active > .nav-link, |
||
274 | .nav-link.show, |
||
275 | .nav-link.active { |
||
276 | color: $navbar-dark-active-color; |
||
277 | } |
||
278 | } |
||
279 | |||
280 | .navbar-toggler { |
||
281 | color: $navbar-dark-color; |
||
282 | border-color: $navbar-dark-toggler-border-color; |
||
283 | } |
||
284 | |||
285 | .navbar-toggler-icon { |
||
286 | background-image: $navbar-dark-toggler-icon-bg; |
||
287 | } |
||
288 | |||
289 | .navbar-text { |
||
290 | color: $navbar-dark-color; |
||
291 | a { |
||
292 | color: $navbar-dark-active-color; |
||
293 | |||
294 | @include hover-focus { |
||
295 | color: $navbar-dark-active-color; |
||
296 | } |
||
297 | } |
||
298 | } |
||
299 | } |