bulma-rails 0.7.4 → 0.9.1

data/app/assets/stylesheets/sass/components/_all.sass

@@ -1,10 +1,10 @@
+/* Bulma Components */
 @charset "utf-8"
 
 @import "breadcrumb.sass"
 @import "card.sass"
 @import "dropdown.sass"
 @import "level.sass"
-@import "list.sass"
 @import "media.sass"
 @import "menu.sass"
 @import "message.sass"

data/app/assets/stylesheets/sass/components/breadcrumb.sass

@@ -5,7 +5,7 @@ $breadcrumb-item-active-color: $text-strong !default
 $breadcrumb-item-padding-vertical: 0 !default
 $breadcrumb-item-padding-horizontal: 0.75em !default
 
-$breadcrumb-item-separator-color: $grey-light !default
+$breadcrumb-item-separator-color: $border-hover !default
 
 .breadcrumb
   @extend %block
@@ -24,7 +24,7 @@ $breadcrumb-item-separator-color: $grey-light !default
     align-items: center
     display: flex
     &:first-child a
-      padding-left: 0
+      +ltr-property("padding", 0, false)
     &.is-active
       a
         color: $breadcrumb-item-active-color
@@ -41,9 +41,9 @@ $breadcrumb-item-separator-color: $grey-light !default
     justify-content: flex-start
   .icon
     &:first-child
-      margin-right: 0.5em
+      +ltr-property("margin", 0.5em)
     &:last-child
-      margin-left: 0.5em
+      +ltr-property("margin", 0.5em, false)
   // Alignment
   &.is-centered
     ol,

data/app/assets/stylesheets/sass/components/card.sass

@@ -1,22 +1,31 @@
 $card-color: $text !default
-$card-background-color: $white !default
-$card-shadow: 0 2px 3px rgba($black, 0.1), 0 0 0 1px rgba($black, 0.1) !default
+$card-background-color: $scheme-main !default
+$card-shadow: 0 0.5em 1em -0.125em rgba($scheme-invert, 0.1), 0 0px 0 1px rgba($scheme-invert, 0.02) !default
+$card-radius: 0.25rem !default
+$card-overflow: hidden !default
 
 $card-header-background-color: transparent !default
 $card-header-color: $text-strong !default
-$card-header-shadow: 0 1px 2px rgba($black, 0.1) !default
+$card-header-padding: 0.75rem 1rem !default
+$card-header-shadow: 0 0.125em 0.25em rgba($scheme-invert, 0.1) !default
 $card-header-weight: $weight-bold !default
 
 $card-content-background-color: transparent !default
+$card-content-padding: 1.5rem !default
 
 $card-footer-background-color: transparent !default
-$card-footer-border-top: 1px solid $border !default
+$card-footer-border-top: 1px solid $border-light !default
+$card-footer-padding: 0.75rem !default
+
+$card-media-margin: $block-spacing !default
 
 .card
   background-color: $card-background-color
+  border-radius: $card-radius
   box-shadow: $card-shadow
   color: $card-color
   max-width: 100%
+  overflow: $card-overflow
   position: relative
 
 .card-header
@@ -31,7 +40,7 @@ $card-footer-border-top: 1px solid $border !default
   display: flex
   flex-grow: 1
   font-weight: $card-header-weight
-  padding: 0.75rem
+  padding: $card-header-padding
   &.is-centered
     justify-content: center
 
@@ -40,7 +49,7 @@ $card-footer-border-top: 1px solid $border !default
   cursor: pointer
   display: flex
   justify-content: center
-  padding: 0.75rem
+  padding: $card-header-padding
 
 .card-image
   display: block
@@ -48,7 +57,7 @@ $card-footer-border-top: 1px solid $border !default
 
 .card-content
   background-color: $card-content-background-color
-  padding: 1.5rem
+  padding: $card-content-padding
 
 .card-footer
   background-color: $card-footer-background-color
@@ -63,12 +72,12 @@ $card-footer-border-top: 1px solid $border !default
   flex-grow: 1
   flex-shrink: 0
   justify-content: center
-  padding: 0.75rem
+  padding: $card-footer-padding
   &:not(:last-child)
-    border-right: $card-footer-border-top
+    +ltr-property("border", $card-footer-border-top)
 
 // Combinations
 
 .card
   .media:not(:last-child)
-    margin-bottom: 0.75rem
+    margin-bottom: $card-media-margin

data/app/assets/stylesheets/sass/components/dropdown.sass

@@ -1,17 +1,21 @@
-$dropdown-content-background-color: $white !default
+$dropdown-menu-min-width: 12rem !default
+
+$dropdown-content-background-color: $scheme-main !default
 $dropdown-content-arrow: $link !default
 $dropdown-content-offset: 4px !default
