bulma/bulma/elements/controls.sass

=control
  -moz-appearance: none
  -webkit-appearance: none
  background: $control-background
  border: 1px solid $control-border
  border-radius: $radius
  color: $control
  display: inline-block
  font-size: $size-normal
  height: 32px
  line-height: 24px
  padding: 3px 8px
  position: relative
  vertical-align: top
  &:hover
    border-color: $control-hover-border
  &:active,
  &:focus
    border-color: $control-active-border
    outline: none
  &[disabled]
    &,
    &:hover
      background: $background
      border-color: $control-border
      cursor: not-allowed
      +placeholder
        color: rgba($control, 0.3)

=form-control
  +control
  @each $name, $pair in $colors
    $color: nth($pair, 1)
    $color-invert: nth($pair, 2)
    &.is-#{$name}
      border-color: $color
      color: $color

=control-small
  border-radius: 2px
  font-size: 11px
  height: 24px
  line-height: 16px
  padding: 3px 6px
=control-medium
  font-size: 18px
  height: 40px
  line-height: 32px
  padding: 3px 10px
=control-large
  font-size: 24px
  height: 48px
  line-height: 40px
  padding: 3px 12px

.input
  +form-control
  box-shadow: inset 0 1px 2px rgba(black, 0.1)
  display: block
  max-width: 100%
  width: 100%
  &[type="search"]
    border-radius: 290486px
  &.is-flat
    border: none
    box-shadow: none
    padding: 4px 8px
  &.is-small
    +control-small
    &.is-flat
      padding: 4px 6px
  &.is-medium
    +control-medium
    &.is-flat
      padding: 4px 10px
  &.is-large
    +control-large
    &.is-flat
      padding: 4px 12px
  &.is-fullwidth
    display: block
    width: 100%
  &.is-inline
    display: inline
    width: auto

.textarea
  @extend .input
  line-height: 1.2
  max-height: 600px
  max-width: 100%
  min-height: 120px
  min-width: 100%
  padding: 10px
  resize: vertical

%control-with-element
  cursor: pointer
  display: inline-block
  line-height: 16px
  padding-left: 18px
  position: relative
  vertical-align: top
  input
    +form-control
    border-radius: 1px
    box-shadow: inset 0 1px 1px rgba(black, 0.1)
    cursor: pointer
    float: left
    height: 14px
    left: 0
    outline: none
    padding: 0
    position: absolute
    top: 1px
    width: 14px
    &:after
      +arrow($control-active-background-invert)
      height: 4px
      left: 3px
      opacity: 0
      position: absolute
      top: 3px
      transform: rotate(-45deg) scale(1)
    &:checked
      background: $control-active-background
      border-color: $control-active-background
      box-shadow: none
      &:after
        opacity: 1
  &:hover
    color: $control-hover
    input
      border-color: $control-hover-border
      &:checked
        border-color: $control-active-border
  &.is-disabled
    &,
    &:hover
      color: $text-light

.checkbox
  @extend %control-with-element

.radio
  @extend %control-with-element
  & + .radio
    margin-left: 10px
  input
    border-radius: 8px
    &:after
      background: $link-invert
      border: 0
      border-radius: 2px
      left: 4px
      top: 4px
      transform: none
      width: 4px

.select
  display: inline-block
  height: 32px
  position: relative
  vertical-align: top
  select
    +form-control
    cursor: pointer
    display: block
    outline: none
    padding-right: 36px
    &:hover
      border-color: $control-hover-border
    &::ms-expand
      display: none
  &:after
    +arrow($link)
    margin-top: -6px
    right: 16px
    top: 50%
  &:hover
    &:after
      border-color: $link-hover

.label
  color: $text-strong
  display: block
  &:not(:last-child)
    margin-bottom: 5px

.control-label
  flex: 1
  margin-right: 20px
  padding-top: 7px
  text-align: right

.control-element
  display: flex
  flex: 5
  .input:not(:last-child)
    margin-right: 10px

.control
  position: relative
  text-align: left
  &.is-loading
    &:after
      @extend .loader
      position: absolute !important
      right: 8px
      top: 8px
  &:not(:last-child)
    margin-bottom: 10px
  &.has-icon
    & > .fa
      +fa(14px, 20px)
      color: $text-light
      left: 6px
      pointer-events: none
      position: absolute
      top: 6px
      z-index: 4
    .input
      padding-left: 32px
      &:focus + .fa
        color: $control-active
  &.is-grouped
    display: flex
    .input,
    .button,
    .select
      border-radius: 0
      margin-right: -1px
      &:hover
        z-index: 2
      &:active,
      &:focus
        z-index: 3
      &:first-child
        border-radius: $radius 0 0 $radius
        select
          border-radius: $radius 0 0 $radius
      &:last-child
        border-radius: 0 $radius $radius 0
    &.is-centered
      justify-content: center
  &.is-horizontal
    display: flex
    & > .button,
    & > .input,
    & > .select
      &:not(:last-child)
        margin-right: 10px
    & > .input
      flex: 1
  &.is-inline
    display: flex