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