mixins

gistfile1.sass

@import "whitespace-reset"

$prefixes: moz, ms, webkit, khtml, o

@function ie_color_fix($color)
  @if $color == #ffffff
    $color: #fffffe
  @else if $color == #fff
    $color: #fffffe
  @else if $color == #000000
    $color: #000001
  @else if $color == #000
    $color: #000001
  @return $color

= font-smoothing
  -webkit-font-smoothing: antialiased
= image-smoothing
  image-rendering:optimizeSpeed
  image-rendering:-webkit-optimize-contrast
  image-rendering: -moz-crisp-edges
  -ms-interpolation-mode: nearest-neighbor
= user-select($val)
  -webkit-user-select: $val
  -khtml-user-select: $val
  -moz-user-select: $val
  -ms-user-select: $val
  -o-user-select: $val
  user-select: $val
= border-top-radius($radius)
  border-top-left-radius: $radius
  border-top-right-radius: $radius
= border-bottom-radius($radius)
  border-bottom-left-radius: $radius
  border-bottom-right-radius: $radius
= border-left-radius($radius)
  border-top-left-radius: $radius
  border-bottom-left-radius: $radius
= border-right-radius($radius)
  border-top-right-radius: $radius
  border-bottom-right-radius: $radius
= box-shadow($arguments)
  -webkit-box-shadow: $arguments
  -moz-box-shadow: $arguments
  box-shadow: $arguments
= opacity($val)
  opacity: $val
  filter: alpha(opacity=$val*100)
= gradient-bg($color1, $color2, $color3: null)
  @if $color3 == null
    background-color: $color1
  @else
    background-color: $color3
  background-image: -moz-linear-gradient(100% 100% 90deg, $color2, $color1)
  background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from($color1), to($color2))
  $color1: ie_color_fix($color1)
  $color2: ie_color_fix($color2)
  $color3: ie_color_fix($color3)
  //filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr=#{$color1}, endColorstr=#{$color2})
  -ms-filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr=#{$color1}, endColorstr=#{$color2})
= gradient-stop($color1, $color2, $color3, $color4)
  background-color: $color1
  background-image: -moz-linear-gradient(top, $color1 0%, $color2 50%, $color3 51%, $color4 100%)
  background-image: -webkit-linear-gradient(top, $color1 0%, $color2 50%, $color3 51%, $color4 100%)
  background-image: -o-linear-gradient(top, $color1 0%, $color2 50%, $color3 51%, $color4 100%)
  background-image: -ms-linear-gradient(top, $color1 0%, $color2 50%, $color3 51%, $color4 100%)
  background-image: linear-gradient(top, $color1 0%, $color2 50%, $color3 51%, $color4 100%)
  $color1: ie_color_fix($color1)
  $color2: ie_color_fix($color2)
  $color3: ie_color_fix($color3)
  $color4: ie_color_fix($color4)
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#{$color1}, endColorstr=#{$color4},GradientType=0 )
  -ms-filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr=#{$color1}, endColorstr=#{$color4})
= gradient-fixed($color1, $color2, $h, $direction: top)
  @each $prefix in $prefixes
    background-image: -#{$prefix}-linear-gradient($direction, $color1 0%, $color2 $h)
  background-image: linear-gradient($direction, $color1 0%, $color2 $h)
= transition($args...)
  -webkit-transition: $args
  -moz-transition: $args
  -o-transition: $args
= rotate($deg)
  -webkit-transform: rotate(#{$deg}deg)
  -moz-transform: rotate(#{$deg}deg)
  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=#{$deg / 90})
= image-replace($img, $type:png)
  display: block
  font-size: 1px
  text-indent: -8685px
  overflow: hidden
  background: url(#{$img}.#{$type}) no-repeat
= font-face($font_name, $font_path)
  @font-face
    font-family: '#{$font_name}'
    src: url('#{$font_path}.eot')
    src: url('#{$font_path}.eot?iefix') format('eot'), url('#{$font_path}.woff') format('woff'), url('#{$font_path}.ttf') format('truetype'), url('#{$font_path}.svg#webfont') format('svg')
= box-sizing($type: border-box)
  @each $prefix in moz, ms, webkit
    -#{$prefix}-box-sizing: $type
  box-sizing: $type
= background-clip($value: padding)
  -moz-background-clip: padding
  -webkit-background-clip: padding
  background-clip: padding-box
= display_box($orient: horizontal, $pack: center, $align: center)
  @each $prefix in -moz-, -webkit-, ""
    display: #{$prefix}box
    #{$prefix}box-pack: $pack
    #{$prefix}box-orient: $orient
    #{$prefix}box-align: $align
= appearance($prop)
  -webkit-appearance: $prop
  -moz-appearance: $prop
= flex-box
  display: -webkit-flex
  -webkit-align-items: center
  -webkit-justify-content: center
  display: flex
  align-items: center
  justify-content: center


= transform($props)
  @each $prefix in -moz-, -webkit-, ""
    #{$prefix}transform: $props

= reset_search_inputs
  input[type='search']::-webkit-search-decoration,
  input[type='search']::-webkit-search-cancel-button,
  input[type='search']::-webkit-search-results-button,
  input[type='search']::-webkit-search-results-decoration
    display: none

@mixin placeholder
  @each $prefix in "::-webkit-input", ":-moz", "::-moz", ":-ms-input"
    #{$prefix}-placeholder
      @content