Cacher is the code snippet organizer for pro developers

@charset "UTF-8";




// generic transform
@mixin transform($transforms) {
  -moz-transform: $transforms;
    -o-transform: $transforms;
   -ms-transform: $transforms;
-webkit-transform: $transforms;
       transform: $transforms;
}
// rotate
@mixin rotate ($deg) {
@include transform(rotate(#{$deg}deg));
}

// scale
@mixin scale($scale) {
@include transform(scale($scale));
} 
// translate
@mixin translate ($x, $y) {
@include transform(translate($x, $y));
}
// skew
@mixin skew ($x, $y) {
@include transform(skew(#{$x}deg, #{$y}deg));
}
//@include transform-origin(top left);
@mixin transform-origin ($origin) {
 moz-transform-origin: $origin;
    -o-transform-origin: $origin;
   -ms-transform-origin: $origin;
-webkit-transform-origin: $origin;
       transform-origin: $origin;
}






// Size 

@mixin size($width, $height: $width) {
  width: $width;
  height: $height;
}

@mixin min-size($min-width, $min-height) {
  min-width: $min-width;
  min-height: $min-height;
}

@mixin max-size($max-width, $max-height) {
  max-width: $max-width;
  max-height: $max-height;
}

@mixin margin($top, $right, $bottom, $left) {
  margin-top: $top;
  margin-right: $right;
  margin-bottom: $bottom;
  margin-left: $left;
}

@mixin flex($display, $flex-flow) {
  display: $display;
  flex-flow: $flex-flow;
}



@mixin typo($size, $weight, $line-height, $spacing, $align){
    font-size: $size;
    font-weight: $weight;
    line-height: $line-height;
    letter-spacing: $spacing;
    text-align: $align;
}


@mixin border-radius($radius) {
  -webkit-border-radius: $radius;
  border-radius: $radius;
  
  background-clip: padding-box;  /* stops bg color from leaking outside the border: */
}


@mixin border-top-radius($radius) {
  -webkit-border-top-right-radius: $radius;
  border-top-right-radius: $radius;
   -webkit-border-top-left-radius: $radius;
   border-top-left-radius: $radius;
   background-clip: padding-box;
}
@mixin border-right-radius($radius) {
  -webkit-border-bottom-right-radius: $radius;
  border-bottom-right-radius: $radius;
     -webkit-border-top-right-radius: $radius;
     border-top-right-radius: $radius;
     background-clip: padding-box;
}
@mixin border-bottom-radius($radius) {
  -webkit-border-bottom-right-radius: $radius;
  border-bottom-right-radius: $radius;
   -webkit-border-bottom-left-radius: $radius;
   border-bottom-left-radius: $radius;
   background-clip: padding-box;
}
@mixin border-left-radius($radius) {
  -webkit-border-bottom-left-radius: $radius;
  border-bottom-left-radius: $radius;
     -webkit-border-top-left-radius: $radius;
     border-top-left-radius: $radius;
     background-clip: padding-box;
}


/*
    Example usage: 
    @include animation(10s, 5s, changecolour)
 */
 @mixin animation ($delay, $duration, $animation, $fillmode) {
  -webkit-animation-delay: $delay;
  -webkit-animation-duration: $duration;
  -webkit-animation-name: $animation;
  -webkit-animation-fill-mode: $fillmode; /* this prevents the animation from restarting! */

  -moz-animation-delay: $delay;
  -moz-animation-duration: $duration;
  -moz-animation-name: $animation;
  -moz-animation-fill-mode: $fillmode; /* this prevents the animation from restarting! */

  -o-animation-delay: $delay;
  -o-animation-duration: $duration;
  -o-animation-name: $animation;
  -o-animation-fill-mode: $fillmode; /* this prevents the animation from restarting! */

  animation-delay: $delay;
  animation-duration: $duration;
  animation-name: $animation;
  animation-fill-mode: $fillmode; /* this prevents the animation from restarting! */
}




/// custom 


@mixin testBorder($border-st: dashed){
  border: .5px $border-st black;
}
@mixin testBg($colorname: rgba(236, 236, 236, 0.8)){
  background-color: $colorname;
}

@mixin testShadow($isBgCol: #fafafa){
  background-color: $isBgCol;
  box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
  border-radius: 2px;

///

/* Rectangle 2: */
// background: #FAFAFA;
// box-shadow: 0 0 2px 0 rgba(0,0,0,0.14), 0 2px 2px 0 rgba(0,0,0,0.12), 0 1px 3px 0 rgba(0,0,0,0.20);
// border-radius: 2px;
}

@mixin testTransition(){
  transition: all 0.3s cubic-bezier(.25,.8,.25,1);
  &:hover {
    box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
   }
}