+$dropdown-content-padding-bottom: 0.5rem !default
+$dropdown-content-padding-top: 0.5rem !default
 $dropdown-content-radius: $radius !default
-$dropdown-content-shadow: 0 2px 3px rgba($black, 0.1), 0 0 0 1px rgba($black, 0.1) !default
+$dropdown-content-shadow: 0 0.5em 1em -0.125em rgba($scheme-invert, 0.1), 0 0px 0 1px rgba($scheme-invert, 0.02) !default
 $dropdown-content-z: 20 !default
 
-$dropdown-item-color: $grey-dark !default
-$dropdown-item-hover-color: $black !default
+$dropdown-item-color: $text !default
+$dropdown-item-hover-color: $scheme-invert !default
 $dropdown-item-hover-background-color: $background !default
 $dropdown-item-active-color: $link-invert !default
 $dropdown-item-active-background-color: $link !default
 
-$dropdown-divider-background-color: $border !default
+$dropdown-divider-background-color: $border-light !default
 
 .dropdown
   display: inline-flex
@@ -34,8 +38,8 @@ $dropdown-divider-background-color: $border !default
 
 .dropdown-menu
   display: none
-  left: 0
-  min-width: 12rem
+  +ltr-position(0, false)
+  min-width: $dropdown-menu-min-width
   padding-top: $dropdown-content-offset
   position: absolute
   top: 100%
@@ -45,8 +49,8 @@ $dropdown-divider-background-color: $border !default
   background-color: $dropdown-content-background-color
   border-radius: $dropdown-content-radius
   box-shadow: $dropdown-content-shadow
-  padding-bottom: 0.5rem
-  padding-top: 0.5rem
+  padding-bottom: $dropdown-content-padding-bottom
+  padding-top: $dropdown-content-padding-top
 
 .dropdown-item
   color: $dropdown-item-color
@@ -58,8 +62,8 @@ $dropdown-divider-background-color: $border !default
 
 a.dropdown-item,
 button.dropdown-item
-  padding-right: 3rem
-  text-align: left
+  +ltr-property("padding", 3rem)
+  text-align: inherit
   white-space: nowrap
   width: 100%
   &:hover

data/app/assets/stylesheets/sass/components/level.sass

@@ -1,3 +1,5 @@
+$level-item-spacing: ($block-spacing / 2) !default
+
 .level
   @extend %block
   align-items: center
@@ -18,7 +20,7 @@
     .level-item
       &:not(:last-child)
         margin-bottom: 0
-        margin-right: 0.75rem
+        +ltr-property("margin", $level-item-spacing)
       &:not(.is-narrow)
         flex-grow: 1
   // Responsiveness
@@ -41,7 +43,7 @@
   // Responsiveness
   +mobile
     &:not(:last-child)
-      margin-bottom: 0.75rem
+      margin-bottom: $level-item-spacing
 
 .level-left,
 .level-right
@@ -55,7 +57,7 @@
     // Responsiveness
     +tablet
       &:not(:last-child)
-        margin-right: 0.75rem
+        +ltr-property("margin", $level-item-spacing)
 
 .level-left
   align-items: center

data/app/assets/stylesheets/sass/components/media.sass

@@ -1,11 +1,15 @@
+$media-border-color: bulmaRgba($border, 0.5) !default
+$media-spacing: 1rem
+$media-spacing-large: 1.5rem
+
 .media
   align-items: flex-start
   display: flex
-  text-align: left
+  text-align: inherit
   .content:not(:last-child)
     margin-bottom: 0.75rem
   .media
-    border-top: 1px solid rgba($border, 0.5)
+    border-top: 1px solid $media-border-color
     display: flex
     padding-top: 0.75rem
     .content:not(:last-child),
@@ -16,14 +20,14 @@
       & + .media
         margin-top: 0.5rem
   & + .media
-    border-top: 1px solid rgba($border, 0.5)
-    margin-top: 1rem
-    padding-top: 1rem
+    border-top: 1px solid $media-border-color
+    margin-top: $media-spacing
+    padding-top: $media-spacing
   // Sizes
   &.is-large
     & + .media
-      margin-top: 1.5rem
-      padding-top: 1.5rem
+      margin-top: $media-spacing-large
+      padding-top: $media-spacing-large
 
 .media-left,
 .media-right
@@ -32,16 +36,16 @@
   flex-shrink: 0
 
 .media-left
-  margin-right: 1rem
+  +ltr-property("margin", $media-spacing)
 
 .media-right
