Use inline flex for buttons, Fix progress bars, Remove display helpers

CHANGELOG.md

@@ -11,6 +11,11 @@
 
 ### Updated
 
+* `.button` uses `display: inline-flex` now
 * `.button` needs an `.icon` now
 * `.control.is-grouped` renamed to `.control.has-addons`
 * `.control.is-inline` renamed to `.control.is-grouped`
+
+### Removed
+
+* **helpers** `.is-inline` and `.is-block`

bulma/base/helpers.sass

@@ -1,11 +1,5 @@
 // Display
 
-.is-block
-  display: block
-
-.is-inline
-  display: inline
-
 .is-flex
   display: flex
 

bulma/elements/buttons.sass

@@ -26,8 +26,11 @@
     font-size: $size-small
     line-height: 1
     margin-top: 5px
-  .icon.is-small
+  .icon
-    margin: 4px 0
+    &:first-child
+      margin-right: 4px
+    &:last-child
+      margin-left: 4px
   &:hover
     color: $control-hover
   &:active
@@ -77,14 +80,10 @@
       color: $text-strong
   &.is-small
     +button-small
-    .icon.is-small
-      margin: 0
   &.is-medium
     +button-medium
   &.is-large
     +button-large
-    .icon.is-medium
-      margin: -4px 0px -4px -4px
   &.is-fullwidth
     display: block
     width: 100%
@@ -101,12 +100,3 @@
   &[disabled]
     opacity: 0.5
     pointer-events: none
-  +tablet
-    small
-      color: $text
-      left: 0
-      margin-top: 10px
-      position: absolute
-      top: 100%
-      width: 100%
-

bulma/elements/controls.sass

@@ -1,11 +1,12 @@
 =control
   -moz-appearance: none
   -webkit-appearance: none
+  align-items: center
   background: $control-background
   border: 1px solid $control-border
   border-radius: $radius
   color: $control
-  display: inline-block
+  display: inline-flex
   font-size: $size-normal
   height: 32px
   line-height: 24px

bulma/elements/progress.sass

@@ -11,7 +11,8 @@
   width: 100%
   &::-webkit-progress-bar
     background: $border
-  &::-webkit-progress-value,
+  &::-webkit-progress-value
+    background: $text
   &::-moz-progress-bar
     background: $text
   &.is-small
@@ -23,7 +24,7 @@
   @each $name, $pair in $colors
     $color: nth($pair, 1)
     &.is-#{$name}
-      &::-webkit-progress-value,
+      &::-webkit-progress-value
+        background: $color
       &::-moz-progress-bar
         background: $color
-