compass_twitter_bootstrap 2.0.3 → 2.2.2

data/stylesheets_sass/compass_twitter_bootstrap/_forms.sass

@@ -1,6 +1,6 @@
-// Forms.less
-// Base styles for various input types, form layouts, and states
-// -------------------------------------------------------------
+//
+// Forms
+// --------------------------------------------------
 
 // GENERAL STYLES
 // --------------
@@ -19,12 +19,12 @@ legend
   display: block
   width: 100%
   padding: 0
-  margin-bottom: $baseLineHeight * 1.5
+  margin-bottom: $baseLineHeight
   font-size: $baseFontSize * 1.5
   line-height: $baseLineHeight * 2
   color: $grayDark
   border: 0
-  border-bottom: 1px solid #eee
+  border-bottom: 1px solid #e5e5e5
   // Small
   small
     font-size: $baseLineHeight * 0.75
@@ -37,7 +37,7 @@ input,
 button,
 select,
 textarea
-  +bootstrap-font-shorthand($baseFontSize, normal, $baseLineHeight)
+  +ctb-font-shorthand($baseFontSize, normal, $baseLineHeight)
   // Set size, weight, line-height here
 
 input,
@@ -51,95 +51,122 @@ textarea
 label
   display: block
   margin-bottom: 5px
-  color: $grayDark
 
-// Inputs, Textareas, Selects
+// Form controls
+// -------------------------
+
+// Shared size and type resets
 
-input,
-textarea,
 select,
+textarea,
+input[type="text"],
+input[type="password"],
+input[type="datetime"],
+input[type="datetime-local"],
+input[type="date"],
+input[type="month"],
+input[type="time"],
+input[type="week"],
+input[type="number"],
+input[type="email"],
+input[type="url"],
+input[type="search"],
+input[type="tel"],
+input[type="color"],
 .uneditable-input
   display: inline-block
-  width: 210px
   height: $baseLineHeight
-  padding: 4px
-  margin-bottom: 9px
+  padding: 4px 6px
+  margin-bottom: $baseLineHeight / 2
   font-size: $baseFontSize
   line-height: $baseLineHeight
   color: $gray
-  background-color: $inputBackground
-  border: 1px solid $inputBorder
-  +bootstrap-border-radius($inputBorderRadius)
+  +ctb-border-radius($inputBorderRadius)
+  vertical-align: middle
 
-.uneditable-textarea
-  width: auto
+// Reset appearance properties for textual inputs and textarea
+// Declare width for legacy (can't be on input[type=*] selectors or it's too specific)
+
+input,
+textarea,
+.uneditable-input
+  width: 206px
+  // plus 12px padding and 2px border
+
+// Reset height since textareas have rows
+textarea
   height: auto
 
-// Inputs within a label
+// Everything else
 
