50 lines
911 B
SCSS
50 lines
911 B
SCSS
@mixin keyframes($animation-name) {
|
|
@-webkit-keyframes #{$animation-name} {
|
|
@content;
|
|
}
|
|
@-moz-keyframes #{$animation-name} {
|
|
@content;
|
|
}
|
|
@-ms-keyframes #{$animation-name} {
|
|
@content;
|
|
}
|
|
@-o-keyframes #{$animation-name} {
|
|
@content;
|
|
}
|
|
@keyframes #{$animation-name} {
|
|
@content;
|
|
}
|
|
}
|
|
|
|
@mixin animation($str) {
|
|
-webkit-animation: #{$str};
|
|
-moz-animation: #{$str};
|
|
-ms-animation: #{$str};
|
|
-o-animation: #{$str};
|
|
animation: #{$str};
|
|
}
|
|
|
|
.animate-height {
|
|
max-height: 0;
|
|
overflow: hidden;
|
|
|
|
&--open {
|
|
max-height: 1000px;
|
|
overflow: auto;
|
|
transition: max-height 250ms ease-in-out;
|
|
}
|
|
}
|
|
|
|
@keyframes spin-clockwise {
|
|
0% {
|
|
transform: rotate(0deg) scaleX(-1); // scaleX flips the `sync` icon so arrows point the correct way
|
|
}
|
|
100% {
|
|
transform: rotate(359deg) scaleX(-1);
|
|
}
|
|
}
|
|
|
|
.spin-clockwise {
|
|
animation: spin-clockwise 3s infinite linear;
|
|
}
|