mixin for codepen
@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);
}
}