bootstrap-sass-rails 2.0.0.0 → 2.0.0.1

data/vendor/assets/stylesheets/twitter/bootstrap/_mixins.scss

@@ -95,31 +95,31 @@
 // --------------------------------------------------
 
 @mixin font-family-serif() {
-      font-family: Georgia, "Times New Roman", Times, serif;
-    }
+  font-family: Georgia, "Times New Roman", Times, serif;
+}
 @mixin font-family-sans-serif() {
-      font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
-    }
+  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+}
 @mixin font-family-monospace() {
-      font-family: Menlo, Monaco, "Courier New", monospace;
-    }
-  @mixin font-shorthand($size: $baseFontSize, $weight: normal, $lineHeight: $baseLineHeight) {
-    font-size: $size;
-    font-weight: $weight;
-    line-height: $lineHeight;
-  }
-  @mixin font-serif($size: $baseFontSize, $weight: normal, $lineHeight: $baseLineHeight) {
-    @include font-family-serif();
-    @include font-shorthand($size, $weight, $lineHeight);
-  }
-  @mixin font-sans-serif($size: $baseFontSize, $weight: normal, $lineHeight: $baseLineHeight) {
-    @include font-family-sans-serif();
-    @include font-shorthand($size, $weight, $lineHeight);
-  }
-  @mixin monospace($size: $baseFontSize, $weight: normal, $lineHeight: $baseLineHeight) {
-    @include font-family-monospace();
-    @include font-shorthand($size, $weight, $lineHeight);
-  }
+  font-family: Menlo, Monaco, "Courier New", monospace;
+}
+@mixin font-shorthand($size: $baseFontSize, $weight: normal, $lineHeight: $baseLineHeight) {
+  font-size: $size;
+  font-weight: $weight;
+  line-height: $lineHeight;
+}
+@mixin font-serif($size: $baseFontSize, $weight: normal, $lineHeight: $baseLineHeight) {
+  @include font-family-serif();
+  @include font-shorthand($size, $weight, $lineHeight);
+}
+@mixin font-sans-serif($size: $baseFontSize, $weight: normal, $lineHeight: $baseLineHeight) {
+  @include font-family-sans-serif();
+  @include font-shorthand($size, $weight, $lineHeight);
+}
+@mixin monospace($size: $baseFontSize, $weight: normal, $lineHeight: $baseLineHeight) {
+  @include font-family-monospace();
+  @include font-shorthand($size, $weight, $lineHeight);
+}
 
 
 
@@ -137,121 +137,121 @@
 
 // Le grid system
 // -------------------------
