compass_twitter_bootstrap 0.1.8 → 2.0.0

data/stylesheets_sass/compass_twitter_bootstrap/_grid.sass

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

data/stylesheets_sass/compass_twitter_bootstrap/_hero-unit.sass

@@ -0,0 +1,17 @@
+// HERO UNIT
+// ---------
+
+.hero-unit
+  padding: 60px
+  margin-bottom: 30px
+  background-color: #f5f5f5
+  +border-radius(6px)
+  h1
+    margin-bottom: 0
+    font-size: 60px
+    line-height: 1
+    letter-spacing: -1px
+  p
+    font-size: 18px
+    font-weight: 200
+    line-height: $baseLineHeight * 1.5

data/stylesheets_sass/compass_twitter_bootstrap/_labels.sass

@@ -0,0 +1,23 @@
+// LABELS
+// ------
+
+.label
+  padding: 1px 3px 2px
+  font-size: $baseFontSize * 0.75
+  font-weight: bold
+  color: $white
+  text-transform: uppercase
+  background-color: $grayLight
+  +border-radius(3px)
+
+.label-important
+  background-color: $errorText
+
+.label-warning
+  background-color: $orange
+
+.label-success
+  background-color: $successText
+
+.label-info
+  background-color: $infoText

data/stylesheets_sass/compass_twitter_bootstrap/_layouts.sass

@@ -0,0 +1,14 @@
+//
+// Layouts
+// Fixed-width and fluid (with sidebar) layouts
+// --------------------------------------------
+
+// Container (centered, fixed-width layouts)
+.container
+  +container-fixed
+
+// Fluid layouts (left aligned, with sidebar, min- & max-width content)
+.container-fluid
+  padding-left: $gridGutterWidth
+  padding-right: $gridGutterWidth
+  +clearfix

data/stylesheets_sass/compass_twitter_bootstrap/_mixins.sass

