215 lines
6.6 KiB
Sass
215 lines
6.6 KiB
Sass
$navbar-background-color-dark: $body-background-dark !default
|
|
$navbar-box-shadow-size: 0 2px 0 0 !default
|
|
$navbar-box-shadow-color-dark: $background-dark !default
|
|
|
|
$navbar-item-color-dark: $grey-light !default
|
|
$navbar-item-hover-color-dark: $link-dark !default
|
|
$navbar-item-hover-background-color-dark: $black-bis !default
|
|
$navbar-item-active-color-dark: $white !default
|
|
|
|
$navbar-burger-color-dark: $navbar-item-color-dark !default
|
|
|
|
$navbar-tab-hover-border-bottom-color-dark: $link-dark !default
|
|
$navbar-tab-active-color-dark: $link-dark !default
|
|
$navbar-tab-active-border-bottom-color-dark: $link-dark !default
|
|
|
|
$navbar-dropdown-background-color-dark: $black !default
|
|
$navbar-dropdown-border-top-dark: 2px solid $border-dark !default
|
|
$navbar-dropdown-arrow-dark: $link-dark !default
|
|
|
|
$navbar-dropdown-boxed-shadow-dark: 0 8px 8px rgba($white, 0.1), 0 0 0 1px rgba($white, 0.1) !default
|
|
|
|
$navbar-dropdown-item-hover-color-dark: $white !default
|
|
$navbar-dropdown-item-hover-background-color-dark: $background-dark !default
|
|
$navbar-dropdown-item-active-color-dark: $link-dark !default
|
|
$navbar-dropdown-item-active-background-color-dark: $background-dark !default
|
|
|
|
$navbar-divider-background-color-dark: $background-dark !default
|
|
|
|
$navbar-bottom-box-shadow-size: 0 -2px 0 0 !default
|
|
|
|
$navbar-breakpoint: $desktop !default
|
|
|
|
.navbar
|
|
background-color: $navbar-background-color-dark
|
|
@each $name, $pair in $colors
|
|
$color: darken(nth($pair, 1), 10%)
|
|
$color-invert: nth($pair, 2)
|
|
&.is-#{$name}
|
|
background-color: $color
|
|
color: $color-invert
|
|
.navbar-brand
|
|
& > .navbar-item,
|
|
.navbar-link
|
|
color: $color-invert
|
|
& > a.navbar-item,
|
|
.navbar-link
|
|
&:hover,
|
|
&.is-active
|
|
background-color: darken($color, 5%)
|
|
color: $color-invert
|
|
.navbar-link
|
|
&::after
|
|
border-color: $color-invert
|
|
.navbar-burger
|
|
color: $color-invert
|
|
+from($navbar-breakpoint)
|
|
.navbar-start,
|
|
.navbar-end
|
|
& > .navbar-item,
|
|
.navbar-link
|
|
color: $color-invert
|
|
& > a.navbar-item,
|
|
.navbar-link
|
|
&:hover,
|
|
&.is-active
|
|
background-color: darken($color, 5%)
|
|
color: $color-invert
|
|
.navbar-link
|
|
&::after
|
|
border-color: $color-invert
|
|
.navbar-item.has-dropdown:hover .navbar-link,
|
|
.navbar-item.has-dropdown.is-active .navbar-link
|
|
background-color: darken($color, 5%)
|
|
color: $color-invert
|
|
.navbar-dropdown
|
|
a.navbar-item
|
|
&.is-active
|
|
background-color: $color
|
|
color: $color-invert
|
|
// Colors Dark
|
|
@each $name, $pair in $colors
|
|
$color: nth($pair, 1)
|
|
$color-invert: nth($pair, 2)
|
|
&.is-#{$name}-dark
|
|
background-color: $color
|
|
color: $color-invert
|
|
.navbar-brand
|
|
& > .navbar-item,
|
|
.navbar-link
|
|
color: $color-invert
|
|
& > a.navbar-item,
|
|
.navbar-link
|
|
&:hover,
|
|
&.is-active
|
|
background-color: darken($color, 5%)
|
|
color: $color-invert
|
|
.navbar-link
|
|
&::after
|
|
border-color: $color-invert
|
|
.navbar-burger
|
|
color: $color-invert
|
|
+from($navbar-breakpoint)
|
|
.navbar-start,
|
|
.navbar-end
|
|
& > .navbar-item,
|
|
.navbar-link
|
|
color: $color-invert
|
|
& > a.navbar-item,
|
|
.navbar-link
|
|
&:hover,
|
|
&.is-active
|
|
background-color: darken($color, 5%)
|
|
color: $color-invert
|
|
.navbar-link
|
|
&::after
|
|
border-color: $color-invert
|
|
.navbar-item.has-dropdown:hover .navbar-link,
|
|
.navbar-item.has-dropdown.is-active .navbar-link
|
|
background-color: darken($color, 5%)
|
|
color: $color-invert
|
|
.navbar-dropdown
|
|
a.navbar-item
|
|
&.is-active
|
|
background-color: $color
|
|
color: $color-invert
|
|
&.has-shadow
|
|
box-shadow: $navbar-box-shadow-size $navbar-box-shadow-color-dark
|
|
&.is-fixed-bottom
|
|
&.has-shadow
|
|
box-shadow: $navbar-bottom-box-shadow-size $navbar-box-shadow-color-dark
|
|
|
|
.navbar-burger
|
|
color: $navbar-burger-color-dark
|
|
|
|
.navbar-item,
|
|
.navbar-link
|
|
color: $navbar-item-color-dark
|
|
|
|
a.navbar-item,
|
|
.navbar-link
|
|
&:hover,
|
|
&.is-active
|
|
background-color: $navbar-item-hover-background-color-dark
|
|
color: $navbar-item-hover-color-dark
|
|
|
|
.navbar-item
|
|
&:hover
|
|
border-bottom-color: $navbar-tab-hover-border-bottom-color-dark
|
|
&.is-active
|
|
border-bottom-color: $navbar-tab-active-border-bottom-color-dark
|
|
color: $navbar-tab-active-color-dark
|
|
|
|
.navbar-link:not(.is-arrowless)
|
|
&::after
|
|
border-color: $navbar-dropdown-arrow-dark
|
|
|
|
.navbar-divider
|
|
background-color: $navbar-divider-background-color-dark
|
|
|
|
+until($navbar-breakpoint)
|
|
.navbar-menu
|
|
background-color: $navbar-background-color-dark
|
|
box-shadow: 0 8px 16px rgba($white, 0.1)
|
|
// Fixed navbar
|
|
.navbar
|
|
&.is-fixed-bottom-touch
|
|
&.has-shadow
|
|
box-shadow: 0 -2px 3px rgba($white, 0.1)
|
|
|
|
+from($navbar-breakpoint)
|
|
.navbar
|
|
&.is-transparent
|
|
.navbar-dropdown
|
|
a.navbar-item
|
|
&:hover
|
|
background-color: $navbar-dropdown-item-hover-background-color-dark
|
|
color: $navbar-dropdown-item-hover-color-dark
|
|
&.is-active
|
|
background-color: $navbar-dropdown-item-active-background-color-dark
|
|
color: $navbar-dropdown-item-active-color-dark
|
|
.navbar-item
|
|
&.has-dropdown-up
|
|
.navbar-dropdown
|
|
border-bottom: $navbar-dropdown-border-top-dark
|
|
box-shadow: 0 -8px 8px rgba($white, 0.1)
|
|
.navbar-dropdown
|
|
background-color: $navbar-dropdown-background-color-dark
|
|
border-top: $navbar-dropdown-border-top-dark
|
|
box-shadow: 0 8px 8px rgba($white, 0.1)
|
|
a.navbar-item
|
|
&:hover
|
|
background-color: $navbar-dropdown-item-hover-background-color-dark
|
|
color: $navbar-dropdown-item-hover-color-dark
|
|
&.is-active
|
|
background-color: $navbar-dropdown-item-active-background-color-dark
|
|
color: $navbar-dropdown-item-active-color-dark
|
|
.navbar.is-spaced &,
|
|
&.is-boxed
|
|
box-shadow: $navbar-dropdown-boxed-shadow-dark
|
|
// Fixed navbar
|
|
.navbar
|
|
&.is-fixed-bottom-desktop
|
|
&.has-shadow
|
|
box-shadow: 0 -2px 3px rgba($white, 0.1)
|
|
// Hover/Active states
|
|
a.navbar-item,
|
|
.navbar-link
|
|
&.is-active
|
|
color: $navbar-item-active-color-dark
|
|
.navbar-item.has-dropdown
|
|
&:hover,
|
|
&.is-active
|
|
.navbar-link
|
|
background-color: $navbar-item-hover-background-color-dark
|