gistfile1.txt

 /* Mixins
================================================== */

@mixin placeholder-color($color: $grayLight) {
  :-moz-placeholder           { color: $color; }
  ::-webkit-input-placeholder { color: $color; }
}

// Border Radius

@mixin border-radius($radius: 5px) {
  -webkit-border-radius: $radius;
     -moz-border-radius: $radius;
          border-radius: $radius;
}

// Drop shadows (purposely supporting only two shadows)

@mixin box-shadow($shadow-1: 0 1px 3px rgba(0,0,0,.25), $shadow-2: false) {

  @if $shadow-2 {
    -webkit-box-shadow: $shadow-1, $shadow-2;
       -moz-box-shadow: $shadow-1, $shadow-2;
            box-shadow: $shadow-1, $shadow-2;
  } @else {
    -webkit-box-shadow: $shadow-1;
       -moz-box-shadow: $shadow-1;
            box-shadow: $shadow-1;
  }

}

// Transitions

@mixin transition($transition) {
     -webkit-transition: $transition;
        -moz-transition: $transition;
         -ms-transition: $transition;
          -o-transition: $transition;
             transition: $transition;
}

// Background clipping

@mixin background-clip($clip) {
  -webkit-background-clip: $clip;
     -moz-background-clip: $clip;
          background-clip: $clip;
}

// CSS3 Content Columns

@mixin content-columns($columnCount, $columnGap: 20px) {
  -webkit-column-count: $columnCount;
     -moz-column-count: $columnCount;
          column-count: $columnCount;

  -webkit-column-gap: $columnGap;
     -moz-column-gap: $columnGap;
          column-gap: $columnGap;
}

// Gradients

@mixin gradient-horizontal ($startColor: #555, $endColor: #333) {
  background-color: $endColor;
  background-repeat: repeat-x;
  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)); // 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
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=$startColor, endColorstr=$endColor, GradientType=1); // IE9 and down
}

@mixin gradient-vertical ($startColor: #555, $endColor: #333) {
  background-color: $endColor;
  background-repeat: repeat-x;
  background-image: -khtml-gradient(linear, left top, left bottom, from($startColor), to($endColor)); // Konqueror
  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, $startColor, $endColor); // The standard
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=$startColor, endColorstr=$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: $endColor;
  background-repeat: no-repeat;
  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);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=$startColor, endColorstr=$endColor, GradientType=0); // IE9 and down, gets no color-stop at all for proper fallback
}

// Reset filters for IE

@mixin reset-filter {
  filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
}

// Opacity

@mixin opacity($opacity: 100) {
  filter: alpha(opacity=$opacity);
  -khtml-opacity: $opacity / 100;
    -moz-opacity: $opacity / 100;
         opacity: $opacity / 100;
}