55 lines
1.1 KiB
SCSS
55 lines
1.1 KiB
SCSS
|
// Transition
|
||
|
|
@mixin transition($what: all, $time: 0.2s, $how: ease-in-out) {
|
||
|
|
-webkit-transition: $what $time $how;
|
||
|
|
-moz-transition: $what $time $how;
|
||
|
|
-ms-transition: $what $time $how;
|
||
|
|
-o-transition: $what $time $how;
|
||
|
|
transition: $what $time $how;
|
||
|
|
}
|
||
|
|
|
||
|
|
@mixin transition-multi($x...){
|
||
|
|
-webkit-transition: $x;
|
||
|
|
-moz-transition: $x;
|
||
|
|
-ms-transition: $x;
|
||
|
|
-o-transition: $x;
|
||
|
|
transition: $x;
|
||
|
|
}
|
||
|
|
|
||
|
|
// 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));
|
||
|
|
}
|
||
|
|
|
||
|
|
//transform origin
|
||
|
|
@mixin transform-origin ($origin) {
|
||
|
|
moz-transform-origin: $origin;
|
||
|
|
-o-transform-origin: $origin;
|
||
|
|
-ms-transform-origin: $origin;
|
||
|
|
-webkit-transform-origin: $origin;
|
||
|
|
transform-origin: $origin;
|
||
|
|
}
|