updated forms.less to have better comments while pulling out all the old classes for input elements

This commit is contained in:
Mark Otto 2011-09-28 19:15:31 -07:00
parent 6d541a6066
commit 1b21d5e321
3 changed files with 51 additions and 82 deletions

35
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: Wed Sep 28 19:05:53 PDT 2011
* Date: Wed Sep 28 19:14:58 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).
@ -747,45 +747,24 @@ form div.clearfix.error .input-prepend span.add-on, form div.clearfix.error .inp
border-color: #c87872;
color: #b9554d;
}
.input-mini,
input.mini,
textarea.mini,
select.mini {
.input-mini {
width: 60px;
}
.input-small,
input.small,
textarea.small,
select.small {
.input-small {
width: 90px;
}
.input-medium,
input.medium,
textarea.medium,
select.medium {
.input-medium {
width: 150px;
}
.input-large,
input.large,
textarea.large,
select.large {
.input-large {
width: 210px;
}
.input-xlarge,
input.xlarge,
textarea.xlarge,
select.xlarge {
.input-xlarge {
width: 270px;
}
.input-xxlarge,
input.xxlarge,
textarea.xxlarge,
select.xxlarge {
.input-xxlarge {
width: 530px;
}
textarea.xxlarge {
overflow-y: auto;
}
input.span1, textarea.span1, select.span1 {
display: inline-block;
float: none;

13
bootstrap.min.css vendored
View File

@ -128,13 +128,12 @@ input[type=file]:focus,input[type=checkbox]:focus,select:focus{-webkit-box-shado
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;}
.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;}
.input-large,input.large,textarea.large,select.large{width:210px;}
.input-xlarge,input.xlarge,textarea.xlarge,select.xlarge{width:270px;}
.input-xxlarge,input.xxlarge,textarea.xxlarge,select.xxlarge{width:530px;}
textarea.xxlarge{overflow-y:auto;}
.input-mini{width:60px;}
.input-small{width:90px;}
.input-medium{width:150px;}
.input-large{width:210px;}
.input-xlarge{width:270px;}
.input-xxlarge{width:530px;}
input.span1,textarea.span1,select.span1{display:inline-block;float:none;width:30px;margin-left:0;}
input.span2,textarea.span2,select.span2{display:inline-block;float:none;width:90px;margin-left:0;}
input.span3,textarea.span3,select.span3{display:inline-block;float:none;width:150px;margin-left:0;}

View File

@ -3,8 +3,8 @@
* ------------------------------------------------------------- */
// FORM STYLES
// -----------
// GENERAL STYLES
// --------------
form {
margin-bottom: @baseline;
@ -189,47 +189,17 @@ form div.clearfix.error {
}
}
// Form element sizes
// TODO v2: remove duplication here and just stick to .input-[size] in light of adding .spanN sizes
.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;
}
.input-large,
input.large,
textarea.large,
select.large {
width: 210px;
}
.input-xlarge,
input.xlarge,
textarea.xlarge,
select.xlarge {
width: 270px;
}
.input-xxlarge,
input.xxlarge,
textarea.xxlarge,
select.xxlarge {
width: 530px;
}
textarea.xxlarge {
overflow-y: auto;
}
// INPUT SIZES
// -----------
// General classes for quick sizes
.input-mini { width: 60px; }
.input-small { width: 90px; }
.input-medium { width: 150px; }
.input-large { width: 210px; }
.input-xlarge { width: 270px; }
.input-xxlarge { width: 530px; }
// Grid style input sizes
// This is a duplication of the main grid .columns() mixin, but subtracts 10px to account for input padding and border
@ -261,6 +231,10 @@ select {
&.span16 { .formColumns(16); }
}
// INPUT STATES
// ------------
// Disabled and read-only inputs
input[disabled],
select[disabled],
@ -292,7 +266,10 @@ textarea[readonly] {
}
}
// Help Text
// HELP TEXT
// ---------
.help-inline,
.help-block {
font-size: @basefont - 2;
@ -311,7 +288,10 @@ textarea[readonly] {
max-width: 600px;
}
// Inline Fields (input fields that appear as inline objects
// INLINE FIELDS
// ---------
.inline-inputs {
color: @gray;
span, input {
@ -328,6 +308,10 @@ textarea[readonly] {
}
}
// INPUTS GROUPS
// -------------
// Allow us to put symbols and text within the input field for a cleaner look
.input-prepend,
.input-append {
@ -375,6 +359,10 @@ textarea[readonly] {
}
}
// LISTS OF CONTROLS
// -----------------
// Stacked options for forms (radio buttons or checkboxes)
.inputs-list {
margin: 0 0 5px;
@ -417,7 +405,10 @@ textarea[readonly] {
}
}
// Stacked forms
// STACKED FORMS
// -------------
.form-stacked {
padding-left: 20px;
fieldset {
@ -462,4 +453,4 @@ textarea[readonly] {
margin-left: -20px;
padding-left: 20px;
}
}
}