sass mixins

sass mixins.scss

// ==========================================================================
// cf
// ==========================================================================

@mixin cf {
  *zoom: 1;
  &:before,
  &:after {
    content: "";
    display: table;
  }
  &:after {
    clear: both;
  }
}


// ==========================================================================
// border-radius
// ==========================================================================
@mixin border-radius($radius: 5px, $radius-tr: $radius, $radius-bl: $radius, $radius-br: $radius-tr) {
  -webkit-border-radius: $radius $radius-tr $radius-bl $radius-br;
  -moz-border-radius: $radius $radius-tr $radius-bl $radius-br;
  border-radius: $radius $radius-tr $radius-bl $radius-br;
}

// ==========================================================================
// box-shadow
// ==========================================================================

@mixin box-shadow($top, $left, $blur, $spread, $color, $inset: false) {
  @if $inset {
    -webkit-box-shadow:inset $top $left $blur $spread $color;
    -moz-box-shadow:inset $top $left $blur $spread $color;
    box-shadow:inset $top $left $blur $spread $color;
  } @else {
    -webkit-box-shadow: $top $left $blur $spread $color;
    -moz-box-shadow: $top $left $blur $spread $color;
    box-shadow: $top $left $blur $spread $color;
  }
}

// ==========================================================================
// opacity
// ==========================================================================

@mixin opacity($opacity: 0.5) {
  filter: progid:DXImageTransform.Microsoft.Alpha(opacity=#{$opacity*100});
  opacity: $opacity;
}

// ==========================================================================
// box-sizing
// ==========================================================================

@mixin box-sizing($value) {
  -moz-box-sizing: $value;
  box-sizing: $value;
}

// ==========================================================================
// min-height
// ==========================================================================

@mixin min-height($value) {
  min-height: $value;
  _height: $value;
}

// ==========================================================================
// ui-list
// ==========================================================================

@mixin ui-list {
  margin: 0;
  list-style: none;
}

// ==========================================================================
// Linier Gradient
// ==========================================================================
@mixin linear-gradient-bg($color1, $color2, $color-fallback: $color1) {
    background-color: $color-fallback;
    background-image: -moz-linear-gradient(center top, $color1, $color2);
    background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from($color1), to($color2));
}

// ==========================================================================
// Linier OR Diagonal Gradient, including IE
// ==========================================================================
@mixin gradient($topColor, $bottomColor, $angle) {
  background-color: $topColor;

  @if $angle == default { // linear top to bottom
    background-image: -moz-linear-gradient(top, $topColor, $bottomColor); 
    background-image: -webkit-gradient(linear,left top,left bottom, color-stop(0, $topColor),color-stop(1, $bottomColor)); 
    background: -webkit-linear-gradient($topColor, $bottomColor); 
    background: -o-linear-gradient($topColor, $bottomColor); 
    background: -ms-linear-gradient($topColor, $bottomColor); 
    background-image: linear-gradient(top,$topColor, $bottomColor);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#{$topColor}', EndColorStr='#{$bottomColor}'); 
  }
  @if $angle == diagonal { // diagonal top right to bottom left
  background-image: -moz-linear-gradient(45deg, $bottomColor 0%, $topColor 100%); 
  background-image: -webkit-gradient(linear,left bottom,right top, color-stop(0%, $bottomColor),color-stop(100%, $topColor)); 
  background: -webkit-linear-gradient(45deg,  $bottomColor 0%, $topColor 100%); 
  background: -o-linear-gradient(45deg,  $bottomColor 0%, $topColor 100%); 
  background: -ms-linear-gradient(45deg,  $bottomColor 0%, $topColor 100%); 
  background-image: linear-gradient(45deg, $bottomColor 0%, $topColor 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#{$bottomColor}', EndColorStr='#{$topColor}',GradientType=1); 
  }
}

// ==========================================================================
// Sprites
// ==========================================================================

@mixin sprite-position($x:0, $y:0) {
    $gridSize:  -16px;
    $offsetX:   $x * $gridSize;
    $offsetY:   $y * $gridSize;
    background-position: $offsetX $offsetY;
}

@mixin sprite($sheet, $x:0, $y:0) {
    $file:      url(/resources/_shared/images/spritesheets/#{$sheet});
    background-image: $file;
    @include sprite-position($x, $y);
}

// ==========================================================================
// Image Replacement
// ==========================================================================

@mixin image-replace {
	*display: block;
	text-indent: 100%;
	white-space: nowrap;
	overflow: hidden;
}