template_mixin.scss

$theme-color: #fff;
$drawer-width:400px;
$border-color: #ddd;
$font-color: #545454;
$font-color-dark: #333;
$font-color-light:#fff;
$panel-width: 400px;
$panel-font-size: 13px;

/* Custom Theme Edits */
$nav-background-dark:#1C1D20;

@mixin fontFace($family,$src,$weight: normal,$style: normal) {
    @font-face {
        font-family: $family;
        src: url('#{$src}.eot'); // IE9 compat
        src: url('#{$src}.eot?#iefix') format('embedded-opentype'), // IE8 and below
            url('#{$src}.woff') format('woff'), // standards
            url('#{$src}.ttf') format('truetype'), // Safari, Android, iOS
            url('#{$src}.svg##{$family}') format('svg'); // legacy iOS

        font-style: $style;
        font-weight: $weight;
    }
}

@mixin transparent($color, $alpha) {
  $rgba: rgba($color, $alpha);
  $ie-hex-str: ie-hex-str($rgba);
  background-color: transparent;
  background-color: $rgba;
  filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#{$ie-hex-str},endColorstr=#{$ie-hex-str});
  zoom: 1;
}
@mixin transition($transition-property, $transition-time, $method) {
    -webkit-transition: $transition-property $transition-time $method;
    -moz-transition: $transition-property $transition-time $method;
    -ms-transition: $transition-property $transition-time $method;
    -o-transition: $transition-property $transition-time $method;
    transition: $transition-property $transition-time $method;
}
@mixin respond-to($breakpoint) {
    @media only screen and (min-width: $breakpoint + px) { @content; }
}

@mixin box-shadow($top, $left, $blur, $color, $inset: false) {
  @if $inset {
    -webkit-box-shadow:inset $top $left $blur $color;
    -moz-box-shadow:inset $top $left $blur $color;
    box-shadow:inset $top $left $blur $color;
  } @else {
    -webkit-box-shadow: $top $left $blur $color;
    -moz-box-shadow: $top $left $blur $color;
    box-shadow: $top $left $blur $color;
  }
}
@mixin opacity($opacity) {
  opacity: $opacity;
  $opacity-ie: $opacity * 100;
  filter: alpha(opacity=$opacity-ie); //IE8
}
@mixin text-shadow($x: 2px, $y: 2px, $blur: 5px, $color: rgba(0,0,0,.4)) {
    text-shadow: $x $y $blur $color;
}