FGABreja/static/sass/components/_prefixer.scss
//---------------------------------------------------
// Sass Prefixer
// -------------------------------------------------
// TABLE OF CONTENTS
// (*) denotes a syntax-sugar helper
// -------------------------------------------------
//
// animation($args)
// animation-delay($delay)
// animation-direction($direction)
// animation-duration($duration)
// animation-fill-mode($mode)
// animation-iteration-count($count)
// animation-name($name)
// animation-play-state($state)
// animation-timing-function($function)
// background-size($args)
// inner-shadow($args) *
// box-sizing($args)
// border-box() *
// content-box() *
// columns($args)
// column-count($count)
// column-gap($gap)
// column-rule($args)
// column-width($width)
// flexbox()
// flex($args)
// order($args)
// align($args)
// justify-content($args)
// gradient($default,$start,$stop) *
// linear-gradient-top($default,$color1,$stop1,$color2,$stop2,[$color3,$stop3,$color4,$stop4])*
// linear-gradient-left($default,$color1,$stop1,$color2,$stop2,[$color3,$stop3,$color4,$stop4])*
// transform($args)
// transform-origin($args)
// transform-style($style)
// rotate($deg)
// scale($factor)
// translate($x,$y)
// translate3d($x,$y,$z)
// translateHardware($x,$y) *
// text-shadow($args)
// transition($args)
// transition-delay($delay)
// transition-duration($duration)
// transition-property($property)
// transition-timing-function($function)
// Animation
@mixin animation($args) {
-webkit-animation: $args;
-moz-animation: $args;
-ms-animation: $args;
-o-animation: $args;
animation: $args;
}
@mixin animation-delay($delay) {
-webkit-animation-delay: $delay;
-moz-animation-delay: $delay;
-ms-animation-delay: $delay;
-o-animation-delay: $delay;
animation-delay: $delay;
}
@mixin animation-direction($direction) {
-webkit-animation-direction: $direction;
-moz-animation-direction: $direction;
-ms-animation-direction: $direction;
-o-animation-direction: $direction;
}
@mixin animation-duration($duration) {
-webkit-animation-duration: $duration;
-moz-animation-duration: $duration;
-ms-animation-duration: $duration;
-o-animation-duration: $duration;
}
@mixin animation-fill-mode($mode) {
-webkit-animation-fill-mode: $mode;
-moz-animation-fill-mode: $mode;
-ms-animation-fill-mode: $mode;
-o-animation-fill-mode: $mode;
animation-fill-mode: $mode;
}
@mixin animation-iteration-count($count) {
-webkit-animation-iteration-count: $count;
-moz-animation-iteration-count: $count;
-ms-animation-iteration-count: $count;
-o-animation-iteration-count: $count;
animation-iteration-count: $count;
}
@mixin animation-name($name) {
-webkit-animation-name: $name;
-moz-animation-name: $name;
-ms-animation-name: $name;
-o-animation-name: $name;
animation-name: $name;
}
@mixin animation-play-state($state) {
-webkit-animation-play-state: $state;
-moz-animation-play-state: $state;
-ms-animation-play-state: $state;
-o-animation-play-state: $state;
animation-play-state: $state;
}
@mixin animation-timing-function($function) {
-webkit-animation-timing-function: $function;
-moz-animation-timing-function: $function;
-ms-animation-timing-function: $function;
-o-animation-timing-function: $function;
animation-timing-function: $function;
}
// Keyframes
@mixin keyframes($animation-name) {
@-webkit-keyframes #{$animation-name} {
@content;
}
@-moz-keyframes #{$animation-name} {
@content;
}
@keyframes #{$animation-name} {
@content;
}
}
// Backface-visibility
@mixin backface-visibility($args) {
-webkit-backface-visibility: $args;
-moz-backface-visibility: $args;
-ms-backface-visibility: $args;
backface-visibility: $args;
}
// Background Size
@mixin background-size($args) {
-webkit-background-size: $args;
background-size: $args;
}
// Box Sizing
@mixin box-sizing($args) {
-webkit-box-sizing: $args;
-moz-box-sizing: $args;
box-sizing: $args;
}
@mixin border-box(){
@include box-sizing(border-box);
}
@mixin content-box(){
@include box-sizing(content-box);
}
// Columns
@mixin columns($args) {
-webkit-columns: $args;
-moz-columns: $args;
columns: $args;
}
@mixin column-count($count) {
-webkit-column-count: $count;
-moz-column-count: $count;
column-count: $count;
}
@mixin column-gap($gap) {
-webkit-column-gap: $gap;
-moz-column-gap: $gap;
column-gap: $gap;
}
@mixin column-width($width) {
-webkit-column-width: $width;
-moz-column-width: $width;
column-width: $width;
}
@mixin column-rule($args) {
-webkit-column-rule: $args;
-moz-column-rule: $args;
column-rule: $args;
}
// Filter
@mixin filter($args) {
-webkit-filter: $args;
-moz-filter: $args;
-o-filter: $args;
-ms-filter: $args;
}
// Flexbox
@mixin flexbox() {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
}
@mixin flex($values) {
-webkit-box-flex: $values;
-moz-box-flex: $values;
-webkit-flex: $values;
-ms-flex: $values;
flex: $values;
}
@mixin order($val) {
-webkit-box-ordinal-group: $val;
-moz-box-ordinal-group: $val;
-ms-flex-order: $val;
-webkit-order: $val;
order: $val;
}
@mixin align($align) {
-webkit-flex-align: $align;
-ms-flex-align: $align;
-webkit-align-items: $align;
align-items: $align;
}
@mixin justify-content($val) {
-webkit-justify-content: $val;
justify-content: $val;
}
// Gradients
@mixin gradient($default: #F5F5F5, $start: #EEE, $stop: #FFF) {
@include linear-gradient-top($default,$start,0%,$stop,100%);
}
@mixin linear-gradient-top($default,$color1,$stop1,$color2,$stop2) {
background-color: $default;
background-image: -webkit-gradient(linear, left top, left bottom, color-stop($stop1, $color1), color-stop($stop2 $color2));
background-image: -webkit-linear-gradient(top, $color1 $stop1, $color2 $stop2);
background-image: -moz-linear-gradient(top, $color1 $stop1, $color2 $stop2);
background-image: -ms-linear-gradient(top, $color1 $stop1, $color2 $stop2);
background-image: -o-linear-gradient(top, $color1 $stop1, $color2 $stop2);
background-image: linear-gradient(top, $color1 $stop1, $color2 $stop2);
}
@mixin linear-gradient-top2($default,$color1,$stop1,$color2,$stop2,$color3,$stop3) {
background-color: $default;
background-image: -webkit-gradient(linear, left top, left bottom, color-stop($stop1, $color1), color-stop($stop2 $color2), color-stop($stop3 $color3));
background-image: -webkit-linear-gradient(top, $color1 $stop1, $color2 $stop2, $color3 $stop3);
background-image: -moz-linear-gradient(top, $color1 $stop1, $color2 $stop2, $color3 $stop3);
background-image: -ms-linear-gradient(top, $color1 $stop1, $color2 $stop2, $color3 $stop3);
background-image: -o-linear-gradient(top, $color1 $stop1, $color2 $stop2, $color3 $stop3);
background-image: linear-gradient(top, $color1 $stop1, $color2 $stop2, $color3 $stop3);
}
@mixin linear-gradient-top3($default,$color1,$stop1,$color2,$stop2,$color3,$stop3,$color4,$stop4) {
background-color: $default;
background-image: -webkit-gradient(linear, left top, left bottom, color-stop($stop1, $color1), color-stop($stop2 $color2), color-stop($stop3 $color3), color-stop($stop4 $color4));
background-image: -webkit-linear-gradient(top, $color1 $stop1, $color2 $stop2, $color3 $stop3, $color4 $stop4);
background-image: -moz-linear-gradient(top, $color1 $stop1, $color2 $stop2, $color3 $stop3, $color4 $stop4);
background-image: -ms-linear-gradient(top, $color1 $stop1, $color2 $stop2, $color3 $stop3, $color4 $stop4);
background-image: -o-linear-gradient(top, $color1 $stop1, $color2 $stop2, $color3 $stop3, $color4 $stop4);
background-image: linear-gradient(top, $color1 $stop1, $color2 $stop2, $color3 $stop3, $color4 $stop4);
}
@mixin linear-gradient-left($default,$color1,$stop1,$color2,$stop2) {
background-color: $default;
background-image: -webkit-gradient(linear, left top, left top, color-stop($stop1, $color1), color-stop($stop2 $color2));
background-image: -webkit-linear-gradient(left, $color1 $stop1, $color2 $stop2);
background-image: -moz-linear-gradient(left, $color1 $stop1, $color2 $stop2);
background-image: -ms-linear-gradient(left, $color1 $stop1, $color2 $stop2);
background-image: -o-linear-gradient(left, $color1 $stop1, $color2 $stop2);
background-image: linear-gradient(left, $color1 $stop1, $color2 $stop2);
}
@mixin linear-gradient-left2($default,$color1,$stop1,$color2,$stop2,$color3,$stop3) {
background-color: $default;
background-image: -webkit-gradient(linear, left top, left top, color-stop($stop1, $color1), color-stop($stop2 $color2), color-stop($stop3 $color3));
background-image: -webkit-linear-gradient(left, $color1 $stop1, $color2 $stop2, $color3 $stop3);
background-image: -moz-linear-gradient(left, $color1 $stop1, $color2 $stop2, $color3 $stop3);
background-image: -ms-linear-gradient(left, $color1 $stop1, $color2 $stop2, $color3 $stop3);
background-image: -o-linear-gradient(left, $color1 $stop1, $color2 $stop2, $color3 $stop3);
background-image: linear-gradient(left, $color1 $stop1, $color2 $stop2, $color3 $stop3);
}
@mixin linear-gradient-left3($default,$color1,$stop1,$color2,$stop2,$color3,$stop3,$color4,$stop4) {
background-color: $default;
background-image: -webkit-gradient(linear, left top, left top, color-stop($stop1, $color1), color-stop($stop2 $color2), color-stop($stop3 $color3), color-stop($stop4 $color4));
background-image: -webkit-linear-gradient(left, $color1 $stop1, $color2 $stop2, $color3 $stop3, $color4 $stop4);
background-image: -moz-linear-gradient(left, $color1 $stop1, $color2 $stop2, $color3 $stop3, $color4 $stop4);
background-image: -ms-linear-gradient(left, $color1 $stop1, $color2 $stop2, $color3 $stop3, $color4 $stop4);
background-image: -o-linear-gradient(left, $color1 $stop1, $color2 $stop2, $color3 $stop3, $color4 $stop4);
background-image: linear-gradient(left, $color1 $stop1, $color2 $stop2, $color3 $stop3, $color4 $stop4);
}
// Text Shadow
@mixin text-shadow($args) {
text-shadow: $args;
}
// Transforms
@mixin transform($args) {
-webkit-transform: $args;
-moz-transform: $args;
-ms-transform: $args;
-o-transform: $args;
transform: $args;
}
@mixin transform-origin($args) {
-webkit-transform-origin: $args;
-moz-transform-origin: $args;
-ms-transform-origin: $args;
-o-transform-origin: $args;
transform-origin: $args;
}
@mixin transform-style($style) {
-webkit-transform-style: $style;
-moz-transform-style: $style;
-ms-transform-style: $style;
-o-transform-style: $style;
transform-style: $style;
}
@mixin rotate($deg:45deg){
@include transform(rotate($deg));
}
@mixin scale($factor:.5){
@include transform(scale($factor));
}
@mixin translate($x,$y){
@include transform(translate($x,$y));
}
@mixin translate3d($x,$y,$z) {
@include transform(translate3d($x,$y,$z));
}
@mixin translateHardware($x,$y) {
@include translate($x,$y);
-webkit-transform: translate3d($x,$y,0);
-moz-transform: translate3d($x,$y,0);
-o-transform: translate3d($x,$y,0);
-ms-transform: translate3d($x,$y,0);
transform: translate3d($x,$y,0);
}
// Transitions
@mixin transition($args:200ms) {
-webkit-transition: $args;
-moz-transition: $args;
-o-transition: $args;
-ms-transition: $args;
transition: $args;
}
@mixin transition-delay($delay:0) {
-webkit-transition-delay: $delay;
-moz-transition-delay: $delay;
-o-transition-delay: $delay;
-ms-transition-delay: $delay;
transition-delay: $delay;
}
@mixin transition-duration($duration:200ms) {
-webkit-transition-duration: $duration;
-moz-transition-duration: $duration;
-o-transition-duration: $duration;
-ms-transition-duration: $duration;
transition-duration: $duration;
}
@mixin transition-property($property:all) {
-webkit-transition-property: $property;
-moz-transition-property: $property;
-o-transition-property: $property;
-ms-transition-property: $property;
transition-property: $property;
}
@mixin transition-timing-function($function:ease) {
-webkit-transition-timing-function: $function;
-moz-transition-timing-function: $function;
-o-transition-timing-function: $function;
-ms-transition-timing-function: $function;
transition-timing-function: $function;
}