From 1b21d5e321ec77c6381becae2e2d7d1c4ab14d9a Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Wed, 28 Sep 2011 19:15:31 -0700 Subject: [PATCH] updated forms.less to have better comments while pulling out all the old classes for input elements --- bootstrap.css | 35 ++++--------------- bootstrap.min.css | 13 ++++---- lib/forms.less | 85 +++++++++++++++++++++-------------------------- 3 files changed, 51 insertions(+), 82 deletions(-) diff --git a/bootstrap.css b/bootstrap.css index babe50a210..993533e110 100644 --- a/bootstrap.css +++ b/bootstrap.css @@ -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; diff --git a/bootstrap.min.css b/bootstrap.min.css index 4a3b6485bb..f290fbd325 100644 --- a/bootstrap.min.css +++ b/bootstrap.min.css @@ -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;} diff --git a/lib/forms.less b/lib/forms.less index 0da4037df7..91aca77fe7 100644 --- a/lib/forms.less +++ b/lib/forms.less @@ -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