diff options
Diffstat (limited to 'assets/vendor/bulma/sass/components/navbar.sass')
| -rw-r--r-- | assets/vendor/bulma/sass/components/navbar.sass | 91 |
1 files changed, 59 insertions, 32 deletions
diff --git a/assets/vendor/bulma/sass/components/navbar.sass b/assets/vendor/bulma/sass/components/navbar.sass index 5412c75..a34718e 100644 --- a/assets/vendor/bulma/sass/components/navbar.sass +++ b/assets/vendor/bulma/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,13 +7,15 @@ $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 +$navbar-burger-color: $navbar-item-color !default + $navbar-tab-hover-background-color: transparent !default $navbar-tab-hover-border-bottom-color: $link !default $navbar-tab-active-color: $link !default @@ -22,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 @@ -30,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 bulmaRgba($scheme-invert, 0.1), 0 0 0 1px bulmaRgba($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 @@ -42,6 +44,8 @@ $navbar-divider-height: 2px !default $navbar-bottom-box-shadow-size: 0 -2px 0 0 !default +$navbar-breakpoint: $desktop !default + =navbar-fixed left: 0 position: fixed @@ -65,14 +69,17 @@ $navbar-bottom-box-shadow-size: 0 -2px 0 0 !default color: $color-invert & > a.navbar-item, .navbar-link + &:focus, &:hover, &.is-active - background-color: darken($color, 5%) + background-color: bulmaDarken($color, 5%) color: $color-invert .navbar-link &::after border-color: $color-invert - +desktop + .navbar-burger + color: $color-invert + +from($navbar-breakpoint) .navbar-start, .navbar-end & > .navbar-item, @@ -80,16 +87,18 @@ $navbar-bottom-box-shadow-size: 0 -2px 0 0 !default color: $color-invert & > a.navbar-item, .navbar-link + &:focus, &:hover, &.is-active - background-color: darken($color, 5%) + background-color: bulmaDarken($color, 5%) color: $color-invert .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%) + background-color: bulmaDarken($color, 5%) color: $color-invert .navbar-dropdown a.navbar-item @@ -129,6 +138,7 @@ body .navbar-brand a.navbar-item + &:focus, &:hover background-color: transparent @@ -139,8 +149,9 @@ body overflow-y: hidden .navbar-burger + color: $navbar-burger-color +hamburger($navbar-height) - margin-left: auto + +ltr-property("margin", auto, false) .navbar-menu display: none @@ -160,13 +171,14 @@ body a.navbar-item, .navbar-link cursor: pointer + &:focus, + &:focus-within, &:hover, &.is-active background-color: $navbar-item-hover-background-color color: $navbar-item-hover-color .navbar-item - display: block flex-grow: 0 flex-shrink: 0 img @@ -180,6 +192,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 @@ -195,12 +208,13 @@ a.navbar-item, flex-grow: 1 flex-shrink: 1 -.navbar-link - padding-right: 2.5em +.navbar-link:not(.is-arrowless) + +ltr-property("padding", 2.5em) &::after - +arrow($navbar-dropdown-arrow) + @extend %arrow + border-color: $navbar-dropdown-arrow margin-top: -0.375em - right: 1.125em + +ltr-position(1.125em) .navbar-dropdown font-size: 0.875rem @@ -217,7 +231,7 @@ a.navbar-item, height: $navbar-divider-height margin: 0.5rem 0 -+touch ++until($navbar-breakpoint) .navbar > .container display: block .navbar-brand, @@ -230,7 +244,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 bulmaRgba($scheme-invert, 0.1) padding: 0.5rem 0 &.is-active display: block @@ -242,7 +256,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 bulmaRgba($scheme-invert, 0.1) &.is-fixed-top-touch top: 0 &.is-fixed-top, @@ -258,7 +272,7 @@ a.navbar-item, &.has-navbar-fixed-bottom-touch padding-bottom: $navbar-height -+desktop ++from($navbar-breakpoint) .navbar, .navbar-menu, .navbar-start, @@ -278,16 +292,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 @@ -301,7 +319,6 @@ a.navbar-item, align-items: center display: flex .navbar-item - display: flex &.has-dropdown align-items: stretch &.has-dropdown-up @@ -312,9 +329,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 bulmaRgba($scheme-invert, 0.1) top: auto &.is-active, + &.is-hoverable:focus, + &.is-hoverable:focus-within, &.is-hoverable:hover .navbar-dropdown display: block @@ -328,19 +347,19 @@ a.navbar-item, flex-shrink: 0 .navbar-start justify-content: flex-start - margin-right: auto + +ltr-property("margin", auto) .navbar-end justify-content: flex-end - margin-left: auto + +ltr-property("margin", auto, false) .navbar-dropdown background-color: $navbar-dropdown-background-color 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 bulmaRgba($scheme-invert, 0.1) display: none font-size: 0.875rem - left: 0 + +ltr-position(0, false) min-width: 100% position: absolute top: 100% @@ -349,7 +368,8 @@ a.navbar-item, padding: 0.375rem 1rem white-space: nowrap a.navbar-item - padding-right: 3rem + +ltr-property("padding", 3rem) + &:focus, &:hover background-color: $navbar-dropdown-item-hover-background-color color: $navbar-dropdown-item-hover-color @@ -376,9 +396,9 @@ a.navbar-item, .navbar > .container, .container > .navbar .navbar-brand - margin-left: -1rem + +ltr-property("margin", -.75rem, false) .navbar-menu - margin-right: -1rem + +ltr-property("margin", -.75rem) // Fixed navbar .navbar &.is-fixed-bottom-desktop, @@ -387,7 +407,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 bulmaRgba($scheme-invert, 0.1) &.is-fixed-top-desktop top: 0 html, @@ -405,10 +425,17 @@ 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 background-color: $navbar-item-hover-background-color + +// Combination + +.hero + &.is-fullheight-with-navbar + min-height: calc(100vh - #{$navbar-height}) |