-label input,
-label textarea,
-label select
-  display: block
+textarea,
+input[type="text"],
+input[type="password"],
+input[type="datetime"],
+input[type="datetime-local"],
+input[type="date"],
+input[type="month"],
+input[type="time"],
+input[type="week"],
+input[type="number"],
+input[type="email"],
+input[type="url"],
+input[type="search"],
+input[type="tel"],
+input[type="color"],
+.uneditable-input
+  background-color: $inputBackground
+  border: 1px solid $inputBorder
+  +ctb-box-shadow(inset 0 1px 1px rgba(0, 0, 0, 0.075))
+  +ctb-transition(#{border linear 0.2s, box-shadow linear 0.2s})
+  // Focus state
+  &:focus
+    border-color: rgba(82, 168, 236, 0.8)
+    outline: 0
+    outline: thin dotted \9
+    /* IE6-9
+    +ctb-box-shadow(#{inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6)})
 
-// Mini reset for unique input types
+// Position radios and checkboxes better
 
-input[type="image"],
-input[type="checkbox"],
-input[type="radio"]
-  width: auto
-  height: auto
-  padding: 0
-  margin: 3px 0
+input[type="radio"],
+input[type="checkbox"]
+  margin: 4px 0 0
   *margin-top: 0
   /* IE7
+  margin-top: 1px \9
+  /* IE8-9
   line-height: normal
-  cursor: pointer
-  background-color: transparent
-  border: 0 \9
-  /* IE9 and down
-  +bootstrap-border-radius(0)
 
-input[type="image"]
-  border: 0
+// Reset width of input images, buttons, radios, checkboxes
 
-// Reset the file input to browser defaults
-input[type="file"]
-  width: auto
-  padding: initial
-  line-height: initial
-  background-color: $inputBackground
-  background-color: initial
-  border: initial
-  +bootstrap-box-shadow(none)
-
-// Help out input buttons
-
-input[type="button"],
+input[type="file"],
+input[type="image"],
+input[type="submit"],
 input[type="reset"],
-input[type="submit"]
+input[type="button"],
+input[type="radio"],
+input[type="checkbox"]
   width: auto
-  height: auto
+  // Override of generic input selector
 
 // Set the height of select and file controls to match text inputs
 
 select,
 input[type="file"]
-  height: 28px
+  height: $inputHeight
   /* In IE7, the height of the select element cannot be changed by height, only font-size
   *margin-top: 4px
   /* For IE7, add top margin to align select with labels
-  line-height: 28px
+  line-height: $inputHeight
 
-// Reset line-height for IE
-input[type="file"]
-  line-height: 18px \9
-
-// Chrome on Linux and Mobile Safari need background-color
+// Make select elements obey height by applying a border
 select
   width: 220px
   // default input width + 10px of padding that doesn't get applied
+  border: 1px solid $inputBorder
   background-color: $inputBackground
+  // Chrome on Linux and Mobile Safari need background-color
 
 // Make multiple select elements height not fixed
 
@@ -147,17 +174,46 @@ select[multiple],
 select[size]
   height: auto
 
-// Remove shadow from image inputs
-input[type="image"]
-  +bootstrap-box-shadow(none)
+// Focus for select, file, radio, and checkbox
 
-// Make textarea height behave
-textarea
+select:focus,
+input[type="file"]:focus,
+input[type="radio"]:focus,
+input[type="checkbox"]:focus
+  +ctb-tab-focus
+
+// Uneditable inputs
+// -------------------------
+
+// Make uneditable inputs look inactive
+
+.uneditable-input,
+.uneditable-textarea
+  color: $grayLight
+  background-color: darken($inputBackground, 1%)
+  border-color: $inputBorder
+  +ctb-box-shadow(inset 0 1px 2px rgba(0, 0, 0, 0.025))
+  cursor: not-allowed
+
+// For text that needs to appear as an input but should not be an input
+.uneditable-input
+  overflow: hidden
+  // prevent text from wrapping, but still cut it off like an input does
+  white-space: nowrap
+
+// Make uneditable textareas behave like a textarea
+.uneditable-textarea
+  width: auto
   height: auto
 
-// Hidden inputs
-input[type="hidden"]
-  display: none
+// Placeholder
+// -------------------------
+
+// Placeholder text gets special styles because when browsers invalidate entire lines if it doesn't understand a selector
+
+input,
+textarea
+  +ctb-placeholder
 
 // CHECKBOXES & RADIOS
 // -------------------
@@ -166,14 +222,14 @@ input[type="hidden"]
 
 .radio,
 .checkbox
-  min-height: 18px
+  min-height: $baseLineHeight
   // clear the floating input if there is no label text
-  padding-left: 18px
+  padding-left: 20px
 
 .radio input[type="radio"],
 .checkbox input[type="checkbox"]
   float: left
-  margin-left: -18px
+  margin-left: -20px
 
 // Move the options list down to align with labels
 
@@ -197,31 +253,6 @@ input[type="hidden"]
   margin-left: 10px
   // space out consecutive inline controls
 
-// FOCUS STATE
-// -----------
-
-input,
-textarea
-  +bootstrap-box-shadow(inset 0 1px 1px rgba(0, 0, 0, 0.075))
-  $transition: border linear 0.2s, box-shadow linear 0.2s
-  +bootstrap-transition($transition)
-
-input:focus,
-textarea:focus
-  border-color: rgba(82, 168, 236, 0.8)
-  outline: 0
-  outline: thin dotted \9
-  /* IE6-9
-  +bootstrap-box-shadow("inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(82,168,236,.6)")
-
-input[type="file"]:focus,
-input[type="radio"]:focus,
-input[type="checkbox"]:focus,
-select:focus
-  +bootstrap-tab-focus
-  +bootstrap-box-shadow(none)
-  // override for file inputs
-
 // INPUT SIZES
 // -----------
 
@@ -257,10 +288,42 @@ textarea[class*="span"],
   float: none
   margin-left: 0
 
+// Ensure input-prepend/append never wraps
+
+.input-append input[class*="span"],
+.input-append .uneditable-input[class*="span"],
+.input-prepend input[class*="span"],
+.input-prepend .uneditable-input[class*="span"],
+.row-fluid input[class*="span"],
+.row-fluid select[class*="span"],
+.row-fluid textarea[class*="span"],
+.row-fluid .uneditable-input[class*="span"],
+.row-fluid .input-prepend [class*="span"],
+.row-fluid .input-append [class*="span"]
+  display: inline-block
+
 // GRID SIZING FOR INPUTS
 // ----------------------
 
-+bootstrap-grid-input($gridColumnWidth, $gridGutterWidth)
+// Grid sizes
++ctb-grid-input($gridColumnWidth, $gridGutterWidth)
+
+// Control row for multiple inputs per line
+.controls-row
+  +ctb-clearfix
+  // Clear the float from controls
+
+// Float to collapse white-space for proper grid alignment
+
+.controls-row [class*="span"],
+.row-fluid .controls-row [class*="span"]
+  float: left
+
+// Explicity set top padding on all checkboxes/radios, not just first-child
+
+.controls-row .checkbox[class*="span"],
+.controls-row .radio[class*="span"]
+  padding-top: 5px
 
 // DISABLED STATE
 // --------------
@@ -275,7 +338,6 @@ select[readonly],
 textarea[readonly]
   cursor: not-allowed
   background-color: $inputDisabledBackground
-  border-color: #ddd
 
 // Explicitly reset the colors here
 
@@ -290,27 +352,32 @@ input[type="checkbox"][readonly]
 
 // Warning
 .control-group.warning
-  +bootstrap-formFieldState($warningText, $warningText, $warningBackground)
+  +ctb-formFieldState($warningText, $warningText, $warningBackground)
 
 // Error
 .control-group.error
-  +bootstrap-formFieldState($errorText, $errorText, $errorBackground)
+  +ctb-formFieldState($errorText, $errorText, $errorBackground)
 
 // Success
 .control-group.success
-  +bootstrap-formFieldState($successText, $successText, $successBackground)
+  +ctb-formFieldState($successText, $successText, $successBackground)
+
+// Success
+.control-group.info
+  +ctb-formFieldState($infoText, $infoText, $infoBackground)
 
 // HTML5 invalid states
 // Shares styles with the .control-group.error above
 
-input:focus:required:invalid,
-textarea:focus:required:invalid,
-select:focus:required:invalid
+input:focus:invalid,
+textarea:focus:invalid,
+select:focus:invalid
   color: #b94a48
   border-color: #ee5f5b
   &:focus
     border-color: darken(#ee5f5b, 10%)
-    +bootstrap-box-shadow(0 0 6px lighten(#ee5f5b, 20%))
+    $shadow: 0 0 6px lighten(#ee5f5b, 20%)
+    +ctb-box-shadow($shadow)
 
 // FORM ACTIONS
 // ------------
@@ -320,29 +387,16 @@ select:focus:required:invalid
   margin-top: $baseLineHeight
   margin-bottom: $baseLineHeight
   background-color: $formActionsBackground
-  border-top: 1px solid #ddd
-  +bootstrap-clearfix
+  border-top: 1px solid #e5e5e5
+  +ctb-clearfix
   // Adding clearfix to allow for .pull-right button containers
 
-// For text that needs to appear as an input but should not be an input
-.uneditable-input
-  overflow: hidden
-  // prevent text from wrapping, but still cut it off like an input does
-  white-space: nowrap
-  cursor: not-allowed
-  background-color: $inputBackground
-  border-color: #eee
-  +bootstrap-box-shadow(inset 0 1px 2px rgba(0, 0, 0, 0.025))
-
-// Placeholder text gets special styles; can't be bundled together though for some reason
-+bootstrap-placeholder($grayLight)
-
 // HELP TEXT
 // ---------
 
 .help-block,
 .help-inline
-  color: $gray
+  color: lighten($textColor, 15%)
   // lighten the text some for contrast
 
 .help-block
@@ -352,7 +406,7 @@ select:focus:required:invalid
 
 .help-inline
   display: inline-block
-  +bootstrap-ie7-inline-block
+  +ctb-ie7-inline-block
   vertical-align: middle
   padding-left: 5px
 
@@ -361,11 +415,19 @@ select:focus:required:invalid
 
 // Allow us to put symbols and text within the input field for a cleaner look
 
-.input-prepend,
-.input-append
+.input-append,
+.input-prepend
   margin-bottom: 5px
-  +bootstrap-clearfix
-  // Clear the float to prevent wrapping
+  font-size: 0
+  // white space collapse hack
+  white-space: nowrap
+  // Prevent span and input from separating
+  // Reset the white space collapse hack
+  input,
+  select,
+  .uneditable-input,
+  .dropdown-menu
+    font-size: $baseFontSize
   input,
   select,
   .uneditable-input
@@ -374,30 +436,29 @@ select:focus:required:invalid
     margin-bottom: 0
     // prevent bottom margin from screwing up alignment in stacked forms
     *margin-left: 0
-    vertical-align: middle
-    +bootstrap-border-radius(0 $inputBorderRadius $inputBorderRadius 0)
+    vertical-align: top
+    +ctb-border-radius(0 $inputBorderRadius $inputBorderRadius 0)
     // Make input on top when focused so blue border and shadow always show
     &:focus
       z-index: 2
-  .uneditable-input
-    border-left-color: #ccc
   .add-on
     display: inline-block
     width: auto
     height: $baseLineHeight
     min-width: 16px
     padding: 4px 5px
+    font-size: $baseFontSize
     font-weight: normal
     line-height: $baseLineHeight
     text-align: center
     text-shadow: 0 1px 0 $white
-    vertical-align: middle
     background-color: $grayLighter
     border: 1px solid #ccc
   .add-on,
-  .btn
-    margin-left: -1px
-    +bootstrap-border-radius(0)
+  .btn,
+  .btn-group > .dropdown-toggle
+    vertical-align: top
+    +ctb-border-radius(0)
   .active
     background-color: lighten($green, 30)
     border-color: $green
@@ -408,47 +469,75 @@ select:focus:required:invalid
     margin-right: -1px
   .add-on:first-child,
   .btn:first-child
-    +bootstrap-border-radius($inputBorderRadius 0 0 $inputBorderRadius)
+    // FYI, `.btn:first-child` accounts for a button group that's prepended
+    +ctb-border-radius($inputBorderRadius 0 0 $inputBorderRadius)
 
 .input-append
   input,
   select,
   .uneditable-input
-    +bootstrap-border-radius($inputBorderRadius 0 0 $inputBorderRadius)
-  .uneditable-input
-    border-right-color: #ccc
-    border-left-color: #eee
+    +ctb-border-radius($inputBorderRadius 0 0 $inputBorderRadius)
+    + .btn-group .btn:last-child
+      +ctb-border-radius(0 $inputBorderRadius $inputBorderRadius 0)
+  .add-on,
+  .btn,
+  .btn-group
+    margin-left: -1px
   .add-on:last-child,
-  .btn:last-child
-    +bootstrap-border-radius(0 $inputBorderRadius $inputBorderRadius 0)
+  .btn:last-child,
+  .btn-group:last-child > .dropdown-toggle
+    +ctb-border-radius(0 $inputBorderRadius $inputBorderRadius 0)
 
 // Remove all border-radius for inputs with both prepend and append
 .input-prepend.input-append
   input,
   select,
   .uneditable-input
-    +bootstrap-border-radius(0)
+    +ctb-border-radius(0)
+    + .btn-group .btn
+      +ctb-border-radius(0 $inputBorderRadius $inputBorderRadius 0)
   .add-on:first-child,
   .btn:first-child
     margin-right: -1px
-    +bootstrap-border-radius($inputBorderRadius 0 0 $inputBorderRadius)
+    +ctb-border-radius($inputBorderRadius 0 0 $inputBorderRadius)
   .add-on:last-child,
   .btn:last-child
     margin-left: -1px
-    +bootstrap-border-radius(0 $inputBorderRadius $inputBorderRadius 0)
+    +ctb-border-radius(0 $inputBorderRadius $inputBorderRadius 0)
+  .btn-group:first-child
+    margin-left: 0
 
 // SEARCH FORM
 // -----------
 
-.search-query
+input.search-query
   padding-right: 14px
   padding-right: 4px \9
   padding-left: 14px
   padding-left: 4px \9
   /* IE7-8 doesn't have border-radius, so don't indent the padding
   margin-bottom: 0
-  // remove the default margin on all inputs
-  +bootstrap-border-radius(14px)
+  // Remove the default margin on all inputs
+  +ctb-border-radius(15px)
+
+/* Allow for input prepend/append in search forms
+
+.form-search .input-append .search-query,
+.form-search .input-prepend .search-query
+  +ctb-border-radius(0)
+  // Override due to specificity
+
+.form-search .input-append .search-query
+  +ctb-border-radius(14px 0 0 14px)
+
+.form-search .input-append .btn
+  +ctb-border-radius(0 14px 14px 0)
+
+.form-search .input-prepend .search-query
+  +ctb-border-radius(0 14px 14px 0)
+
+.form-search .input-prepend .btn
+  +ctb-border-radius(14px 0 0 14px)
 
 // HORIZONTAL & VERTICAL FORMS
 // ---------------------------
@@ -467,14 +556,17 @@ select:focus:required:invalid
   .input-prepend,
   .input-append
     display: inline-block
-    +bootstrap-ie7-inline-block
+    +ctb-ie7-inline-block
     margin-bottom: 0
+    vertical-align: middle
   // Re-hide hidden elements due to specifity
   .hide
     display: none
 
 .form-search label,
-.form-inline label
+.form-inline label,
+.form-search .btn-group,
+.form-inline .btn-group
   display: inline-block
 
 // Remove margin for input-prepend/-append
@@ -521,11 +613,11 @@ legend + .control-group
   // Increase spacing between groups
   .control-group
     margin-bottom: $baseLineHeight
-    +bootstrap-clearfix
+    +ctb-clearfix
   // Float the labels left
   .control-label
     float: left
-    width: 140px
+    width: $horizontalComponentOffset - 20
     padding-top: 5px
     text-align: right
   // Move over all input controls and content
@@ -534,14 +626,22 @@ legend + .control-group
     // don't inherit the margin of the parent, in this case .controls
     *display: inline-block
     *padding-left: 20px
-    margin-left: 160px
+    margin-left: $horizontalComponentOffset
     *margin-left: 0
     &:first-child
-      *padding-left: 160px
+      *padding-left: $horizontalComponentOffset
   // Remove bottom margin on block level help text since that's accounted for on .control-group
   .help-block
-    margin-top: $baseLineHeight / 2
     margin-bottom: 0
+  // And apply it only to .help-block instances that follow a form control
+  input,
+  select,
+  textarea,
+  .uneditable-input,
+  .input-prepend,
+  .input-append
+    + .help-block
+      margin-top: $baseLineHeight / 2
   // Move over buttons in .form-actions to align with .controls
   .form-actions
-    padding-left: 160px
+    padding-left: $horizontalComponentOffset