67 lines
1.6 KiB
SCSS
67 lines
1.6 KiB
SCSS
@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; }
|
|
}
|