Convert sass files to scss files

sass/form/_all.sass

@@ -1,9 +0,0 @@
-/* Bulma Form */
-@charset "utf-8"
-
-@import "shared"
-@import "input-textarea"
-@import "checkbox-radio"
-@import "select"
-@import "file"
-@import "tools"

sass/form/_all.scss

@@ -0,0 +1,9 @@
+/* Bulma Form */
+@charset "utf-8";
+
+@import "shared";
+@import "input-textarea";
+@import "checkbox-radio";
+@import "select";
+@import "file";
+@import "tools";

sass/form/checkbox-radio.sass

@@ -1,22 +0,0 @@
-%checkbox-radio
-  cursor: pointer
-  display: inline-block
-  line-height: 1.25
-  position: relative
-  input
-    cursor: pointer
-  &:hover
-    color: $input-hover-color
-  &[disabled],
-  fieldset[disabled] &,
-  input[disabled]
-    color: $input-disabled-color
-    cursor: not-allowed
-
-.checkbox
-  @extend %checkbox-radio
-
-.radio
-  @extend %checkbox-radio
-  & + .radio
-    +ltr-property("margin", 0.5em, false)

sass/form/checkbox-radio.scss

@@ -0,0 +1,33 @@
+%checkbox-radio {
+  cursor: pointer;
+  display: inline-block;
+  line-height: 1.25;
+  position: relative;
+
+  input {
+    cursor: pointer;
+  }
+
+  &:hover {
+    color: $input-hover-color;
+  }
+
+  &[disabled],
+  fieldset[disabled] &,
+  input[disabled] {
+    color: $input-disabled-color;
+    cursor: not-allowed;
+  }
+}
+
+.checkbox {
+  @extend %checkbox-radio;
+}
+
+.radio {
+  @extend %checkbox-radio;
+
+  & + .radio {
+    @include ltr-property("margin", 0.5em, false);
+  }
+}

sass/form/file.sass

@@ -1,184 +0,0 @@
-$file-border-color: $border !default
-$file-radius: $radius !default
-
-$file-cta-background-color: $scheme-main-ter !default
-$file-cta-color: $text !default
-$file-cta-hover-color: $text-strong !default
-$file-cta-active-color: $text-strong !default
-
-$file-name-border-color: $border !default
-$file-name-border-style: solid !default
-$file-name-border-width: 1px 1px 1px 0 !default
-$file-name-max-width: 16em !default
-
-$file-colors: $form-colors !default
-
-.file
-  @extend %unselectable
-  align-items: stretch
-  display: flex
-  justify-content: flex-start
-  position: relative
-  // Colors
-  @each $name, $pair in $file-colors
-    $color: nth($pair, 1)
-    $color-invert: nth($pair, 2)
-    &.is-#{$name}
-      .file-cta
-        background-color: $color
-        border-color: transparent
-        color: $color-invert
-      &:hover,
-      &.is-hovered
-        .file-cta
-          background-color: bulmaDarken($color, 2.5%)
-          border-color: transparent
-          color: $color-invert
-      &:focus,
-      &.is-focused
-        .file-cta
-          border-color: transparent
-          box-shadow: 0 0 0.5em bulmaRgba($color, 0.25)
-          color: $color-invert
-      &:active,
-      &.is-active
-        .file-cta
-          background-color: bulmaDarken($color, 5%)
-          border-color: transparent
-          color: $color-invert
-  // Sizes
-  &.is-small
-    font-size: $size-small
-  &.is-normal
-    font-size: $size-normal
-  &.is-medium
-    font-size: $size-medium
-    .file-icon
-      .fa
-        font-size: 21px
-  &.is-large
-    font-size: $size-large
-    .file-icon
-      .fa
-        font-size: 28px
-  // Modifiers
-  &.has-name
-    .file-cta
-      border-bottom-right-radius: 0
-      border-top-right-radius: 0
-    .file-name
-      border-bottom-left-radius: 0
-      border-top-left-radius: 0
-    &.is-empty
-      .file-cta
-        border-radius: $file-radius
-      .file-name
-        display: none
-  &.is-boxed
-    .file-label
-      flex-direction: column
-    .file-cta
-      flex-direction: column
-      height: auto
-      padding: 1em 3em
-    .file-name
-      border-width: 0 1px 1px
-    .file-icon
-      height: 1.5em
-      width: 1.5em
-      .fa
-        font-size: 21px
-    &.is-small
-      .file-icon .fa
-        font-size: 14px
-    &.is-medium
-      .file-icon .fa
-        font-size: 28px
-    &.is-large
-      .file-icon .fa
-        font-size: 35px
-    &.has-name
-      .file-cta
-        border-radius: $file-radius $file-radius 0 0
-      .file-name
-        border-radius: 0 0 $file-radius $file-radius
-        border-width: 0 1px 1px
-  &.is-centered
-    justify-content: center
-  &.is-fullwidth
-    .file-label
-      width: 100%
-    .file-name
-      flex-grow: 1
-      max-width: none
-  &.is-right
-    justify-content: flex-end
-    .file-cta
-      border-radius: 0 $file-radius $file-radius 0
-    .file-name
-      border-radius: $file-radius 0 0 $file-radius
-      border-width: 1px 0 1px 1px
-      order: -1
-
-.file-label
-  align-items: stretch
-  display: flex
-  cursor: pointer
-  justify-content: flex-start
-  overflow: hidden
-  position: relative
-  &:hover
-    .file-cta
-      background-color: bulmaDarken($file-cta-background-color, 2.5%)
-      color: $file-cta-hover-color
-    .file-name
-      border-color: bulmaDarken($file-name-border-color, 2.5%)
-  &:active
-    .file-cta
-      background-color: bulmaDarken($file-cta-background-color, 5%)
-      color: $file-cta-active-color
-    .file-name
-      border-color: bulmaDarken($file-name-border-color, 5%)
-
-.file-input
-  height: 100%
-  left: 0
-  opacity: 0
-  outline: none
-  position: absolute
-  top: 0
-  width: 100%
-
-.file-cta,
-.file-name
-  @extend %control
-  border-color: $file-border-color
-  border-radius: $file-radius
-  font-size: 1em
-  padding-left: 1em
-  padding-right: 1em
-  white-space: nowrap
-
-.file-cta
-  background-color: $file-cta-background-color
-  color: $file-cta-color
-
-.file-name
-  border-color: $file-name-border-color
-  border-style: $file-name-border-style
-  border-width: $file-name-border-width
-  display: block
-  max-width: $file-name-max-width
-  overflow: hidden
-  text-align: inherit
-  text-overflow: ellipsis
-
-.file-icon
-  align-items: center
-  display: flex
-  height: 1em
-  justify-content: center
-  +ltr-property("margin", 0.5em)
-  width: 1em
-  .fa
-    font-size: 14px

