John Cowen e3f9a0f8ee
ui: Loader amends/improvements (#10181)
* ui: Loader amends/improvements

1. Create a JS compatible template only 'glimmer' component so we can
use it with or without glimmer.
2. Add a set of `rose` colors.
3. Animate the brand loader to keep it centered when the side
navigation appears.
4. Tweak the color of Consul::Loader to use a 'rose' color.
5. Move everything loader related to the `app/components/` folder and
add docs.
2021-05-07 12:23:29 +01:00

39 lines
881 B
SCSS

%with-transition-500 {
transition-duration: 0.15s;
transition-timing-function: ease-out;
}
%blink-in-fade-out {
transition-property: opacity;
transition-duration: 0.1s;
transition-timing-function: linear;
opacity: 0;
pointer-events: none;
}
%blink-in-fade-out-active {
transition-duration: 0;
transition-duration: unset;
transition-delay: 0;
transition-delay: unset;
opacity: 1;
pointer-events: auto;
}
%transition-pushover {
transition-timing-function: cubic-bezier(0.1, 0.1, 0.25, 0.9);
transition-duration: 0.1s;
}
%animation-pushover {
animation-timing-function: cubic-bezier(0.1, 0.1, 0.25, 0.9);
animation-duration: 0.1s;
}
%animation-remove-from-flow {
animation-name: remove-from-flow;
animation-fill-mode: forwards;
}
@keyframes remove-from-flow {
100% {
visibility: hidden;
overflow: hidden;
clip: rect(0 0 0 0);
}
}