2016-04-27 00:14:37 +00:00
|
|
|
// This file is based off animate.css 3.5.1, available here:
|
|
|
|
// https://github.com/daneden/animate.css/blob/3.5.1/animate.css
|
2016-10-24 19:23:40 +00:00
|
|
|
//
|
2016-04-27 00:14:37 +00:00
|
|
|
// animate.css - http://daneden.me/animate
|
|
|
|
// Version - 3.5.1
|
|
|
|
// Licensed under the MIT license - http://opensource.org/licenses/MIT
|
2016-10-24 19:23:40 +00:00
|
|
|
//
|
2016-04-27 00:14:37 +00:00
|
|
|
// Copyright (c) 2016 Daniel Eden
|
|
|
|
|
|
|
|
.animated {
|
2016-08-05 21:42:25 +00:00
|
|
|
@include webkit-prefix(animation-duration, 1s);
|
|
|
|
@include webkit-prefix(animation-fill-mode, both);
|
2016-04-27 00:14:37 +00:00
|
|
|
|
2016-08-05 21:42:25 +00:00
|
|
|
&.once {
|
|
|
|
@include webkit-prefix(animation-iteration-count, 1);
|
|
|
|
}
|
2016-04-27 00:14:37 +00:00
|
|
|
|
2016-08-05 21:42:25 +00:00
|
|
|
&.short {
|
|
|
|
@include webkit-prefix(animation-duration, 321ms);
|
|
|
|
@include webkit-prefix(animation-fill-mode, none);
|
2016-04-27 00:14:37 +00:00
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2016-08-05 21:42:25 +00:00
|
|
|
@include keyframes(pulse) {
|
2016-10-24 20:22:06 +00:00
|
|
|
from,
|
|
|
|
to {
|
2016-08-05 21:42:25 +00:00
|
|
|
@include webkit-prefix(transform, scale3d(1, 1, 1));
|
2016-04-27 00:14:37 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
50% {
|
2016-08-05 21:42:25 +00:00
|
|
|
@include webkit-prefix(transform, scale3d(1.05, 1.05, 1.05));
|
2016-04-27 00:14:37 +00:00
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
.pulse {
|
2016-08-05 21:42:25 +00:00
|
|
|
@include webkit-prefix(animation-name, pulse);
|
2016-04-27 00:14:37 +00:00
|
|
|
}
|
2017-01-03 12:07:08 +00:00
|
|
|
|
|
|
|
/*
|
|
|
|
* General hover animations
|
|
|
|
*/
|
|
|
|
|
|
|
|
|
|
|
|
// Sass multiple transitions mixin | https://gist.github.com/tobiasahlin/7a421fb9306a4f518aab
|
|
|
|
// Usage: @include transition(width, height 0.3s ease-in-out);
|
|
|
|
// Output: -webkit-transition(width 0.2s, height 0.3s ease-in-out);
|
|
|
|
// transition(width 0.2s, height 0.3s ease-in-out);
|
|
|
|
//
|
|
|
|
// Pass in any number of transitions
|
|
|
|
@mixin transition($transitions...) {
|
2019-02-14 13:40:42 +00:00
|
|
|
$unfolded-transitions: ();
|
2017-01-03 12:07:08 +00:00
|
|
|
@each $transition in $transitions {
|
2019-02-14 13:40:42 +00:00
|
|
|
$unfolded-transitions: append($unfolded-transitions, unfold-transition($transition), comma);
|
2017-01-03 12:07:08 +00:00
|
|
|
}
|
|
|
|
|
2019-02-14 13:40:42 +00:00
|
|
|
transition: $unfolded-transitions;
|
2017-01-03 12:07:08 +00:00
|
|
|
}
|
|
|
|
|
2019-02-14 13:40:42 +00:00
|
|
|
@mixin disable-all-animation {
|
2017-02-03 08:44:12 +00:00
|
|
|
/*CSS transitions*/
|
|
|
|
transition-property: none !important;
|
|
|
|
/*CSS transforms*/
|
|
|
|
transform: none !important;
|
|
|
|
/*CSS animations*/
|
|
|
|
animation: none !important;
|
|
|
|
}
|
|
|
|
|
2019-02-14 13:40:42 +00:00
|
|
|
@function unfold-transition ($transition) {
|
2017-01-03 12:07:08 +00:00
|
|
|
// Default values
|
|
|
|
$property: all;
|
|
|
|
$duration: $general-hover-transition-duration;
|
|
|
|
$easing: $general-hover-transition-curve; // Browser default is ease, which is what we want
|
|
|
|
$delay: null; // Browser default is 0, which is what we want
|
2019-02-14 13:40:42 +00:00
|
|
|
$default-properties: ($property, $duration, $easing, $delay);
|
2017-01-03 12:07:08 +00:00
|
|
|
|
|
|
|
// Grab transition properties if they exist
|
2019-02-14 13:40:42 +00:00
|
|
|
$unfolded-transition: ();
|
|
|
|
@for $i from 1 through length($default-properties) {
|
2017-01-03 12:07:08 +00:00
|
|
|
$p: null;
|
|
|
|
@if $i <= length($transition) {
|
2017-01-03 14:45:11 +00:00
|
|
|
$p: nth($transition, $i);
|
2017-01-03 12:07:08 +00:00
|
|
|
} @else {
|
2019-02-14 13:40:42 +00:00
|
|
|
$p: nth($default-properties, $i);
|
2017-01-03 12:07:08 +00:00
|
|
|
}
|
2019-02-14 13:40:42 +00:00
|
|
|
$unfolded-transition: append($unfolded-transition, $p);
|
2017-01-03 12:07:08 +00:00
|
|
|
}
|
|
|
|
|
2019-02-14 13:40:42 +00:00
|
|
|
@return $unfolded-transition;
|
2017-01-03 12:07:08 +00:00
|
|
|
}
|
|
|
|
|
2017-09-29 21:03:50 +00:00
|
|
|
.btn {
|
2019-07-16 16:03:29 +00:00
|
|
|
@include transition(background-color, border-color, color, box-shadow);
|
2017-01-03 12:07:08 +00:00
|
|
|
}
|
|
|
|
|
2017-01-03 13:51:19 +00:00
|
|
|
.dropdown-menu-toggle,
|
2017-01-04 23:51:09 +00:00
|
|
|
.header-user-avatar {
|
2017-01-03 13:51:19 +00:00
|
|
|
@include transition(border-color);
|
|
|
|
}
|
|
|
|
|
2017-11-28 19:07:25 +00:00
|
|
|
.note-action-button,
|
2017-02-11 01:20:57 +00:00
|
|
|
.dropdown-toggle-caret {
|
2017-01-03 13:51:19 +00:00
|
|
|
@include transition(color);
|
|
|
|
}
|
|
|
|
|
2020-12-03 18:10:10 +00:00
|
|
|
a,
|
|
|
|
.notification-dot {
|
2017-01-03 12:07:08 +00:00
|
|
|
@include transition(background-color, color, border);
|
|
|
|
}
|
|
|
|
|
2017-01-03 13:51:19 +00:00
|
|
|
.stage-nav-item {
|
|
|
|
@include transition(background-color, box-shadow);
|
|
|
|
}
|
2017-01-27 15:45:43 +00:00
|
|
|
|
2017-02-06 12:00:31 +00:00
|
|
|
.dropdown-menu a,
|
2020-09-23 12:09:58 +00:00
|
|
|
.dropdown-menu button {
|
2017-01-27 15:45:43 +00:00
|
|
|
transition: none;
|
|
|
|
}
|
2017-04-19 19:48:48 +00:00
|
|
|
|
|
|
|
@keyframes fadeIn {
|
|
|
|
0% {
|
|
|
|
opacity: 0;
|
|
|
|
}
|
|
|
|
|
|
|
|
100% {
|
|
|
|
opacity: 1;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
.fade-in {
|
|
|
|
animation: fadeIn $fade-in-duration 1;
|
|
|
|
}
|
2017-05-05 10:57:29 +00:00
|
|
|
|
|
|
|
@keyframes fadeInHalf {
|
|
|
|
0% {
|
|
|
|
opacity: 0;
|
|
|
|
}
|
|
|
|
|
|
|
|
100% {
|
|
|
|
opacity: 0.5;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
.fade-in-half {
|
|
|
|
animation: fadeInHalf $fade-in-duration 1;
|
|
|
|
}
|
|
|
|
|
|
|
|
@keyframes fadeInFull {
|
|
|
|
0% {
|
|
|
|
opacity: 0.5;
|
|
|
|
}
|
|
|
|
|
|
|
|
100% {
|
|
|
|
opacity: 1;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
.fade-in-full {
|
|
|
|
animation: fadeInFull $fade-in-duration 1;
|
|
|
|
}
|
2017-08-15 19:53:41 +00:00
|
|
|
|
|
|
|
.animation-container {
|
|
|
|
height: 40px;
|
|
|
|
overflow: hidden;
|
|
|
|
|
|
|
|
&.animation-container-small {
|
|
|
|
height: 12px;
|
|
|
|
}
|
2017-10-13 09:08:10 +00:00
|
|
|
|
|
|
|
&.animation-container-right {
|
|
|
|
.skeleton-line-2 {
|
|
|
|
left: 0;
|
|
|
|
right: 150px;
|
|
|
|
}
|
|
|
|
}
|
2017-08-15 19:53:41 +00:00
|
|
|
|
2019-02-25 19:03:21 +00:00
|
|
|
[class^='skeleton-line-'] {
|
2017-08-15 19:53:41 +00:00
|
|
|
position: relative;
|
2020-05-22 12:08:15 +00:00
|
|
|
background-color: $gray-50;
|
2017-08-15 19:53:41 +00:00
|
|
|
height: 10px;
|
2018-04-16 09:52:33 +00:00
|
|
|
overflow: hidden;
|
2017-08-15 19:53:41 +00:00
|
|
|
|
2018-04-16 09:52:33 +00:00
|
|
|
&:not(:last-of-type) {
|
|
|
|
margin-bottom: 4px;
|
|
|
|
}
|
2017-08-15 19:53:41 +00:00
|
|
|
|
2018-04-16 09:52:33 +00:00
|
|
|
&::after {
|
|
|
|
content: ' ';
|
|
|
|
display: block;
|
|
|
|
animation: blockTextShine 1s linear infinite forwards;
|
|
|
|
background-repeat: no-repeat;
|
|
|
|
background-size: cover;
|
2019-02-25 19:03:21 +00:00
|
|
|
background-image: linear-gradient(to right,
|
2020-05-22 12:08:15 +00:00
|
|
|
$gray-50 0%,
|
2020-05-20 00:08:20 +00:00
|
|
|
$gray-10 20%,
|
2020-05-22 12:08:15 +00:00
|
|
|
$gray-50 40%,
|
|
|
|
$gray-50 100%);
|
2018-04-16 09:52:33 +00:00
|
|
|
height: 10px;
|
|
|
|
}
|
2017-08-15 19:53:41 +00:00
|
|
|
}
|
2018-04-16 09:52:33 +00:00
|
|
|
}
|
2017-08-15 19:53:41 +00:00
|
|
|
|
2018-04-16 09:52:33 +00:00
|
|
|
$skeleton-line-widths: (
|
|
|
|
156px,
|
|
|
|
235px,
|
|
|
|
200px,
|
|
|
|
);
|
2017-08-15 19:53:41 +00:00
|
|
|
|
2018-04-16 09:52:33 +00:00
|
|
|
@for $count from 1 through length($skeleton-line-widths) {
|
|
|
|
.skeleton-line-#{$count} {
|
|
|
|
width: nth($skeleton-line-widths, $count);
|
2017-08-15 19:53:41 +00:00
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
@keyframes blockTextShine {
|
|
|
|
0% {
|
|
|
|
transform: translateX(-468px);
|
|
|
|
}
|
|
|
|
|
|
|
|
100% {
|
|
|
|
transform: translateX(468px);
|
|
|
|
}
|
|
|
|
}
|
2018-06-21 12:22:40 +00:00
|
|
|
|
|
|
|
.slide-down-enter-active {
|
|
|
|
transition: transform 0.2s;
|
|
|
|
}
|
|
|
|
|
|
|
|
.slide-down-enter,
|
|
|
|
.slide-down-leave-to {
|
|
|
|
transform: translateY(-30%);
|
|
|
|
}
|
2019-01-02 14:28:44 +00:00
|
|
|
|
|
|
|
@keyframes spin {
|
|
|
|
0% { transform: rotate(0deg);}
|
|
|
|
100% { transform: rotate(360deg);}
|
|
|
|
}
|
|
|
|
|
|
|
|
/** COMMON ANIMATION CLASSES **/
|
|
|
|
.transform-origin-center { @include webkit-prefix(transform-origin, 50% 50%); }
|
|
|
|
.animate-n-spin { @include webkit-prefix(animation-name, spin); }
|
|
|
|
.animate-c-infinite { @include webkit-prefix(animation-iteration-count, infinite); }
|
|
|
|
.animate-t-linear { @include webkit-prefix(animation-timing-function, linear); }
|
|
|
|
.animate-d-1 { @include webkit-prefix(animation-duration, 1s); }
|
|
|
|
.animate-d-2 { @include webkit-prefix(animation-duration, 2s); }
|
|
|
|
|
|
|
|
/** COMPOSITE ANIMATION CLASSES **/
|
|
|
|
.gl-spinner {
|
|
|
|
@include webkit-prefix(animation-name, spin);
|
|
|
|
@include webkit-prefix(animation-iteration-count, infinite);
|
|
|
|
@include webkit-prefix(animation-timing-function, linear);
|
|
|
|
@include webkit-prefix(animation-duration, 1s);
|
|
|
|
transform-origin: 50% 50%;
|
|
|
|
}
|
2019-06-07 07:31:40 +00:00
|
|
|
|
|
|
|
/* ----------------------------------------------
|
|
|
|
* Generated by Animista on 2019-4-26 17:40:41
|
|
|
|
* w: http://animista.net, t: @cssanimista
|
|
|
|
* ---------------------------------------------- */
|
|
|
|
@keyframes slide-in-fwd-bottom {
|
|
|
|
0% {
|
|
|
|
transform: translateZ(-1400px) translateY(800px);
|
|
|
|
opacity: 0;
|
|
|
|
}
|
|
|
|
|
|
|
|
100% {
|
|
|
|
transform: translateZ(0) translateY(0);
|
|
|
|
opacity: 1;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
.slide-in-fwd-bottom-enter-active {
|
|
|
|
animation: slide-in-fwd-bottom 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
|
|
|
|
}
|
|
|
|
|
|
|
|
.slide-in-fwd-bottom-leave-active {
|
|
|
|
animation: slide-in-fwd-bottom 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) both reverse;
|
|
|
|
}
|