compass_twitter_bootstrap 2.0.1.2 → 2.0.3

data/stylesheets_sass/compass_twitter_bootstrap/_labels-badges.sass

@@ -0,0 +1,85 @@
+// LABELS & BADGES
+// ---------------
+
+// Base classes
+
+.label,
+.badge
+  font-size: $baseFontSize * 0.846
+  font-weight: bold
+  line-height: 14px
+  // ensure proper line-height if floated
+  color: $white
+  vertical-align: baseline
+  white-space: nowrap
+  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25)
+  background-color: $grayLight
+
+// Set unique padding and border-radii
+.label
+  padding: 1px 4px 2px
+  +bootstrap-border-radius(3px)
+
+.badge
+  padding: 1px 9px 2px
+  +bootstrap-border-radius(9px)
+
+// Hover state, but only for links
+a
+  &.label:hover,
+  &.badge:hover
+    color: $white
+    text-decoration: none
+    cursor: pointer
+
+// Colors
+// Only give background-color difference to links (and to simplify, we don't qualifty with `a` but [href] attribute)
+// Important (red)
+
+.label-important,
+.badge-important
+  background-color: $errorText
+
+.label-important[href],
+.badge-important[href]
+  background-color: darken($errorText, 10%)
+
+// Warnings (orange)
+
+.label-warning,
+.badge-warning
+  background-color: $orange
+
+.label-warning[href],
+.badge-warning[href]
+  background-color: darken($orange, 10%)
+
+// Success (green)
+
+.label-success,
+.badge-success
+  background-color: $successText
+
+.label-success[href],
+.badge-success[href]
+  background-color: darken($successText, 10%)
+
+// Info (turquoise)
+
+.label-info,
+.badge-info
+  background-color: $infoText
+
+.label-info[href],
+.badge-info[href]
+  background-color: darken($infoText, 10%)
+
+// Inverse (black)
+
+.label-inverse,
+.badge-inverse
+  background-color: $grayDark
+
+.label-inverse[href],
+.badge-inverse[href]
+  background-color: darken($grayDark, 10%)

data/stylesheets_sass/compass_twitter_bootstrap/_layouts.sass

@@ -5,10 +5,10 @@
 
 // Container (centered, fixed-width layouts)
 .container
-  +container-fixed
+  +bootstrap-container-fixed
 
 // Fluid layouts (left aligned, with sidebar, min- & max-width content)
 .container-fluid
-  padding-left: $gridGutterWidth
   padding-right: $gridGutterWidth
-  +clearfix
+  padding-left: $gridGutterWidth
+  +bootstrap-clearfix

data/stylesheets_sass/compass_twitter_bootstrap/_mixins.sass

@@ -8,7 +8,7 @@
 // Clearfix
 // --------
 // For clearing floats like a boss h5bp.com/q
-=clearfix
+=bootstrap-clearfix
   *zoom: 1
   &:before,
   &:after
@@ -19,23 +19,23 @@
 
 // Webkit-style focus
 // ------------------
-=tab-focus
+=bootstrap-tab-focus
   // Default
-  outline: thin dotted
+  outline: thin dotted #333
   // Webkit
   outline: 5px auto -webkit-focus-ring-color
   outline-offset: -2px
 
 // Center-align a block level element
 // ----------------------------------
-=center-block
+=bootstrap-center-block
   display: block
   margin-left: auto
   margin-right: auto
 
 // IE7 inline-block
 // ----------------
