Source on Github

Blueprint Form

Basic form styles.

This file can be imported using: @import "blueprint/form"

Imports

  1. Colors

Mixins

view source 

=blueprint-inline-form
  line-height: 3
  p
    margin-bottom: 0

@mixin blueprint-inline-form {
  line-height: 3;
  p {
    margin-bottom: 0;
  }
}

Mixin for producing Blueprint "inline" forms. Should be used with the blueprint-form mixin.

view source 

=blueprint-form
  +blueprint-form-layout
  +blueprint-form-borders
  +blueprint-form-sizes

@mixin blueprint-form {
  @include blueprint-form-layout;
  @include blueprint-form-borders;
  @include blueprint-form-sizes;
}
view source 

=blueprint-form-layout
  label
    font-weight: bold
  fieldset
    padding: 1.4em
    margin: 0 0 1.5em 0
  legend
    font-weight: bold
    font-size: 1.2em
  input
    &.text,
    &.title,
    &[type=email],
    &[type=text],
    &[type=password]
      margin: 0.5em 0
      background-color: white
      padding: 5px
    &.title
      font-size: 1.5em
  textarea
    margin: 0.5em 0
    padding: 5px
  select
    margin: 0.5em 0

@mixin blueprint-form-layout {
  label {
    font-weight: bold;
  }
  fieldset {
    padding: 1.4em;
    margin: 0 0 1.5em 0;
  }
  legend {
    font-weight: bold;
    font-size: 1.2em;
  }
  input {
    &.text,
    &.title,
    &[type=email],
    &[type=text],
    &[type=password] {
      margin: 0.5em 0;
      background-color: white;
      padding: 5px;
    }
    &.title {
      font-size: 1.5em;
    }
  }
  textarea {
    margin: 0.5em 0;
    padding: 5px;
  }
  select {
    margin: 0.5em 0;
  }
}
view source 

=blueprint-form-sizes($input-width: 300px, $textarea-width: 390px, $textarea-height: 250px)
  input
    &.text,
    &.title,
    &[type=email],
    &[type=text],
    &[type=password]
      width: $input-width
  textarea
    width: $textarea-width
    height: $textarea-height

@mixin blueprint-form-sizes($input-width: 300px, $textarea-width: 390px, $textarea-height: 250px) {
  input {
    &.text,
    &.title,
    &[type=email],
    &[type=text],
    &[type=password] {
      width: $input-width;
    }
  }
  textarea {
    width: $textarea-width;
    height: $textarea-height;
  }
}
view source 

=blueprint-form-borders($unfocused-border-color: #bbbbbb, $focus-border-color: #666666, $fieldset-border-color: #cccccc)
  fieldset
    border: 1px solid $fieldset-border-color
  input.text, input.title, input[type=email], input[type=text], input[type=password],
  textarea
    background-color: #fff
    border: 1px solid $unfocused-border-color
    &:focus
      border-color: $focus-border-color
  select
    background-color: #fff
    border-width: 1px
    border-style: solid

@mixin blueprint-form-borders($unfocused-border-color: #bbbbbb, $focus-border-color: #666666, $fieldset-border-color: #cccccc) {
  fieldset {
    border: 1px solid $fieldset-border-color;
  }
  input.text, input.title, input[type=email], input[type=text], input[type=password],
  textarea {
    background-color: #fff;
    border: 1px solid $unfocused-border-color;
    &:focus {
      border-color: $focus-border-color;
    }
  }
  select {
    background-color: #fff;
    border-width: 1px;
    border-style: solid;
  }
}