form.sass in bulma-rails-0.7.2

- old
+ new

@@ -1,8 +1,9 @@
 $input-color: $grey-darker !default
 $input-background-color: $white !default
 $input-border-color: $grey-lighter !default
+$input-height: $control-height !default
 $input-shadow: inset 0 1px 2px rgba($black, 0.1) !default
 
 $input-hover-color: $grey-darker !default
 $input-hover-border-color: $grey-light !default
 
@@ -39,11 +40,11 @@
 $label-weight: $weight-bold !default
 
 $help-size: $size-small !default
 
 =input
-  +control
+  @extend %control
   background-color: $input-background-color
   border-color: $input-border-color
   color: $input-color
   +placeholder
     color: rgba($input-color, 0.3)
@@ -146,14 +147,15 @@
   display: inline-block
   max-width: 100%
   position: relative
   vertical-align: top
   &:not(.is-multiple)
-    height: 2.25em
+    height: $input-height
   &:not(.is-multiple):not(.is-loading)
     &::after
-      +arrow($input-arrow)
+      @extend %arrow
+      border-color: $input-arrow
       right: 1.125em
       z-index: 4
   &.is-rounded
     select
       border-radius: $radius-rounded
@@ -170,11 +172,11 @@
     &[disabled]:hover
       border-color: $input-disabled-border-color
     &:not([multiple])
       padding-right: 2.5em
     &[multiple]
-      height: initial
+      height: auto
       padding: 0
       option
         padding: 0.5em 1em
   // States
   &:not(.is-multiple):not(.is-loading):hover
@@ -211,11 +213,11 @@
     width: 100%
     select
       width: 100%
   &.is-loading
     &::after
-      +loader
+      @extend %loader
       margin-top: 0
       position: absolute
       right: 0.625em
       top: 0.625em
       transform: none
@@ -225,11 +227,11 @@
       font-size: $size-medium
     &.is-large:after
       font-size: $size-large
 
 .file
-  +unselectable
+  @extend %unselectable
   align-items: stretch
   display: flex
   justify-content: flex-start
   position: relative
   // Colors
@@ -350,20 +352,21 @@
       color: $file-cta-active-color
     .file-name
       border-color: darken($file-name-border-color, 5%)
 
 .file-input
-  height: 0.01em
+  height: 100%
   left: 0
+  opacity: 0
   outline: none
   position: absolute
   top: 0
-  width: 0.01em
+  width: 100%
 
 .file-cta,
 .file-name
-  +control
+  @extend %control
   border-color: $file-border-color
   border-radius: $file-radius
   font-size: 1em
   padding-left: 1em
   padding-right: 1em
@@ -447,20 +450,21 @@
           border-bottom-left-radius: 0
           border-top-left-radius: 0
       .button,
       .input,
       .select select
-        &:hover,
-        &.is-hovered
-          z-index: 2
-        &:focus,
-        &.is-focused,
-        &:active,
-        &.is-active
-          z-index: 3
-          &:hover
-            z-index: 4
+        &:not([disabled])
+          &:hover,
+          &.is-hovered
+            z-index: 2
+          &:focus,
+          &.is-focused,
+          &:active,
+          &.is-active
+            z-index: 3
+            &:hover
+              z-index: 4
       &.is-expanded
         flex-grow: 1
     &.has-addons-centered
       justify-content: center
     &.has-addons-right
@@ -538,23 +542,24 @@
         flex-grow: 1
       &:not(:last-child)
         margin-right: 0.75rem
 
 .control
+  clear: both //fixes the icon floating out of the input when help text is floated right
   font-size: $size-normal
   position: relative
   text-align: left
   // Modifiers
   // DEPRECATED
   &.has-icon
     .icon
       color: $input-icon-color
-      height: 2.25em
+      height: $input-height
       pointer-events: none
       position: absolute
       top: 0
-      width: 2.25em
+      width: $input-height
       z-index: 4
     .input
       &:focus
         & + .icon
           color: $input-icon-active-color
@@ -569,16 +574,16 @@
           font-size: $size-large
     &:not(.has-icon-right)
       .icon
         left: 0
       .input
-        padding-left: 2.25em
+        padding-left: $input-height
     &.has-icon-right
       .icon
         right: 0
       .input
-        padding-right: 2.25em
+        padding-right: $input-height
   &.has-icons-left,
   &.has-icons-right
     .input,
     .select
       &:focus
@@ -590,30 +595,30 @@
         font-size: $size-medium
       &.is-large ~ .icon
         font-size: $size-large
     .icon
       color: $input-icon-color
-      height: 2.25em
+      height: $input-height
       pointer-events: none
       position: absolute
       top: 0
-      width: 2.25em
+      width: $input-height
       z-index: 4
   &.has-icons-left
     .input,
     .select select
-      padding-left: 2.25em
+      padding-left: $input-height
     .icon.is-left
       left: 0
   &.has-icons-right
     .input,
     .select select
-      padding-right: 2.25em
+      padding-right: $input-height
     .icon.is-right
       right: 0
   &.is-loading
     &::after
-      +loader
+      @extend %loader
       position: absolute !important
       right: 0.625em
       top: 0.625em
       z-index: 4
     &.is-small:after