_navbar.scss — VK Blocks 0.16.2

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

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

_navbar.scss

295 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,
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	@include 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	@include 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
121	// Keep as a separate element so folks can easily override it with another icon
122	// or image file as needed.
123	.navbar-toggler-icon {
124	display: inline-block;
125	width: 1.5em;
126	height: 1.5em;
127	vertical-align: middle;
128	content: "";
129	background: no-repeat center center;
130	background-size: 100% 100%;
131	}
132
133	// Generate series of `.navbar-expand-*` responsive classes for configuring
134	// where your navbar collapses.
135	.navbar-expand {
136	@each $breakpoint in map-keys($grid-breakpoints) {
137	$next: breakpoint-next($breakpoint, $grid-breakpoints);
138	$infix: breakpoint-infix($next, $grid-breakpoints);
139
140	&#{$infix} {
141	@include media-breakpoint-down($breakpoint) {
142	> .container,
143	> .container-fluid {
144	padding-right: 0;
145	padding-left: 0;
146	}
147	}
148
149	@include media-breakpoint-up($next) {
150	flex-flow: row nowrap;
151	justify-content: flex-start;
152
153	.navbar-nav {
154	flex-direction: row;
155
156	.dropdown-menu {
157	position: absolute;
158	}
159
160	.nav-link {
161	padding-right: $navbar-nav-link-padding-x;
162	padding-left: $navbar-nav-link-padding-x;
163	}
164	}
165
166	// For nesting containers, have to redeclare for alignment purposes
167	> .container,
168	> .container-fluid {
169	flex-wrap: nowrap;
170	}
171
172	.navbar-collapse {
173	display: flex !important; // stylelint-disable-line declaration-no-important
174
175	// Changes flex-bases to auto because of an IE10 bug
176	flex-basis: auto;
177	}
178
179	.navbar-toggler {
180	display: none;
181	}
182	}
183	}
184	}
185	}
186
187
188	// Navbar themes
189	//
190	// Styles for switching between navbars with light or dark background.
191
192	// Dark links against a light background
193	.navbar-light {
194	.navbar-brand {
195	color: $navbar-light-brand-color;
196
197	@include hover-focus {
198	color: $navbar-light-brand-hover-color;
199	}
200	}
201
202	.navbar-nav {
203	.nav-link {
204	color: $navbar-light-color;
205
206	@include hover-focus {
207	color: $navbar-light-hover-color;
208	}
209
210	&.disabled {
211	color: $navbar-light-disabled-color;
212	}
213	}
214
215	.show > .nav-link,
216	.active > .nav-link,
217	.nav-link.show,
218	.nav-link.active {
219	color: $navbar-light-active-color;
220	}
221	}
222
223	.navbar-toggler {
224	color: $navbar-light-color;
225	border-color: $navbar-light-toggler-border-color;
226	}
227
228	.navbar-toggler-icon {
229	background-image: $navbar-light-toggler-icon-bg;
230	}
231
232	.navbar-text {
233	color: $navbar-light-color;
234	a {
235	color: $navbar-light-active-color;
236
237	@include hover-focus {
238	color: $navbar-light-active-color;
239	}
240	}
241	}
242	}
243
244	// White links against a dark background
245	.navbar-dark {
246	.navbar-brand {
247	color: $navbar-dark-brand-color;
248
249	@include hover-focus {
250	color: $navbar-dark-brand-hover-color;
251	}
252	}
253
254	.navbar-nav {
255	.nav-link {
256	color: $navbar-dark-color;
257
258	@include hover-focus {
259	color: $navbar-dark-hover-color;
260	}
261
262	&.disabled {
263	color: $navbar-dark-disabled-color;
264	}
265	}
266
267	.show > .nav-link,
268	.active > .nav-link,
269	.nav-link.show,
270	.nav-link.active {
271	color: $navbar-dark-active-color;
272	}
273	}
274
275	.navbar-toggler {
276	color: $navbar-dark-color;
277	border-color: $navbar-dark-toggler-border-color;
278	}
279
280	.navbar-toggler-icon {
281	background-image: $navbar-dark-toggler-icon-bg;
282	}
283
284	.navbar-text {
285	color: $navbar-dark-color;
286	a {
287	color: $navbar-dark-active-color;
288
289	@include hover-focus {
290	color: $navbar-dark-active-color;
291	}
292	}
293	}
294	}
295