make focus behave like hover for the navigation. Using :focus-within for dropdown...

diff --git a/sass/components/navbar.sass b/sass/components/navbar.sass
index dc90dd9d3cee26f886cf2a3c339cddcba81d11a5..7b97edb2fc4b4ee4035c5dd00a6dcbad6a37eea3 100644 (file)
--- a/sass/components/navbar.sass
+++ b/sass/components/navbar.sass
@@ -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
@@ -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
@@ -323,6 +334,8 @@ a.navbar-item,
         box-shadow: 0 -8px 8px rgba($black, 0.1)
         top: auto
     &.is-active,
+    &.is-hoverable:focus,
+    &.is-hoverable:focus-within,
     &.is-hoverable:hover
       .navbar-dropdown
         display: block
@@ -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
@@ -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