button.sass in bulma-clean-theme-0.5.2

- old
+ new

@@ -1,7 +1,8 @@
 $button-color: $grey-darker !default
 $button-background-color: $white !default
+$button-family: false !default
 
 $button-border-color: $grey-lighter !default
 $button-border-width: $control-border-width !default
 
 $button-padding-vertical: calc(0.375em - #{$button-border-width}) !default
@@ -48,10 +49,12 @@
   background-color: $button-background-color
   border-color: $button-border-color
   border-width: $button-border-width
   color: $button-color
   cursor: pointer
+  @if $button-family
+    font-family: $button-family
   justify-content: center
   padding-bottom: $button-padding-vertical
   padding-left: $button-padding-horizontal
   padding-right: $button-padding-horizontal
   padding-top: $button-padding-vertical
@@ -140,11 +143,12 @@
         border-color: transparent
         box-shadow: none
       &.is-inverted
         background-color: $color-invert
         color: $color
-        &:hover
+        &:hover,
+        &.is-hovered
           background-color: darken($color-invert, 5%)
         &[disabled],
         fieldset[disabled] &
           background-color: $color-invert
           border-color: transparent
@@ -156,17 +160,25 @@
       &.is-outlined
         background-color: transparent
         border-color: $color
         color: $color
         &:hover,
-        &:focus
+        &.is-hovered,
+        &:focus,
+        &.is-focused
           background-color: $color
           border-color: $color
           color: $color-invert
         &.is-loading
           &::after
             border-color: transparent transparent $color $color !important
+          &:hover,
+          &.is-hovered,
+          &:focus,
+          &.is-focused
+            &::after
+              border-color: transparent transparent $color-invert $color-invert !important
         &[disabled],
         fieldset[disabled] &
           background-color: transparent
           border-color: $color
           box-shadow: none
@@ -174,13 +186,22 @@
       &.is-inverted.is-outlined
         background-color: transparent
         border-color: $color-invert
         color: $color-invert
         &:hover,
-        &:focus
+        &.is-hovered,
+        &:focus,
+        &.is-focused
           background-color: $color-invert
           color: $color
+        &.is-loading
+          &:hover,
+          &.is-hovered,
+          &:focus,
+          &.is-focused
+            &::after
+              border-color: transparent transparent $color $color !important
         &[disabled],
         fieldset[disabled] &
           background-color: transparent
           border-color: $color-invert
           box-shadow: none
@@ -267,9 +288,18 @@
         z-index: 3
         &:hover
           z-index: 4
       &.is-expanded
         flex-grow: 1
+        flex-shrink: 1
   &.is-centered
     justify-content: center
+    &:not(.has-addons)
+      .button:not(.is-fullwidth)
+        margin-left: 0.25rem
+        margin-right: 0.25rem
   &.is-right
     justify-content: flex-end
+    &:not(.has-addons)
+      .button:not(.is-fullwidth)
+        margin-left: 0.25rem
+        margin-right: 0.25rem