Stylus mixins

mixins.styl

prefixes = moz, ms, webkit, khtml, o

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)
  for prefix in prefixes
    -{prefix}-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()
  -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 = false)
  if color3
    background-color: color3
  else
    background-color: color1
  background-image: -moz-linear-gradient(100% 100% 90deg, color2, color1)
  background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(color1), to(color2))
  //filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr={color1}, endColorstr={color2})
  -ms-filter: unquote('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%)
  filter: unquote('progid:DXImageTransform.Microsoft.gradient(startColorstr={color1}, endColorstr={color4},GradientType=0 )')
  -ms-filter: unquote('progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr={color1}, endColorstr={color4})')

gradient-fixed(color1, color2, h, direction = top)
  for prefix in prefixes
    background-image: -{prefix}-linear-gradient(direction, color1 0%, color2 h)
  background-image: linear-gradient(direction, color1 0%, color2 h)

transition()
  -webkit-transition: arguments
  -moz-transition: arguments
  -o-transition: arguments

rotate(deg)
  -webkit-transform: rotate(unquote('{deg}deg'))
  -moz-transform: rotate(unquote('{deg}deg'))
  filter: unquote('progid:DXImageTransform.Microsoft.BasicImage(rotation={deg / 90})')

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)
  for 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)
  for 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

transform(props)
  for 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