// Appearance // ---------------------------------------- $default-prefixes-appearance: -webkit, -moz; @mixin appearance($v, $prefixes: $default-prefixes-appearance) { @include prefix(appearance,$v,$prefixes); appearance:$v; } // Background Clip // ---------------------------------------- $default-prefixes-background-clip: -webkit, -moz; @mixin background-clip($v, $prefixes: $default-prefixes-background-clip) { $v: unquote($v); // This is for older browser support @if $v == padding-box { @include prefix(background-clip,padding,$default-prefixes-background-origin); } @if $v == border-box { @include prefix(background-clip,border,$default-prefixes-background-origin); } @if $v == content-box { @include prefix(background-clip,content,$default-prefixes-background-origin); } @include prefix(background-clip,$v,$prefixes); background-clip:$v; } // Background Origin // ---------------------------------------- $default-prefixes-background-origin: -webkit, -moz; @mixin background-origin($v, $prefixes: $default-prefixes-background-origin) { $v: unquote($v); // This is for older browser support @if $v == padding-box { @include prefix(background-origin,padding,$default-prefixes-background-origin); } @if $v == border-box { @include prefix(background-origin,border,$default-prefixes-background-origin); } @if $v == content-box { @include prefix(background-origin,content,$default-prefixes-background-origin); } // Standard version @include prefix(background-origin,$v,$prefixes); background-origin:$v; } // Background Size // ---------------------------------------- $default-prefixes-background-size: -webkit, -moz, -o; @mixin background-size($v, $prefixes: $default-prefixes-background-size) { @include prefix(background-size,$v,$prefixes); background-size:$v; } // Border Radius // ---------------------------------------- $default-prefixes-border-radius: -webkit, -moz; @mixin border-radius($r, $prefixes: $default-prefixes-border-radius) { @include prefix(border-radius,$r,$prefixes); border-radius:$r; } // Box Shadow // ---------------------------------------- $default-prefixes-box-shadow: -webkit, -moz; @mixin box-shadow($v, $prefixes: $default-prefixes-box-shadow) { @include prefix(box-shadow,$v,$prefixes); box-shadow:$v; } // Flexible Box // ---------------------------------------- $default-prefixes-box: -webkit, -moz; @mixin display-box($prefixes: $default-prefixes-box) { @include prefix-value(display,box,$prefixes); } @mixin box-orient($v, $prefixes: $default-prefixes-box) { @include prefix(box-orient,$v,$prefixes); box-orient:$v; } @mixin box-align($v, $prefixes: $default-prefixes-box) { @include prefix(box-align,$v,$prefixes); box-align:$v; } @mixin box-flex($v, $prefixes: $default-prefixes-box) { @include prefix(box-flex,$v,$prefixes); box-flex:$v; } @mixin box-flex-group($v, $prefixes: $default-prefixes-box) { @include prefix(box-flex-group,$v,$prefixes); box-flex-group:$v; } @mixin box-ordinal-group($v, $prefixes: $default-prefixes-box) { @include prefix(box-ordinal-group,$v,$prefixes); box-ordinal-group:$v; } @mixin box-direction($v, $prefixes: $default-prefixes-box) { @include prefix(box-direction,$v,$prefixes); box-direction:$v; } @mixin box-lines($v, $prefixes: $default-prefixes-box) { @include prefix(box-direction,$v,$prefixes); box-lines:$v; } @mixin box-pack($v, $prefixes: $default-prefixes-box) { @include prefix(box-direction,$v,$prefixes); box-pack:$v; } // Box Sizing // ---------------------------------------- $default-prefixes-box-sizing: -webkit, -moz; @mixin box-sizing($v, $prefixes: $default-prefixes-box-sizing) { @include prefix(box-sizing,$v,$prefixes); box-sizing:$v; } // Columns // ---------------------------------------- $default-prefixes-columns: -webkit, -moz; @mixin column-count($v, $prefixes: $default-prefixes-columns) { @include prefix(column-count,$v,$prefixes); column-count:$v; } @mixin column-gap($v, $prefixes: $default-prefixes-columns) { @include prefix(column-gap,$v,$prefixes); column-gap:$v; } @mixin column-width($v, $prefixes: $default-prefixes-columns) { @include prefix(column-width,$v,$prefixes); column-width:$v; } @mixin column-rule-width($v, $prefixes: $default-prefixes-columns) { @include prefix(column-rule-width,$v,$prefixes); column-rule-width:$v; } @mixin column-rule-style($v, $prefixes: $default-prefixes-columns) { @include prefix(column-rule-style,$v,$prefixes); column-rule-style:$v; } @mixin column-rule-color($v, $prefixes: $default-prefixes-columns) { @include prefix(column-rule-color,$v,$prefixes); column-rule-color:$v; } @mixin column-rule($v, $prefixes: $default-prefixes-columns) { @include prefix(column-rule,$v,$prefixes); column-rule:$v; } // Transforms // ---------------------------------------- $default-prefixes-transform: -webkit, -moz, -o; // @see http://www.w3.org/TR/css3-2d-transforms/#transform-property @mixin transform($v, $prefixes:$default-prefixes-transform) { @include prefix(transform,$v,$prefixes); transform:$v; } // @see http://www.w3.org/TR/css3-2d-transforms/#transform-origin-property @mixin transform-origin($v, $prefixes:$default-prefixes-transform) { @include prefix(transform-origin,$v,$prefixes); transform-origin:$v; } // @see http://www.w3.org/TR/css3-3d-transforms/#transform-style @mixin transform-style($v, $prefixes:$default-prefixes-transform) { @include prefix(transform-style,$v,$prefixes); transform-style:$v; } // @see http://www.w3.org/TR/css3-3d-transforms/#perspective @mixin perspective-origin($v, $prefixes:$default-prefixes-transform) { @include prefix(perspective-origin,$v,$prefixes); perspective-origin:$v; } // @see http://www.w3.org/TR/css3-3d-transforms/#backface-visibility @mixin backface-visibility($v, $prefixes:$default-prefixes-transform) { @include prefix(backface-visibility,$v,$prefixes); backface-visibility:$v; } // Transitions // ---------------------------------------- // @see http://www.w3.org/TR/css3-transitions/ $default-prefixes-transition: -webkit, -moz, -o; @mixin transition-property($v, $prefixes:$default-prefixes-transform) { @include prefix(transition-property,$v,$prefixes); transition-property:$v; } @mixin transition-duration($v, $prefixes:$default-prefixes-transform) { @include prefix(transition-duration,$v,$prefixes); transition-duration:$v; } @mixin transition-timing-function($v, $prefixes:$default-prefixes-transform) { @include prefix(transition-timing-function,$v,$prefixes); transition-timing-function:$v; } @mixin transition-delay($v, $prefixes:$default-prefixes-transform) { @include prefix(transition-delay,$v,$prefixes); transition-delay:$v; } @mixin transition($v, $prefixes:$default-prefixes-transform) { @include prefix(transition,$v,$prefixes); transition:$v; } // Animation // ---------------------------------------- $default-prefixes-animation: -webkit, -moz, -o; @mixin animation($v, $prefixes:$default-prefixes-animation) { @include prefix(animation,$v,$prefixes); animation:$v; } @mixin animation-name($v, $prefixes:$default-prefixes-animation) { @include prefix(animation-name,$v,$prefixes); animation-name:$v; } @mixin animation-duration($v, $prefixes:$default-prefixes-animation) { @include prefix(animation-name,$v,$prefixes); animation-duration:$v; } @mixin animation-timing-function($v, $prefixes:$default-prefixes-animation) { @include prefix(animation-name,$v,$prefixes); animation-timing-function:$v; } @mixin animation-iteration-count($v, $prefixes:$default-prefixes-animation) { @include prefix(animation-name,$v,$prefixes); animation-iteration-count:$v; } @mixin animation-direction($v, $prefixes:$default-prefixes-animation) { @include prefix(animation-name,$v,$prefixes); animation-direction:$v; } @mixin animation-play-state($v, $prefixes:$default-prefixes-animation) { @include prefix(animation-name,$v,$prefixes); animation-play-state:$v; } @mixin animation-delay($v, $prefixes:$default-prefixes-animation) { @include prefix(animation-name,$v,$prefixes); animation-delay:$v; }