0
0
mirror of https://github.com/twbs/bootstrap.git synced 2025-02-18 15:54:26 +01:00

resolve issue with form fields and errors causing no space between fields with consecutive errors; needs more work, but will address later

This commit is contained in:
Mark Otto 2011-10-03 21:43:53 -07:00
parent 0caa484aeb
commit 948c59ddb3
4 changed files with 21 additions and 14 deletions

16
bootstrap.css vendored
View File

@ -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: Thu Sep 22 12:52:42 PDT 2011
* Date: Mon Oct 3 21:43:20 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).
@ -173,7 +173,7 @@ textarea {
/* Variables.less
* Variables to customize the look and feel of Bootstrap
* ----------------------------------------------------- */
/* Variables.less
/* Mixins.less
* Snippets of reusable CSS to develop faster and keep code readable
* ----------------------------------------------------------------- */
/*
@ -719,30 +719,30 @@ input[type=file]:focus, input[type=checkbox]:focus, select:focus {
box-shadow: none;
outline: 1px dotted #666;
}
form div.clearfix.error {
form .clearfix.error {
background: #fae5e3;
padding: 10px 0;
margin: -10px 0 10px;
margin: 10px 0;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}
form div.clearfix.error > label, form div.clearfix.error span.help-inline, form div.clearfix.error span.help-block {
form .clearfix.error > label, form .clearfix.error span.help-inline, form .clearfix.error span.help-block {
color: #9d261d;
}
form div.clearfix.error input, form div.clearfix.error textarea {
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);
}
form div.clearfix.error input:focus, form div.clearfix.error textarea:focus {
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 div.clearfix.error .input-prepend span.add-on, form div.clearfix.error .input-append span.add-on {
form .clearfix.error .input-prepend span.add-on, form .clearfix.error .input-append span.add-on {
background: #f4c8c5;
border-color: #c87872;
color: #b9554d;

6
bootstrap.min.css vendored
View File

@ -125,9 +125,9 @@ 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 div.clearfix.error{background:#fae5e3;padding:10px 0;margin:-10px 0 10px;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;}form div.clearfix.error>label,form div.clearfix.error span.help-inline,form div.clearfix.error span.help-block{color:#9d261d;}
form div.clearfix.error input,form div.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);}form div.clearfix.error input:focus,form div.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 div.clearfix.error .input-prepend span.add-on,form div.clearfix.error .input-append span.add-on{background:#f4c8c5;border-color:#c87872;color:#b9554d;}
form .clearfix.error{background:#fae5e3;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 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);}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;}
.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;}

View File

@ -1036,7 +1036,14 @@
</div>
</div><!-- /clearfix -->
<div class="clearfix error">
<label for="xlInput2">X-Large input</label>
<label for="xlInput2">Input with error</label>
<div class="input">
<input class="xlarge error" id="xlInput2" name="xlInput2" 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>
<div class="input">
<input class="xlarge error" id="xlInput2" name="xlInput2" size="30" type="text" />
<span class="help-inline">Small snippet of help text</span>

View File

@ -159,10 +159,10 @@ select:focus {
}
// Error styles
form div.clearfix.error {
form .clearfix.error {
background: lighten(@red, 57%);
padding: 10px 0;
margin: -10px 0 10px;
margin: 10px 0;
.border-radius(4px);
@error-text: desaturate(lighten(@red, 25%), 25%);
> label,