@@ -1,90 +1,279 @@
-/* Mixins.scss
- * Snippets of reusable CSS to develop faster and keep code readable
- * -----------------------------------------------------------------
+// Mixins.less
+// Snippets of reusable CSS to develop faster and keep code readable
+// -----------------------------------------------------------------
 
-// Clearfix for clearing floats like a boss h5bp.com/q
+// UTILITY MIXINS
+// --------------------------------------------------
+
+// Clearfix
+// --------
+// For clearing floats like a boss h5bp.com/q
 =clearfix
-  zoom: 1
+  *zoom: 1
   &:before,
   &:after
     display: table
     content: ""
-    zoom: 1
   &:after
     clear: both
 
+// Webkit-style focus
+// ------------------
+=tab-focus
+  // Default
+  outline: thin dotted
+  // Webkit
+  outline: 5px auto -webkit-focus-ring-color
+  outline-offset: -2px
+
 // Center-align a block level element
+// ----------------------------------
 =center-block
   display: block
   margin-left: auto
   margin-right: auto
 
+// IE7 inline-block
+// ----------------
+=ie7-inline-block
+  *display: inline
+  /* IE7 inline-block hack
+  *zoom: 1
+
+// IE7 likes to collapse whitespace on either side of the inline-block elements.
+// Ems because we're attempting to match the width of a space character. Left
+// version is for form buttons, which typically come after other elements, and
+// 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
+  *margin-left: .3em
+  &:first-child
+    *margin-left: 0
+
+=ie7-restore-right-whitespace
+  *margin-right: .3em
+  &:last-child
+    *margin-left: 0
+
 // Sizing shortcuts
+// -------------------------
 =size($height: 5px, $width: 5px)
-  height: $height
   width: $width
+  height: $height
 
 =square($size: 5px)
   +size($size, $size)
 
-// Input placeholder text
-=placeholder($color: $grayLight)
+// Placeholder text
+// -------------------------
+=placeholder($color: $placeholderText)
   \:-moz-placeholder
     color: $color
   \::-webkit-input-placeholder
     color: $color
 
-// Font Stacks
-=shorthand($weight: normal, $size: 14px, $lineHeight: 20px)
-  font-size: $size
-  font-weight: $weight
-  line-height: $lineHeight
+// FONTS
+// --------------------------------------------------
+=font-family-serif
+  font-family: Georgia, "Times New Roman", Times, serif
 
-=sans-serif($weight: normal, $size: 14px, $lineHeight: 20px)
+=font-family-sans-serif
   font-family: "Helvetica Neue", Helvetica, Arial, sans-serif
-  font-size: $size
-  font-weight: $weight
-  line-height: $lineHeight
 
-=serif($weight: normal, $size: 14px, $lineHeight: 20px)
-  font-family: "Georgia", Times New Roman, Times, serif
-  font-size: $size
-  font-weight: $weight
-  line-height: $lineHeight
+=font-family-monospace
+  font-family: Menlo, Monaco, "Courier New", monospace
 
-=monospace($weight: normal, $size: 12px, $lineHeight: 20px)
-  font-family: "Monaco", Courier New, monospace
+=font-serif($size: $baseFontSize, $weight: normal, $lineHeight: $baseLineHeight)
+  font-family: Georgia, "Times New Roman", Times, serif
+  +shorthand($size, $weight, $lineHeight)
+
+=font-shorthand($size: $baseFontSize, $weight: normal, $lineHeight: $baseLineHeight)
   font-size: $size
   font-weight: $weight
   line-height: $lineHeight
 
-// Grid System
-=fixed-container
-  width: $siteWidth
+=font-serif($size: $baseFontSize, $weight: normal, $lineHeight: $baseLineHeight)
+  +font-family-serif
+  +font-shorthand($size, $weight, $lineHeight)
+
+=font-sans-serif($size: $baseFontSize, $weight: normal, $lineHeight: $baseLineHeight)
+  +font-family-sans-serif
+  +font-shorthand($size, $weight, $lineHeight)
+
+=font-monospace($size: $baseFontSize, $weight: normal, $lineHeight: $baseLineHeight)
+  +font-family-monospace
+  +font-shorthand($size, $weight, $lineHeight)
+
+// GRID SYSTEM
+// --------------------------------------------------
+
+// Site container
+// -------------------------
+=container-fixed
+  width: $gridRowWidth
   margin-left: auto
   margin-right: auto
   +clearfix
 
-=columns($columnSpan: 1)
-  width: $gridColumnWidth * $columnSpan + $gridGutterWidth * ($columnSpan - 1)
+// Le grid system
+=gridSystem-columns($gridGutterWidth, $gridColumnWidth, $gridRowWidth, $columns)
+  width: $gridColumnWidth * $columns + $gridGutterWidth * ($columns - 1)
 
-=offset($columnOffset: 1)
-  margin-left: $gridColumnWidth * $columnOffset + $gridGutterWidth * ($columnOffset - 1) + $extraSpace
+=gridSystem-offset($gridColumnWidth, $gridGutterWidth, $columns)
+  margin-left: $gridColumnWidth * $columns + $gridGutterWidth * ($columns - 1) + $gridGutterWidth * 2
 
-// Necessary grid styles for every column to make them appear next to each other horizontally
-=gridColumn
-  display: inline
+=gridSystem-gridColumn($gridGutterWidth)
   float: left
   margin-left: $gridGutterWidth
 
-// makeColumn can be used to mark any element (e.g., .content-primary) as a column without changing markup to .span something
-=makeColumn($columnSpan: 1)
-  +gridColumn
-  +columns($columnSpan)
+// 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)
 
-// Border Radius (Will use compass version)
+// Fluid grid system
+// -------------------------
+=fluidGridSystem-columns($fluidGridGutterWidth, $fluidGridColumnWidth, $columns)
+  width: $fluidGridColumnWidth * $columns + $fluidGridGutterWidth * ($columns - 1)
 
-// Drop shadows (Will use compass version)
+=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)
+  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)
+
+// CSS3 PROPERTIES
+// --------------------------------------------------
+
+// Drop shadows
+=box-shadow($shadow: 0 1px 3px rgba(0, 0, 0, 0.25))
+  -webkit-box-shadow: $shadow
+  -moz-box-shadow: $shadow
+  box-shadow: $shadow
 
 // Transitions
 =transition($transition)
@@ -94,14 +283,79 @@
   -o-transition: $transition
   transition: $transition
 
+// Transformations
+=rotate($degrees)
+  -webkit-transform: rotate($degrees)
+  -moz-transform: rotate($degrees)
+  -ms-transform: rotate($degrees)
+  -o-transform: rotate($degrees)
+  transform: rotate($degrees)
+
+=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)
+  -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)
+  -webkit-transform: skew($x, $y)
+  -moz-transform: skew($x, $y)
+  -ms-transform: skew($x, $y)
+  -o-transform: skew($x, $y)
+  transform: skew($x, $y)
+
 // Background clipping
+// Heads up: FF 3.6 and under need "padding" instead of "padding-box"
 =background-clip($clip)
   -webkit-background-clip: $clip
   -moz-background-clip: $clip
   background-clip: $clip
 
+// Background sizing
+=background-size($size)
+  -webkit-background-size: $size
+  -moz-background-size: $size
+  -o-background-size: $size
+  background-size: $size
+
+// Box sizing
+=box-sizing($boxmodel)
+  -webkit-box-sizing: $boxmodel
+  -moz-box-sizing: $boxmodel
+  box-sizing: $boxmodel
+
+// User select
+// For selecting text on the page
+=user-select($select)
+  -webkit-user-select: $select
+  -moz-user-select: $select
+  -o-user-select: $select
+  user-select: $select
+
+// Resize anything
+=resizable($direction: both)
+  resize: $direction
+  // Options: horizontal, vertical, both
+  overflow: auto
+  // Safari fix
+
 // CSS3 Content Columns
-=content-columns($columnCount, $columnGap: 20px)
+=content-columns($columnCount, $columnGap: $gridColumnGutter)
   -webkit-column-count: $columnCount
   -moz-column-count: $columnCount
   column-count: $columnCount
@@ -109,51 +363,165 @@
   -moz-column-gap: $columnGap
   column-gap: $columnGap
 
+// BACKGROUNDS
+// --------------------------------------------------
+
 // Add an alphatransparency value to any background or border color (via Elyse Holladay)
 =translucent-background($color: $white, $alpha: 1)
   background-color: hsla(hue($color), saturation($color), lightness($color), $alpha)
 
 =translucent-border($color: $white, $alpha: 1)
   border-color: hsla(hue($color), saturation($color), lightness($color), $alpha)
-  background-clip: padding-box
+  +background-clip(padding-box)
+
+// 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) fadein(rgba(0, 0, 0, 0.1), 15%)
 
 // Gradients
 =gradient-horizontal($startColor: #555555, $endColor: #333333)
   background-color: $endColor
-  background-repeat: repeat-x
-  +filter-gradient($startColor, $endColor, horizontal)
   background-image: -khtml-gradient(linear, left top, right top, from($startColor), to($endColor))
   // Konqueror
-  +background-image(linear-gradient(left, $startColor, $endColor))
+  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))
+  // Safari 4+, Chrome 2+
+  background-image: -webkit-linear-gradient(left, $startColor, $endColor)
+  // Safari 5.1+, Chrome 10+
+  background-image: -o-linear-gradient(left, $startColor, $endColor)
+  // Opera 11.10
+  background-image: linear-gradient(left, $startColor, $endColor)
+  // Le standard
+  background-repeat: repeat-x
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#{$startColor}', endColorstr='#{$endColor}', GradientType=1)
+  // IE9 and down
 
 =gradient-vertical($startColor: #555555, $endColor: #333333)
   background-color: $endColor
-  background-repeat: repeat-x
-  +filter-gradient($startColor, $endColor)
   background-image: -khtml-gradient(linear, left top, left bottom, from($startColor), to($endColor))
   // Konqueror
-  +background-image(linear-gradient($startColor, $endColor))
+  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))
+  // 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-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)
   background-color: $endColor
   background-repeat: repeat-x
-  +background-image(linear-gradient(left top, $startColor, $endColor))
+  background-image: -moz-linear-gradient($deg, $startColor, $endColor)
+  // FF 3.6+
+  background-image: -ms-linear-gradient($deg, $startColor, $endColor)
+  // IE10
+  background-image: -webkit-linear-gradient($deg, $startColor, $endColor)
+  // Safari 5.1+, Chrome 10+
+  background-image: -o-linear-gradient($deg, $startColor, $endColor)
+  // Opera 11.10
+  background-image: linear-gradient($deg, $startColor, $endColor)
+  // The standard
 
 =gradient-vertical-three-colors($startColor: #00b3ee, $midColor: #7a43b6, $colorStop: 50%, $endColor: #c3325f)
   background-color: $endColor
+  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)
+  background-image: -ms-linear-gradient($startColor, $midColor $colorStop, $endColor)
+  background-image: -o-linear-gradient($startColor, $midColor $colorStop, $endColor)
+  background-image: linear-gradient($startColor, $midColor $colorStop, $endColor)
   background-repeat: no-repeat
-  +filter-gradient($startColor, $endColor)
-  +background-image(linear-gradient($startColor, $midColor $colorStop, $endColor))
+  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)
+  background-repeat: no-repeat
+  // Opera cannot do radial gradients yet
+
+=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 allerts
+// Gradient Bar Colors for buttons and alerts
 =gradientBar($primaryColor, $secondaryColor)
   +gradient-vertical($primaryColor, $secondaryColor)
-  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25)
   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%)
+  border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) fade-in(rgba(0, 0, 0, 0.1), 0.15)
 
 // Reset filters for IE
 =reset-filter
-  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(enabled=false)"
+  filter: progid:DXImageTransform.Microsoft.gradient(enabled = false)
+
+// Mixin for generating button backgrounds
+// ---------------------------------------
+=buttonBackground($startColor, $endColor)
+  // gradientBar will set the background to a pleasing blend of these, to support IE<=9
+  +gradientBar($startColor, $endColor)
+  +reset-filter
+  // in these cases the gradient won't cover the background, so we override
+  &:hover, &:active, &.active, &.disabled, &[disabled]
+    background-color: $endColor
+  // 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")
+
+// COMPONENT MIXINS
+// --------------------------------------------------
+
+// POPOVER ARROWS
+// -------------------------
+// For tipsies and popovers
+=popoverArrow-top($arrowWidth: 5px)
+  bottom: 0
+  left: 50%
+  margin-left: -$arrowWidth
+  border-left: $arrowWidth solid transparent
+  border-right: $arrowWidth solid transparent
+  border-top: $arrowWidth solid $black
+
+=popoverArrow-left($arrowWidth: 5px)
+  top: 50%
+  right: 0
+  margin-top: -$arrowWidth
+  border-top: $arrowWidth solid transparent
+  border-bottom: $arrowWidth solid transparent
+  border-left: $arrowWidth solid $black
+
+=popoverArrow-bottom($arrowWidth: 5px)
+  top: 0
+  left: 50%
+  margin-left: -$arrowWidth
+  border-left: $arrowWidth solid transparent
+  border-right: $arrowWidth solid transparent
+  border-bottom: $arrowWidth solid $black
 
-// Opacity (Will use compass version)
+=popoverArrow-right($arrowWidth: 5px)
+  top: 50%
+  left: 0
+  margin-top: -$arrowWidth
+  border-top: $arrowWidth solid transparent
+  border-bottom: $arrowWidth solid transparent
+  border-right: $arrowWidth solid $black