@import “colors”;

// Mixin for producing Blueprint “inline” forms. Should be used with the blueprint-form mixin. @mixin blueprint-inline-form {

line-height: 3;
p {
  margin-bottom: 0;
}

}

@mixin blueprint-form {

@include blueprint-form-layout;
@include blueprint-form-borders;
@include blueprint-form-sizes;

}

@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; }

}

@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; }

}

@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;
  }
}

}