mirror of
https://github.com/twbs/bootstrap.git
synced 2024-11-30 12:24:19 +01:00
new form state styles with lighter footprint
This commit is contained in:
Mark Otto
parent
831f279011
commit
b74776281d
100
bootstrap.css
vendored
100
bootstrap.css
vendored
@ -6,7 +6,7 @@
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Designed and built with all the love in the world @twitter by @mdo and @fat.
|
||||
* Date: Sun Oct 9 22:02:13 PDT 2011
|
||||
* Date: Sun Oct 9 22:31:28 PDT 2011
|
||||
*/
|
||||
/* Reset.less
|
||||
* Props to Eric Meyer (meyerweb.com) for his CSS reset file. We're using an adapted version here that cuts out some of the reset HTML elements we will never need here (i.e., dfn, samp, etc).
|
||||
@ -722,93 +722,59 @@ input[type=file]:focus, input[type=checkbox]:focus, select:focus {
|
||||
box-shadow: none;
|
||||
outline: 1px dotted #666;
|
||||
}
|
||||
form .clearfix.error, form .clearfix.warning, form .clearfix.success {
|
||||
padding: 10px 0;
|
||||
margin: 10px 0;
|
||||
-webkit-border-radius: 4px;
|
||||
-moz-border-radius: 4px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
form .clearfix.error > label,
|
||||
form .clearfix.warning > label,
|
||||
form .clearfix.success > label,
|
||||
form .clearfix.error .help-inline,
|
||||
form .clearfix.warning .help-inline,
|
||||
form .clearfix.success .help-inline,
|
||||
form .clearfix.error .help-block,
|
||||
form .clearfix.warning .help-block,
|
||||
form .clearfix.success .help-block {
|
||||
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
|
||||
}
|
||||
form .clearfix.error input,
|
||||
form .clearfix.warning input,
|
||||
form .clearfix.success input,
|
||||
form .clearfix.error textarea,
|
||||
form .clearfix.warning textarea,
|
||||
form .clearfix.success textarea {
|
||||
-webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
|
||||
-moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
|
||||
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
|
||||
}
|
||||
form .clearfix.error {
|
||||
background-color: #fce6e6;
|
||||
}
|
||||
form .clearfix.error > label, form .clearfix.error .help-inline, form .clearfix.error .help-block {
|
||||
color: #ce1a15;
|
||||
form .clearfix.error > label, form .clearfix.error .help-block, form .clearfix.error .help-inline {
|
||||
color: #ee5f5b;
|
||||
}
|
||||
form .clearfix.error input, form .clearfix.error textarea {
|
||||
color: #ee5f5b;
|
||||
border-color: #ee5f5b;
|
||||
}
|
||||
form .clearfix.error input:focus, form .clearfix.error textarea:focus {
|
||||
border-color: #ee5f5b;
|
||||
-webkit-box-shadow: 0 0 6px #ee5f5b;
|
||||
-moz-box-shadow: 0 0 6px #ee5f5b;
|
||||
box-shadow: 0 0 6px #ee5f5b;
|
||||
border-color: #e9322d;
|
||||
-webkit-box-shadow: 0 0 6px #f8b9b7;
|
||||
-moz-box-shadow: 0 0 6px #f8b9b7;
|
||||
box-shadow: 0 0 6px #f8b9b7;
|
||||
}
|
||||
form .clearfix.error .input-prepend .add-on, form .clearfix.error .input-append .add-on {
|
||||
background-color: #ffffff;
|
||||
border-color: #ee5f5b;
|
||||
color: #ee5f5b;
|
||||
background-color: #fce6e6;
|
||||
border-color: #ee5f5b;
|
||||
}
|
||||
form .clearfix.warning {
|
||||
background-color: #fdf5d9;
|
||||
}
|
||||
form .clearfix.warning > label, form .clearfix.warning .help-inline, form .clearfix.warning .help-block {
|
||||
color: #b58c09;
|
||||
form .clearfix.warning > label, form .clearfix.warning .help-block, form .clearfix.warning .help-inline {
|
||||
color: #ccae64;
|
||||
}
|
||||
form .clearfix.warning input, form .clearfix.warning textarea {
|
||||
border-color: #f7d360;
|
||||
color: #ccae64;
|
||||
border-color: #ccae64;
|
||||
}
|
||||
form .clearfix.warning input:focus, form .clearfix.warning textarea:focus {
|
||||
border-color: #e6b20b;
|
||||
-webkit-box-shadow: 0 0 6px #f7d360;
|
||||
-moz-box-shadow: 0 0 6px #f7d360;
|
||||
box-shadow: 0 0 6px #f7d360;
|
||||
border-color: #be9a3f;
|
||||
-webkit-box-shadow: 0 0 6px #e5d6b1;
|
||||
-moz-box-shadow: 0 0 6px #e5d6b1;
|
||||
box-shadow: 0 0 6px #e5d6b1;
|
||||
}
|
||||
form .clearfix.warning .input-prepend .add-on, form .clearfix.warning .input-append .add-on {
|
||||
background-color: #ffffff;
|
||||
border-color: #fceec1;
|
||||
color: #fceec1;
|
||||
color: #ccae64;
|
||||
background-color: #d2b877;
|
||||
border-color: #ccae64;
|
||||
}
|
||||
form .clearfix.success {
|
||||
background-color: #d1eed1;
|
||||
}
|
||||
form .clearfix.success > label, form .clearfix.success .help-inline, form .clearfix.success .help-block {
|
||||
color: #348c34;
|
||||
form .clearfix.success > label, form .clearfix.success .help-block, form .clearfix.success .help-inline {
|
||||
color: #57a957;
|
||||
}
|
||||
form .clearfix.success input, form .clearfix.success textarea {
|
||||
border-color: #42b142;
|
||||
color: #57a957;
|
||||
border-color: #57a957;
|
||||
}
|
||||
form .clearfix.success input:focus, form .clearfix.success textarea:focus {
|
||||
border-color: #348c34;
|
||||
-webkit-box-shadow: 0 0 6px #62c462;
|
||||
-moz-box-shadow: 0 0 6px #62c462;
|
||||
box-shadow: 0 0 6px #62c462;
|
||||
border-color: #458845;
|
||||
-webkit-box-shadow: 0 0 6px #9acc9a;
|
||||
-moz-box-shadow: 0 0 6px #9acc9a;
|
||||
box-shadow: 0 0 6px #9acc9a;
|
||||
}
|
||||
form .clearfix.success .input-prepend .add-on, form .clearfix.success .input-append .add-on {
|
||||
background-color: #ffffff;
|
||||
border-color: #62c462;
|
||||
color: #62c462;
|
||||
color: #57a957;
|
||||
background-color: #bcddbc;
|
||||
border-color: #57a957;
|
||||
}
|
||||
.input-mini,
|
||||
input.mini,
|
||||
@ -943,7 +909,7 @@ textarea[readonly] {
|
||||
text-decoration: underline;
|
||||
}
|
||||
.help-inline, .help-block {
|
||||
font-size: 11px;
|
||||
font-size: 13px;
|
||||
line-height: 18px;
|
||||
color: #bfbfbf;
|
||||
}
|
||||
|
||||
22
bootstrap.min.css
vendored
22
bootstrap.min.css
vendored
@ -126,17 +126,15 @@ textarea{height:auto;}
|
||||
input,textarea{-webkit-transition:border linear 0.2s,box-shadow linear 0.2s;-moz-transition:border linear 0.2s,box-shadow linear 0.2s;-ms-transition:border linear 0.2s,box-shadow linear 0.2s;-o-transition:border linear 0.2s,box-shadow linear 0.2s;transition:border linear 0.2s,box-shadow linear 0.2s;-webkit-box-shadow:inset 0 1px 3px rgba(0, 0, 0, 0.1);-moz-box-shadow:inset 0 1px 3px rgba(0, 0, 0, 0.1);box-shadow:inset 0 1px 3px rgba(0, 0, 0, 0.1);}
|
||||
input:focus,textarea:focus{outline:0;border-color:rgba(82, 168, 236, 0.8);-webkit-box-shadow:inset 0 1px 3px rgba(0, 0, 0, 0.1),0 0 8px rgba(82, 168, 236, 0.6);-moz-box-shadow:inset 0 1px 3px rgba(0, 0, 0, 0.1),0 0 8px rgba(82, 168, 236, 0.6);box-shadow:inset 0 1px 3px rgba(0, 0, 0, 0.1),0 0 8px rgba(82, 168, 236, 0.6);}
|
||||
input[type=file]:focus,input[type=checkbox]:focus,select:focus{-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none;outline:1px dotted #666;}
|
||||
form .clearfix.error,form .clearfix.warning,form .clearfix.success{padding:10px 0;margin:10px 0;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;}form .clearfix.error>label,form .clearfix.warning>label,form .clearfix.success>label,form .clearfix.error .help-inline,form .clearfix.warning .help-inline,form .clearfix.success .help-inline,form .clearfix.error .help-block,form .clearfix.warning .help-block,form .clearfix.success .help-block{text-shadow:0 1px 0 rgba(255, 255, 255, 0.5);}
|
||||
form .clearfix.error input,form .clearfix.warning input,form .clearfix.success input,form .clearfix.error textarea,form .clearfix.warning textarea,form .clearfix.success textarea{-webkit-box-shadow:0 1px 0 rgba(255, 255, 255, 0.5);-moz-box-shadow:0 1px 0 rgba(255, 255, 255, 0.5);box-shadow:0 1px 0 rgba(255, 255, 255, 0.5);}
|
||||
form .clearfix.error{background-color:#fce6e6;}form .clearfix.error>label,form .clearfix.error .help-inline,form .clearfix.error .help-block{color:#ce1a15;}
|
||||
form .clearfix.error input,form .clearfix.error textarea{border-color:#ee5f5b;}form .clearfix.error input:focus,form .clearfix.error textarea:focus{border-color:#ee5f5b;-webkit-box-shadow:0 0 6px #ee5f5b;-moz-box-shadow:0 0 6px #ee5f5b;box-shadow:0 0 6px #ee5f5b;}
|
||||
form .clearfix.error .input-prepend .add-on,form .clearfix.error .input-append .add-on{background-color:#ffffff;border-color:#ee5f5b;color:#ee5f5b;}
|
||||
form .clearfix.warning{background-color:#fdf5d9;}form .clearfix.warning>label,form .clearfix.warning .help-inline,form .clearfix.warning .help-block{color:#b58c09;}
|
||||
form .clearfix.warning input,form .clearfix.warning textarea{border-color:#f7d360;}form .clearfix.warning input:focus,form .clearfix.warning textarea:focus{border-color:#e6b20b;-webkit-box-shadow:0 0 6px #f7d360;-moz-box-shadow:0 0 6px #f7d360;box-shadow:0 0 6px #f7d360;}
|
||||
form .clearfix.warning .input-prepend .add-on,form .clearfix.warning .input-append .add-on{background-color:#ffffff;border-color:#fceec1;color:#fceec1;}
|
||||
form .clearfix.success{background-color:#d1eed1;}form .clearfix.success>label,form .clearfix.success .help-inline,form .clearfix.success .help-block{color:#348c34;}
|
||||
form .clearfix.success input,form .clearfix.success textarea{border-color:#42b142;}form .clearfix.success input:focus,form .clearfix.success textarea:focus{border-color:#348c34;-webkit-box-shadow:0 0 6px #62c462;-moz-box-shadow:0 0 6px #62c462;box-shadow:0 0 6px #62c462;}
|
||||
form .clearfix.success .input-prepend .add-on,form .clearfix.success .input-append .add-on{background-color:#ffffff;border-color:#62c462;color:#62c462;}
|
||||
form .clearfix.error>label,form .clearfix.error .help-block,form .clearfix.error .help-inline{color:#ee5f5b;}
|
||||
form .clearfix.error input,form .clearfix.error textarea{color:#ee5f5b;border-color:#ee5f5b;}form .clearfix.error input:focus,form .clearfix.error textarea:focus{border-color:#e9322d;-webkit-box-shadow:0 0 6px #f8b9b7;-moz-box-shadow:0 0 6px #f8b9b7;box-shadow:0 0 6px #f8b9b7;}
|
||||
form .clearfix.error .input-prepend .add-on,form .clearfix.error .input-append .add-on{color:#ee5f5b;background-color:#fce6e6;border-color:#ee5f5b;}
|
||||
form .clearfix.warning>label,form .clearfix.warning .help-block,form .clearfix.warning .help-inline{color:#ccae64;}
|
||||
form .clearfix.warning input,form .clearfix.warning textarea{color:#ccae64;border-color:#ccae64;}form .clearfix.warning input:focus,form .clearfix.warning textarea:focus{border-color:#be9a3f;-webkit-box-shadow:0 0 6px #e5d6b1;-moz-box-shadow:0 0 6px #e5d6b1;box-shadow:0 0 6px #e5d6b1;}
|
||||
form .clearfix.warning .input-prepend .add-on,form .clearfix.warning .input-append .add-on{color:#ccae64;background-color:#d2b877;border-color:#ccae64;}
|
||||
form .clearfix.success>label,form .clearfix.success .help-block,form .clearfix.success .help-inline{color:#57a957;}
|
||||
form .clearfix.success input,form .clearfix.success textarea{color:#57a957;border-color:#57a957;}form .clearfix.success input:focus,form .clearfix.success textarea:focus{border-color:#458845;-webkit-box-shadow:0 0 6px #9acc9a;-moz-box-shadow:0 0 6px #9acc9a;box-shadow:0 0 6px #9acc9a;}
|
||||
form .clearfix.success .input-prepend .add-on,form .clearfix.success .input-append .add-on{color:#57a957;background-color:#bcddbc;border-color:#57a957;}
|
||||
.input-mini,input.mini,textarea.mini,select.mini{width:60px;}
|
||||
.input-small,input.small,textarea.small,select.small{width:90px;}
|
||||
.input-medium,input.medium,textarea.medium,select.medium{width:150px;}
|
||||
@ -162,7 +160,7 @@ input.span15,textarea.span15{display:inline-block;width:870px;}
|
||||
input.span16,textarea.span16{display:inline-block;width:930px;}
|
||||
input[disabled],select[disabled],textarea[disabled],input[readonly],select[readonly],textarea[readonly]{background-color:#f5f5f5;border-color:#ddd;cursor:not-allowed;}
|
||||
.actions{background:#f5f5f5;margin-top:18px;margin-bottom:18px;padding:17px 20px 18px 150px;border-top:1px solid #ddd;-webkit-border-radius:0 0 3px 3px;-moz-border-radius:0 0 3px 3px;border-radius:0 0 3px 3px;}.actions .secondary-action{float:right;}.actions .secondary-action a{line-height:30px;}.actions .secondary-action a:hover{text-decoration:underline;}
|
||||
.help-inline,.help-block{font-size:11px;line-height:18px;color:#bfbfbf;}
|
||||
.help-inline,.help-block{font-size:13px;line-height:18px;color:#bfbfbf;}
|
||||
.help-inline{padding-left:5px;*position:relative;*top:-5px;}
|
||||
.help-block{display:block;max-width:600px;}
|
||||
.inline-inputs{color:#808080;}.inline-inputs span,.inline-inputs input{display:inline-block;}
|
||||
|
||||
@ -1109,13 +1109,6 @@
|
||||
<span class="help-inline">Small snippet of help text</span>
|
||||
</div>
|
||||
</div><!-- /clearfix -->
|
||||
<div class="clearfix error">
|
||||
<label for="errorInput2">Input with error</label>
|
||||
<div class="input">
|
||||
<input class="xlarge error" id="errorInput2" name="errorInput2" size="30" type="text" />
|
||||
<span class="help-inline">Small snippet of help text</span>
|
||||
</div>
|
||||
</div><!-- /clearfix -->
|
||||
<div class="clearfix success">
|
||||
<label for="successInput">Input with success</label>
|
||||
<div class="input">
|
||||
|
||||
107
lib/forms.less
107
lib/forms.less
@ -168,101 +168,43 @@ select:focus {
|
||||
// FORM FIELD FEEDBACK STATES
|
||||
// --------------------------
|
||||
|
||||
// Common styles
|
||||
form .clearfix.error,
|
||||
form .clearfix.warning,
|
||||
form .clearfix.success {
|
||||
padding: 10px 0;
|
||||
margin: 10px 0;
|
||||
.border-radius(4px);
|
||||
// Make text a little nicer
|
||||
// Mixin for form field states
|
||||
.formFieldState(@textColor: #555, @backgroundColor: #f5f5f5) {
|
||||
// Set the text color
|
||||
> label,
|
||||
.help-inline,
|
||||
.help-block {
|
||||
text-shadow: 0 1px 0 rgba(255,255,255,.5);
|
||||
.help-block,
|
||||
.help-inline {
|
||||
color: @textColor;
|
||||
}
|
||||
// Make inputs look a bit sunken
|
||||
// Style inputs accordingly
|
||||
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);
|
||||
color: @textColor;
|
||||
border-color: @textColor;
|
||||
&:focus {
|
||||
border-color: darken(@textColor, 10%);
|
||||
.box-shadow(0 0 6px lighten(@textColor, 20%);
|
||||
}
|
||||
}
|
||||
// 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
|
||||
@formErrorColor: #ee5f5b;
|
||||
form .clearfix.error {
|
||||
background-color: lighten(@formErrorColor, 30%);
|
||||
> label,
|
||||
.help-inline,
|
||||
.help-block {
|
||||
color: darken(@formErrorColor, 20%);
|
||||
}
|
||||
input,
|
||||
textarea {
|
||||
border-color: @formErrorColor;
|
||||
&:focus {
|
||||
border-color: @formErrorColor;
|
||||
.box-shadow(0 0 6px @formErrorColor);
|
||||
}
|
||||
}
|
||||
.input-prepend .add-on,
|
||||
.input-append .add-on {
|
||||
background-color: lighten(@formErrorColor, 50%);
|
||||
border-color: @formErrorColor;
|
||||
color: @formErrorColor;
|
||||
}
|
||||
.formFieldState(#ee5f5b, lighten(#ee5f5b, 30%));
|
||||
}
|
||||
|
||||
// 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;
|
||||
}
|
||||
.formFieldState(#CCAE64, lighten(#CCAE64, 5%));
|
||||
}
|
||||
|
||||
// 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;
|
||||
}
|
||||
.formFieldState(#57a957, lighten(#57a957, 30%));
|
||||
}
|
||||
|
||||
|
||||
@ -367,9 +309,10 @@ textarea[readonly] {
|
||||
}
|
||||
|
||||
// Help Text
|
||||
// TODO: Do we need to set basefont and baseline here?
|
||||
.help-inline,
|
||||
.help-block {
|
||||
font-size: @basefont - 2;
|
||||
font-size: @basefont;
|
||||
line-height: @baseline;
|
||||
color: @grayLight;
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user