_navbar.scss — VK Blocks trunk

vk-blocks / lib / bootstrap / scss / _navbar.scss

vk-blocks / lib / bootstrap / scss Last commit date

_navbar.scss

325 lines

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