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