-  margin-left: 1rem
+  +ltr-property("margin", $media-spacing, false)
 
 .media-content
   flex-basis: auto
   flex-grow: 1
   flex-shrink: 1
-  text-align: left
+  text-align: inherit
 
 +mobile
   .media-content

data/app/assets/stylesheets/sass/components/menu.sass

@@ -6,8 +6,15 @@ $menu-item-active-color: $link-invert !default
 $menu-item-active-background-color: $link !default
 
 $menu-list-border-left: 1px solid $border !default
+$menu-list-line-height: 1.25 !default
+$menu-list-link-padding: 0.5em 0.75em !default
+$menu-nested-list-margin: 0.75em !default
+$menu-nested-list-padding-left: 0.75em !default
 
 $menu-label-color: $text-light !default
+$menu-label-font-size: 0.75em !default
+$menu-label-letter-spacing: 0.1em !default
+$menu-label-spacing: 1em !default
 
 .menu
   font-size: $size-normal
@@ -20,12 +27,12 @@ $menu-label-color: $text-light !default
     font-size: $size-large
 
 .menu-list
-  line-height: 1.25
+  line-height: $menu-list-line-height
   a
     border-radius: $menu-item-radius
     color: $menu-item-color
     display: block
-    padding: 0.5em 0.75em
+    padding: $menu-list-link-padding
     &:hover
       background-color: $menu-item-hover-background-color
       color: $menu-item-hover-color
@@ -35,16 +42,16 @@ $menu-label-color: $text-light !default
       color: $menu-item-active-color
   li
     ul
-      border-left: $menu-list-border-left
-      margin: 0.75em
-      padding-left: 0.75em
+      +ltr-property("border", $menu-list-border-left, false)
+      margin: $menu-nested-list-margin
+      +ltr-property("padding", $menu-nested-list-padding-left, false)
 
 .menu-label
   color: $menu-label-color
-  font-size: 0.75em
-  letter-spacing: 0.1em
+  font-size: $menu-label-font-size
+  letter-spacing: $menu-label-letter-spacing
   text-transform: uppercase
   &:not(:first-child)
-    margin-top: 1em
+    margin-top: $menu-label-spacing
   &:not(:last-child)
-    margin-bottom: 1em
+    margin-bottom: $menu-label-spacing

data/app/assets/stylesheets/sass/components/message.sass

@@ -13,10 +13,11 @@ $message-body-color: $text !default
 $message-body-padding: 1.25em 1.5em !default
 $message-body-radius: $radius !default
 
-$message-body-pre-background-color: $white !default
+$message-body-pre-background-color: $scheme-main !default
 $message-body-pre-code-background-color: transparent !default
 
 $message-header-body-border-width: 0 !default
+$message-colors: $colors !default
 
 .message
   @extend %block
@@ -36,21 +37,33 @@ $message-header-body-border-width: 0 !default
   &.is-large
     font-size: $size-large
   // Colors
-  @each $name, $pair in $colors
-    $color: nth($pair, 1)
-    $color-invert: nth($pair, 2)
-    $color-lightning: max((100% - lightness($color)) - 2%, 0%)
-    $color-luminance: colorLuminance($color)
-    $darken-percentage: $color-luminance * 70%
-    $desaturate-percentage: $color-luminance * 30%
+  @each $name, $components in $message-colors
+    $color: nth($components, 1)
+    $color-invert: nth($components, 2)
+    $color-light: null
+    $color-dark: null
+
+    @if length($components) >= 3
+      $color-light: nth($components, 3)
+      @if length($components) >= 4
+        $color-dark: nth($components, 4)
+      @else
+        $color-luminance: colorLuminance($color)
+        $darken-percentage: $color-luminance * 70%
+        $desaturate-percentage: $color-luminance * 30%
+        $color-dark: desaturate(darken($color, $darken-percentage), $desaturate-percentage)
+    @else
+      $color-lightning: max((100% - lightness($color)) - 2%, 0%)
+      $color-light: lighten($color, $color-lightning)
+
     &.is-#{$name}
-      background-color: lighten($color, $color-lightning)
+      background-color: $color-light
       .message-header
         background-color: $color
         color: $color-invert
       .message-body
         border-color: $color
-        color: desaturate(darken($color, $darken-percentage), $desaturate-percentage)
+        color: $color-dark
 
 .message-header
   align-items: center
@@ -66,7 +79,7 @@ $message-header-body-border-width: 0 !default
   .delete
     flex-grow: 0
     flex-shrink: 0
-    margin-left: 0.75em
+    +ltr-property("margin", 0.75em, false)
   & + .message-body
     border-width: $message-header-body-border-width
     border-top-left-radius: 0

