1 |
|
2 |
|
3 |
|
4 |
|
5 |
|
6 |
|
7 |
|
8 |
|
9 |
|
10 |
|
11 |
|
12 |
|
13 |
|
14 |
|
15 |
|
16 |
|
17 |
|
18 | .navbar {
|
19 | position: relative;
|
20 | display: flex;
|
21 | flex-wrap: wrap;
|
22 | align-items: center;
|
23 | justify-content: space-between;
|
24 | padding: $navbar-padding-y $navbar-padding-x;
|
25 |
|
26 |
|
27 |
|
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 |
|
39 |
|
40 |
|
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 |
|
58 |
|
59 |
|
60 |
|
61 | .navbar-nav {
|
62 | display: flex;
|
63 | flex-direction: column;
|
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 |
|
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 |
|
92 |
|
93 |
|
94 |
|
95 |
|
96 |
|
97 |
|
98 |
|
99 | .navbar-collapse {
|
100 | flex-basis: 100%;
|
101 | flex-grow: 1;
|
102 |
|
103 |
|
104 | align-items: center;
|
105 | }
|
106 |
|
107 |
|
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;
|
113 | border: $border-width solid transparent;
|
114 | @include border-radius($navbar-toggler-border-radius);
|
115 |
|
116 | @include hover-focus {
|
117 | text-decoration: none;
|
118 | }
|
119 |
|
120 |
|
121 | &:not(:disabled):not(.disabled) {
|
122 | cursor: pointer;
|
123 | }
|
124 | }
|
125 |
|
126 |
|
127 |
|
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 |
|
139 |
|
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 |
|
172 | > .container,
|
173 | > .container-fluid {
|
174 | flex-wrap: nowrap;
|
175 | }
|
176 |
|
177 | .navbar-collapse {
|
178 | display: flex !important;
|
179 |
|
180 |
|
181 | flex-basis: auto;
|
182 | }
|
183 |
|
184 | .navbar-toggler {
|
185 | display: none;
|
186 | }
|
187 | }
|
188 | }
|
189 | }
|
190 | }
|
191 |
|
192 |
|
193 |
|
194 |
|
195 |
|
196 |
|
197 |
|
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 |
|
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 | }
|