Skip to content

Commit

Permalink
add extra states to the form examples
Browse files Browse the repository at this point in the history
  • Loading branch information
@mdo
mdo committed Oct 10, 2011
1 parent 8f0671a commit 831f279
Show file tree
Hide file tree
Showing 4 changed files with 195 additions and 42 deletions.
96 changes: 78 additions & 18 deletions bootstrap.css
View file
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 20:57:28 PDT 2011
* Date: Sun Oct 9 22:02:13 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,33 +722,93 @@ input[type=file]:focus, input[type=checkbox]:focus, select:focus {
box-shadow: none;
outline: 1px dotted #666;
}
form .clearfix.error {
background: #fae5e3;
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.error span.help-inline, form .clearfix.error span.help-block {
color: #9d261d;
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: #c87872;
-webkit-box-shadow: 0 0 3px rgba(171, 41, 32, 0.25);
-moz-box-shadow: 0 0 3px rgba(171, 41, 32, 0.25);
box-shadow: 0 0 3px rgba(171, 41, 32, 0.25);
border-color: #ee5f5b;
}
form .clearfix.error input:focus, form .clearfix.error textarea:focus {
border-color: #b9554d;
-webkit-box-shadow: 0 0 6px rgba(171, 41, 32, 0.5);
-moz-box-shadow: 0 0 6px rgba(171, 41, 32, 0.5);
box-shadow: 0 0 6px rgba(171, 41, 32, 0.5);
}
form .clearfix.error .input-prepend span.add-on, form .clearfix.error .input-append span.add-on {
background: #f4c8c5;
border-color: #c87872;
color: #b9554d;
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;
}
.input-mini,
input.mini,
Expand Down
14 changes: 11 additions & 3 deletions bootstrap.min.css
View file

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

22 changes: 18 additions & 4 deletions docs/index.html
View file
Expand Up @@ -1103,19 +1103,33 @@ <h2>Default styles</h2>
</div>
</div><!-- /clearfix -->
<div class="clearfix error">
<label for="xlInput2">Input with error</label>
<label for="errorInput">Input with error</label>
<div class="input">
<input class="xlarge error" id="xlInput2" name="xlInput2" size="30" type="text" />
<input class="xlarge error" id="errorInput" name="errorInput" size="30" type="text" />
<span class="help-inline">Small snippet of help text</span>
</div>
</div><!-- /clearfix -->
<div class="clearfix error">
<label for="xlInput2">Input with error</label>
<label for="errorInput2">Input with error</label>
<div class="input">
<input class="xlarge error" id="xlInput2" name="xlInput2" size="30" type="text" />
<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">
<input class="xlarge error" id="successInput" name="successInput" size="30" type="text" />
<span class="help-inline">Success!</span>
</div>
</div><!-- /clearfix -->
<div class="clearfix warning">
<label for="warningInput">Input with warning</label>
<div class="input">
<input class="xlarge error" id="warningInput" name="warningInput" size="30" type="text" />
<span class="help-inline">Ruh roh!</span>
</div>
</div><!-- /clearfix -->
</fieldset>
<fieldset>
<legend>Example form legend</legend>
Expand Down
105 changes: 88 additions & 17 deletions lib/forms.less
View file
Expand Up @@ -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,
Expand Down

0 comments on commit 831f279

Please sign in to comment.