diff options
Diffstat (limited to 'lib/forms.less')
| -rw-r--r-- | lib/forms.less | 22 |
1 files changed, 17 insertions, 5 deletions
diff --git a/lib/forms.less b/lib/forms.less index 4a1c359e3..f958693fc 100644 --- a/lib/forms.less +++ b/lib/forms.less @@ -1,14 +1,14 @@ -/* - * Forms.less +/* Forms.less * Base styles for various input types, form layouts, and states - */ + * ------------------------------------------------------------- */ -/* Global form styles --------------------------------------------------- */ +// FORM STYLES +// ----------- form { margin-bottom: @baseline; + // Groups of fields with labels on top (legends) fieldset { margin-bottom: @baseline; @@ -21,14 +21,17 @@ form { color: @grayDark; } } + // Parent element that clears floats and wraps labels and fields together div.clearfix { margin-bottom: @baseline; } + // Set font for forms label, input, select, textarea { #font > .sans-serif(normal,13px,normal); } + // Float labels left label { padding-top: 6px; @@ -39,15 +42,18 @@ form { text-align: right; color: @grayDark; } + // Shift over the inside div to align all label's relevant content div.input { margin-left: 150px; } + // Checkboxs and radio buttons input[type=checkbox], input[type=radio] { cursor: pointer; } + // Inputs, Textareas, Selects input[type=text], input[type=password], @@ -79,6 +85,7 @@ form { border-color: #ccc; .box-shadow(inset 0 1px 2px rgba(0,0,0,.075)); } + // Placeholder text gets special styles; can't be bundled together though for some reason :-moz-placeholder { color: @grayLight; @@ -86,6 +93,7 @@ form { ::-webkit-input-placeholder { color: @grayLight; } + // Focus states input[type=text], input[type=password], @@ -102,6 +110,7 @@ form { @shadow: inset 0 1px 3px rgba(0,0,0,.1), 0 0 8px rgba(82,168,236,.6); .box-shadow(@shadow); } + // Error styles div.error { background: lighten(@red, 57%); @@ -133,6 +142,7 @@ form { } } } + // Form element sizes .input-mini, input.mini, textarea.mini, select.mini { width: 60px; @@ -155,6 +165,7 @@ form { textarea.xxlarge { overflow-y: scroll; } + // Turn off focus for disabled (read-only) form elements input[readonly]:focus, textarea[readonly]:focus, @@ -194,6 +205,7 @@ div.actions { .help-inline { padding-left: 5px; } + // Big blocks of help text .help-block { display: block; |
