form.sass in bulma-rails-0.2.3

- old
+ new

@@ -3,11 +3,12 @@
   @each $name, $pair in $colors
     $color: nth($pair, 1)
     &.is-#{$name}
       border-color: $color
 
-.input
+.input,
+.textarea
   +form-control
   box-shadow: inset 0 1px 2px rgba($black, 0.1)
   max-width: 100%
   width: 100%
   &[type="search"]
@@ -26,41 +27,37 @@
   &.is-inline
     display: inline
     width: auto
 
 .textarea
-  @extend .input
   display: block
   line-height: 1.2
   max-height: 600px
   max-width: 100%
   min-height: 120px
   min-width: 100%
   padding: 10px
   resize: vertical
 
-%control-with-element
+.checkbox,
+.radio
   cursor: pointer
   display: inline-block
   line-height: 16px
   position: relative
   vertical-align: top
   input
     cursor: pointer
   &:hover
     color: $control-hover
   &.is-disabled
-    color: $text-light
+    color: $control-disabled
     pointer-events: none
     input
       pointer-events: none
 
-.checkbox
-  @extend %control-with-element
-
 .radio
-  @extend %control-with-element
   & + .radio
     margin-left: 10px
 
 .select
   display: inline-block
@@ -80,17 +77,17 @@
   &.is-fullwidth
     width: 100%
     select
       width: 100%
   &:after
-    +arrow($link)
+    +arrow($control-active)
     margin-top: -6px
     right: 16px
     top: 50%
   &:hover
     &:after
-      border-color: $link-hover
+      border-color: $control-hover
   &.is-small
     height: 24px
     select
       +control-small
       padding-right: 28px
@@ -104,19 +101,19 @@
     select
       +control-large
       padding-right: 52px
 
 .label
-  color: $text-strong
+  color: $control
   display: block
   font-weight: bold
   &:not(:last-child)
     margin-bottom: 5px
 
 .help
   display: block
-  font-size: $size-small
+  font-size: $control-size-small
   margin-top: 5px
   @each $name, $pair in $colors
     $color: nth($pair, 1)
     &.is-#{$name}
       color: $color
@@ -125,11 +122,13 @@
 
 .control-label
   +mobile
     margin-bottom: 5px
   +tablet
+    flex-basis: 0
     flex-grow: 1
+    flex-shrink: 0
     margin-right: 20px
     padding-top: 7px
     text-align: right
 
 .control
@@ -151,39 +150,41 @@
         z-index: 2
       &:active,
       &:focus
         z-index: 3
       &:first-child
-        border-radius: $radius 0 0 $radius
+        border-radius: $control-radius 0 0 $control-radius
         select
-          border-radius: $radius 0 0 $radius
+          border-radius: $control-radius 0 0 $control-radius
       &:last-child
-        border-radius: 0 $radius $radius 0
+        border-radius: 0 $control-radius $control-radius 0
         select
-          border-radius: 0 $radius $radius 0
+          border-radius: 0 $control-radius $control-radius 0
       &.is-expanded
         flex-grow: 1
+        flex-shrink: 0
     &.has-addons-centered
       justify-content: center
     &.has-addons-right
       justify-content: flex-end
     &.has-addons-fullwidth
       .button,
       .input,
       .select
         flex-grow: 1
+        flex-shrink: 0
   &.has-icon
     & > .fa
       +fa(14px, 24px)
-      color: $text-light
+      color: $control-icon
       pointer-events: none
       position: absolute
       top: 4px
       z-index: 4
     .input
       &:focus + .fa
-        color: $text-strong
+        color: $control-icon-active
       &.is-small + .fa
         font-size: 10.5px
         top: 0
       &.is-medium + .fa
         font-size: 21px
@@ -232,21 +233,24 @@
       &:not(:last-child)
         margin-bottom: 0
         margin-right: 10px
       &.is-expanded
         flex-grow: 1
+        flex-shrink: 1
     &.is-grouped-centered
       justify-content: center
     &.is-grouped-right
       justify-content: flex-end
   &.is-horizontal
     +tablet
       display: flex
       & > .control
         display: flex
+        flex-basis: 0
         flex-grow: 5
+        flex-shrink: 1
   &.is-loading
     &:after
-      @extend .loader
+      +loader
       position: absolute !important
       right: 8px
       top: 8px