diff options
Diffstat (limited to 'public/css/_sass/components/navbar.sass')
| -rw-r--r-- | public/css/_sass/components/navbar.sass | 41 |
1 files changed, 28 insertions, 13 deletions
diff --git a/public/css/_sass/components/navbar.sass b/public/css/_sass/components/navbar.sass index dc90dd9..664558f 100644 --- a/public/css/_sass/components/navbar.sass +++ b/public/css/_sass/components/navbar.sass @@ -1,4 +1,4 @@ -$navbar-background-color: $white !default +$navbar-background-color: $scheme-main !default $navbar-box-shadow-size: 0 2px 0 0 !default $navbar-box-shadow-color: $background !default $navbar-height: 3.25rem !default @@ -7,10 +7,10 @@ $navbar-padding-horizontal: 2rem !default $navbar-z: 30 !default $navbar-fixed-z: 30 !default -$navbar-item-color: $grey-dark !default +$navbar-item-color: $text !default $navbar-item-hover-color: $link !default -$navbar-item-hover-background-color: $white-bis !default -$navbar-item-active-color: $black !default +$navbar-item-hover-background-color: $scheme-main-bis !default +$navbar-item-active-color: $scheme-invert !default $navbar-item-active-background-color: transparent !default $navbar-item-img-max-height: 1.75rem !default @@ -24,7 +24,7 @@ $navbar-tab-active-border-bottom-color: $link !default $navbar-tab-active-border-bottom-style: solid !default $navbar-tab-active-border-bottom-width: 3px !default -$navbar-dropdown-background-color: $white !default +$navbar-dropdown-background-color: $scheme-main !default $navbar-dropdown-border-top: 2px solid $border !default $navbar-dropdown-offset: -4px !default $navbar-dropdown-arrow: $link !default @@ -32,9 +32,9 @@ $navbar-dropdown-radius: $radius-large !default $navbar-dropdown-z: 20 !default $navbar-dropdown-boxed-radius: $radius-large !default -$navbar-dropdown-boxed-shadow: 0 8px 8px rgba($black, 0.1), 0 0 0 1px rgba($black, 0.1) !default +$navbar-dropdown-boxed-shadow: 0 8px 8px rgba($scheme-invert, 0.1), 0 0 0 1px rgba($scheme-invert, 0.1) !default -$navbar-dropdown-item-hover-color: $black !default +$navbar-dropdown-item-hover-color: $scheme-invert !default $navbar-dropdown-item-hover-background-color: $background !default $navbar-dropdown-item-active-color: $link !default $navbar-dropdown-item-active-background-color: $background !default @@ -69,6 +69,7 @@ $navbar-breakpoint: $desktop !default color: $color-invert & > a.navbar-item, .navbar-link + &:focus, &:hover, &.is-active background-color: darken($color, 5%) @@ -86,6 +87,7 @@ $navbar-breakpoint: $desktop !default color: $color-invert & > a.navbar-item, .navbar-link + &:focus, &:hover, &.is-active background-color: darken($color, 5%) @@ -93,6 +95,7 @@ $navbar-breakpoint: $desktop !default .navbar-link &::after border-color: $color-invert + .navbar-item.has-dropdown:focus .navbar-link, .navbar-item.has-dropdown:hover .navbar-link, .navbar-item.has-dropdown.is-active .navbar-link background-color: darken($color, 5%) @@ -135,6 +138,7 @@ body .navbar-brand a.navbar-item + &:focus, &:hover background-color: transparent @@ -167,6 +171,8 @@ body a.navbar-item, .navbar-link cursor: pointer + &:focus, + &:focus-within, &:hover, &.is-active background-color: $navbar-item-hover-background-color @@ -187,6 +193,7 @@ a.navbar-item, border-bottom: 1px solid transparent min-height: $navbar-height padding-bottom: calc(0.5rem - 1px) + &:focus, &:hover background-color: $navbar-tab-hover-background-color border-bottom-color: $navbar-tab-hover-border-bottom-color @@ -238,7 +245,7 @@ a.navbar-item, display: none .navbar-menu background-color: $navbar-background-color - box-shadow: 0 8px 16px rgba($black, 0.1) + box-shadow: 0 8px 16px rgba($scheme-invert, 0.1) padding: 0.5rem 0 &.is-active display: block @@ -250,7 +257,7 @@ a.navbar-item, &.is-fixed-bottom-touch bottom: 0 &.has-shadow - box-shadow: 0 -2px 3px rgba($black, 0.1) + box-shadow: 0 -2px 3px rgba($scheme-invert, 0.1) &.is-fixed-top-touch top: 0 &.is-fixed-top, @@ -286,16 +293,20 @@ a.navbar-item, &.is-transparent a.navbar-item, .navbar-link + &:focus, &:hover, &.is-active background-color: transparent !important .navbar-item.has-dropdown &.is-active, + &.is-hoverable:focus, + &.is-hoverable:focus-within, &.is-hoverable:hover .navbar-link background-color: transparent !important .navbar-dropdown a.navbar-item + &:focus, &:hover background-color: $navbar-dropdown-item-hover-background-color color: $navbar-dropdown-item-hover-color @@ -320,9 +331,11 @@ a.navbar-item, border-radius: $navbar-dropdown-radius $navbar-dropdown-radius 0 0 border-top: none bottom: 100% - box-shadow: 0 -8px 8px rgba($black, 0.1) + box-shadow: 0 -8px 8px rgba($scheme-invert, 0.1) top: auto &.is-active, + &.is-hoverable:focus, + &.is-hoverable:focus-within, &.is-hoverable:hover .navbar-dropdown display: block @@ -345,7 +358,7 @@ a.navbar-item, border-bottom-left-radius: $navbar-dropdown-radius border-bottom-right-radius: $navbar-dropdown-radius border-top: $navbar-dropdown-border-top - box-shadow: 0 8px 8px rgba($black, 0.1) + box-shadow: 0 8px 8px rgba($scheme-invert, 0.1) display: none font-size: 0.875rem left: 0 @@ -358,6 +371,7 @@ a.navbar-item, white-space: nowrap a.navbar-item padding-right: 3rem + &:focus, &:hover background-color: $navbar-dropdown-item-hover-background-color color: $navbar-dropdown-item-hover-color @@ -395,7 +409,7 @@ a.navbar-item, &.is-fixed-bottom-desktop bottom: 0 &.has-shadow - box-shadow: 0 -2px 3px rgba($black, 0.1) + box-shadow: 0 -2px 3px rgba($scheme-invert, 0.1) &.is-fixed-top-desktop top: 0 html, @@ -413,9 +427,10 @@ a.navbar-item, .navbar-link &.is-active color: $navbar-item-active-color - &.is-active:not(:hover) + &.is-active:not(:focus):not(:hover) background-color: $navbar-item-active-background-color .navbar-item.has-dropdown + &:focus, &:hover, &.is-active .navbar-link |