forked from grafana.jool/grafana-jool
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
49 lines
911 B
49 lines
911 B
@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;
|
|
}
|
|
|