1 $navbar-background-color: $scheme-main !default
2 $navbar-box-shadow-size: 0 2px 0 0 !default
3 $navbar-box-shadow-color: $background !default
4 $navbar-height: 3.25rem !default
5 $navbar-padding-vertical: 1rem !default
6 $navbar-padding-horizontal: 2rem !default
8 $navbar-fixed-z: 30 !default
10 $navbar-item-color: $text !default
11 $navbar-item-hover-color: $link !default
12 $navbar-item-hover-background-color: $scheme-main-bis !default
13 $navbar-item-active-color: $scheme-invert !default
14 $navbar-item-active-background-color: transparent !default
15 $navbar-item-img-max-height: 1.75rem !default
17 $navbar-burger-color: $navbar-item-color !default
19 $navbar-tab-hover-background-color: transparent !default
20 $navbar-tab-hover-border-bottom-color: $link !default
21 $navbar-tab-active-color: $link !default
22 $navbar-tab-active-background-color: transparent !default
23 $navbar-tab-active-border-bottom-color: $link !default
24 $navbar-tab-active-border-bottom-style: solid !default
25 $navbar-tab-active-border-bottom-width: 3px !default
27 $navbar-dropdown-background-color: $scheme-main !default
28 $navbar-dropdown-border-top: 2px solid $border !default
29 $navbar-dropdown-offset: -4px !default
30 $navbar-dropdown-arrow: $link !default
31 $navbar-dropdown-radius: $radius-large !default
32 $navbar-dropdown-z: 20 !default
34 $navbar-dropdown-boxed-radius: $radius-large !default
35 $navbar-dropdown-boxed-shadow: 0 8px 8px rgba($scheme-invert, 0.1), 0 0 0 1px rgba($scheme-invert, 0.1) !default
37 $navbar-dropdown-item-hover-color: $scheme-invert !default
38 $navbar-dropdown-item-hover-background-color: $background !default
39 $navbar-dropdown-item-active-color: $link !default
40 $navbar-dropdown-item-active-background-color: $background !default
42 $navbar-divider-background-color: $background !default
43 $navbar-divider-height: 2px !default
45 $navbar-bottom-box-shadow-size: 0 -2px 0 0 !default
47 $navbar-breakpoint: $desktop !default
53 z-index: $navbar-fixed-z
56 background-color: $navbar-background-color
57 min-height: $navbar-height
60 @each $name, $pair in $colors
62 $color-invert: nth($pair, 2)
64 background-color: $color
75 background-color: darken($color, 5%)
79 border-color: $color-invert
82 +from($navbar-breakpoint)
93 background-color: darken($color, 5%)
97 border-color: $color-invert
98 .navbar-item.has-dropdown:focus .navbar-link,
99 .navbar-item.has-dropdown:hover .navbar-link,
100 .navbar-item.has-dropdown.is-active .navbar-link
101 background-color: darken($color, 5%)
106 background-color: $color
111 min-height: $navbar-height
114 box-shadow: $navbar-box-shadow-size $navbar-box-shadow-color
121 box-shadow: $navbar-bottom-box-shadow-size $navbar-box-shadow-color
127 &.has-navbar-fixed-top
128 padding-top: $navbar-height
129 &.has-navbar-fixed-bottom
130 padding-bottom: $navbar-height
137 min-height: $navbar-height
143 background-color: transparent
152 color: $navbar-burger-color
153 +hamburger($navbar-height)
161 color: $navbar-item-color
164 padding: 0.5rem 0.75rem
168 margin-left: -0.25rem
169 margin-right: -0.25rem
178 background-color: $navbar-item-hover-background-color
179 color: $navbar-item-hover-color
186 max-height: $navbar-item-img-max-height
193 border-bottom: 1px solid transparent
194 min-height: $navbar-height
195 padding-bottom: calc(0.5rem - 1px)
198 background-color: $navbar-tab-hover-background-color
199 border-bottom-color: $navbar-tab-hover-border-bottom-color
201 background-color: $navbar-tab-active-background-color
202 border-bottom-color: $navbar-tab-active-border-bottom-color
203 border-bottom-style: $navbar-tab-active-border-bottom-style
204 border-bottom-width: $navbar-tab-active-border-bottom-width
205 color: $navbar-tab-active-color
206 padding-bottom: calc(0.5rem - #{$navbar-tab-active-border-bottom-width})
212 .navbar-link:not(.is-arrowless)
216 border-color: $navbar-dropdown-arrow
222 padding-bottom: 0.5rem
226 padding-right: 1.5rem
229 background-color: $navbar-divider-background-color
232 height: $navbar-divider-height
235 +until($navbar-breakpoint)
247 background-color: $navbar-background-color
248 box-shadow: 0 8px 16px rgba($scheme-invert, 0.1)
254 &.is-fixed-bottom-touch,
257 &.is-fixed-bottom-touch
260 box-shadow: 0 -2px 3px rgba($scheme-invert, 0.1)
267 max-height: calc(100vh - #{$navbar-height})
271 &.has-navbar-fixed-top-touch
272 padding-top: $navbar-height
273 &.has-navbar-fixed-bottom-touch
274 padding-bottom: $navbar-height
276 +from($navbar-breakpoint)
284 min-height: $navbar-height
286 padding: $navbar-padding-vertical $navbar-padding-horizontal
292 border-radius: $radius
299 background-color: transparent !important
300 .navbar-item.has-dropdown
302 &.is-hoverable:focus,
303 &.is-hoverable:focus-within,
306 background-color: transparent !important
311 background-color: $navbar-dropdown-item-hover-background-color
312 color: $navbar-dropdown-item-hover-color
314 background-color: $navbar-dropdown-item-active-background-color
315 color: $navbar-dropdown-item-active-color
328 transform: rotate(135deg) translate(0.25em, -0.25em)
330 border-bottom: $navbar-dropdown-border-top
331 border-radius: $navbar-dropdown-radius $navbar-dropdown-radius 0 0
334 box-shadow: 0 -8px 8px rgba($scheme-invert, 0.1)
337 &.is-hoverable:focus,
338 &.is-hoverable:focus-within,
346 transform: translateY(0)
351 justify-content: flex-start
354 justify-content: flex-end
357 background-color: $navbar-dropdown-background-color
358 border-bottom-left-radius: $navbar-dropdown-radius
359 border-bottom-right-radius: $navbar-dropdown-radius
360 border-top: $navbar-dropdown-border-top
361 box-shadow: 0 8px 8px rgba($scheme-invert, 0.1)
368 z-index: $navbar-dropdown-z
370 padding: 0.375rem 1rem
376 background-color: $navbar-dropdown-item-hover-background-color
377 color: $navbar-dropdown-item-hover-color
379 background-color: $navbar-dropdown-item-active-background-color
380 color: $navbar-dropdown-item-active-color
383 border-radius: $navbar-dropdown-boxed-radius
385 box-shadow: $navbar-dropdown-boxed-shadow
389 top: calc(100% + (#{$navbar-dropdown-offset}))
390 transform: translateY(-5px)
391 transition-duration: $speed
392 transition-property: opacity, transform
398 .navbar > .container,
403 margin-right: -.75rem
406 &.is-fixed-bottom-desktop,
407 &.is-fixed-top-desktop
409 &.is-fixed-bottom-desktop
412 box-shadow: 0 -2px 3px rgba($scheme-invert, 0.1)
413 &.is-fixed-top-desktop
417 &.has-navbar-fixed-top-desktop
418 padding-top: $navbar-height
419 &.has-navbar-fixed-bottom-desktop
420 padding-bottom: $navbar-height
421 &.has-spaced-navbar-fixed-top
422 padding-top: $navbar-height + ($navbar-padding-vertical * 2)
423 &.has-spaced-navbar-fixed-bottom
424 padding-bottom: $navbar-height + ($navbar-padding-vertical * 2)
425 // Hover/Active states
429 color: $navbar-item-active-color
430 &.is-active:not(:focus):not(:hover)
431 background-color: $navbar-item-active-background-color
432 .navbar-item.has-dropdown
437 background-color: $navbar-item-hover-background-color
442 &.is-fullheight-with-navbar
443 min-height: calc(100vh - #{$navbar-height})