eight.css/src/eight.forms.styl

A micro (and modular) CSS framework based on 8pt grid

@require 'eight.theme'


/* Forms */

fieldset
  position relative
  margin 0
  min-width auto
  border none
  padding $form-fieldset-padding * 3 $form-fieldset-padding $form-fieldset-padding

legend
  position absolute
  top 0
  left 0
  margin $form-fieldset-padding

input,
textarea,
select,
button
  width 100%
  padding $form-input-padding
  margin 0
  outline 0
  box-sizing border-box
  border-radius $base-border-radius
  border 1px solid $border-color
  background-color $white-color
  box-shadow none

input
select
  max-width $form-input-max-width
  min-height $form-input-min-height
  max-height $form-input-min-height
  line-height $form-input-min-height - $form-input-padding * 2

select,
input[type="file"],
input[type="reset"],
input[type="submit"],
input[type="button"],
input[type="checkbox"],
input[type="radio"],
button
  cursor pointer

input[type="file"]
  padding-top $form-input-padding * .5
  padding-bottom $form-input-padding * .5

input[type="reset"],
input[type="submit"],
input[type="button"],
button
  width auto
  min-height auto

input[type="checkbox"],
input[type="radio"]
  position relative
  width 1rem
  height 1rem
  min-width 1rem
  min-height 1rem
  margin-top -.2rem

/* Doesn't work on FF...
  &:before
    position absolute
    display inline-block
    visibility visible
    content ''
    top -1px
    width 100%
    height 100%
    border 1px solid $border-color
    text-align center
    vertical-align middle
    font-size 1rem
    line-height 1rem

input[type="checkbox"]
  &:checked:before
    content '\23F9'

input[type="radio"]
  &:checked:before
    content '\23FA'

  &:before
    border-radius 50%
*/

input[type="checkbox"]+label,
input[type="radio"]+label
  font-weight $base-font-weight

textarea
  max-width $form-textarea-max-width
  min-height $form-textarea-min-height