foundation/stylus/foundation/components/forms.styl

You may also want to checkout:

//
// Form Variables
//
$include-html-form-classes ?= $include-html-classes;

// We use this to set the base for lots of form spacing and positioning styles
$form-spacing ?= emCalc(16px);

// We use these to style the labels in different ways
$form-label-pointer ?= pointer;
$form-label-font-size ?= emCalc(14px);
$form-label-font-weight ?= 500;
$form-label-font-color ?= lighten(#000, 30%);
$form-label-bottom-margin ?= emCalc(3px);
$input-font-family ?= inherit;
$input-font-color ?= rgba(0,0,0,0.75);
$input-font-size ?= emCalc(14px);
$input-bg-color ?= #fff;
$input-focus-bg-color ?= darken(#fff, 2%);
$input-border-color ?= darken(#fff, 20%);
$input-focus-border-color ?= darken(#fff, 40%);
$input-border-style ?= solid;
$input-border-width ?= 1px;
$input-disabled-bg ?= #ddd;
$input-box-shadow ?= inset 0 1px 2px rgba(0,0,0,0.1);
$input-include-glowing-effect ?= true;

// We use these to style the fieldset border and spacing.
$fieldset-border-style ?= solid;
$fieldset-border-width ?= 1px;
$fieldset-border-color ?= #ddd;
$fieldset-padding ?= emCalc(20px);
$fieldset-margin ?= emCalc(18px) 0;

// We use these to style the legends when you use them
$legend-bg ?= #fff;
$legend-font-weight ?= bold;
$legend-padding ?= 0 emCalc(3px);

// We use these to style the prefix and postfix input elements
$input-prefix-bg ?= darken(#fff, 5%);
$input-prefix-border-color ?= darken(#fff, 20%);
$input-prefix-border-size ?= 1px;
$input-prefix-border-type ?= solid;
$input-prefix-overflow ?= hidden;
$input-prefix-font-color ?= #333;
$input-prefix-font-color-alt ?= #fff;

// We use these to style the error states for inputs and labels
$input-error-message-padding ?= emCalc(6px) emCalc(4px);
$input-error-message-top ?= -($form-spacing) - emCalc(5px);
$input-error-message-font-size ?= emCalc(12px);
$input-error-message-font-weight ?= bold;
$input-error-message-font-color ?= #fff;
$input-error-message-font-color-alt ?= #333;

// We use this to style the glowing effect of inputs when focused
$glowing-effect-fade-time ?= 0.45s;
$glowing-effect-color ?= $input-focus-border-color;

//
// Form Mixins
//

// We use this mixin to give us form styles for rows inside of forms
form-row-base() {
  .row {
    margin: 0 (-($form-spacing) / 2);

    .column,
    .columns { padding: 0 ($form-spacing / 2); }

    // Use this to collapse the margins of a form row
    &.collapse { margin: 0;

      .column,
      .columns { padding: 0; }

    }
  }
  input.column,
  input.columns,
  textarea.column,
  textarea.columns {
    padding-{$default-float}: ($form-spacing / 2);
  }
}

// We use this mixin to give all basic form elements their style
form-element() {
  background-color: $input-bg-color;
  font-family: $input-font-family;
  border: $input-border-width $input-border-style $input-border-color;
  if $experimental {
    -webkit-box-shadow: $input-box-shadow;
  }
  box-shadow: $input-box-shadow;
  color: $input-font-color;
  display: block;
  font-size: $input-font-size;
  margin: 0 0 $form-spacing 0;
  padding: ($form-spacing / 2);
  height: emCalc(13px) + ($form-spacing * 1.5);
  width: 100%;
  box-sizing(border-box);
  if $input-include-glowing-effect {
      block-glowing-effect(focus, $glowing-effect-fade-time, $glowing-effect-color);
  }
  // Basic focus styles
  &:focus {
    background: $input-focus-bg-color;
    border-color: $input-focus-border-color;
    outline: none;
  }

  // Disabled background input background color
  &[disabled] { background-color: $input-disabled-bg; }
}

// We use this mixin to create form labels
form-label($alignment=false, $base-style=true) {

  // Control whether or not the base styles come through.
  if $base-style {
    font-size: $form-label-font-size;
    color: $form-label-font-color;
    cursor: $form-label-pointer;
    display: block;
    font-weight: $form-label-font-weight;
    margin-bottom: $form-label-bottom-margin;
  }

  // Alignment options
  if $alignment == right {
    float: none;
    text-align: right;
  } else if $alignment == inline {
    margin: 0 0 $form-spacing 0;
    padding: ($form-spacing / 2) + emCalc($input-border-width * 2) 0;
  }
}

// We use this mixin to create postfix/prefix form Labels
prefix-postfix-base() {
  display: block;
  position: relative;
  z-index: 2;
  text-align: center;
  width: 100%;
  padding-top: 0;
  padding-bottom: 0;
  border-style: $input-prefix-border-type;
  border-width: $input-prefix-border-size;
  overflow: $input-prefix-overflow;
  font-size: $form-label-font-size;
  height: ($form-label-font-size + ($form-spacing * 1.5) - emCalc(1px));
  line-height: ($form-label-font-size + ($form-spacing * 1.5) - emCalc(1px));
}

// We use this mixin to create prefix label styles
prefix($bg=$input-prefix-bg,$is-button=false) {

  if $bg {
    $bg-lightness = lightness($bg);
    background: $bg;
    border-color: darken($bg, 10%);
    border-{$opposite-direction}: none;

    // Control the font color based on background brightness
    if $bg-lightness > 70% or $bg == yellow {
      color: $input-prefix-font-color;
    } else {
      color: $input-prefix-font-color-alt;
    }
  }

  if $is-button {
    padding-{$default-float}: 0;
    padding-{$opposite-direction}: 0;
    padding-top: 0;
    padding-bottom: 0;
    text-align: center;
    line-height: emCalc(34px);
  }

}

// We use this mixin to create postfix label styles
postfix($bg=$input-prefix-bg, $is-button=false) {

  if $bg {
    $bg-lightness = lightness($bg);
    background: $bg;
    border-color: darken($bg, 15%);
    border-{$default-float}: none;

    // Control the font color based on background brightness
    if $bg-lightness > 70%  or $bg == yellow {
      color: $input-prefix-font-color;
    } else {
      color: $input-prefix-font-color-alt;
    }
  }

  if $is-button {
    padding-{$default-float}: 0;
    padding-{$opposite-direction}: 0;
    padding-top: 0;
    padding-bottom: 0;
    text-align: center;
    line-height: emCalc(34px);
  }

}

// We use this mixin to style fieldsets
fieldset() {
  border: $fieldset-border-style $fieldset-border-width $fieldset-border-color;
  padding: $fieldset-padding;
  margin: $fieldset-margin;

  // and legend styles
  legend {
    font-weight: $legend-font-weight;
    background: $legend-bg;
    padding: $legend-padding;
    margin: 0;
    margin-{$default-float}: emCalc(-3px);
  }
}

// We use this mixin to control border and background color of error inputs
form-error-color($color=$alert-color) {
  border-color: $color;
  background-color: rgba($color, 0.1);

  // Go back to normal on focus
  &:focus {
    background: $input-focus-bg-color;
    border-color: $input-focus-border-color;
  }
}

// We use this simple mixin to style labels for error inputs
form-label-error-color($color=$alert-color) {
  color: $color;
}

// We use this mixin to create error message styles
form-error-message($bg=$alert-color) {
  display: block;
  padding: $input-error-message-padding;
  margin-top: $input-error-message-top;
  margin-bottom: $form-spacing;
  font-size: $input-error-message-font-size;
  font-weight: $input-error-message-font-weight;

  // We can control the text color based on the brightness of the background.
  $bg-lightness = lightness($bg);
  background: $bg;
  if $bg-lightness < 70% or $bg == yellow {
    color: $input-error-message-font-color;
  } else {
    color: $input-error-message-font-color-alt;
  }
}

// Only include these classes if the variable is true, otherwise they'll be left out.
if $include-html-form-classes != false {
  /* Standard Forms */
  form { margin: 0 0 $form-spacing; }

  /* Using forms within rows, we need to set some defaults */
  form .row {
    form-row-base();
  }

  /* Label Styles */
  label {
    form-label();
    &.right {
      form-label(right,false);
    }
    &.inline {
      form-label(inline,false);
    }
  }

  /* Attach elements to the beginning or end of an input */
  .prefix,
  .postfix {
    prefix-postfix-base();
  }

  /* Adjust padding, alignment and radius if pre/post element is a button */
  .postfix.button {
    button-size(false,false,false);
    postfix(false,true);
  }
  .prefix.button {
    button-size(false,false,false);
    prefix(false,true);
  }

  .prefix.button.radius {
    radius(0);
    side-radius(left, $button-radius);
  }
  .postfix.button.radius {
    radius(0);
    side-radius(right, $button-radius);
  }
  .prefix.button.round {
    radius(0);
    side-radius(left, $button-round);
  }
  .postfix.button.round {
    radius(0);
    side-radius(right, $button-round);
  }

  /* Separate prefix and postfix styles when on span so buttons keep their own */
  span.prefix {
    prefix();
    &.radius {
      radius(0);
      side-radius(left, $global-radius);
    }
  }
  span.postfix {
    postfix();
    &.radius {
      radius(0);
      side-radius(right, $global-radius);
    }
  }

  /* Input groups will automatically style first and last elements of the group */
  .input-group {
    &.radius {
      &>*:first-child,  &>*:first-child * {
        side-radius($default-float, $global-radius);
      }
      &>*:last-child, &>*:last-child * {
        side-radius($opposite-direction, $global-radius);
      }
    }
    &.round {
      &>*:first-child,  &>*:first-child * {
        side-radius($default-float, $button-round);
      }
      &>*:last-child, &>*:last-child * {
        side-radius($opposite-direction, $button-round);
      }
    }
  }

  /* We use this to get basic styling on all basic form elements */
  input[type="text"],
  input[type="password"],
  input[type="date"],
  input[type="datetime"],
  input[type="datetime-local"],
  input[type="month"],
  input[type="week"],
  input[type="email"],
  input[type="number"],
  input[type="search"],
  input[type="tel"],
  input[type="time"],
  input[type="url"],
  textarea {
    form-element();
    if not $input-include-glowing-effect {
      single-transition(all, 0.15s, linear);
    }
  }

  /* Adjust margin for form elements below */
  input[type="file"],
  input[type="checkbox"],
  input[type="radio"],
  select {
    margin: 0 0 $form-spacing 0;
  }

  /* Normalize file input width */
  input[type="file"] {
    width:100%;
  }

  /* We add basic fieldset styling */
  fieldset {
    fieldset();
  }

  /* Error Handling */
  .error input,
  input.error,
  .error textarea,
  textarea.error {
    form-error-color();
  }

  .error label,
  label.error {
    form-label-error-color();
  }

  .error small,
  small.error {
    form-error-message();
  }
}