bulma/sass/elements/form.sass

$input-color: $grey-darker !default
$input-background-color: $white !default
$input-border-color: $grey-lighter !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

$input-focus-color: $grey-darker !default
$input-focus-border-color: $link !default
$input-focus-box-shadow-size: 0 0 0 0.125em !default
$input-focus-box-shadow-color: rgba($link, 0.25) !default

$input-disabled-color: $text-light !default
$input-disabled-background-color: $background !default
$input-disabled-border-color: $background !default

$input-arrow: $link !default

$input-icon-color: $grey-lighter !default
$input-icon-active-color: $grey !default

$input-radius: $radius !default

$file-border-color: $border !default
$file-radius: $radius !default

$file-cta-background-color: $white-ter !default
$file-cta-color: $grey-dark !default
$file-cta-hover-color: $grey-darker !default
$file-cta-active-color: $grey-darker !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

$label-color: $grey-darker !default
$label-weight: $weight-bold !default

$help-size: $size-small !default

=input
  +control
  background-color: $input-background-color
  border-color: $input-border-color
  color: $input-color
  +placeholder
    color: rgba($input-color, 0.3)
  &: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]
    background-color: $input-disabled-background-color
    border-color: $input-disabled-border-color
    box-shadow: none
    color: $input-disabled-color
    +placeholder
      color: rgba($input-disabled-color, 0.3)

.input,
.textarea
  +input
  box-shadow: $input-shadow
  max-width: 100%
  width: 100%
  &[readonly]
    box-shadow: none
  // Colors
  @each $name, $pair in $colors
    $color: nth($pair, 1)
    &.is-#{$name}
      border-color: $color
      &:focus,
      &.is-focused,
      &:active,
      &.is-active
        box-shadow: $input-focus-box-shadow-size rgba($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
  &.is-rounded
    border-radius: $radius-rounded
    padding-left: 1em
    padding-right: 1em
  &.is-static
    background-color: transparent
    border-color: transparent
    box-shadow: none
    padding-left: 0
    padding-right: 0

.textarea
  display: block
  max-width: 100%
  min-width: 100%
  padding: 0.625em
  resize: vertical
  &:not([rows])
    max-height: 600px
    min-height: 120px
  &[rows]
    height: initial
  // Modifiers
  &.has-fixed-size
    resize: none

.checkbox,
.radio
  cursor: pointer
  display: inline-block
  line-height: 1.25
  position: relative
  input
    cursor: pointer
  &:hover
    color: $input-hover-color
  &[disabled]
    color: $input-disabled-color
    cursor: not-allowed

.radio
  & + .radio
    margin-left: 0.5em

.select
  display: inline-block
  max-width: 100%
  position: relative
  vertical-align: top
  &:not(.is-multiple)
    height: 2.25em
  &:not(.is-multiple):not(.is-loading)
    &::after
      +arrow($input-arrow)
      right: 1.125em
      z-index: 4
  &.is-rounded
    select
      border-radius: $radius-rounded
      padding-left: 1em
  select
    +input
    cursor: pointer
    display: block
    font-size: 1em
    max-width: 100%
    outline: none
    &::-ms-expand
      display: none
    &[disabled]:hover
      border-color: $input-disabled-border-color
    &:not([multiple])
      padding-right: 2.5em
    &[multiple]
      height: initial
      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 $colors
    $color: nth($pair, 1)
    &.is-#{$name}
      &:not(:hover)::after
        border-color: $color
      select
        border-color: $color
        &:hover,
        &.is-hovered
          border-color: darken($color, 5%)
        &:focus,
        &.is-focused,
        &:active,
        &.is-active
          box-shadow: $input-focus-box-shadow-size rgba($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
  &.is-fullwidth
    width: 100%
    select
      width: 100%
  &.is-loading
    &::after
      +loader
      margin-top: 0
      position: absolute
      right: 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

.file
  +unselectable
  align-items: stretch
  display: flex
  justify-content: flex-start
  position: relative
  // Colors
  @each $name, $pair in $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: darken($color, 2.5%)
          border-color: transparent
          color: $color-invert
      &:focus,
      &.is-focused
        .file-cta
          border-color: transparent
          box-shadow: 0 0 0.5em rgba($color, 0.25)
          color: $color-invert
      &:active,
      &.is-active
        .file-cta
          background-color: darken($color, 5%)
          border-color: transparent
          color: $color-invert
  // Sizes
  &.is-small
    font-size: $size-small
  &.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: darken($file-cta-background-color, 2.5%)
      color: $file-cta-hover-color
    .file-name
      border-color: darken($file-name-border-color, 2.5%)
  &:active
    .file-cta
      background-color: darken($file-cta-background-color, 5%)
      color: $file-cta-active-color
    .file-name
      border-color: darken($file-name-border-color, 5%)

.file-input
  height: 0.01em
  left: 0
  outline: none
  position: absolute
  top: 0
  width: 0.01em

.file-cta,
.file-name
  +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: left
  text-overflow: ellipsis

.file-icon
  align-items: center
  display: flex
  height: 1em
  justify-content: center
  margin-right: 0.5em
  width: 1em
  .fa
    font-size: 14px

.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 $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)
        margin-right: -1px
      &:not(:first-child):not(:last-child)
        .button,
        .input,
        .select select
          border-radius: 0
      &:first-child
        .button,
        .input,
        .select select
          border-bottom-right-radius: 0
          border-top-right-radius: 0
      &:last-child
        .button,
        .input,
        .select select
          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
      &.is-expanded
        flex-grow: 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
        margin-right: 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
    margin-right: 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)
        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
      pointer-events: none
      position: absolute
      top: 0
      width: 2.25em
      z-index: 4
    .input
      &: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
    &:not(.has-icon-right)
      .icon
        left: 0
      .input
        padding-left: 2.25em
    &.has-icon-right
      .icon
        right: 0
      .input
        padding-right: 2.25em
  &.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: 2.25em
      pointer-events: none
      position: absolute
      top: 0
      width: 2.25em
      z-index: 4
  &.has-icons-left
    .input,
    .select select
      padding-left: 2.25em
    .icon.is-left
      left: 0
  &.has-icons-right
    .input,
    .select select
      padding-right: 2.25em
    .icon.is-right
      right: 0
  &.is-loading
    &::after
      +loader
      position: absolute !important
      right: 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