form {
margin: 0;
label { display: block; margin-top: $bodyGutter; }
select[multi] { height: 30px; }
input[readonly] { background: #f6f6f6; color: #666; }
.selectize-input, input, select {
background: #fff;
font-size: $fontSize - 1;
outline: none;
border: 2px solid #ccc;
padding: 4px;
width: 290px;
@include border-radius(3px);
}
.selectize-input { padding: 2px; }
.selectize-input.focus, input:focus { border: 2px solid darken(#ccc, 15%); }
input[type="checkbox"] { width: auto; }
input.field-with-error, select.field-with-error {
border-color: $errorColor;
}
div.actions {
margin-top: 2em;
clear: left;
padding: 0.5em 0;
}
p.help {
color: #555;
font-size: 0.9em;
margin-top: 0.1em;
}
}
form.horizontal {
label {
margin-top: 4px;
float: left;
width: 8em;
}
div.form-group {
padding: 4px 0;
clear: left;
}
div.actions {
margin-top: 1em;
margin-left: 8em;
}
p.help, p.error {
font-size: 0.9em;
margin: 2px 0 0 (8em / 0.9);
}
p.error {
background: lighten($errorColor, 40%);
width: 290px;
margin-top: -3px;
padding: 4px;
border: 2px solid $errorColor;
border-top: 0;
@include border-radius(3px);
}
input.field-with-error, select.field-with-error {
border-bottom: 0;
}
@media (max-width: 400px) {
label {
float: none;
width: 100%;
}
div.actions, p.help, p.error {
margin-left: 0;
}
}
}
form.edit-mode {
a.edit-mode {
display: none;
}
}
button, .button {
background: darken(#fff, 2%);
color: #222;
font-size: $fontSize;
text-decoration: none;
padding: 3px 6px;
border: 2px solid darken(#fff, 40%);
@include border-radius(3px);
}
button { vertical-align: baseline; } // make <a> and <button> align. at least in chrome
button:active, button.active, .button:active, .button.active { background: darken(#fff, 20%); }
button.confirm, a.confirm { color: #900; border: 2px solid #900; }
button:hover, .button:hover { border: $buttonBorderHover; }