-=ie7-inline-block
+=bootstrap-ie7-inline-block
   *display: inline
   /* IE7 inline-block hack
   *zoom: 1
@@ -46,237 +46,131 @@
 // right version is for icons, which come before. Applying both is ok, but it will
 // mean that space between those elements will be .6em (~2 space characters) in IE7,
 // instead of the 1 space in other browsers.
-=ie7-restore-left-whitespace
+=bootstrap-ie7-restore-left-whitespace
   *margin-left: .3em
   &:first-child
     *margin-left: 0
 
-=ie7-restore-right-whitespace
+=bootstrap-ie7-restore-right-whitespace
   *margin-right: .3em
   &:last-child
     *margin-left: 0
 
 // Sizing shortcuts
 // -------------------------
-=size($height: 5px, $width: 5px)
+=bootstrap-size($height, $width)
   width: $width
   height: $height
 
-=square($size: 5px)
-  +size($size, $size)
+=bootstrap-square($size)
+  +bootstrap-size($size, $size)
 
 // Placeholder text
 // -------------------------
-=placeholder($color: $placeholderText)
+=bootstrap-placeholder($color: $placeholderText)
   \:-moz-placeholder
     color: $color
   \::-webkit-input-placeholder
     color: $color
 
+// Text overflow
+// -------------------------
+// Requires inline-block or block for proper styling
+=bootstrap-text-overflow
+  overflow: hidden
+  text-overflow: ellipsis
+  white-space: nowrap
+
+// CSS image replacement
+// -------------------------
+// Source: https://github.com/h5bp/html5-boilerplate/commit/aa0396eae757
+=bootstrap-hide-text
+  font: 0 / 0 a
+  color: transparent
+  text-shadow: none
+  background-color: transparent
+  border: 0
+
 // FONTS
 // --------------------------------------------------
-=font-family-serif
-  font-family: Georgia, "Times New Roman", Times, serif
-
-=font-family-sans-serif
-  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif
+=bootstrap-font-family-serif
+  font-family: $serifFontFamily
 
-=font-family-monospace
-  font-family: Menlo, Monaco, "Courier New", monospace
+=bootstrap-font-family-sans-serif
+  font-family: $sansFontFamily
 
-=font-serif($size: $baseFontSize, $weight: normal, $lineHeight: $baseLineHeight)
-  font-family: Georgia, "Times New Roman", Times, serif
-  +shorthand($size, $weight, $lineHeight)
+=bootstrap-font-family-monospace
+  font-family: $monoFontFamily
 
-=font-shorthand($size: $baseFontSize, $weight: normal, $lineHeight: $baseLineHeight)
+=bootstrap-font-shorthand($size: $baseFontSize, $weight: normal, $lineHeight: $baseLineHeight)
   font-size: $size
   font-weight: $weight
   line-height: $lineHeight
 
-=font-serif($size: $baseFontSize, $weight: normal, $lineHeight: $baseLineHeight)
-  +font-family-serif
-  +font-shorthand($size, $weight, $lineHeight)
+=bootstrap-font-serif($size: $baseFontSize, $weight: normal, $lineHeight: $baseLineHeight)
+  +bootstrap-font-family-serif
+  +bootstrap-font-shorthand($size, $weight, $lineHeight)
 
-=font-sans-serif($size: $baseFontSize, $weight: normal, $lineHeight: $baseLineHeight)
-  +font-family-sans-serif
-  +font-shorthand($size, $weight, $lineHeight)
+=bootstrap-font-sans-serif($size: $baseFontSize, $weight: normal, $lineHeight: $baseLineHeight)
+  +bootstrap-font-family-sans-serif
+  +bootstrap-font-shorthand($size, $weight, $lineHeight)
 
-=font-monospace($size: $baseFontSize, $weight: normal, $lineHeight: $baseLineHeight)
-  +font-family-monospace
-  +font-shorthand($size, $weight, $lineHeight)
+=bootstrap-font-monospace($size: $baseFontSize, $weight: normal, $lineHeight: $baseLineHeight)
+  +bootstrap-font-family-monospace
+  +bootstrap-font-shorthand($size, $weight, $lineHeight)
 
-// GRID SYSTEM
+// FORMS
 // --------------------------------------------------
 
-// Site container
-// -------------------------
-=container-fixed
-  width: $gridRowWidth
-  margin-left: auto
-  margin-right: auto
-  +clearfix
-
-// Le grid system
-=gridSystem-columns($gridGutterWidth, $gridColumnWidth, $gridRowWidth, $columns)
-  width: $gridColumnWidth * $columns + $gridGutterWidth * ($columns - 1)
-
-=gridSystem-offset($gridColumnWidth, $gridGutterWidth, $columns)
-  margin-left: $gridColumnWidth * $columns + $gridGutterWidth * ($columns - 1) + $gridGutterWidth * 2
-
-=gridSystem-gridColumn($gridGutterWidth)
-  float: left
-  margin-left: $gridGutterWidth
-
-// Take these values and mixins, and make 'em do their thang
-=gridSystem-generate($gridColumns, $gridColumnWidth, $gridGutterWidth)
-  // Row surrounds the columns
-  .row
-    margin-left: $gridGutterWidth * -1
-    +clearfix
-  // Find all .span# classes within .row and give them the necessary properties for grid columns (supported by all browsers back to IE7, thanks $dhg)
-  [class*="span"]
-    +gridSystem-gridColumn($gridGutterWidth)
-  // Default columns
-  .span1
-    +gridSystem-columns($gridGutterWidth, $gridColumnWidth, $gridRowWidth, 1)
-  .span2
-    +gridSystem-columns($gridGutterWidth, $gridColumnWidth, $gridRowWidth, 2)
-  .span3
-    +gridSystem-columns($gridGutterWidth, $gridColumnWidth, $gridRowWidth, 3)
-  .span4
-    +gridSystem-columns($gridGutterWidth, $gridColumnWidth, $gridRowWidth, 4)
-  .span5
-    +gridSystem-columns($gridGutterWidth, $gridColumnWidth, $gridRowWidth, 5)
-  .span6
-    +gridSystem-columns($gridGutterWidth, $gridColumnWidth, $gridRowWidth, 6)
-  .span7
-    +gridSystem-columns($gridGutterWidth, $gridColumnWidth, $gridRowWidth, 7)
-  .span8
-    +gridSystem-columns($gridGutterWidth, $gridColumnWidth, $gridRowWidth, 8)
-  .span9
-    +gridSystem-columns($gridGutterWidth, $gridColumnWidth, $gridRowWidth, 9)
-  .span10
-    +gridSystem-columns($gridGutterWidth, $gridColumnWidth, $gridRowWidth, 10)
-  .span11
-    +gridSystem-columns($gridGutterWidth, $gridColumnWidth, $gridRowWidth, 11)
-  .span12,
-  .container
-    +gridSystem-columns($gridGutterWidth, $gridColumnWidth, $gridRowWidth, 12)
-  // Offset column options
-  .offset1
-    +gridSystem-offset($gridColumnWidth, $gridGutterWidth, 1)
-  .offset2
-    +gridSystem-offset($gridColumnWidth, $gridGutterWidth, 2)
-  .offset3
-    +gridSystem-offset($gridColumnWidth, $gridGutterWidth, 3)
-  .offset4
-    +gridSystem-offset($gridColumnWidth, $gridGutterWidth, 4)
-  .offset5
-    +gridSystem-offset($gridColumnWidth, $gridGutterWidth, 5)
-  .offset6
-    +gridSystem-offset($gridColumnWidth, $gridGutterWidth, 6)
-  .offset7
-    +gridSystem-offset($gridColumnWidth, $gridGutterWidth, 7)
-  .offset8
-    +gridSystem-offset($gridColumnWidth, $gridGutterWidth, 8)
-  .offset9
-    +gridSystem-offset($gridColumnWidth, $gridGutterWidth, 9)
-  .offset10
-    +gridSystem-offset($gridColumnWidth, $gridGutterWidth, 10)
-  .offset11
-    +gridSystem-offset($gridColumnWidth, $gridGutterWidth, 11)
-
-// Fluid grid system
-// -------------------------
-=fluidGridSystem-columns($fluidGridGutterWidth, $fluidGridColumnWidth, $columns)
-  width: $fluidGridColumnWidth * $columns + $fluidGridGutterWidth * ($columns - 1)
-
-=fluidGridSystem-gridColumn($fluidGridGutterWidth)
-  float: left
-  margin-left: $fluidGridGutterWidth
-
-// Take these values and mixins, and make 'em do their thang
-=fluidGridSystem-generate($gridColumns, $fluidGridColumnWidth, $fluidGridGutterWidth)
-  // Row surrounds the columns
-  .row-fluid
-    width: 100%
-    +clearfix
-    // Find all .span# classes within .row and give them the necessary properties for grid columns (supported by all browsers back to IE7, thanks $dhg)
-    > [class*="span"]
-      +fluidGridSystem-gridColumn($fluidGridGutterWidth)
-    > [class*="span"]:first-child
-      margin-left: 0
-    // Default columns
-    .span1
-      +fluidGridSystem-columns($fluidGridGutterWidth, $fluidGridColumnWidth, 1)
-    .span2
-      +fluidGridSystem-columns($fluidGridGutterWidth, $fluidGridColumnWidth, 2)
-    .span3
-      +fluidGridSystem-columns($fluidGridGutterWidth, $fluidGridColumnWidth, 3)
-    .span4
-      +fluidGridSystem-columns($fluidGridGutterWidth, $fluidGridColumnWidth, 4)
-    .span5
-      +fluidGridSystem-columns($fluidGridGutterWidth, $fluidGridColumnWidth, 5)
-    .span6
-      +fluidGridSystem-columns($fluidGridGutterWidth, $fluidGridColumnWidth, 6)
-    .span7
-      +fluidGridSystem-columns($fluidGridGutterWidth, $fluidGridColumnWidth, 7)
-    .span8
-      +fluidGridSystem-columns($fluidGridGutterWidth, $fluidGridColumnWidth, 8)
-    .span9
-      +fluidGridSystem-columns($fluidGridGutterWidth, $fluidGridColumnWidth, 9)
-    .span10
-      +fluidGridSystem-columns($fluidGridGutterWidth, $fluidGridColumnWidth, 10)
-    .span11
-      +fluidGridSystem-columns($fluidGridGutterWidth, $fluidGridColumnWidth, 11)
-    .span12
-      +fluidGridSystem-columns($fluidGridGutterWidth, $fluidGridColumnWidth, 12)
-
-// Input grid system
-// -------------------------
-=inputGridSystem-inputColumns($gridGutterWidth, $gridColumnWidth, $gridRowWidth, $columns)
-  width: $gridColumnWidth * $columns + $gridGutterWidth * ($columns - 1) - 10
-
-=inputGridSystem-generate($gridColumns, $gridColumnWidth, $gridGutterWidth)
+// Block level inputs
+=bootstrap-input-block-level
+  display: block
+  width: 100%
+  min-height: 28px
+  // Make inputs at least the height of their button counterpart
+  +bootstrap-box-sizing(border-box)
+  // Makes inputs behave like true block-level elements
+
+// Mixin for form field states
+=bootstrap-formFieldState($textColor: #555555, $borderColor: #cccccc, $backgroundColor: #f5f5f5)
+  // Set the text color
+  > label,
+  .help-block,
+  .help-inline
+    color: $textColor
+  // Style inputs accordingly
   input,
-  textarea,
-  .uneditable-input
-    &.span1
-      +inputGridSystem-inputColumns($gridGutterWidth, $gridColumnWidth, $gridRowWidth, 1)
-    &.span2
-      +inputGridSystem-inputColumns($gridGutterWidth, $gridColumnWidth, $gridRowWidth, 2)
-    &.span3
-      +inputGridSystem-inputColumns($gridGutterWidth, $gridColumnWidth, $gridRowWidth, 3)
-    &.span4
-      +inputGridSystem-inputColumns($gridGutterWidth, $gridColumnWidth, $gridRowWidth, 4)
-    &.span5
-      +inputGridSystem-inputColumns($gridGutterWidth, $gridColumnWidth, $gridRowWidth, 5)
-    &.span6
-      +inputGridSystem-inputColumns($gridGutterWidth, $gridColumnWidth, $gridRowWidth, 6)
-    &.span7
-      +inputGridSystem-inputColumns($gridGutterWidth, $gridColumnWidth, $gridRowWidth, 7)
-    &.span8
-      +inputGridSystem-inputColumns($gridGutterWidth, $gridColumnWidth, $gridRowWidth, 8)
-    &.span9
-      +inputGridSystem-inputColumns($gridGutterWidth, $gridColumnWidth, $gridRowWidth, 9)
-    &.span10
-      +inputGridSystem-inputColumns($gridGutterWidth, $gridColumnWidth, $gridRowWidth, 10)
-    &.span11
-      +inputGridSystem-inputColumns($gridGutterWidth, $gridColumnWidth, $gridRowWidth, 11)
-    &.span12
-      +inputGridSystem-inputColumns($gridGutterWidth, $gridColumnWidth, $gridRowWidth, 12)
+  select,
+  textarea
+    color: $textColor
+    border-color: $borderColor
+    &:focus
+      border-color: darken($borderColor, 10%)
+      +bootstrap-box-shadow(0 0 6px lighten($borderColor, 20%))
+  // 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
 
 // CSS3 PROPERTIES
 // --------------------------------------------------
 
+// Border Radius
+=bootstrap-border-radius($radius)
+  -webkit-border-radius: $radius
+  -moz-border-radius: $radius
+  border-radius: $radius
+
 // Drop shadows
-=box-shadow($shadow: 0 1px 3px rgba(0, 0, 0, 0.25))
+=bootstrap-box-shadow($shadow)
   -webkit-box-shadow: $shadow
   -moz-box-shadow: $shadow
   box-shadow: $shadow
 
 // Transitions
-=transition($transition)
+=bootstrap-transition($transition)
   -webkit-transition: $transition
   -moz-transition: $transition
   -ms-transition: $transition
@@ -284,78 +178,90 @@
   transition: $transition
 
 // Transformations
-=rotate($degrees)
+=bootstrap-rotate($degrees)
   -webkit-transform: rotate($degrees)
   -moz-transform: rotate($degrees)
   -ms-transform: rotate($degrees)
   -o-transform: rotate($degrees)
   transform: rotate($degrees)
 
-=scale($ratio)
+=bootstrap-scale($ratio)
   -webkit-transform: scale($ratio)
   -moz-transform: scale($ratio)
   -ms-transform: scale($ratio)
   -o-transform: scale($ratio)
   transform: scale($ratio)
 
-=translate($x: 0, $y: 0)
+=bootstrap-translate($x, $y)
   -webkit-transform: translate($x, $y)
   -moz-transform: translate($x, $y)
   -ms-transform: translate($x, $y)
   -o-transform: translate($x, $y)
   transform: translate($x, $y)
 
-=skew($x: 0, $y: 0)
-  -webkit-transform: translate($x, $y)
-  -moz-transform: translate($x, $y)
-  -ms-transform: translate($x, $y)
-  -o-transform: translate($x, $y)
-  transform: translate($x, $y)
-
-=skew($x: 0, $y: 0)
+=bootstrap-skew($x, $y)
   -webkit-transform: skew($x, $y)
   -moz-transform: skew($x, $y)
   -ms-transform: skew($x, $y)
   -o-transform: skew($x, $y)
   transform: skew($x, $y)
 
+=bootstrap-translate3d($x, $y, $z)
+  -webkit-transform: translate($x, $y, $z)
+  -moz-transform: translate($x, $y, $z)
+  -ms-transform: translate($x, $y, $z)
+  -o-transform: translate($x, $y, $z)
+  transform: translate($x, $y, $z)
+
+// Backface visibility
+// Prevent browsers from flickering when using CSS 3D transforms.
+// Default value is `visible`, but can be changed to `hidden
+// See git pull https://github.com/dannykeane/bootstrap.git backface-visibility for examples
+=bootstrap-backface-visibility($visibility)
+  -webkit-backface-visibility: $visibility
+  -moz-backface-visibility: $visibility
+  -ms-backface-visibility: $visibility
+  backface-visibility: $visibility
+
 // Background clipping
 // Heads up: FF 3.6 and under need "padding" instead of "padding-box"
-=background-clip($clip)
+=bootstrap-background-clip($clip)
   -webkit-background-clip: $clip
   -moz-background-clip: $clip
   background-clip: $clip
 
 // Background sizing
-=background-size($size)
+=bootstrap-background-size($size)
   -webkit-background-size: $size
   -moz-background-size: $size
   -o-background-size: $size
   background-size: $size
 
 // Box sizing
-=box-sizing($boxmodel)
+=bootstrap-box-sizing($boxmodel)
   -webkit-box-sizing: $boxmodel
   -moz-box-sizing: $boxmodel
+  -ms-box-sizing: $boxmodel
   box-sizing: $boxmodel
 
 // User select
 // For selecting text on the page
-=user-select($select)
+=bootstrap-user-select($select)
   -webkit-user-select: $select
   -moz-user-select: $select
+  -ms-user-select: $select
   -o-user-select: $select
   user-select: $select
 
 // Resize anything
-=resizable($direction: both)
+=bootstrap-resizable($direction)
   resize: $direction
   // Options: horizontal, vertical, both
   overflow: auto
   // Safari fix
 
 // CSS3 Content Columns
-=content-columns($columnCount, $columnGap: $gridColumnGutter)
+=bootstrap-content-columns($columnCount, $columnGap: $gridGutterWidth)
   -webkit-column-count: $columnCount
   -moz-column-count: $columnCount
   column-count: $columnCount
@@ -363,33 +269,36 @@
   -moz-column-gap: $columnGap
   column-gap: $columnGap
 
+// Opacity
+=bootstrap-opacity($opacity)
+  opacity: $opacity / 100
+  filter: unquote("alpha(opacity=#{$opacity})")
+
 // BACKGROUNDS
 // --------------------------------------------------
 
 // Add an alphatransparency value to any background or border color (via Elyse Holladay)
-=translucent-background($color: $white, $alpha: 1)
+=bootstrap-translucent-background($color: $white, $alpha: 1)
   background-color: hsla(hue($color), saturation($color), lightness($color), $alpha)
 
-=translucent-border($color: $white, $alpha: 1)
+=bootstrap-translucent-border($color: $white, $alpha: 1)
   border-color: hsla(hue($color), saturation($color), lightness($color), $alpha)
-  +background-clip(padding-box)
+  +bootstrap-background-clip(padding-box)
 
 // Gradient Bar Colors for buttons and alerts
-=gradientBar($primaryColor, $secondaryColor)
-  +gradient-vertical($primaryColor, $secondaryColor)
+=bootstrap-gradientBar($primaryColor, $secondaryColor)
+  +bootstrap-gradient-vertical($primaryColor, $secondaryColor)
   border-color: $secondaryColor $secondaryColor darken($secondaryColor, 15%)
   border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) fadein(rgba(0, 0, 0, 0.1), 15%)
 
 // Gradients
-=gradient-horizontal($startColor: #555555, $endColor: #333333)
+=bootstrap-gradient-horizontal($startColor: #555555, $endColor: #333333)
   background-color: $endColor
-  background-image: -khtml-gradient(linear, left top, right top, from($startColor), to($endColor))
-  // Konqueror
   background-image: -moz-linear-gradient(left, $startColor, $endColor)
   // FF 3.6+
   background-image: -ms-linear-gradient(left, $startColor, $endColor)
   // IE10
-  background-image: -webkit-gradient(linear, left top, right top, color-stop(0%, $startColor), color-stop(100%, $endColor))
+  background-image: -webkit-gradient(linear, 0 0, 100% 0, from($startColor), to($endColor))
   // Safari 4+, Chrome 2+
   background-image: -webkit-linear-gradient(left, $startColor, $endColor)
   // Safari 5.1+, Chrome 10+
@@ -401,26 +310,25 @@
   filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#{$startColor}', endColorstr='#{$endColor}', GradientType=1)
   // IE9 and down
 
-=gradient-vertical($startColor: #555555, $endColor: #333333)
-  background-color: $endColor
-  background-image: -khtml-gradient(linear, left top, left bottom, from($startColor), to($endColor))
-  // Konqueror
+=bootstrap-gradient-vertical($startColor: #555555, $endColor: #333333)
+  background-color: mix($startColor, $endColor, 60%)
   background-image: -moz-linear-gradient(top, $startColor, $endColor)
   // FF 3.6+
   background-image: -ms-linear-gradient(top, $startColor, $endColor)
   // IE10
-  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, $startColor), color-stop(100%, $endColor))
+  background-image: -webkit-gradient(linear, 0 0, 0 100%, from($startColor), to($endColor))
   // Safari 4+, Chrome 2+
   background-image: -webkit-linear-gradient(top, $startColor, $endColor)
   // Safari 5.1+, Chrome 10+
   background-image: -o-linear-gradient(top, $startColor, $endColor)
   // Opera 11.10
-  //background-image: linear-gradient(top left, $startColor, $endColor); // The standard
+  background-image: linear-gradient(top, $startColor, $endColor)
+  // The standard
   background-repeat: repeat-x
   filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#{$startColor}', endColorstr='#{$endColor}', GradientType=0)
   // IE9 and down
 
-=gradient-directional($startColor: #555555, $endColor: #333333, $deg: 45deg)
+=bootstrap-gradient-directional($startColor: #555555, $endColor: #333333, $deg: 45deg)
   background-color: $endColor
   background-repeat: repeat-x
   background-image: -moz-linear-gradient($deg, $startColor, $endColor)
@@ -434,8 +342,8 @@
   background-image: linear-gradient($deg, $startColor, $endColor)
   // The standard
 
-=gradient-vertical-three-colors($startColor: #00b3ee, $midColor: #7a43b6, $colorStop: 50%, $endColor: #c3325f)
-  background-color: $endColor
+=bootstrap-gradient-vertical-three-colors($startColor: #00b3ee, $midColor: #7a43b6, $colorStop: 50%, $endColor: #c3325f)
+  background-color: mix($midColor, $endColor, 80%)
   background-image: -webkit-gradient(linear, 0 0, 0 100%, from($startColor), color-stop($colorStop, $midColor), to($endColor))
   background-image: -webkit-linear-gradient($startColor, $midColor $colorStop, $endColor)
   background-image: -moz-linear-gradient(top, $startColor, $midColor $colorStop, $endColor)
@@ -444,84 +352,193 @@
   background-image: linear-gradient($startColor, $midColor $colorStop, $endColor)
   background-repeat: no-repeat
   filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#{$startColor}', endColorstr='#{$endColor}', GradientType=0)
-  // IE9 and down, gets no color-stop at all the proper fallback
-
-=gradient-radial($centerColor: #555555, $outsideColor: #333333)
-  background-color: $outsideColor
-  background-image: -webkit-gradient(radial, center center, 0, center center, 460, from($centerColor), to($outsideColor))
-  background-image: -webkit-radial-gradient(circle, $centerColor, $outsideColor)
-  background-image: -moz-radial-gradient(circle, $centerColor, $outsideColor)
-  background-image: -ms-radial-gradient(circle, $centerColor, $outsideColor)
+  // IE9 and down, gets no color-stop at all for proper fallback
+
+=bootstrap-gradient-radial($innerColor: #555555, $outerColor: #333333)
+  background-color: $outerColor
+  background-image: -webkit-gradient(radial, center center, 0, center center, 460, from($innerColor), to($outerColor))
+  background-image: -webkit-radial-gradient(circle, $innerColor, $outerColor)
+  background-image: -moz-radial-gradient(circle, $innerColor, $outerColor)
+  background-image: -ms-radial-gradient(circle, $innerColor, $outerColor)
+  background-image: -o-radial-gradient(circle, $innerColor, $outerColor)
   background-repeat: no-repeat
-  // Opera cannot do radial gradients yet
 
-=gradient-striped($color, $angle: -45deg)
+=bootstrap-gradient-striped($color, $angle: -45deg)
   background-color: $color
   background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(0.25, rgba(255, 255, 255, 0.15)), color-stop(0.25, transparent), color-stop(0.5, transparent), color-stop(0.5, rgba(255, 255, 255, 0.15)), color-stop(0.75, rgba(255, 255, 255, 0.15)), color-stop(0.75, transparent), to(transparent))
   background-image: -webkit-linear-gradient($angle, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent)
   background-image: -moz-linear-gradient($angle, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent)
   background-image: -ms-linear-gradient($angle, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent)
   background-image: -o-linear-gradient($angle, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent)
-  //background-image: linear-gradient($angle, rgba(255,255,255,.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.15) 50%, rgba(255,255,255,.15) 75%, transparent 75%, transparent);
-
-// Gradient Bar Colors for buttons and alerts
-=gradientBar($primaryColor, $secondaryColor)
-  +gradient-vertical($primaryColor, $secondaryColor)
-  border-color: $secondaryColor $secondaryColor darken($secondaryColor, 15%)
-  border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) fade-in(rgba(0, 0, 0, 0.1), 0.15)
+  background-image: linear-gradient($angle, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent)
 
 // Reset filters for IE
-=reset-filter
+=bootstrap-reset-filter
   filter: progid:DXImageTransform.Microsoft.gradient(enabled = false)
 
-// Mixin for generating button backgrounds
-// ---------------------------------------
-=buttonBackground($startColor, $endColor)
+// COMPONENT MIXINS
+// --------------------------------------------------
+
+// Horizontal dividers
+// -------------------------
+// Dividers (basically an hr) within dropdowns and nav lists
+=bootstrap-nav-divider
+  // IE7 needs a set width since we gave a height. Restricting just
+  // to IE7 to keep the 1px left/right space in other browsers.
+  // It is unclear where IE is getting the extra space that we need
+  // to negative-margin away, but so it goes.
+  *width: 100%
+  height: 1px
+  margin: $baseLineHeight / 2 - 1 1px
+  // 8px 1px
+  *margin: -5px 0 5px
+  overflow: hidden
+  background-color: #e5e5e5
+  border-bottom: 1px solid $white
+
+// Button backgrounds
+// ------------------
+=bootstrap-buttonBackground($startColor, $endColor)
   // gradientBar will set the background to a pleasing blend of these, to support IE<=9
-  +gradientBar($startColor, $endColor)
-  +reset-filter
+  +bootstrap-gradientBar($startColor, $endColor)
+  *background-color: $endColor
+  /* Darken IE7 buttons by default so they stand out more given they won't have borders
+  +bootstrap-reset-filter
   // in these cases the gradient won't cover the background, so we override
   &:hover, &:active, &.active, &.disabled, &[disabled]
     background-color: $endColor
+    *background-color: darken($endColor, 5%)
   // IE 7 + 8 can't handle box-shadow to show active, so we darken a bit ourselves
   &:active,
   &.active
-    background-color: darken($endColor, 10%) e("\9")
+    background-color: darken($endColor, 10%) \9
 
-// COMPONENT MIXINS
-// --------------------------------------------------
+// Navbar vertical align
+// -------------------------
+// Vertically center elements in the navbar.
+// Example: an element has a height of 30px, so write out `.navbarVerticalAlign(30px);` to calculate the appropriate top margin.
+=bootstrap-navbarVerticalAlign($elementHeight)
+  margin-top: ($navbarHeight - $elementHeight) / 2
 
-// POPOVER ARROWS
+// Popover arrows
 // -------------------------
 // For tipsies and popovers
-=popoverArrow-top($arrowWidth: 5px)
+=bootstrap-popoverArrow-top($arrowWidth: 5px, $color: $black)
   bottom: 0
   left: 50%
   margin-left: -$arrowWidth
   border-left: $arrowWidth solid transparent
   border-right: $arrowWidth solid transparent
-  border-top: $arrowWidth solid $black
+  border-top: $arrowWidth solid $color
 
-=popoverArrow-left($arrowWidth: 5px)
+=bootstrap-popoverArrow-left($arrowWidth: 5px, $color: $black)
   top: 50%
   right: 0
   margin-top: -$arrowWidth
   border-top: $arrowWidth solid transparent
   border-bottom: $arrowWidth solid transparent
-  border-left: $arrowWidth solid $black
+  border-left: $arrowWidth solid $color
 
-=popoverArrow-bottom($arrowWidth: 5px)
+=bootstrap-popoverArrow-bottom($arrowWidth: 5px, $color: $black)
   top: 0
   left: 50%
   margin-left: -$arrowWidth
   border-left: $arrowWidth solid transparent
   border-right: $arrowWidth solid transparent
-  border-bottom: $arrowWidth solid $black
+  border-bottom: $arrowWidth solid $color
 
-=popoverArrow-right($arrowWidth: 5px)
+=bootstrap-popoverArrow-right($arrowWidth: 5px, $color: $black)
   top: 50%
   left: 0
   margin-top: -$arrowWidth
   border-top: $arrowWidth solid transparent
   border-bottom: $arrowWidth solid transparent
-  border-right: $arrowWidth solid $black
+  border-right: $arrowWidth solid $color
+
+// Grid System
+// -----------
+
+// Centered container element
+=bootstrap-container-fixed
+  margin-right: auto
+  margin-left: auto
+  +bootstrap-clearfix
+
+// Table columns
+=bootstrap-tableColumns($columnSpan: 1)
+  float: none
+  // undo default grid column styles
+  width: $gridColumnWidth * $columnSpan + $gridGutterWidth * ($columnSpan - 1) - 16
+  // 16 is total padding on left and right of table cells
+  margin-left: 0
+  // undo default grid column styles
+
+// Make a Grid
+// Use .makeRow and .makeColumn to assign semantic layouts grid system behavior
+=bootstrap-makeRow
+  margin-left: $gridGutterWidth * -1
+  +bootstrap-clearfix
+
+=bootstrap-makeColumn($columns: 1, $offset: 0)
+  float: left
+  margin-left: $gridColumnWidth * $offset + $gridGutterWidth * ($offset - 1) + $gridGutterWidth * 2
+  width: $gridColumnWidth * $columns + $gridGutterWidth * ($columns - 1)
+
+// The Grid
+=bootstrap-grid-core-offset($columns, $gridColumnWidth, $gridGutterWidth)
+  margin-left: $gridColumnWidth * $columns + $gridGutterWidth * ($columns + 1)
+
+=bootstrap-grid-core-span($columns, $gridColumnWidth, $gridGutterWidth)
+  width: $gridColumnWidth * $columns + $gridGutterWidth * ($columns - 1)
+
+=bootstrap-grid-core($gridColumnWidth, $gridGutterWidth)
+  .row
+    margin-left: $gridGutterWidth * -1
+    +bootstrap-clearfix
+  [class*="span"]
+    float: left
+    margin-left: $gridGutterWidth
+  // Set the container width, and override it for fixed navbars in media queries
+  .container,
+  .navbar-fixed-top .container,
+  .navbar-fixed-bottom .container
+    +bootstrap-grid-core-span($gridColumns, $gridColumnWidth, $gridGutterWidth)
+  // generate .spanX and .offsetX
+  @for $i from 1 through $gridColumns
+    .span#{$i}
+      +bootstrap-grid-core-span($i, $gridColumnWidth, $gridGutterWidth)
+    .offset#{$i}
+      +bootstrap-grid-core-offset($i, $gridColumnWidth, $gridGutterWidth)
+
+=bootstrap-grid-fluid-span($columns, $fluidGridColumnWidth, $fluidGridGutterWidth)
+  width: $fluidGridColumnWidth * $columns + $fluidGridGutterWidth * ($columns - 1)
+  *width: $fluidGridColumnWidth * $columns + $fluidGridGutterWidth * ($columns - 1) - 0.5 / ($gridRowWidth / 1px) * 100 * 1%
+
+=bootstrap-grid-fluid($fluidGridColumnWidth, $fluidGridGutterWidth)
+  .row-fluid
+    width: 100%
+    +bootstrap-clearfix
+    [class*="span"]
+      +bootstrap-input-block-level
+      float: left
+      margin-left: $fluidGridGutterWidth
+      *margin-left: $fluidGridGutterWidth - 0.5 / ($gridRowWidth / 1px) * 100 * 1%
+    [class*="span"]:first-child
+      margin-left: 0
+    // generate .spanX
+    @for $i from 1 through $gridColumns
+      .span#{$i}
+        +bootstrap-grid-fluid-span($i, $fluidGridColumnWidth, $fluidGridGutterWidth)
+
+=bootstrap-grid-input-span($columns, $gridColumnWidth, $gridGutterWidth)
+  width: $gridColumnWidth * $columns + $gridGutterWidth * ($columns - 1) - 10
+
+=bootstrap-grid-input($gridColumnWidth, $gridGutterWidth)
+  input,
+  textarea,
+  .uneditable-input
+    margin-left: 0
+    // override margin-left from core grid system
+  @for $i from 1 through $gridColumns
+    input.span#{$i}, textarea.span#{$i}, .uneditable-input.span#{$i}
+      +bootstrap-grid-input-span($i, $gridColumnWidth, $gridGutterWidth)