sass/form/file.scss

@@ -0,0 +1,283 @@
+$file-border-color: $border !default;
+$file-radius: $radius !default;
+
+$file-cta-background-color: $scheme-main-ter !default;
+$file-cta-color: $text !default;
+$file-cta-hover-color: $text-strong !default;
+$file-cta-active-color: $text-strong !default;
+
+$file-name-border-color: $border !default;
+$file-name-border-style: solid !default;
+$file-name-border-width: 1px 1px 1px 0 !default;
+$file-name-max-width: 16em !default;
+
+$file-colors: $form-colors !default;
+
+.file {
+  @extend %unselectable;
+
+  align-items: stretch;
+  display: flex;
+  justify-content: flex-start;
+  position: relative;
+
+  // Colors
+  @each $name, $pair in $file-colors {
+    $color: nth($pair, 1);
+    $color-invert: nth($pair, 2);
+
+    &.is-#{$name} {
+      .file-cta {
+        background-color: $color;
+        border-color: transparent;
+        color: $color-invert;
+      }
+
+      &:hover,
+      &.is-hovered {
+        .file-cta {
+          background-color: bulmaDarken($color, 2.5%);
+          border-color: transparent;
+          color: $color-invert;
+        }
+      }
+
+      &:focus,
+      &.is-focused {
+        .file-cta {
+          border-color: transparent;
+          box-shadow: 0 0 0.5em bulmaRgba($color, 0.25);
+          color: $color-invert;
+        }
+      }
+
+      &:active,
+      &.is-active {
+        .file-cta {
+          background-color: bulmaDarken($color, 5%);
+          border-color: transparent;
+          color: $color-invert;
+        }
+      }
+    }
+  }
+
+  // Sizes
+  &.is-small {
+    font-size: $size-small;
+  }
+
+  &.is-normal {
+    font-size: $size-normal;
+  }
+
+  &.is-medium {
+    font-size: $size-medium;
+
+    .file-icon {
+      .fa {
+        font-size: 21px;
+      }
+    }
+  }
+
+  &.is-large {
+    font-size: $size-large;
+
+    .file-icon {
+      .fa {
+        font-size: 28px;
+      }
+    }
+  }
+
+  // Modifiers
+  &.has-name {
+    .file-cta {
+      border-bottom-right-radius: 0;
+      border-top-right-radius: 0;
+    }
+
+    .file-name {
+      border-bottom-left-radius: 0;
+      border-top-left-radius: 0;
+    }
+
+    &.is-empty {
+      .file-cta {
+        border-radius: $file-radius;
+      }
+
+      .file-name {
+        display: none;
+      }
+    }
+  }
+
+  &.is-boxed {
+    .file-label {
+      flex-direction: column;
+    }
+
+    .file-cta {
+      flex-direction: column;
+      height: auto;
+      padding: 1em 3em;
+    }
+
+    .file-name {
+      border-width: 0 1px 1px;
+    }
+
+    .file-icon {
+      height: 1.5em;
+      width: 1.5em;
+
+      .fa {
+        font-size: 21px;
+      }
+    }
+
+    &.is-small {
+      .file-icon .fa {
+        font-size: 14px;
+      }
+    }
+
+    &.is-medium {
+      .file-icon .fa {
+        font-size: 28px;
+      }
+    }
+
+    &.is-large {
+      .file-icon .fa {
+        font-size: 35px;
+      }
+    }
+
+    &.has-name {
+      .file-cta {
+        border-radius: $file-radius $file-radius 0 0;
+      }
+
+      .file-name {
+        border-radius: 0 0 $file-radius $file-radius;
+        border-width: 0 1px 1px;
+      }
+    }
+  }
+
+  &.is-centered {
+    justify-content: center;
+  }
+
+  &.is-fullwidth {
+    .file-label {
+      width: 100%;
+    }
+
+    .file-name {
+      flex-grow: 1;
+      max-width: none;
+    }
+  }
+
+  &.is-right {
+    justify-content: flex-end;
+
+    .file-cta {
+      border-radius: 0 $file-radius $file-radius 0;
+    }
+
+    .file-name {
+      border-radius: $file-radius 0 0 $file-radius;
+      border-width: 1px 0 1px 1px;
+      order: -1;
+    }
+  }
+}
+
+.file-label {
+  align-items: stretch;
+  display: flex;
+  cursor: pointer;
+  justify-content: flex-start;
+  overflow: hidden;
+  position: relative;
+
+  &:hover {
+    .file-cta {
+      background-color: bulmaDarken($file-cta-background-color, 2.5%);
+      color: $file-cta-hover-color;
+    }
+
+    .file-name {
+      border-color: bulmaDarken($file-name-border-color, 2.5%);
+    }
+  }
+
+  &:active {
+    .file-cta {
+      background-color: bulmaDarken($file-cta-background-color, 5%);
+      color: $file-cta-active-color;
+    }
+
+    .file-name {
+      border-color: bulmaDarken($file-name-border-color, 5%);
+    }
+  }
+}
+
+.file-input {
+  height: 100%;
+  left: 0;
+  opacity: 0;
+  outline: none;
+  position: absolute;
+  top: 0;
+  width: 100%;
+}
+
+.file-cta,
+.file-name {
+  @extend %control;
+
+  border-color: $file-border-color;
+  border-radius: $file-radius;
+  font-size: 1em;
+  padding-left: 1em;
+  padding-right: 1em;
+  white-space: nowrap;
+}
+
+.file-cta {
+  background-color: $file-cta-background-color;
+  color: $file-cta-color;
+}
+
+.file-name {
+  border-color: $file-name-border-color;
+  border-style: $file-name-border-style;
+  border-width: $file-name-border-width;
+  display: block;
+  max-width: $file-name-max-width;
+  overflow: hidden;
+  text-align: inherit;
+  text-overflow: ellipsis;
+}
+
+.file-icon {
+  align-items: center;
+  display: flex;
+  height: 1em;
+  justify-content: center;
+
+  @include ltr-property("margin", 0.5em);
+
+  width: 1em;
+
+  .fa {
+    font-size: 14px;
+  }
+}

