1 |
|
2 |
|
3 |
|
4 |
|
5 |
|
6 | .navbar {
|
7 |
|
8 | --#{$prefix}navbar-padding-x: #{if($navbar-padding-x == null, 0, $navbar-padding-x)};
|
9 | --#{$prefix}navbar-padding-y: #{$navbar-padding-y};
|
10 | --#{$prefix}navbar-color: #{$navbar-light-color};
|
11 | --#{$prefix}navbar-hover-color: #{$navbar-light-hover-color};
|
12 | --#{$prefix}navbar-disabled-color: #{$navbar-light-disabled-color};
|
13 | --#{$prefix}navbar-active-color: #{$navbar-light-active-color};
|
14 | --#{$prefix}navbar-brand-padding-y: #{$navbar-brand-padding-y};
|
15 | --#{$prefix}navbar-brand-margin-end: #{$navbar-brand-margin-end};
|
16 | --#{$prefix}navbar-brand-font-size: #{$navbar-brand-font-size};
|
17 | --#{$prefix}navbar-brand-color: #{$navbar-light-brand-color};
|
18 | --#{$prefix}navbar-brand-hover-color: #{$navbar-light-brand-hover-color};
|
19 | --#{$prefix}navbar-nav-link-padding-x: #{$navbar-nav-link-padding-x};
|
20 | --#{$prefix}navbar-toggler-padding-y: #{$navbar-toggler-padding-y};
|
21 | --#{$prefix}navbar-toggler-padding-x: #{$navbar-toggler-padding-x};
|
22 | --#{$prefix}navbar-toggler-font-size: #{$navbar-toggler-font-size};
|
23 | --#{$prefix}navbar-toggler-icon-bg: #{escape-svg($navbar-light-toggler-icon-bg)};
|
24 | --#{$prefix}navbar-toggler-border-color: #{$navbar-light-toggler-border-color};
|
25 | --#{$prefix}navbar-toggler-border-radius: #{$navbar-toggler-border-radius};
|
26 | --#{$prefix}navbar-toggler-focus-width: #{$navbar-toggler-focus-width};
|
27 | --#{$prefix}navbar-toggler-transition: #{$navbar-toggler-transition};
|
28 |
|
29 |
|
30 | position: relative;
|
31 | display: flex;
|
32 | flex-wrap: wrap;
|
33 | align-items: center;
|
34 | justify-content: space-between;
|
35 | padding: var(--#{$prefix}navbar-padding-y) var(--#{$prefix}navbar-padding-x);
|
36 | @include gradient-bg();
|
37 |
|
38 |
|
39 |
|
40 |
|
41 | %container-flex-properties {
|
42 | display: flex;
|
43 | flex-wrap: inherit;
|
44 | align-items: center;
|
45 | justify-content: space-between;
|
46 | }
|
47 |
|
48 | > .container,
|
49 | > .container-fluid {
|
50 | @extend %container-flex-properties;
|
51 | }
|
52 |
|
53 | @each $breakpoint, $container-max-width in $container-max-widths {
|
54 | > .container#{breakpoint-infix($breakpoint, $container-max-widths)} {
|
55 | @extend %container-flex-properties;
|
56 | }
|
57 | }
|
58 | }
|
59 |
|
60 |
|
61 |
|
62 |
|
63 |
|
64 |
|
65 | .navbar-brand {
|
66 | padding-top: var(--#{$prefix}navbar-brand-padding-y);
|
67 | padding-bottom: var(--#{$prefix}navbar-brand-padding-y);
|
68 | margin-right: var(--#{$prefix}navbar-brand-margin-end);
|
69 | @include font-size(var(--#{$prefix}navbar-brand-font-size));
|
70 | color: var(--#{$prefix}navbar-brand-color);
|
71 | text-decoration: if($link-decoration == none, null, none);
|
72 | white-space: nowrap;
|
73 |
|
74 | &:hover,
|
75 | &:focus {
|
76 | color: var(--#{$prefix}navbar-brand-hover-color);
|
77 | text-decoration: if($link-hover-decoration == underline, none, null);
|
78 | }
|
79 | }
|
80 |
|
81 |
|
82 |
|
83 |
|
84 |
|
85 |
|
86 | .navbar-nav {
|
87 |
|
88 | --#{$prefix}nav-link-padding-x: 0;
|
89 | --#{$prefix}nav-link-padding-y: #{$nav-link-padding-y};
|
90 | @include rfs($nav-link-font-size, --#{$prefix}nav-link-font-size);
|
91 | --#{$prefix}nav-link-font-weight: #{$nav-link-font-weight};
|
92 | --#{$prefix}nav-link-color: var(--#{$prefix}navbar-color);
|
93 | --#{$prefix}nav-link-hover-color: var(--#{$prefix}navbar-hover-color);
|
94 | --#{$prefix}nav-link-disabled-color: var(--#{$prefix}navbar-disabled-color);
|
95 |
|
96 |
|
97 | display: flex;
|
98 | flex-direction: column;
|
99 | padding-left: 0;
|
100 | margin-bottom: 0;
|
101 | list-style: none;
|
102 |
|
103 | .show > .nav-link,
|
104 | .nav-link.active {
|
105 | color: var(--#{$prefix}navbar-active-color);
|
106 | }
|
107 |
|
108 | .dropdown-menu {
|
109 | position: static;
|
110 | }
|
111 | }
|
112 |
|
113 |
|
114 |
|
115 |
|
116 |
|
117 |
|
118 | .navbar-text {
|
119 | padding-top: $nav-link-padding-y;
|
120 | padding-bottom: $nav-link-padding-y;
|
121 | color: var(--#{$prefix}navbar-color);
|
122 |
|
123 | a,
|
124 | a:hover,
|
125 | a:focus {
|
126 | color: var(--#{$prefix}navbar-active-color);
|
127 | }
|
128 | }
|
129 |
|
130 |
|
131 |
|
132 |
|
133 |
|
134 |
|
135 |
|
136 |
|
137 |
|
138 |
|
139 | .navbar-collapse {
|
140 | flex-basis: 100%;
|
141 | flex-grow: 1;
|
142 |
|
143 |
|
144 | align-items: center;
|
145 | }
|
146 |
|
147 |
|
148 | .navbar-toggler {
|
149 | padding: var(--#{$prefix}navbar-toggler-padding-y) var(--#{$prefix}navbar-toggler-padding-x);
|
150 | @include font-size(var(--#{$prefix}navbar-toggler-font-size));
|
151 | line-height: 1;
|
152 | color: var(--#{$prefix}navbar-color);
|
153 | background-color: transparent;
|
154 | border: var(--#{$prefix}border-width) solid var(--#{$prefix}navbar-toggler-border-color);
|
155 | @include border-radius(var(--#{$prefix}navbar-toggler-border-radius));
|
156 | @include transition(var(--#{$prefix}navbar-toggler-transition));
|
157 |
|
158 | &:hover {
|
159 | text-decoration: none;
|
160 | }
|
161 |
|
162 | &:focus {
|
163 | text-decoration: none;
|
164 | outline: 0;
|
165 | box-shadow: 0 0 0 var(--#{$prefix}navbar-toggler-focus-width);
|
166 | }
|
167 | }
|
168 |
|
169 |
|
170 |
|
171 | .navbar-toggler-icon {
|
172 | display: inline-block;
|
173 | width: 1.5em;
|
174 | height: 1.5em;
|
175 | vertical-align: middle;
|
176 | background-image: var(--#{$prefix}navbar-toggler-icon-bg);
|
177 | background-repeat: no-repeat;
|
178 | background-position: center;
|
179 | background-size: 100%;
|
180 | }
|
181 |
|
182 | .navbar-nav-scroll {
|
183 | max-height: var(--#{$prefix}scroll-height, 75vh);
|
184 | overflow-y: auto;
|
185 | }
|
186 |
|
187 |
|
188 |
|
189 |
|
190 | .navbar-expand {
|
191 | @each $breakpoint in map-keys($grid-breakpoints) {
|
192 | $next: breakpoint-next($breakpoint, $grid-breakpoints);
|
193 | $infix: breakpoint-infix($next, $grid-breakpoints);
|
194 |
|
195 |
|
196 | &#{$infix} {
|
197 | @include media-breakpoint-up($next) {
|
198 | flex-wrap: nowrap;
|
199 | justify-content: flex-start;
|
200 |
|
201 | .navbar-nav {
|
202 | flex-direction: row;
|
203 |
|
204 | .dropdown-menu {
|
205 | position: absolute;
|
206 | }
|
207 |
|
208 | .nav-link {
|
209 | padding-right: var(--#{$prefix}navbar-nav-link-padding-x);
|
210 | padding-left: var(--#{$prefix}navbar-nav-link-padding-x);
|
211 | }
|
212 | }
|
213 |
|
214 | .navbar-nav-scroll {
|
215 | overflow: visible;
|
216 | }
|
217 |
|
218 | .navbar-collapse {
|
219 | display: flex !important;
|
220 | flex-basis: auto;
|
221 | }
|
222 |
|
223 | .navbar-toggler {
|
224 | display: none;
|
225 | }
|
226 |
|
227 | .offcanvas {
|
228 |
|
229 | position: static;
|
230 | z-index: auto;
|
231 | flex-grow: 1;
|
232 | width: auto !important;
|
233 | height: auto !important;
|
234 | visibility: visible !important;
|
235 | background-color: transparent !important;
|
236 | border: 0 !important;
|
237 | transform: none !important;
|
238 | @include box-shadow(none);
|
239 | @include transition(none);
|
240 |
|
241 |
|
242 | .offcanvas-header {
|
243 | display: none;
|
244 | }
|
245 |
|
246 | .offcanvas-body {
|
247 | display: flex;
|
248 | flex-grow: 0;
|
249 | padding: 0;
|
250 | overflow-y: visible;
|
251 | }
|
252 | }
|
253 | }
|
254 | }
|
255 | }
|
256 | }
|
257 |
|
258 |
|
259 |
|
260 |
|
261 |
|
262 |
|
263 | .navbar-light {
|
264 | @include deprecate("`.navbar-light`", "v5.2.0", "v6.0.0", true);
|
265 | }
|
266 |
|
267 | .navbar-dark {
|
268 | --#{$prefix}navbar-color: #{$navbar-dark-color};
|
269 | --#{$prefix}navbar-hover-color: #{$navbar-dark-hover-color};
|
270 | --#{$prefix}navbar-disabled-color: #{$navbar-dark-disabled-color};
|
271 | --#{$prefix}navbar-active-color: #{$navbar-dark-active-color};
|
272 | --#{$prefix}navbar-brand-color: #{$navbar-dark-brand-color};
|
273 | --#{$prefix}navbar-brand-hover-color: #{$navbar-dark-brand-hover-color};
|
274 | --#{$prefix}navbar-toggler-border-color: #{$navbar-dark-toggler-border-color};
|
275 | --#{$prefix}navbar-toggler-icon-bg: #{escape-svg($navbar-dark-toggler-icon-bg)};
|
276 | }
|