diff options
Diffstat (limited to 'assets/less/forms.less')
| -rw-r--r-- | assets/less/forms.less | 232 |
1 files changed, 232 insertions, 0 deletions
diff --git a/assets/less/forms.less b/assets/less/forms.less new file mode 100644 index 0000000..2630547 --- /dev/null +++ b/assets/less/forms.less @@ -0,0 +1,232 @@ +form { + margin: 0 0 5px 0; + fieldset { + margin-bottom: 5px; + padding: 0; + border-width: 0; + } + legend { + display: block; + width: 100%; + margin-bottom: 5px * 2; + *margin-left: -7px; + padding: 0; + color: @text-color; + border: 0; + border-bottom: 1px solid lighten(@black, 80); + white-space: normal; + } + p { + margin-bottom: 5px / 2; + } + ul { + list-style-type: none; + margin: 0 0 5px 0; + padding: 0; + } + br { + display: none; + } +} +label, +input, +button, +select, +textarea { + vertical-align: baseline; + *vertical-align: middle; +} +input, +button, +select, +textarea { + font-family: @base-font; + .box-sizing(border-box); +} +label { + display: block; + margin-bottom: 10px / 8; + font-weight: bold; + color: @text-color; + cursor: pointer; + input, + textarea, + select { + display: block; + } +} +input, +textarea, +select { + display: inline-block; + width: 100%; + padding: 4px; + margin-bottom: 5px / 4; + background-color: @white; + border: 1px solid lighten(@black, 80); + color: @text-color; + &:hover { + border-color: lighten(@accent-color, 50); + } +} +.input-mini { + width: 60px; +} +.input-small { + width: 90px; +} +input[type="image"], +input[type="checkbox"], +input[type="radio"] { + width: auto; + height: auto; + padding: 0; + margin: 3px 0; + *margin-top: 0; + line-height: normal; + cursor: pointer; + .rounded(0); + border: 0 \9; +} +input[type="checkbox"], +input[type="radio"] { + .box-sizing(border-box); + padding: 0; + *width: 13px; + *height: 13px; +} +input[type="image"] { + border: 0; + .box-shadow(none); +} +input[type="file"] { + width: auto; + padding: initial; + line-height: initial; + border: initial; + background-color: transparent; + background-color: initial; + .box-shadow(none); +} +input[type="button"], +input[type="reset"], +input[type="submit"] { + width : auto; + height : auto; + cursor : pointer; + *overflow : visible; +} +select, +input[type="file"] { + *margin-top : 4px; +} +select { + width : auto; + background-color : @white; +} +select[multiple], +select[size] { + height : auto; +} +textarea { + .resize(vertical); + height : auto; + overflow : auto; + vertical-align : top; +} +input[type="hidden"] { + display : none; +} +.radio, +.checkbox { + padding-left : 18px; + font-weight : normal; +} +.radio input[type="radio"], +.checkbox input[type="checkbox"] { + float : left; + margin-left : -18px; +} +.radio.inline, +.checkbox.inline { + display : inline-block; + padding-top : 5px; + margin-bottom : 0; + vertical-align : middle; +} +.radio.inline + .radio.inline, +.checkbox.inline + .checkbox.inline { + margin-left : 10px; +} + +// disabled +// -------------------------------------------------- + +input[disabled], +select[disabled], +textarea[disabled], +input[readonly], +select[readonly], +textarea[readonly] { + .opacity(.5); + cursor : not-allowed; +} + +// focus and active +// -------------------------------------------------- + +input:focus, +textarea:focus { + border-color : @accent-color; + outline : 0; + outline : thin dotted \9; +} +input[type="file"]:focus, +input[type="radio"]:focus, +input[type="checkbox"]:focus, +select:focus { + .box-shadow(none); +} + +// help text +// -------------------------------------------------- + +.help-block, +.help-inline { + color : lighten(@black, 50); +} +.help-block { + display : block; + margin-bottom : 1em; + line-height : 1em; +} +.help-inline { + display : inline-block; + vertical-align : middle; + padding-left : 5px; +} + +// .form-inline +// -------------------------------------------------- + +.form-inline input, +.form-inline textarea, +.form-inline select { + display : inline-block; + margin-bottom : 0; +} +.form-inline label { + display : inline-block; +} +.form-inline .radio, +.form-inline .checkbox, +.form-inline .radio { + padding-left : 0; + margin-bottom : 0; + vertical-align : middle; +} +.form-inline .radio input[type="radio"], +.form-inline .checkbox input[type="checkbox"] { + float : left; + margin-left : 0; + margin-right : 3px; }
\ No newline at end of file |