data/app/assets/stylesheets/sass/components/modal.sass

@@ -1,6 +1,6 @@
 $modal-z: 40 !default
 
-$modal-background-background-color: rgba($black, 0.86) !default
+$modal-background-background-color: bulmaRgba($scheme-invert, 0.86) !default
 
 $modal-content-width: 640px !default
 $modal-content-margin-mobile: 20px !default
@@ -25,9 +25,11 @@ $modal-card-title-size: $size-4 !default
 $modal-card-foot-radius: $radius-large !default
 $modal-card-foot-border-top: 1px solid $border !default
 
-$modal-card-body-background-color: $white !default
+$modal-card-body-background-color: $scheme-main !default
 $modal-card-body-padding: 20px !default
 
+$modal-breakpoint: $tablet !default
+
 .modal
   @extend %overlay
   align-items: center
@@ -53,7 +55,7 @@ $modal-card-body-padding: 20px !default
   position: relative
   width: 100%
   // Responsiveness
-  +tablet
+  +from($modal-breakpoint)
     margin: 0 auto
     max-height: calc(100vh - #{$modal-content-spacing-tablet})
     width: $modal-content-width
@@ -63,7 +65,7 @@ $modal-card-body-padding: 20px !default
   background: none
   height: $modal-close-dimensions
   position: fixed
-  right: $modal-close-right
+  +ltr-position($modal-close-right)
   top: $modal-close-top
   width: $modal-close-dimensions
 
@@ -102,7 +104,7 @@ $modal-card-body-padding: 20px !default
   border-top: $modal-card-foot-border-top
   .button
     &:not(:last-child)
-      margin-right: 10px
+      +ltr-property("margin", 0.5em)
 
 .modal-card-body
   +overflow-touch

data/app/assets/stylesheets/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 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
@@ -46,6 +46,8 @@ $navbar-bottom-box-shadow-size: 0 -2px 0 0 !default
 
 $navbar-breakpoint: $desktop !default
 
+$navbar-colors: $colors !default
+
 =navbar-fixed
   left: 0
   position: fixed
@@ -57,7 +59,7 @@ $navbar-breakpoint: $desktop !default
   min-height: $navbar-height
   position: relative
   z-index: $navbar-z
-  @each $name, $pair in $colors
+  @each $name, $pair in $navbar-colors
     $color: nth($pair, 1)
     $color-invert: nth($pair, 2)
     &.is-#{$name}
@@ -69,9 +71,10 @@ $navbar-breakpoint: $desktop !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
@@ -86,16 +89,18 @@ $navbar-breakpoint: $desktop !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
@@ -135,6 +140,7 @@ body
 
 .navbar-brand
   a.navbar-item
+    &:focus,
     &:hover
       background-color: transparent
 
@@ -147,7 +153,7 @@ body
 .navbar-burger
   color: $navbar-burger-color
   +hamburger($navbar-height)
-  margin-left: auto
+  +ltr-property("margin", auto, false)
 
 .navbar-menu
   display: none
@@ -167,13 +173,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
@@ -187,6 +194,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
@@ -203,12 +211,12 @@ a.navbar-item,
   flex-shrink: 1
 
 .navbar-link:not(.is-arrowless)
-  padding-right: 2.5em
+  +ltr-property("padding", 2.5em)
   &::after
     @extend %arrow
     border-color: $navbar-dropdown-arrow
     margin-top: -0.375em
-    right: 1.125em
+    +ltr-position(1.125em)
 
 .navbar-dropdown
   font-size: 0.875rem
@@ -238,7 +246,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
@@ -250,7 +258,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,
@@ -286,16 +294,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
@@ -309,7 +321,6 @@ a.navbar-item,
     align-items: center
     display: flex
   .navbar-item
-    display: flex
     &.has-dropdown
       align-items: stretch
     &.has-dropdown-up
@@ -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 bulmaRgba($scheme-invert, 0.1)
         top: auto
     &.is-active,
+    &.is-hoverable:focus,
+    &.is-hoverable:focus-within,
     &.is-hoverable:hover
       .navbar-dropdown
         display: block
@@ -336,19 +349,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%
@@ -357,7 +370,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
@@ -384,9 +398,9 @@ a.navbar-item,
   .navbar > .container,
   .container > .navbar
     .navbar-brand
-      margin-left: -.75rem
+      +ltr-property("margin", -.75rem, false)
     .navbar-menu
-      margin-right: -.75rem
+      +ltr-property("margin", -.75rem)
   // Fixed navbar
   .navbar
     &.is-fixed-bottom-desktop,
@@ -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 bulmaRgba($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