diff options
| author | Mark Otto <[email protected]> | 2011-11-12 00:46:02 -0800 |
|---|---|---|
| committer | Mark Otto <[email protected]> | 2011-11-12 00:46:02 -0800 |
| commit | 1fb98bed91977b710ae321443d0819939a1a8cc7 (patch) | |
| tree | 27ddc846502e2f89e3bc13e9d4fe86fa29f99e77 /lib/forms.less | |
| parent | 5a702cc6eece2713ac6f6a2f6cbae1b1dd9c5a69 (diff) | |
| download | bootstrap-1fb98bed91977b710ae321443d0819939a1a8cc7.tar.xz bootstrap-1fb98bed91977b710ae321443d0819939a1a8cc7.zip | |
updated docs pages (still wip), adding misc css classes, added form styles from 1.4, added github buttons to homepage
Diffstat (limited to 'lib/forms.less')
| -rw-r--r-- | lib/forms.less | 72 |
1 files changed, 36 insertions, 36 deletions
diff --git a/lib/forms.less b/lib/forms.less index 6edf29e53..b7eb15005 100644 --- a/lib/forms.less +++ b/lib/forms.less @@ -3,6 +3,7 @@ * ------------------------------------------------------------- */ + // GENERAL STYLES // -------------- @@ -84,6 +85,7 @@ input[type=submit] { height: auto; } +// Set the height of select and file controls to match text inputs select, input[type=file] { height: @baseLineHeight * 1.5; // In IE7, the height of the select element cannot be changed by height, only font-size @@ -188,42 +190,47 @@ textarea[readonly] { -// ERROR STATE -// ----------- - -// Set color of error text -@error-text: desaturate(lighten(@red, 25%), 25%); +// FORM FIELD FEEDBACK STATES +// -------------------------- -// Style the background of control-groups with errors -.has-error { - background: lighten(@red, 55%); - padding: (@baseLineHeight / 2) 0; - margin: -10px 0 10px; - .border-radius(4px); +// Mixin for form field states +.formFieldState(@textColor: #555, @borderColor: #ccc, @backgroundColor: #f5f5f5) { + // Set the text color > label, - span.help-inline, - span.help-block { - color: @red; + .help-block, + .help-inline { + color: @textColor; } + // Style inputs accordingly input, - textarea, - select { - border-color: @error-text; - .box-shadow(0 0 3px rgba(171,41,32,.25)); + textarea { + color: @textColor; + border-color: @borderColor; &:focus { - border-color: darken(@error-text, 10%); - .box-shadow(0 0 6px rgba(171,41,32,.5)); + border-color: darken(@borderColor, 10%); + .box-shadow(0 0 6px lighten(@borderColor, 20%); } } - .input-prepend, - .input-append { - span.add-on { - background: lighten(@red, 50%); - border-color: @error-text; - color: darken(@error-text, 10%); - } + // Give a small background color for input-prepend/-append + .input-prepend .add-on, + .input-append .add-on { + color: @textColor; + background-color: @backgroundColor; + border-color: @textColor; } } +// Error +form .clearfix.error { + .formFieldState(#b94a48, #ee5f5b, lighten(#ee5f5b, 30%)); +} +// Warning +form .clearfix.warning { + .formFieldState(#c09853, #ccae64, lighten(#CCAE64, 5%)); +} +// Success +form .clearfix.success { + .formFieldState(#468847, #57a957, lighten(#57a957, 30%)); +} @@ -238,7 +245,6 @@ textarea[readonly] { border-top: 1px solid #ddd; } - // For text that needs to appear as an input but should not be an input .uneditable-input { background-color: @white; @@ -281,6 +287,7 @@ textarea[readonly] { } + // INLINE FIELDS // ------------- @@ -301,6 +308,7 @@ textarea[readonly] { } + // INPUT GROUPS // ------------ @@ -353,7 +361,6 @@ textarea[readonly] { - // SEARCH FORM // ----------- @@ -366,7 +373,6 @@ textarea[readonly] { // HORIZONTAL & VERTICAL FORMS // --------------------------- - // Common properties // ----------------- @@ -374,17 +380,11 @@ textarea[readonly] { .control-group { margin-bottom: @baseLineHeight; } - // Bold the labels so they stand out .control-group > label { font-weight: bold; } -// Lists of controls (checkboxes and radios) -.control-list { -} - - // Horizontal-specific styles // -------------------------- |
