diff options
Diffstat (limited to 'lib/forms.less')
-rw-r--r-- | lib/forms.less | 105 |
1 files changed, 88 insertions, 17 deletions
diff --git a/lib/forms.less b/lib/forms.less index ec459c908a..052d885f53 100644 --- a/lib/forms.less +++ b/lib/forms.less @@ -164,37 +164,108 @@ select:focus { outline: 1px dotted #666; // Selet elements don't get box-shadow styles, so instead we do outline } -// Error styles -form .clearfix.error { - background: lighten(@red, 57%); + +// FORM FIELD FEEDBACK STATES +// -------------------------- + +// Common styles +form .clearfix.error, +form .clearfix.warning, +form .clearfix.success { padding: 10px 0; margin: 10px 0; .border-radius(4px); - @error-text: desaturate(lighten(@red, 25%), 25%); + // Make text a little nicer + > label, + .help-inline, + .help-block { + text-shadow: 0 1px 0 rgba(255,255,255,.5); + } + // Make inputs look a bit sunken + input, + textarea { + -webkit-box-shadow: 0 1px 0 rgba(255,255,255,.5); + -moz-box-shadow: 0 1px 0 rgba(255,255,255,.5); + box-shadow: 0 1px 0 rgba(255,255,255,.5); + } +} + +// Error +@formErrorColor: #ee5f5b; +form .clearfix.error { + background-color: lighten(@formErrorColor, 30%); > label, - span.help-inline, - span.help-block { - color: @red; + .help-inline, + .help-block { + color: darken(@formErrorColor, 20%); } input, textarea { - border-color: @error-text; - .box-shadow(0 0 3px rgba(171,41,32,.25)); + border-color: @formErrorColor; &:focus { - border-color: darken(@error-text, 10%); - .box-shadow(0 0 6px rgba(171,41,32,.5)); + border-color: @formErrorColor; + .box-shadow(0 0 6px @formErrorColor); } } - .input-prepend, - .input-append { - span.add-on { - background: lighten(@red, 50%); - border-color: @error-text; - color: darken(@error-text, 10%); + .input-prepend .add-on, + .input-append .add-on { + background-color: lighten(@formErrorColor, 50%); + border-color: @formErrorColor; + color: @formErrorColor; + } +} + +// Warning +@formWarningColor: #fceec1; +form .clearfix.warning { + background-color: lighten(@formWarningColor, 5%); + > label, + .help-inline, + .help-block { + color: darken(@formWarningColor, 50%); + } + input, + textarea { + border-color: darken(@formWarningColor, 20%); + &:focus { + border-color: darken(@formWarningColor, 40%); + .box-shadow(0 0 6px darken(@formWarningColor, 20%)); } } + .input-prepend .add-on, + .input-append .add-on { + background-color: lighten(@formWarningColor, 50%); + border-color: @formWarningColor; + color: @formWarningColor; + } } +// Success +@formSuccessColor: #62c462; +form .clearfix.success { + background-color: lighten(@formSuccessColor, 30%); + > label, + .help-inline, + .help-block { + color: darken(@formSuccessColor, 20%); + } + input, + textarea { + border-color: darken(@formSuccessColor, 10%); + &:focus { + border-color: darken(@formSuccessColor, 20%); + .box-shadow(0 0 6px @formSuccessColor); + } + } + .input-prepend .add-on, + .input-append .add-on { + background-color: lighten(@formSuccessColor, 50%); + border-color: @formSuccessColor; + color: @formSuccessColor; + } +} + + // Form element sizes // TODO v2: remove duplication here and just stick to .input-[size] in light of adding .spanN sizes .input-mini, |