navbar.sass in jekyll-bulma-0.8

- old
+ new

@@ -1,49 +1,53 @@
-$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
 $navbar-padding-vertical: 1rem !default
 $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
 $navbar-tab-active-background-color: transparent !default
 $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
 $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
 
 $navbar-divider-background-color: $background !default
 $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
   right: 0
   z-index: $navbar-fixed-z
@@ -63,32 +67,37 @@
         & > .navbar-item,
         .navbar-link
           color: $color-invert
         & > a.navbar-item,
         .navbar-link
+          &:focus,
           &:hover,
           &.is-active
             background-color: darken($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,
           .navbar-link
             color: $color-invert
           & > a.navbar-item,
           .navbar-link
+            &:focus,
             &:hover,
             &.is-active
               background-color: darken($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%)
           color: $color-invert
         .navbar-dropdown
@@ -127,20 +136,22 @@
   flex-shrink: 0
   min-height: $navbar-height
 
 .navbar-brand
   a.navbar-item
+    &:focus,
     &:hover
       background-color: transparent
 
 .navbar-tabs
   +overflow-touch
   max-width: 100vw
   overflow-x: auto
   overflow-y: hidden
 
 .navbar-burger
+  color: $navbar-burger-color
   +hamburger($navbar-height)
   margin-left: auto
 
 .navbar-menu
   display: none
@@ -158,10 +169,12 @@
       margin-right: -0.25rem
 
 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
 
@@ -178,10 +191,11 @@
     flex-shrink: 1
   &.is-tab
     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
     &.is-active
       background-color: $navbar-tab-active-background-color
@@ -193,14 +207,15 @@
 
 .navbar-content
   flex-grow: 1
   flex-shrink: 1
 
-.navbar-link
+.navbar-link:not(.is-arrowless)
   padding-right: 2.5em
   &::after
-    +arrow($navbar-dropdown-arrow)
+    @extend %arrow
+    border-color: $navbar-dropdown-arrow
     margin-top: -0.375em
     right: 1.125em
 
 .navbar-dropdown
   font-size: 0.875rem
@@ -215,11 +230,11 @@
   border: none
   display: none
   height: $navbar-divider-height
   margin: 0.5rem 0
 
-+touch
++until($navbar-breakpoint)
   .navbar > .container
     display: block
   .navbar-brand,
   .navbar-tabs
     .navbar-item
@@ -228,11 +243,11 @@
   .navbar-link
     &::after
       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
   // Fixed navbar
   .navbar
@@ -240,11 +255,11 @@
     &.is-fixed-top-touch
       +navbar-fixed
     &.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,
     &.is-fixed-top-touch
       .navbar-menu
@@ -256,11 +271,11 @@
     &.has-navbar-fixed-top-touch
       padding-top: $navbar-height
     &.has-navbar-fixed-bottom-touch
       padding-bottom: $navbar-height
 
-+desktop
++from($navbar-breakpoint)
   .navbar,
   .navbar-menu,
   .navbar-start,
   .navbar-end
     align-items: stretch
@@ -276,20 +291,24 @@
       .navbar-link
         border-radius: $radius
     &.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
           &.is-active
             background-color: $navbar-dropdown-item-active-background-color
@@ -310,13 +329,15 @@
       .navbar-dropdown
         border-bottom: $navbar-dropdown-border-top
         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
         .navbar.is-spaced &,
         &.is-boxed
@@ -335,11 +356,11 @@
   .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 rgba($scheme-invert, 0.1)
     display: none
     font-size: 0.875rem
     left: 0
     min-width: 100%
     position: absolute
@@ -348,10 +369,11 @@
     .navbar-item
       padding: 0.375rem 1rem
       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
       &.is-active
         background-color: $navbar-dropdown-item-active-background-color
@@ -374,22 +396,22 @@
   .navbar-divider
     display: block
   .navbar > .container,
   .container > .navbar
     .navbar-brand
-      margin-left: -1rem
+      margin-left: -.75rem
     .navbar-menu
-      margin-right: -1rem
+      margin-right: -.75rem
   // Fixed navbar
   .navbar
     &.is-fixed-bottom-desktop,
     &.is-fixed-top-desktop
       +navbar-fixed
     &.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,
   body
     &.has-navbar-fixed-top-desktop
@@ -403,12 +425,19 @@
   // Hover/Active states
   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})