zhdk/madek

/**
 * ## Form elements
 *

input[type="text"],
input[type="email"],
input[type="password"],
textarea
  +border-radius($border-radius-m)
  +box-shadow(inset 0 1px 3px $darken-less)
  border: 1px solid $mono-light
  color: $mono-dark
  font-size: $font-m
  font-family: $default-font-family
  font-weight: 400
  line-height: $line-height-xs
  margin-bottom: $space-s
  padding: $space-x

input[type="checkbox"]
  margin: 3px

textarea
  +min-dimension(auto, 100px)
  display: block
  text-indent: 0
  padding: $space-x
  resize: none

select
  margin-bottom: $space-s

/* Placeholder
 *-----------------------------------------
\::-webkit-input-placeholder
  color: lighten($mono-dark, 25%) !important

\:-moz-placeholder
  color: lighten($mono-dark, 25%) !important

\:-ms-input-placeholder
  color: lighten($mono-dark, 25%) !important

/* Full width elements
 *-----------------------------------------

input.block,
select.block,
textarea.block
  +box-sizing(border-box)
  display: block
  padding: $space-x 0
  text-indent: 0.5em
  width: 100%

/* Size variations
 *-----------------------------------------

input.large
  font-size: $font-l
  line-height: $line-height-l
  height: 38px
  padding: 3px 0

input.small
  font-size: $font-s
  padding: 3px 5px

/* State variations
 *-----------------------------------------

input[type="text"],
input[type="email"],
input[type="password"],
textarea
  &.error
    border-color: $red

/* Form instructions
 *-----------------------------------------

.form-note
  color: $mono-mid
  font-size: $font-s
  margin-bottom: $space-s

.form-footer
  margin-top: $space-m

/**
 * ## Sample columned form `form`
 *
 * Styleguide 4.1.1

/**
 ** ## Sample rowed form `form`
 **
 ** Styleguide 4.1.2