Mercurial > nebulaweb3
comparison default/assets/scss/vendors/bootstrap/_navbar.scss @ 0:1d038bc9b3d2 default tip
Up:default
author | Liny <dev@neowd.com> |
---|---|
date | Sat, 31 May 2025 09:21:51 +0800 |
parents | |
children |
comparison
equal
deleted
inserted
replaced
-1:000000000000 | 0:1d038bc9b3d2 |
---|---|
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 properities 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 orienation. Requires the use of `flex-wrap: wrap` | |
98 // on the `.navbar` parent. | |
99 .navbar-collapse { | |
100 flex-basis: 100%; | |
101 // For always expanded or extra full navbars, ensure content aligns itself | |
102 // properly vertically. Can be easily overridden with flex utilities. | |
103 align-items: center; | |
104 } | |
105 | |
106 // Button for toggling the navbar when in its collapsed state | |
107 .navbar-toggler { | |
108 padding: $navbar-toggler-padding-y $navbar-toggler-padding-x; | |
109 font-size: $navbar-toggler-font-size; | |
110 line-height: 1; | |
111 background: transparent; // remove default button style | |
112 border: $border-width solid transparent; // remove default button style | |
113 @include border-radius($navbar-toggler-border-radius); | |
114 | |
115 @include hover-focus { | |
116 text-decoration: none; | |
117 } | |
118 } | |
119 | |
120 // Keep as a separate element so folks can easily override it with another icon | |
121 // or image file as needed. | |
122 .navbar-toggler-icon { | |
123 display: inline-block; | |
124 width: 1.5em; | |
125 height: 1.5em; | |
126 vertical-align: middle; | |
127 content: ""; | |
128 background: no-repeat center center; | |
129 background-size: 100% 100%; | |
130 } | |
131 | |
132 // Generate series of `.navbar-expand-*` responsive classes for configuring | |
133 // where your navbar collapses. | |
134 .navbar-expand { | |
135 @each $breakpoint in map-keys($grid-breakpoints) { | |
136 $next: breakpoint-next($breakpoint, $grid-breakpoints); | |
137 $infix: breakpoint-infix($next, $grid-breakpoints); | |
138 | |
139 &#{$infix} { | |
140 @include media-breakpoint-down($breakpoint) { | |
141 > .container, | |
142 > .container-fluid { | |
143 padding-right: 0; | |
144 padding-left: 0; | |
145 } | |
146 } | |
147 | |
148 @include media-breakpoint-up($next) { | |
149 flex-direction: row; | |
150 flex-wrap: nowrap; | |
151 justify-content: flex-start; | |
152 | |
153 .navbar-nav { | |
154 flex-direction: row; | |
155 | |
156 .dropdown-menu { | |
157 position: absolute; | |
158 } | |
159 | |
160 .dropdown-menu-right { | |
161 right: 0; | |
162 left: auto; // Reset the default from `.dropdown-menu` | |
163 } | |
164 | |
165 .nav-link { | |
166 padding-right: .5rem; | |
167 padding-left: .5rem; | |
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 // scss-lint:disable ImportantRule | |
178 .navbar-collapse { | |
179 display: flex !important; | |
180 } | |
181 // scss-lint:enable ImportantRule | |
182 | |
183 .navbar-toggler { | |
184 display: none; | |
185 } | |
186 } | |
187 } | |
188 } | |
189 } | |
190 | |
191 | |
192 // Navbar themes | |
193 // | |
194 // Styles for switching between navbars with light or dark background. | |
195 | |
196 // Dark links against a light background | |
197 .navbar-light { | |
198 .navbar-brand { | |
199 color: $navbar-light-active-color; | |
200 | |
201 @include hover-focus { | |
202 color: $navbar-light-active-color; | |
203 } | |
204 } | |
205 | |
206 .navbar-nav { | |
207 .nav-link { | |
208 color: $navbar-light-color; | |
209 | |
210 @include hover-focus { | |
211 color: $navbar-light-hover-color; | |
212 } | |
213 | |
214 &.disabled { | |
215 color: $navbar-light-disabled-color; | |
216 } | |
217 } | |
218 | |
219 .show > .nav-link, | |
220 .active > .nav-link, | |
221 .nav-link.show, | |
222 .nav-link.active { | |
223 color: $navbar-light-active-color; | |
224 } | |
225 } | |
226 | |
227 .navbar-toggler { | |
228 color: $navbar-light-color; | |
229 border-color: $navbar-light-toggler-border-color; | |
230 } | |
231 | |
232 .navbar-toggler-icon { | |
233 background-image: $navbar-light-toggler-icon-bg; | |
234 } | |
235 | |
236 .navbar-text { | |
237 color: $navbar-light-color; | |
238 } | |
239 } | |
240 | |
241 // White links against a dark background | |
242 .navbar-dark { | |
243 .navbar-brand { | |
244 color: $navbar-dark-active-color; | |
245 | |
246 @include hover-focus { | |
247 color: $navbar-dark-active-color; | |
248 } | |
249 } | |
250 | |
251 .navbar-nav { | |
252 .nav-link { | |
253 color: $navbar-dark-color; | |
254 | |
255 @include hover-focus { | |
256 color: $navbar-dark-hover-color; | |
257 } | |
258 | |
259 &.disabled { | |
260 color: $navbar-dark-disabled-color; | |
261 } | |
262 } | |
263 | |
264 .show > .nav-link, | |
265 .active > .nav-link, | |
266 .nav-link.show, | |
267 .nav-link.active { | |
268 color: $navbar-dark-active-color; | |
269 } | |
270 } | |
271 | |
272 .navbar-toggler { | |
273 color: $navbar-dark-color; | |
274 border-color: $navbar-dark-toggler-border-color; | |
275 } | |
276 | |
277 .navbar-toggler-icon { | |
278 background-image: $navbar-dark-toggler-icon-bg; | |
279 } | |
280 | |
281 .navbar-text { | |
282 color: $navbar-dark-color; | |
283 } | |
284 } |