-  // Setup the mixins to be used
-  @mixin gridSystem-columns($gridGutterWidth, $gridColumnWidth, $gridRowWidth, $columns) {
-    width: ($gridColumnWidth * $columns) + ($gridGutterWidth * ($columns - 1));
-  } 
-  @mixin gridSystem-offset($gridColumnWidth, $gridGutterWidth, $columns) {
-    margin-left: ($gridColumnWidth * $columns) + ($gridGutterWidth * ($columns - 1)) + ($gridGutterWidth * 2);
-  }
-  @mixin gridSystem-gridColumn($gridGutterWidth) {
-    float: left;
-    margin-left: $gridGutterWidth;
+// Setup the mixins to be used
+@mixin gridSystem-columns($gridGutterWidth, $gridColumnWidth, $gridRowWidth, $columns) {
+  width: ($gridColumnWidth * $columns) + ($gridGutterWidth * ($columns - 1));
+}
+@mixin gridSystem-offset($gridColumnWidth, $gridGutterWidth, $columns) {
+  margin-left: ($gridColumnWidth * $columns) + ($gridGutterWidth * ($columns - 1)) + ($gridGutterWidth * 2);
+}
+@mixin gridSystem-gridColumn($gridGutterWidth) {
+  float: left;
+  margin-left: $gridGutterWidth;
+}
+// Take these values and mixins, and make 'em do their thang
+@mixin gridSystem-generate($gridColumns, $gridColumnWidth, $gridGutterWidth) {
+  // Row surrounds the columns
+  .row {
+    margin-left: $gridGutterWidth * -1;
+    @include clearfix();
   }
-  // Take these values and mixins, and make 'em do their thang
-  @mixin gridSystem-generate($gridColumns, $gridColumnWidth, $gridGutterWidth) {
-    // Row surrounds the columns
-    .row {
-      margin-left: $gridGutterWidth * -1;
-      @include 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"] {
-      @include gridSystem-gridColumn($gridGutterWidth);
-    }
-    // Default columns
-    .span1     { @include gridSystem-columns($gridGutterWidth, $gridColumnWidth, $gridRowWidth, 1); }
-    .span2     { @include gridSystem-columns($gridGutterWidth, $gridColumnWidth, $gridRowWidth, 2); }
-    .span3     { @include gridSystem-columns($gridGutterWidth, $gridColumnWidth, $gridRowWidth, 3); }
-    .span4     { @include gridSystem-columns($gridGutterWidth, $gridColumnWidth, $gridRowWidth, 4); }
-    .span5     { @include gridSystem-columns($gridGutterWidth, $gridColumnWidth, $gridRowWidth, 5); }
-    .span6     { @include gridSystem-columns($gridGutterWidth, $gridColumnWidth, $gridRowWidth, 6); }
-    .span7     { @include gridSystem-columns($gridGutterWidth, $gridColumnWidth, $gridRowWidth, 7); }
-    .span8     { @include gridSystem-columns($gridGutterWidth, $gridColumnWidth, $gridRowWidth, 8); }
-    .span9     { @include gridSystem-columns($gridGutterWidth, $gridColumnWidth, $gridRowWidth, 9); }
-    .span10    { @include gridSystem-columns($gridGutterWidth, $gridColumnWidth, $gridRowWidth, 10); }
-    .span11    { @include gridSystem-columns($gridGutterWidth, $gridColumnWidth, $gridRowWidth, 11); }
-    .span12,
-    .container { @include gridSystem-columns($gridGutterWidth, $gridColumnWidth, $gridRowWidth, 12); }
-    // Offset column options
-    .offset1   { @include gridSystem-offset($gridColumnWidth, $gridGutterWidth, 1); }
-    .offset2   { @include gridSystem-offset($gridColumnWidth, $gridGutterWidth, 2); }
-    .offset3   { @include gridSystem-offset($gridColumnWidth, $gridGutterWidth, 3); }
-    .offset4   { @include gridSystem-offset($gridColumnWidth, $gridGutterWidth, 4); }
-    .offset5   { @include gridSystem-offset($gridColumnWidth, $gridGutterWidth, 5); }
-    .offset6   { @include gridSystem-offset($gridColumnWidth, $gridGutterWidth, 6); }
-    .offset7   { @include gridSystem-offset($gridColumnWidth, $gridGutterWidth, 7); }
-    .offset8   { @include gridSystem-offset($gridColumnWidth, $gridGutterWidth, 8); }
-    .offset9   { @include gridSystem-offset($gridColumnWidth, $gridGutterWidth, 9); }
-    .offset10  { @include gridSystem-offset($gridColumnWidth, $gridGutterWidth, 10); }
-    .offset11  { @include gridSystem-offset($gridColumnWidth, $gridGutterWidth, 11); }
+  // 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"] {
+    @include gridSystem-gridColumn($gridGutterWidth);
   }
+  // Default columns
+  .span1     { @include gridSystem-columns($gridGutterWidth, $gridColumnWidth, $gridRowWidth, 1); }
+  .span2     { @include gridSystem-columns($gridGutterWidth, $gridColumnWidth, $gridRowWidth, 2); }
+  .span3     { @include gridSystem-columns($gridGutterWidth, $gridColumnWidth, $gridRowWidth, 3); }
+  .span4     { @include gridSystem-columns($gridGutterWidth, $gridColumnWidth, $gridRowWidth, 4); }
+  .span5     { @include gridSystem-columns($gridGutterWidth, $gridColumnWidth, $gridRowWidth, 5); }
+  .span6     { @include gridSystem-columns($gridGutterWidth, $gridColumnWidth, $gridRowWidth, 6); }
+  .span7     { @include gridSystem-columns($gridGutterWidth, $gridColumnWidth, $gridRowWidth, 7); }
+  .span8     { @include gridSystem-columns($gridGutterWidth, $gridColumnWidth, $gridRowWidth, 8); }
+  .span9     { @include gridSystem-columns($gridGutterWidth, $gridColumnWidth, $gridRowWidth, 9); }
+  .span10    { @include gridSystem-columns($gridGutterWidth, $gridColumnWidth, $gridRowWidth, 10); }
+  .span11    { @include gridSystem-columns($gridGutterWidth, $gridColumnWidth, $gridRowWidth, 11); }
+  .span12,
+  .container { @include gridSystem-columns($gridGutterWidth, $gridColumnWidth, $gridRowWidth, 12); }
+  // Offset column options
+  .offset1   { @include gridSystem-offset($gridColumnWidth, $gridGutterWidth, 1); }
+  .offset2   { @include gridSystem-offset($gridColumnWidth, $gridGutterWidth, 2); }
+  .offset3   { @include gridSystem-offset($gridColumnWidth, $gridGutterWidth, 3); }
+  .offset4   { @include gridSystem-offset($gridColumnWidth, $gridGutterWidth, 4); }
+  .offset5   { @include gridSystem-offset($gridColumnWidth, $gridGutterWidth, 5); }
+  .offset6   { @include gridSystem-offset($gridColumnWidth, $gridGutterWidth, 6); }
+  .offset7   { @include gridSystem-offset($gridColumnWidth, $gridGutterWidth, 7); }
+  .offset8   { @include gridSystem-offset($gridColumnWidth, $gridGutterWidth, 8); }
+  .offset9   { @include gridSystem-offset($gridColumnWidth, $gridGutterWidth, 9); }
+  .offset10  { @include gridSystem-offset($gridColumnWidth, $gridGutterWidth, 10); }
+  .offset11  { @include gridSystem-offset($gridColumnWidth, $gridGutterWidth, 11); }
+}
 
 // Fluid grid system
 // -------------------------
-  // Setup the mixins to be used
-  @mixin fluidGridSystem-columns($fluidGridGutterWidth, $fluidGridColumnWidth, $columns) {
-    width: ($fluidGridColumnWidth * $columns) + ($fluidGridGutterWidth * ($columns - 1));
-  } 
-  @mixin fluidGridSystem-gridColumn($fluidGridGutterWidth) {
-    float: left;
-    margin-left: $fluidGridGutterWidth;
-  }
-  // Take these values and mixins, and make 'em do their thang
-  @mixin fluidGridSystem-generate($gridColumns, $fluidGridColumnWidth, $fluidGridGutterWidth) {      
-    // Row surrounds the columns
-    .row-fluid {
-      width: 100%;
-      @include 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"] {
-        @include fluidGridSystem-gridColumn($fluidGridGutterWidth);
-      }
-      > [class*="span"]:first-child {
-        margin-left: 0;
-      }
-      // Default columns
-      .span1     { @include fluidGridSystem-columns($fluidGridGutterWidth, $fluidGridColumnWidth, 1); }
-      .span2     { @include fluidGridSystem-columns($fluidGridGutterWidth, $fluidGridColumnWidth, 2); }
-      .span3     { @include fluidGridSystem-columns($fluidGridGutterWidth, $fluidGridColumnWidth, 3); }
-      .span4     { @include fluidGridSystem-columns($fluidGridGutterWidth, $fluidGridColumnWidth, 4); }
-      .span5     { @include fluidGridSystem-columns($fluidGridGutterWidth, $fluidGridColumnWidth, 5); }
-      .span6     { @include fluidGridSystem-columns($fluidGridGutterWidth, $fluidGridColumnWidth, 6); }
-      .span7     { @include fluidGridSystem-columns($fluidGridGutterWidth, $fluidGridColumnWidth, 7); }
-      .span8     { @include fluidGridSystem-columns($fluidGridGutterWidth, $fluidGridColumnWidth, 8); }
-      .span9     { @include fluidGridSystem-columns($fluidGridGutterWidth, $fluidGridColumnWidth, 9); }
-      .span10    { @include fluidGridSystem-columns($fluidGridGutterWidth, $fluidGridColumnWidth, 10); }
-      .span11    { @include fluidGridSystem-columns($fluidGridGutterWidth, $fluidGridColumnWidth, 11); }
-      .span12    { @include fluidGridSystem-columns($fluidGridGutterWidth, $fluidGridColumnWidth, 12); }
+// Setup the mixins to be used
+@mixin fluidGridSystem-columns($fluidGridGutterWidth, $fluidGridColumnWidth, $columns) {
+  width: ($fluidGridColumnWidth * $columns) + ($fluidGridGutterWidth * ($columns - 1));
+}
+@mixin fluidGridSystem-gridColumn($fluidGridGutterWidth) {
+  float: left;
+  margin-left: $fluidGridGutterWidth;
+}
+// Take these values and mixins, and make 'em do their thang
+@mixin fluidGridSystem-generate($gridColumns, $fluidGridColumnWidth, $fluidGridGutterWidth) {
+  // Row surrounds the columns
+  .row-fluid {
+    width: 100%;
+    @include 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"] {
+      @include fluidGridSystem-gridColumn($fluidGridGutterWidth);
+    }
+    > [class*="span"]:first-child {
+      margin-left: 0;
     }
+    // Default columns
+    .span1     { @include fluidGridSystem-columns($fluidGridGutterWidth, $fluidGridColumnWidth, 1); }
+    .span2     { @include fluidGridSystem-columns($fluidGridGutterWidth, $fluidGridColumnWidth, 2); }
+    .span3     { @include fluidGridSystem-columns($fluidGridGutterWidth, $fluidGridColumnWidth, 3); }
+    .span4     { @include fluidGridSystem-columns($fluidGridGutterWidth, $fluidGridColumnWidth, 4); }
+    .span5     { @include fluidGridSystem-columns($fluidGridGutterWidth, $fluidGridColumnWidth, 5); }
+    .span6     { @include fluidGridSystem-columns($fluidGridGutterWidth, $fluidGridColumnWidth, 6); }
+    .span7     { @include fluidGridSystem-columns($fluidGridGutterWidth, $fluidGridColumnWidth, 7); }
+    .span8     { @include fluidGridSystem-columns($fluidGridGutterWidth, $fluidGridColumnWidth, 8); }
+    .span9     { @include fluidGridSystem-columns($fluidGridGutterWidth, $fluidGridColumnWidth, 9); }
+    .span10    { @include fluidGridSystem-columns($fluidGridGutterWidth, $fluidGridColumnWidth, 10); }
+    .span11    { @include fluidGridSystem-columns($fluidGridGutterWidth, $fluidGridColumnWidth, 11); }
+    .span12    { @include fluidGridSystem-columns($fluidGridGutterWidth, $fluidGridColumnWidth, 12); }
   }
+}
 
 
 
 // Input grid system
 // -------------------------
-  @mixin inputGridSystem-inputColumns($gridGutterWidth, $gridColumnWidth, $gridRowWidth, $columns) {
-    width: (($gridColumnWidth) * $columns) + ($gridGutterWidth * ($columns - 1)) - 10;
-  }
-  @mixin inputGridSystem-generate($gridColumns, $gridColumnWidth, $gridGutterWidth) {
-    input,
-    textarea,
-    .uneditable-input {
-      &.span1     { @include inputGridSystem-inputColumns($gridGutterWidth, $gridColumnWidth, $gridRowWidth, 1); }
-      &.span2     { @include inputGridSystem-inputColumns($gridGutterWidth, $gridColumnWidth, $gridRowWidth, 2); }
-      &.span3     { @include inputGridSystem-inputColumns($gridGutterWidth, $gridColumnWidth, $gridRowWidth, 3); }
-      &.span4     { @include inputGridSystem-inputColumns($gridGutterWidth, $gridColumnWidth, $gridRowWidth, 4); }
-      &.span5     { @include inputGridSystem-inputColumns($gridGutterWidth, $gridColumnWidth, $gridRowWidth, 5); }
-      &.span6     { @include inputGridSystem-inputColumns($gridGutterWidth, $gridColumnWidth, $gridRowWidth, 6); }
-      &.span7     { @include inputGridSystem-inputColumns($gridGutterWidth, $gridColumnWidth, $gridRowWidth, 7); }
-      &.span8     { @include inputGridSystem-inputColumns($gridGutterWidth, $gridColumnWidth, $gridRowWidth, 8); }
-      &.span9     { @include inputGridSystem-inputColumns($gridGutterWidth, $gridColumnWidth, $gridRowWidth, 9); }
-      &.span10    { @include inputGridSystem-inputColumns($gridGutterWidth, $gridColumnWidth, $gridRowWidth, 10); }
-      &.span11    { @include inputGridSystem-inputColumns($gridGutterWidth, $gridColumnWidth, $gridRowWidth, 11); }
-      &.span12    { @include inputGridSystem-inputColumns($gridGutterWidth, $gridColumnWidth, $gridRowWidth, 12); }
-    }
+@mixin inputGridSystem-inputColumns($gridGutterWidth, $gridColumnWidth, $gridRowWidth, $columns) {
+  width: (($gridColumnWidth) * $columns) + ($gridGutterWidth * ($columns - 1)) - 10;
+}
+@mixin inputGridSystem-generate($gridColumns, $gridColumnWidth, $gridGutterWidth) {
+  input,
+  textarea,
+  .uneditable-input {
+    &.span1     { @include inputGridSystem-inputColumns($gridGutterWidth, $gridColumnWidth, $gridRowWidth, 1); }
+    &.span2     { @include inputGridSystem-inputColumns($gridGutterWidth, $gridColumnWidth, $gridRowWidth, 2); }
+    &.span3     { @include inputGridSystem-inputColumns($gridGutterWidth, $gridColumnWidth, $gridRowWidth, 3); }
+    &.span4     { @include inputGridSystem-inputColumns($gridGutterWidth, $gridColumnWidth, $gridRowWidth, 4); }
+    &.span5     { @include inputGridSystem-inputColumns($gridGutterWidth, $gridColumnWidth, $gridRowWidth, 5); }
+    &.span6     { @include inputGridSystem-inputColumns($gridGutterWidth, $gridColumnWidth, $gridRowWidth, 6); }
+    &.span7     { @include inputGridSystem-inputColumns($gridGutterWidth, $gridColumnWidth, $gridRowWidth, 7); }
+    &.span8     { @include inputGridSystem-inputColumns($gridGutterWidth, $gridColumnWidth, $gridRowWidth, 8); }
+    &.span9     { @include inputGridSystem-inputColumns($gridGutterWidth, $gridColumnWidth, $gridRowWidth, 9); }
+    &.span10    { @include inputGridSystem-inputColumns($gridGutterWidth, $gridColumnWidth, $gridRowWidth, 10); }
+    &.span11    { @include inputGridSystem-inputColumns($gridGutterWidth, $gridColumnWidth, $gridRowWidth, 11); }
+    &.span12    { @include inputGridSystem-inputColumns($gridGutterWidth, $gridColumnWidth, $gridRowWidth, 12); }
   }
+}
 
 
 
@@ -395,66 +395,66 @@
 }
 
 // Gradients
-  @mixin gradient-horizontal($startColor: #555, $endColor: #333) {
-    background-color: $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, 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+
-    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=#{ie-hex-str($startColor)}, endColorstr=#{ie-hex-str($endColor)}, GradientType=1); // IE9 and down
-  }
-  @mixin gradient-vertical($startColor: #555, $endColor: #333) {
-    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, 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, $startColor, $endColor); // The standard
-    background-repeat: repeat-x;
-    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#{ie-hex-str($startColor)}, endColorstr=#{ie-hex-str($endColor)}, GradientType=0); // IE9 and down
-  }
-  @mixin gradient-directional($startColor: #555, $endColor: #333, $deg: 45deg) {
-    background-color: $endColor;
-    background-repeat: repeat-x;
-    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
-  }
-  @mixin 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);
-    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: progid:DXImageTransform.Microsoft.gradient(startColorstr=#{ie-hex-str($startColor)}, endColorstr=#{ie-hex-str($endColor)}, GradientType=0); // IE9 and down, gets no color-stop at all for proper fallback
-  }
-  @mixin gradient-radial($innerColor: #555, $outerColor: #333)  {
-    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-repeat: no-repeat;
-    // Opera cannot do radial gradients yet
-  }
-  @mixin gradient-striped($color, $angle: -45deg) {
-    background-color: $color;
-    background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(.25, rgba(255,255,255,.15)), color-stop(.25, transparent), color-stop(.5, transparent), color-stop(.5, rgba(255,255,255,.15)), color-stop(.75, rgba(255,255,255,.15)), color-stop(.75, transparent), to(transparent));
-    background-image: -webkit-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);
-    background-image: -moz-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);
-    background-image: -ms-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);
-    background-image: -o-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);
-    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);
-  }
+@mixin gradient-horizontal($startColor: #555, $endColor: #333) {
+  background-color: $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, 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+
+  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=#{ie-hex-str($startColor)}, endColorstr=#{ie-hex-str($endColor)}, GradientType=1); // IE9 and down
+}
+@mixin gradient-vertical($startColor: #555, $endColor: #333) {
+  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, 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, $startColor, $endColor); // The standard
+  background-repeat: repeat-x;
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#{ie-hex-str($startColor)}, endColorstr=#{ie-hex-str($endColor)}, GradientType=0); // IE9 and down
+}
+@mixin gradient-directional($startColor: #555, $endColor: #333, $deg: 45deg) {
+  background-color: $endColor;
+  background-repeat: repeat-x;
+  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
+}
+@mixin 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);
+  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: progid:DXImageTransform.Microsoft.gradient(startColorstr=#{ie-hex-str($startColor)}, endColorstr=#{ie-hex-str($endColor)}, GradientType=0); // IE9 and down, gets no color-stop at all for proper fallback
+}
+@mixin gradient-radial($innerColor: #555, $outerColor: #333)  {
+  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-repeat: no-repeat;
+  // Opera cannot do radial gradients yet
+}
+@mixin gradient-striped($color, $angle: -45deg) {
+  background-color: $color;
+  background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(.25, rgba(255,255,255,.15)), color-stop(.25, transparent), color-stop(.5, transparent), color-stop(.5, rgba(255,255,255,.15)), color-stop(.75, rgba(255,255,255,.15)), color-stop(.75, transparent), to(transparent));
+  background-image: -webkit-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);
+  background-image: -moz-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);
+  background-image: -ms-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);
+  background-image: -o-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);
+  background-image: linear-gradient($angle, rgba(255,255,255,.15) 25%, rgba(255,255,255,0) 25%, rgba(255,255,255,0) 50%, rgba(255,255,255,.15) 50%, rgba(255,255,255,.15) 75%, rgba(255,255,255,0) 75%, rgba(255,255,255,0));
+}
 // Reset filters for IE
 @mixin reset-filter() {
   filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
@@ -487,35 +487,35 @@
 // POPOVER ARROWS
 // -------------------------
 // For tipsies and popovers
-  @mixin 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;
-  }
-  @mixin 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;
-  }
-  @mixin 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;
-  }
-  @mixin 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;
-  }
+@mixin 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;
+}
+@mixin 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;
+}
+@mixin 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;
+}
+@mixin 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;
+}