Skip to content

Commit

Permalink
new form state styles with lighter footprint
Browse files Browse the repository at this point in the history
  • Loading branch information
@mdo
mdo committed Oct 10, 2011
1 parent 831f279 commit b747762
Show file tree
Hide file tree
Showing 4 changed files with 66 additions and 166 deletions.
100 changes: 33 additions & 67 deletions bootstrap.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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).
Expand Down Expand Up @@ -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;
}
form .clearfix.success {
background-color: #d1eed1;
color: #ccae64;
background-color: #d2b877;
border-color: #ccae64;
}
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,
Expand Down Expand Up @@ -943,7 +909,7 @@ textarea[readonly] {
text-decoration: underline;
}
.help-inline, .help-block {
font-size: 11px;
font-size: 13px;
line-height: 18px;
color: #bfbfbf;
}
Expand Down
22 changes: 10 additions & 12 deletions bootstrap.min.css
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

7 changes: 0 additions & 7 deletions docs/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1109,13 +1109,6 @@ <h2>Default styles</h2>
<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">
Expand Down
103 changes: 23 additions & 80 deletions lib/forms.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
> 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%);
// Mixin for form field states
.formFieldState(@textColor: #555, @backgroundColor: #f5f5f5) {
// Set the text color
> label,
.help-inline,
.help-block {
color: darken(@formErrorColor, 20%);
.help-block,
.help-inline {
color: @textColor;
}
// Style inputs accordingly
input,
textarea {
border-color: @formErrorColor;
color: @textColor;
border-color: @textColor;
&:focus {
border-color: @formErrorColor;
.box-shadow(0 0 6px @formErrorColor);
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 {
background-color: lighten(@formErrorColor, 50%);
border-color: @formErrorColor;
color: @formErrorColor;
color: @textColor;
background-color: @backgroundColor;
border-color: @textColor;
}
}

// Error
form .clearfix.error {
.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%));
}


Expand Down Expand Up @@ -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;
}
Expand Down

0 comments on commit b747762

Please sign in to comment.