sass/form/input-textarea.sass

@@ -1,66 +0,0 @@
-$textarea-padding: $control-padding-horizontal !default
-$textarea-max-height: 40em !default
-$textarea-min-height: 8em !default
-
-$textarea-colors: $form-colors !default
-
-%input-textarea
-  @extend %input
-  box-shadow: $input-shadow
-  max-width: 100%
-  width: 100%
-  &[readonly]
-    box-shadow: none
-  // Colors
-  @each $name, $pair in $textarea-colors
-    $color: nth($pair, 1)
-    &.is-#{$name}
-      border-color: $color
-      &:focus,
-      &.is-focused,
-      &:active,
-      &.is-active
-        box-shadow: $input-focus-box-shadow-size bulmaRgba($color, 0.25)
-  // Sizes
-  &.is-small
-    +control-small
-  &.is-medium
-    +control-medium
-  &.is-large
-    +control-large
-  // Modifiers
-  &.is-fullwidth
-    display: block
-    width: 100%
-  &.is-inline
-    display: inline
-    width: auto
-
-.input
-  @extend %input-textarea
-  &.is-rounded
-    border-radius: $radius-rounded
-    padding-left: calc(#{$control-padding-horizontal} + 0.375em)
-    padding-right: calc(#{$control-padding-horizontal} + 0.375em)
-  &.is-static
-    background-color: transparent
-    border-color: transparent
-    box-shadow: none
-    padding-left: 0
-    padding-right: 0
-
-.textarea
-  @extend %input-textarea
-  display: block
-  max-width: 100%
-  min-width: 100%
-  padding: $textarea-padding
-  resize: vertical
-  &:not([rows])
-    max-height: $textarea-max-height
-    min-height: $textarea-min-height
-  &[rows]
-    height: initial
-  // Modifiers
-  &.has-fixed-size
-    resize: none

sass/form/input-textarea.scss

@@ -0,0 +1,99 @@
+$textarea-padding: $control-padding-horizontal !default;
+$textarea-max-height: 40em !default;
+$textarea-min-height: 8em !default;
+
+$textarea-colors: $form-colors !default;
+
+%input-textarea {
+  @extend %input;
+
+  box-shadow: $input-shadow;
+  max-width: 100%;
+  width: 100%;
+
+  &[readonly] {
+    box-shadow: none;
+  }
+
+  // Colors
+  @each $name, $pair in $textarea-colors {
+    $color: nth($pair, 1);
+
+    &.is-#{$name} {
+      border-color: $color;
+
+      &:focus,
+      &.is-focused,
+      &:active,
+      &.is-active {
+        box-shadow: $input-focus-box-shadow-size bulmaRgba($color, 0.25);
+      }
+    }
+  }
+
+  // Sizes
+  &.is-small {
+    @include control-small;
+  }
+
+  &.is-medium {
+    @include control-medium;
+  }
+
+  &.is-large {
+    @include control-large;
+  }
+
+  // Modifiers
+  &.is-fullwidth {
+    display: block;
+    width: 100%;
+  }
+
+  &.is-inline {
+    display: inline;
+    width: auto;
+  }
+}
+
+.input {
+  @extend %input-textarea;
+
+  &.is-rounded {
+    border-radius: $radius-rounded;
+    padding-left: calc(#{$control-padding-horizontal} + 0.375em);
+    padding-right: calc(#{$control-padding-horizontal} + 0.375em);
+  }
+
+  &.is-static {
+    background-color: transparent;
+    border-color: transparent;
+    box-shadow: none;
+    padding-left: 0;
+    padding-right: 0;
+  }
+}
+
+.textarea {
+  @extend %input-textarea;
+
+  display: block;
+  max-width: 100%;
+  min-width: 100%;
+  padding: $textarea-padding;
+  resize: vertical;
+
+  &:not([rows]) {
+    max-height: $textarea-max-height;
+    min-height: $textarea-min-height;
+  }
+
+  &[rows] {
+    height: initial;
+  }
+
+  // Modifiers
+  &.has-fixed-size {
+    resize: none;
+  }
+}

sass/form/select.sass

@@ -1,88 +0,0 @@
-$select-colors: $form-colors !default
-
-.select
-  display: inline-block
-  max-width: 100%
-  position: relative
-  vertical-align: top
-  &:not(.is-multiple)
-    height: $input-height
-  &:not(.is-multiple):not(.is-loading)
-    &::after
-      @extend %arrow
-      border-color: $input-arrow
-      +ltr-position(1.125em)
-      z-index: 4
-  &.is-rounded
-    select
-      border-radius: $radius-rounded
-      +ltr-property("padding", 1em, false)
-  select
-    @extend %input
-    cursor: pointer
-    display: block
-    font-size: 1em
-    max-width: 100%
-    outline: none
-    &::-ms-expand
-      display: none
-    &[disabled]:hover,
-    fieldset[disabled] &:hover
-      border-color: $input-disabled-border-color
-    &:not([multiple])
-      +ltr-property("padding", 2.5em)
-    &[multiple]
-      height: auto
-      padding: 0
-      option
-        padding: 0.5em 1em
-  // States
-  &:not(.is-multiple):not(.is-loading):hover
-    &::after
-      border-color: $input-hover-color
-  // Colors
-  @each $name, $pair in $select-colors
-    $color: nth($pair, 1)
-    &.is-#{$name}
-      &:not(:hover)::after
-        border-color: $color
-      select
-        border-color: $color
-        &:hover,
-        &.is-hovered
-          border-color: bulmaDarken($color, 5%)
-        &:focus,
-        &.is-focused,
-        &:active,
-        &.is-active
-          box-shadow: $input-focus-box-shadow-size bulmaRgba($color, 0.25)
-  // Sizes
-  &.is-small
-    +control-small
-  &.is-medium
-    +control-medium
-  &.is-large
-    +control-large
-  // Modifiers
-  &.is-disabled
-    &::after
-      border-color: $input-disabled-color !important
-      opacity: 0.5
-  &.is-fullwidth
-    width: 100%
-    select
-      width: 100%
-  &.is-loading
-    &::after
-      @extend %loader
-      margin-top: 0
-      position: absolute
-      +ltr-position(0.625em)
-      top: 0.625em
-      transform: none
-    &.is-small:after
-      font-size: $size-small
-    &.is-medium:after
-      font-size: $size-medium
-    &.is-large:after
-      font-size: $size-large

sass/form/select.scss

@@ -0,0 +1,153 @@
+$select-colors: $form-colors !default;
+
+.select {
+  display: inline-block;
+  max-width: 100%;
+  position: relative;
+  vertical-align: top;
+
+  &:not(.is-multiple) {
+    height: $input-height;
+  }
+
+  &:not(.is-multiple):not(.is-loading) {
+    &::after {
+      @extend %arrow;
+
+      border-color: $input-arrow;
+
+      @include ltr-position(1.125em);
+
+      z-index: 4;
+    }
+  }
+
+  &.is-rounded {
+    select {
+      border-radius: $radius-rounded;
+
+      @include ltr-property("padding", 1em, false);
+    }
+  }
+
+  select {
+    @extend %input;
+
+    cursor: pointer;
+    display: block;
+    font-size: 1em;
+    max-width: 100%;
+    outline: none;
+
+    &::-ms-expand {
+      display: none;
+    }
+
+    &[disabled]:hover,
+    fieldset[disabled] &:hover {
+      border-color: $input-disabled-border-color;
+    }
+
+    &:not([multiple]) {
+      @include ltr-property("padding", 2.5em);
+    }
+
+    &[multiple] {
+      height: auto;
+      padding: 0;
+
+      option {
+        padding: 0.5em 1em;
+      }
+    }
+  }
+
+  // States
+  &:not(.is-multiple):not(.is-loading):hover {
+    &::after {
+      border-color: $input-hover-color;
+    }
+  }
+
+  // Colors
+  @each $name, $pair in $select-colors {
+    $color: nth($pair, 1);
+
+    &.is-#{$name} {
+      &:not(:hover)::after {
+        border-color: $color;
+      }
+
+      select {
+        border-color: $color;
+
+        &:hover,
+        &.is-hovered {
+          border-color: bulmaDarken($color, 5%);
+        }
+
+        &:focus,
+        &.is-focused,
+        &:active,
+        &.is-active {
+          box-shadow: $input-focus-box-shadow-size bulmaRgba($color, 0.25);
+        }
+      }
+    }
+  }
+
+  // Sizes
+  &.is-small {
+    @include control-small;
+  }
+
+  &.is-medium {
+    @include control-medium;
+  }
+
+  &.is-large {
+    @include control-large;
+  }
+
+  // Modifiers
+  &.is-disabled {
+    &::after {
+      border-color: $input-disabled-color !important;
+      opacity: 0.5;
+    }
+  }
+
+  &.is-fullwidth {
+    width: 100%;
+
+    select {
+      width: 100%;
+    }
+  }
+
+  &.is-loading {
+    &::after {
+      @extend %loader;
+
+      margin-top: 0;
+      position: absolute;
+
+      @include ltr-position(0.625em);
+
+      top: 0.625em;
+      transform: none;
+    }
+
+    &.is-small:after {
+      font-size: $size-small;
+    }
+
+    &.is-medium:after {
+      font-size: $size-medium;
+    }
+
+    &.is-large:after {
+      font-size: $size-large;
+    }
+  }
+}

sass/form/shared.sass

@@ -1,60 +0,0 @@
-@import "../utilities/controls"
-@import "../utilities/mixins"
-
-$form-colors: $colors !default
-
-$input-color: $text-strong !default
-$input-background-color: $scheme-main !default
-$input-border-color: $border !default
-$input-height: $control-height !default
-$input-shadow: inset 0 0.0625em 0.125em rgba($scheme-invert, 0.05) !default
-$input-placeholder-color: bulmaRgba($input-color, 0.3) !default
-
-$input-hover-color: $text-strong !default
-$input-hover-border-color: $border-hover !default
-
-$input-focus-color: $text-strong !default
-$input-focus-border-color: $link !default
-$input-focus-box-shadow-size: 0 0 0 0.125em !default
-$input-focus-box-shadow-color: bulmaRgba($link, 0.25) !default
-
-$input-disabled-color: $text-light !default
-$input-disabled-background-color: $background !default
-$input-disabled-border-color: $background !default
-$input-disabled-placeholder-color: bulmaRgba($input-disabled-color, 0.3) !default
-
-$input-arrow: $link !default
-
-$input-icon-color: $border !default
-$input-icon-active-color: $text !default
-
-$input-radius: $radius !default
-
-=input
-  @extend %control
-  background-color: $input-background-color
-  border-color: $input-border-color
-  border-radius: $input-radius
-  color: $input-color
-  +placeholder
-    color: $input-placeholder-color
-  &:hover,
-  &.is-hovered
-    border-color: $input-hover-border-color
-  &:focus,
-  &.is-focused,
-  &:active,
-  &.is-active
-    border-color: $input-focus-border-color
-    box-shadow: $input-focus-box-shadow-size $input-focus-box-shadow-color
-  &[disabled],
-  fieldset[disabled] &
-    background-color: $input-disabled-background-color
-    border-color: $input-disabled-border-color
-    box-shadow: none
-    color: $input-disabled-color
-    +placeholder
-      color: $input-disabled-placeholder-color
-
-%input
-  +input

sass/form/shared.scss

@@ -0,0 +1,74 @@
+@import "../utilities/controls";
+@import "../utilities/mixins";
+
+$form-colors: $colors !default;
+
+$input-color: $text-strong !default;
+$input-background-color: $scheme-main !default;
+$input-border-color: $border !default;
+$input-height: $control-height !default;
+$input-shadow: inset 0 0.0625em 0.125em rgba($scheme-invert, 0.05) !default;
+$input-placeholder-color: bulmaRgba($input-color, 0.3) !default;
+
+$input-hover-color: $text-strong !default;
+$input-hover-border-color: $border-hover !default;
+
+$input-focus-color: $text-strong !default;
+$input-focus-border-color: $link !default;
+$input-focus-box-shadow-size: 0 0 0 0.125em !default;
+$input-focus-box-shadow-color: bulmaRgba($link, 0.25) !default;
+
+$input-disabled-color: $text-light !default;
+$input-disabled-background-color: $background !default;
+$input-disabled-border-color: $background !default;
+$input-disabled-placeholder-color: bulmaRgba($input-disabled-color, 0.3) !default;
+
+$input-arrow: $link !default;
+
+$input-icon-color: $border !default;
+$input-icon-active-color: $text !default;
+
+$input-radius: $radius !default;
+
+@mixin input {
+  @extend %control;
+
+  background-color: $input-background-color;
+  border-color: $input-border-color;
+  border-radius: $input-radius;
+  color: $input-color;
+
+  @include placeholder {
+    color: $input-placeholder-color;
+  }
+
+
+  &:hover,
+  &.is-hovered {
+    border-color: $input-hover-border-color;
+  }
+
+  &:focus,
+  &.is-focused,
+  &:active,
+  &.is-active {
+    border-color: $input-focus-border-color;
+    box-shadow: $input-focus-box-shadow-size $input-focus-box-shadow-color;
+  }
+
+  &[disabled],
+  fieldset[disabled] & {
+    background-color: $input-disabled-background-color;
+    border-color: $input-disabled-border-color;
+    box-shadow: none;
+    color: $input-disabled-color;
+
+    @include placeholder {
+      color: $input-disabled-placeholder-color;
+    }
+  }
+}
+
+%input {
+  @include input;
+}

sass/form/tools.sass

@@ -1,215 +0,0 @@
-$label-color: $text-strong !default
-$label-weight: $weight-bold !default
-
-$help-size: $size-small !default
-
-$label-colors: $form-colors !default
-
-.label
-  color: $label-color
-  display: block
-  font-size: $size-normal
-  font-weight: $label-weight
-  &:not(:last-child)
-    margin-bottom: 0.5em
-  // Sizes
-  &.is-small
-    font-size: $size-small
-  &.is-medium
-    font-size: $size-medium
-  &.is-large
-    font-size: $size-large
-
-.help
-  display: block
-  font-size: $help-size
-  margin-top: 0.25rem
-  @each $name, $pair in $label-colors
-    $color: nth($pair, 1)
-    &.is-#{$name}
-      color: $color
-
-// Containers
-
-.field
-  &:not(:last-child)
-    margin-bottom: 0.75rem
-  // Modifiers
-  &.has-addons
-    display: flex
-    justify-content: flex-start
-    .control
-      &:not(:last-child)
-        +ltr-property("margin", -1px)
-      &:not(:first-child):not(:last-child)
-        .button,
-        .input,
-        .select select
-          border-radius: 0
-      &:first-child:not(:only-child)
-        .button,
-        .input,
-        .select select
-          +ltr
-            border-bottom-right-radius: 0
-            border-top-right-radius: 0
-          +rtl
-            border-bottom-left-radius: 0
-            border-top-left-radius: 0
-      &:last-child:not(:only-child)
-        .button,
-        .input,
-        .select select
-          +ltr
-            border-bottom-left-radius: 0
-            border-top-left-radius: 0
-          +rtl
-            border-bottom-right-radius: 0
-            border-top-right-radius: 0
-      .button,
-      .input,
-      .select select
-        &: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
-        flex-shrink: 1
-    &.has-addons-centered
-      justify-content: center
-    &.has-addons-right
-      justify-content: flex-end
-    &.has-addons-fullwidth
-      .control
-        flex-grow: 1
-        flex-shrink: 0
-  &.is-grouped
-    display: flex
-    justify-content: flex-start
-    & > .control
-      flex-shrink: 0
-      &:not(:last-child)
-        margin-bottom: 0
-        +ltr-property("margin", 0.75rem)
-      &.is-expanded
-        flex-grow: 1
-        flex-shrink: 1
-    &.is-grouped-centered
-      justify-content: center
-    &.is-grouped-right
-      justify-content: flex-end
-    &.is-grouped-multiline
-      flex-wrap: wrap
-      & > .control
-        &:last-child,
-        &:not(:last-child)
-          margin-bottom: 0.75rem
-      &:last-child
-        margin-bottom: -0.75rem
-      &:not(:last-child)
-        margin-bottom: 0
-  &.is-horizontal
-    +tablet
-      display: flex
-
-.field-label
-  .label
-    font-size: inherit
-  +mobile
-    margin-bottom: 0.5rem
-  +tablet
-    flex-basis: 0
-    flex-grow: 1
-    flex-shrink: 0
-    +ltr-property("margin", 1.5rem)
-    text-align: right
-    &.is-small
-      font-size: $size-small
-      padding-top: 0.375em
-    &.is-normal
-      padding-top: 0.375em
-    &.is-medium
-      font-size: $size-medium
-      padding-top: 0.375em
-    &.is-large
-      font-size: $size-large
-      padding-top: 0.375em
-
-.field-body
-  .field .field
-    margin-bottom: 0
-  +tablet
-    display: flex
-    flex-basis: 0
-    flex-grow: 5
-    flex-shrink: 1
-    .field
-      margin-bottom: 0
-    & > .field
-      flex-shrink: 1
-      &:not(.is-narrow)
-        flex-grow: 1
-      &:not(:last-child)
-        +ltr-property("margin", 0.75rem)
-
-.control
-  box-sizing: border-box
-  clear: both
-  font-size: $size-normal
-  position: relative
-  text-align: inherit
-  // Modifiers
-  &.has-icons-left,
-  &.has-icons-right
-    .input,
-    .select
-      &:focus
-        & ~ .icon
-          color: $input-icon-active-color
-      &.is-small ~ .icon
-        font-size: $size-small
-      &.is-medium ~ .icon
-        font-size: $size-medium
-      &.is-large ~ .icon
-        font-size: $size-large
-    .icon
-      color: $input-icon-color
-      height: $input-height
-      pointer-events: none
-      position: absolute
-      top: 0
-      width: $input-height
-      z-index: 4
-  &.has-icons-left
-    .input,
-    .select select
-      padding-left: $input-height
-    .icon.is-left
-      left: 0
-  &.has-icons-right
-    .input,
-    .select select
-      padding-right: $input-height
-    .icon.is-right
-      right: 0
-  &.is-loading
-    &::after
-      @extend %loader
-      position: absolute !important
-      +ltr-position(0.625em)
-      top: 0.625em
-      z-index: 4
-    &.is-small:after
-      font-size: $size-small
-    &.is-medium:after
-      font-size: $size-medium
-    &.is-large:after
-      font-size: $size-large

sass/form/tools.scss

@@ -0,0 +1,360 @@
+$label-color: $text-strong !default;
+$label-weight: $weight-bold !default;
+
+$help-size: $size-small !default;
+
+$label-colors: $form-colors !default;
+
+.label {
+  color: $label-color;
+  display: block;
+  font-size: $size-normal;
+  font-weight: $label-weight;
+
+  &:not(:last-child) {
+    margin-bottom: 0.5em;
+  }
+
+  // Sizes
+  &.is-small {
+    font-size: $size-small;
+  }
+
+  &.is-medium {
+    font-size: $size-medium;
+  }
+
+  &.is-large {
+    font-size: $size-large;
+  }
+}
+
+.help {
+  display: block;
+  font-size: $help-size;
+  margin-top: 0.25rem;
+
+  @each $name, $pair in $label-colors {
+    $color: nth($pair, 1);
+
+    &.is-#{$name} {
+      color: $color;
+    }
+  }
+}
+
+// Containers
+
+.field {
+  &:not(:last-child) {
+    margin-bottom: 0.75rem;
+  }
+
+  // Modifiers
+  &.has-addons {
+    display: flex;
+    justify-content: flex-start;
+
+    .control {
+      &:not(:last-child) {
+        @include ltr-property("margin", -1px);
+      }
+
+      &:not(:first-child):not(:last-child) {
+        .button,
+        .input,
+        .select select {
+          border-radius: 0;
+        }
+      }
+
+      &:first-child:not(:only-child) {
+        .button,
+        .input,
+        .select select {
+          @include ltr {
+            border-bottom-right-radius: 0;
+            border-top-right-radius: 0;
+          }
+
+
+          @include rtl {
+            border-bottom-left-radius: 0;
+            border-top-left-radius: 0;
+          }
+        }
+      }
+
+      &:last-child:not(:only-child) {
+        .button,
+        .input,
+        .select select {
+          @include ltr {
+            border-bottom-left-radius: 0;
+            border-top-left-radius: 0;
+          }
+
+
+          @include rtl {
+            border-bottom-right-radius: 0;
+            border-top-right-radius: 0;
+          }
+        }
+      }
+
+      .button,
+      .input,
+      .select select {
+        &: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;
+        flex-shrink: 1;
+      }
+    }
+
+    &.has-addons-centered {
+      justify-content: center;
+    }
+
+    &.has-addons-right {
+      justify-content: flex-end;
+    }
+
+    &.has-addons-fullwidth {
+      .control {
+        flex-grow: 1;
+        flex-shrink: 0;
+      }
+    }
+  }
+
+  &.is-grouped {
+    display: flex;
+    justify-content: flex-start;
+
+    & > .control {
+      flex-shrink: 0;
+
+      &:not(:last-child) {
+        margin-bottom: 0;
+
+        @include ltr-property("margin", 0.75rem);
+      }
+
+      &.is-expanded {
+        flex-grow: 1;
+        flex-shrink: 1;
+      }
+    }
+
+    &.is-grouped-centered {
+      justify-content: center;
+    }
+
+    &.is-grouped-right {
+      justify-content: flex-end;
+    }
+
+    &.is-grouped-multiline {
+      flex-wrap: wrap;
+
+      & > .control {
+        &:last-child,
+        &:not(:last-child) {
+          margin-bottom: 0.75rem;
+        }
+      }
+
+      &:last-child {
+        margin-bottom: -0.75rem;
+      }
+
+      &:not(:last-child) {
+        margin-bottom: 0;
+      }
+    }
+  }
+
+  &.is-horizontal {
+    @include tablet {
+      display: flex;
+    }
+  }
+}
+
+.field-label {
+  .label {
+    font-size: inherit;
+  }
+
+  @include mobile {
+    margin-bottom: 0.5rem;
+  }
+
+
+  @include tablet {
+    flex-basis: 0;
+    flex-grow: 1;
+    flex-shrink: 0;
+
+    @include ltr-property("margin", 1.5rem);
+
+    text-align: right;
+
+    &.is-small {
+      font-size: $size-small;
+      padding-top: 0.375em;
+    }
+
+    &.is-normal {
+      padding-top: 0.375em;
+    }
+
+    &.is-medium {
+      font-size: $size-medium;
+      padding-top: 0.375em;
+    }
+
+    &.is-large {
+      font-size: $size-large;
+      padding-top: 0.375em;
+    }
+  }
+}
+
+.field-body {
+  .field .field {
+    margin-bottom: 0;
+  }
+
+  @include tablet {
+    display: flex;
+    flex-basis: 0;
+    flex-grow: 5;
+    flex-shrink: 1;
+
+    .field {
+      margin-bottom: 0;
+    }
+
+    & > .field {
+      flex-shrink: 1;
+
+      &:not(.is-narrow) {
+        flex-grow: 1;
+      }
+
+      &:not(:last-child) {
+        @include ltr-property("margin", 0.75rem);
+      }
+    }
+  }
+}
+
+.control {
+  box-sizing: border-box;
+  clear: both;
+  font-size: $size-normal;
+  position: relative;
+  text-align: inherit;
+
+  // Modifiers
+  &.has-icons-left,
+  &.has-icons-right {
+    .input,
+    .select {
+      &:focus {
+        & ~ .icon {
+          color: $input-icon-active-color;
+        }
+      }
+
+      &.is-small ~ .icon {
+        font-size: $size-small;
+      }
+
+      &.is-medium ~ .icon {
+        font-size: $size-medium;
+      }
+
+      &.is-large ~ .icon {
+        font-size: $size-large;
+      }
+    }
+
+    .icon {
+      color: $input-icon-color;
+      height: $input-height;
+      pointer-events: none;
+      position: absolute;
+      top: 0;
+      width: $input-height;
+      z-index: 4;
+    }
+  }
+
+  &.has-icons-left {
+    .input,
+    .select select {
+      padding-left: $input-height;
+    }
+
+    .icon.is-left {
+      left: 0;
+    }
+  }
+
+  &.has-icons-right {
+    .input,
+    .select select {
+      padding-right: $input-height;
+    }
+
+    .icon.is-right {
+      right: 0;
+    }
+  }
+
+  &.is-loading {
+    &::after {
+      @extend %loader;
+
+      position: absolute !important;
+
+      @include ltr-position(0.625em);
+
+      top: 0.625em;
+      z-index: 4;
+    }
+
+    &.is-small:after {
+      font-size: $size-small;
+    }
+
+    &.is-medium:after {
+      font-size: $size-medium;
+    }
+
+    &.is-large:after {
+      font-size: $size-large;
+    }
+  }
+}