forms.scss in anjlab-bootstrap-rails-1.4.0

- old
+ new

@@ -75,11 +75,16 @@
   color: $gray;
   border: 1px solid #ccc;
   @include border-radius(3px);
 }
 
-/* mini reset for non-html5 file types */
+// remove padding from select
+select {
+  padding: initial;
+}
+
+// mini reset for non-html5 file types
 input[type=checkbox],
 input[type=radio] {
   width: auto;
   height: auto;
   padding: 0;
@@ -105,17 +110,19 @@
 }
 
 select,
 input[type=file] {
   height: $baseline * 1.5; // In IE7, the height of the select element cannot be changed by height, only font-size
+  *height: auto; // Reset for IE7
   line-height: $baseline * 1.5;
   *margin-top: 4px; /* For IE7, add top margin to align select with labels */
 }
 
 // Make multiple select elements height not fixed
 select[multiple] {
   height: inherit;
+  background-color: $white; // Fixes Chromium bug of unreadable items
 }
 
 textarea {
   height: auto;
 }
@@ -156,41 +163,54 @@
 select:focus {
   @include box-shadow(none); // override for file inputs
   outline: 1px dotted #666; // Selet elements don't get box-shadow styles, so instead we do outline
 }
 
-// Error styles
-form div.clearfix.error {
-  background: lighten($red, 57%);
-  padding: 10px 0;
-  margin: -10px 0 10px;
-  @include border-radius(4px);
-  $error-text: desaturate(lighten($red, 25%), 25%);
+
+// FORM FIELD FEEDBACK STATES
+// --------------------------
+
+// Mixin for form field states
+@mixin formFieldState($textColor: #555, $borderColor: #ccc, $backgroundColor: #f5f5f5) {
+  // Set the text color
   > label,
-  span.help-inline,
-  span.help-block {
-    color: $red;
+  .help-block,
+  .help-inline {
+    color: $textColor;
   }
+  // Style inputs accordingly
   input,
   textarea {
-    border-color: $error-text;
-    @include box-shadow(0 0 3px rgba(171,41,32,.25));
+    color: $textColor;
+    border-color: $borderColor;
     &:focus {
-      border-color: darken($error-text, 10%);
-      @include box-shadow(0 0 6px rgba(171,41,32,.5));
+      border-color: darken($borderColor, 10%);
+      @include box-shadow(0 0 6px lighten($borderColor, 20%));
     }
   }
-  .input-prepend,
-  .input-append {
-    span.add-on {
-      background: lighten($red, 50%);
-      border-color: $error-text;
-      color: darken($error-text, 10%);
-    }
+  // Give a small background color for input-prepend/-append
+  .input-prepend .add-on,
+  .input-append .add-on {
+    color: $textColor;
+    background-color: $backgroundColor;
+    border-color: $textColor;
   }
 }
+// Error
+form .clearfix.error {
+  @include formFieldState(#b94a48, #ee5f5b, lighten(#ee5f5b, 30%));
+}
+// Warning
+form .clearfix.warning {
+  @include formFieldState(#c09853, #ccae64, lighten(#CCAE64, 5%));
+}
+// Success
+form .clearfix.success {
+  @include formFieldState(#468847, #57a957, lighten(#57a957, 30%));
+}
 
+
 // 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,
@@ -238,29 +258,15 @@
   float: none;
   width: (($gridColumnWidth) * $columnSpan) + ($gridGutterWidth * ($columnSpan - 1)) - 10;
   margin-left: 0;
 }
 input,
-textarea,
-select {
+textarea {
   // Default columns
-  &.span1     { @include form-columns(1); }
-  &.span2     { @include form-columns(2); }
-  &.span3     { @include form-columns(3); }
-  &.span4     { @include form-columns(4); }
-  &.span5     { @include form-columns(5); }
-  &.span6     { @include form-columns(6); }
-  &.span7     { @include form-columns(7); }
-  &.span8     { @include form-columns(8); }
-  &.span9     { @include form-columns(9); }
-  &.span10    { @include form-columns(10); }
-  &.span11    { @include form-columns(11); }
-  &.span12    { @include form-columns(12); }
-  &.span13    { @include form-columns(13); }
-  &.span14    { @include form-columns(14); }
-  &.span15    { @include form-columns(15); }
-  &.span16    { @include form-columns(16); }
+  @for $i from 1 through 16 {
+    &.span#{$i} { @include form-columns($i); }
+  }
 }
 
 // Disabled and read-only inputs
 input[disabled],
 select[disabled],
@@ -291,13 +297,14 @@
     }
   }
 }
 
 // Help Text
+// TODO: Do we need to set basefont and baseline here?
 .help-inline,
 .help-block {
-  font-size: $basefont - 2;
+  font-size: $basefont;
   line-height: $baseline;
   color: $grayLight;
 }
 .help-inline {
   padding-left: 5px;
@@ -312,19 +319,10 @@
 }
 
 // Inline Fields (input fields that appear as inline objects
 .inline-inputs {
   color: $gray;
-  span, input {
-    display: inline-block;
-  }
-  input.mini {
-    width: 60px;
-  }
-  input.small {
-    width: 90px;
-  }
   span {
     padding: 0 2px 0 1px;
   }
 }
 
@@ -387,10 +385,11 @@
   label {
     display: block;
     float: none;
     width: auto;
     padding: 0;
+    margin-left: 20px;
     line-height: $baseline;
     text-align: left;
     white-space: normal;
     strong {
       color: $gray;
@@ -412,9 +411,11 @@
     padding-top: 2px;
   }
   input[type=radio],
   input[type=checkbox] {
     margin-bottom: 0;
+    margin-left: -20px;
+    float: left;
   }
 }
 
 // Stacked forms
 .form-stacked {