Commit 1b21d5e3 authored by Mark Otto's avatar Mark Otto
Browse files

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

parent 6d541a60
Showing with 51 additions and 82 deletions
+51 -82
......@@ -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;
......
......@@ -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;}
......
......@@ -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;
}
}
}
\ No newline at end of file
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment