compass_twitter_bootstrap 2.0.1.2 → 2.0.3

data/stylesheets_sass/compass_twitter_bootstrap/_forms.sass

@@ -37,14 +37,14 @@ input,
 button,
 select,
 textarea
-  +font-shorthand($baseFontSize, normal, $baseLineHeight)
+  +bootstrap-font-shorthand($baseFontSize, normal, $baseLineHeight)
   // Set size, weight, line-height here
 
 input,
 button,
 select,
 textarea
-  +font-family-sans-serif
+  font-family: $baseFontFamily
   // And only set font-family here for those that need it (note the missing label element)
 
 // Identify controls by their labels
@@ -67,8 +67,9 @@ select,
   font-size: $baseFontSize
   line-height: $baseLineHeight
   color: $gray
-  border: 1px solid #ccc
-  +border-radius(3px)
+  background-color: $inputBackground
+  border: 1px solid $inputBorder
+  +bootstrap-border-radius($inputBorderRadius)
 
 .uneditable-textarea
   width: auto
@@ -94,9 +95,10 @@ input[type="radio"]
   /* IE7
   line-height: normal
   cursor: pointer
-  +border-radius(0)
+  background-color: transparent
   border: 0 \9
   /* IE9 and down
+  +bootstrap-border-radius(0)
 
 input[type="image"]
   border: 0
@@ -106,10 +108,10 @@ input[type="file"]
   width: auto
   padding: initial
   line-height: initial
-  border: initial
-  background-color: $white
+  background-color: $inputBackground
   background-color: initial
-  +box-shadow(none)
+  border: initial
+  +bootstrap-box-shadow(none)
 
 // Help out input buttons
 
@@ -137,7 +139,7 @@ input[type="file"]
 select
   width: 220px
   // default input width + 10px of padding that doesn't get applied
-  background-color: $white
+  background-color: $inputBackground
 
 // Make multiple select elements height not fixed
 
@@ -147,7 +149,7 @@ select[size]
 
 // Remove shadow from image inputs
 input[type="image"]
-  +box-shadow(none)
+  +bootstrap-box-shadow(none)
 
 // Make textarea height behave
 textarea
@@ -164,6 +166,8 @@ input[type="hidden"]
 
 .radio,
 .checkbox
+  min-height: 18px
+  // clear the floating input if there is no label text
   padding-left: 18px
 
 .radio input[type="radio"],
@@ -198,26 +202,25 @@ input[type="hidden"]
 
 input,
 textarea
-  +box-shadow(inset 0 1px 1px rgba(0, 0, 0, 0.075))
+  +bootstrap-box-shadow(inset 0 1px 1px rgba(0, 0, 0, 0.075))
   $transition: border linear 0.2s, box-shadow linear 0.2s
-  +transition($transition)
+  +bootstrap-transition($transition)
 
 input:focus,
 textarea:focus
   border-color: rgba(82, 168, 236, 0.8)
-  $shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6)
-  +box-shadow($shadow)
   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
-  +box-shadow(none)
+  +bootstrap-tab-focus
+  +bootstrap-box-shadow(none)
   // override for file inputs
-  +tab-focus
 
 // INPUT SIZES
 // -----------
@@ -246,14 +249,18 @@ select:focus
 input[class*="span"],
 select[class*="span"],
 textarea[class*="span"],
-.uneditable-input
+.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"]
   float: none
   margin-left: 0
 
 // GRID SIZING FOR INPUTS
 // ----------------------
 
-+inputGridSystem-generate($gridColumns, $gridColumnWidth, $gridGutterWidth)
++bootstrap-grid-input($gridColumnWidth, $gridGutterWidth)
 
 // DISABLED STATE
 // --------------
@@ -266,24 +273,32 @@ textarea[disabled],
 input[readonly],
 select[readonly],
 textarea[readonly]
-  background-color: #f5f5f5
-  border-color: #ddd
   cursor: not-allowed
+  background-color: $inputDisabledBackground
+  border-color: #ddd
+
+// Explicitly reset the colors here
+
+input[type="radio"][disabled],
+input[type="checkbox"][disabled],
+input[type="radio"][readonly],
+input[type="checkbox"][readonly]
+  background-color: transparent
 
 // FORM FIELD FEEDBACK STATES
 // --------------------------
 
 // Warning
 .control-group.warning
-  +formFieldState($warningText, $warningText, $warningBackground)
+  +bootstrap-formFieldState($warningText, $warningText, $warningBackground)
 
 // Error
 .control-group.error
-  +formFieldState($errorText, $errorText, $errorBackground)
+  +bootstrap-formFieldState($errorText, $errorText, $errorBackground)
 
 // Success
 .control-group.success
-  +formFieldState($successText, $successText, $successBackground)
+  +bootstrap-formFieldState($successText, $successText, $successBackground)
 
 // HTML5 invalid states
 // Shares styles with the .control-group.error above
@@ -295,7 +310,7 @@ select:focus:required:invalid
   border-color: #ee5f5b
   &:focus
     border-color: darken(#ee5f5b, 10%)
-    +box-shadow(0 0 6px lighten(#ee5f5b, 20%))
+    +bootstrap-box-shadow(0 0 6px lighten(#ee5f5b, 20%))
 
 // FORM ACTIONS
 // ------------
@@ -304,34 +319,40 @@ select:focus:required:invalid
   padding: $baseLineHeight - 1 20px $baseLineHeight
   margin-top: $baseLineHeight
   margin-bottom: $baseLineHeight
-  background-color: #f5f5f5
+  background-color: $formActionsBackground
   border-top: 1px solid #ddd
+  +bootstrap-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
-  display: block
-  background-color: $white
-  border-color: #eee
-  +box-shadow(inset 0 1px 2px rgba(0, 0, 0, 0.025))
+  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
-+placeholder($grayLight)
++bootstrap-placeholder($grayLight)
 
 // HELP TEXT
 // ---------
 
+.help-block,
+.help-inline
+  color: $gray
+  // lighten the text some for contrast
+
 .help-block
   display: block
   // account for any element using help-block
-  margin-top: 5px
-  margin-bottom: 0
-  color: $grayLight
+  margin-bottom: $baseLineHeight / 2
 
 .help-inline
   display: inline-block
-  +ie7-inline-block
-  margin-bottom: 9px
+  +bootstrap-ie7-inline-block
   vertical-align: middle
   padding-left: 5px
 
@@ -343,69 +364,91 @@ select:focus:required:invalid
 .input-prepend,
 .input-append
   margin-bottom: 5px
-  +clearfix
+  +bootstrap-clearfix
   // Clear the float to prevent wrapping
   input,
+  select,
   .uneditable-input
-    +border-radius(0 3px 3px 0)
+    position: relative
+    // placed here by default so that on :focus we can place the input above the .add-on for full border and box-shadow goodness
+    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)
+    // Make input on top when focused so blue border and shadow always show
     &:focus
-      position: relative
       z-index: 2
   .uneditable-input
     border-left-color: #ccc
   .add-on
-    float: left
-    display: block
+    display: inline-block
     width: auto
-    min-width: 16px
     height: $baseLineHeight
-    margin-right: -1px
+    min-width: 16px
     padding: 4px 5px
     font-weight: normal
     line-height: $baseLineHeight
-    color: $grayLight
     text-align: center
     text-shadow: 0 1px 0 $white
-    background-color: #f5f5f5
+    vertical-align: middle
+    background-color: $grayLighter
     border: 1px solid #ccc
-    +border-radius(3px 0 0 3px)
+  .add-on,
+  .btn
+    margin-left: -1px
+    +bootstrap-border-radius(0)
   .active
     background-color: lighten($green, 30)
     border-color: $green
 
 .input-prepend
-  .add-on
-    *margin-top: 1px
-    /* IE6-7
+  .add-on,
+  .btn
+    margin-right: -1px
+  .add-on:first-child,
+  .btn:first-child
+    +bootstrap-border-radius($inputBorderRadius 0 0 $inputBorderRadius)
 
 .input-append
   input,
+  select,
   .uneditable-input
-    float: left
-    +border-radius(3px 0 0 3px)
+    +bootstrap-border-radius($inputBorderRadius 0 0 $inputBorderRadius)
   .uneditable-input
-    border-left-color: #eee
     border-right-color: #ccc
-  .add-on
-    margin-right: 0
+    border-left-color: #eee
+  .add-on:last-child,
+  .btn:last-child
+    +bootstrap-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)
+  .add-on:first-child,
+  .btn:first-child
+    margin-right: -1px
+    +bootstrap-border-radius($inputBorderRadius 0 0 $inputBorderRadius)
+  .add-on:last-child,
+  .btn:last-child
     margin-left: -1px
-    +border-radius(0 3px 3px 0)
-  input:first-child
-    // In IE7, having a hasLayout container (from clearfix's zoom:1) can make the first input
-    // inherit the sum of its ancestors' margins.
-    *margin-left: -160px
-    & + .add-on
-      *margin-left: -21px
+    +bootstrap-border-radius(0 $inputBorderRadius $inputBorderRadius 0)
 
 // SEARCH FORM
 // -----------
 
 .search-query
-  padding-left: 14px
   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
-  +border-radius(14px)
+  +bootstrap-border-radius(14px)
 
 // HORIZONTAL & VERTICAL FORMS
 // ---------------------------
@@ -420,38 +463,48 @@ select:focus:required:invalid
   textarea,
   select,
   .help-inline,
-  .uneditable-input
+  .uneditable-input,
+  .input-prepend,
+  .input-append
     display: inline-block
+    +bootstrap-ie7-inline-block
     margin-bottom: 0
   // Re-hide hidden elements due to specifity
   .hide
     display: none
 
 .form-search label,
-.form-inline label,
+.form-inline label
+  display: inline-block
+
+// Remove margin for input-prepend/-append
+
 .form-search .input-append,
 .form-inline .input-append,
 .form-search .input-prepend,
 .form-inline .input-prepend
-  display: inline-block
-
-// Make the prepend and append add-on vertical-align: middle;
-
-.form-search .input-append .add-on,
-.form-inline .input-prepend .add-on,
-.form-search .input-append .add-on,
-.form-inline .input-prepend .add-on
-  vertical-align: middle
+  margin-bottom: 0
 
-// Inline checkbox/radio labels
+// Inline checkbox/radio labels (remove padding on left)
 
 .form-search .radio,
-.form-inline .radio,
 .form-search .checkbox,
+.form-inline .radio,
 .form-inline .checkbox
+  padding-left: 0
   margin-bottom: 0
   vertical-align: middle
 
+// Remove float and margin, set to inline-block
+
+.form-search .radio input[type="radio"],
+.form-search .checkbox input[type="checkbox"],
+.form-inline .radio input[type="radio"],
+.form-inline .checkbox input[type="checkbox"]
+  float: left
+  margin-right: 3px
+  margin-left: 0
+
 // Margin to space out fieldsets
 .control-group
   margin-bottom: $baseLineHeight / 2
@@ -468,7 +521,7 @@ legend + .control-group
   // Increase spacing between groups
   .control-group
     margin-bottom: $baseLineHeight
-    +clearfix
+    +bootstrap-clearfix
   // Float the labels left
   .control-label
     float: left
@@ -477,7 +530,18 @@ legend + .control-group
     text-align: right
   // Move over all input controls and content
   .controls
+    // Super jank IE7 fix to ensure the inputs in .input-append and input-prepend
+    // don't inherit the margin of the parent, in this case .controls
+    *display: inline-block
+    *padding-left: 20px
     margin-left: 160px
+    *margin-left: 0
+    &:first-child
+      *padding-left: 160px
+  // 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
   // Move over buttons in .form-actions to align with .controls
   .form-actions
     padding-left: 160px

data/stylesheets_sass/compass_twitter_bootstrap/_grid.sass

@@ -1,8 +1,5 @@
-// GRID SYSTEM
-// -----------
-
 // Fixed (940px)
-+gridSystem-generate($gridColumns, $gridColumnWidth, $gridGutterWidth)
++bootstrap-grid-core($gridColumnWidth, $gridGutterWidth)
 
 // Fluid (940px)
-+fluidGridSystem-generate($gridColumns, $fluidGridColumnWidth, $fluidGridGutterWidth)
++bootstrap-grid-fluid($fluidGridColumnWidth, $fluidGridGutterWidth)

data/stylesheets_sass/compass_twitter_bootstrap/_hero-unit.sass

@@ -4,14 +4,16 @@
 .hero-unit
   padding: 60px
   margin-bottom: 30px
-  background-color: #f5f5f5
-  +border-radius(6px)
+  background-color: $heroUnitBackground
+  +bootstrap-border-radius(6px)
   h1
     margin-bottom: 0
     font-size: 60px
     line-height: 1
+    color: $heroUnitHeadingColor
     letter-spacing: -1px
   p
     font-size: 18px
     font-weight: 200
     line-height: $baseLineHeight * 1.5
+    color: $heroUnitLeadColor