WebCompDev / COMPONENTS

//---------------------------------------------------
//  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])*
//      perspective($pixels)
//      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);
// }

// Perspective
@mixin perspective($pixels) {
    perspective: $pixels;
    -webkit-perspective: $pixels;
}


// 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;
// }