Blueprint Form

Basic form styles.

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

View the Source for this module on Github.

Imports

The following sass files are automatically imported when you import this file:

  1. Colors

Mixins

View Source: Sass | SCSS 

=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: Sass | SCSS 

=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: Sass | SCSS 

=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
    &[type=checkbox],
    &.checkbox,
    &[type=radio],
    &.radio
      position: relative
      top: 0.25em
  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; }
    &[type=checkbox],
    &.checkbox,
    &[type=radio],
    &.radio {
      position: relative;
      top: 0.25em; } }
  textarea {
    margin: 0.5em 0;
    padding: 5px; }
  select {
    margin: 0.5em 0; } }
View Source: Sass | SCSS 

=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: Sass | SCSS 

=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, select
    border: 1px solid $unfocused_border_color
    &:focus
      border: 1px solid $focus_border_color

@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, select {
    border: 1px solid $unfocused_border_color;
    &:focus {
      border: 1px solid $focus_border_color; } } }