open-consul/ui-v2/app/styles/base/animation/index.scss
John Cowen d1cbc3f032 ui: Tab Improvements (animations/branding) (#7772)
* ui: Adds a tab selection animation to our app tabs

1. Replace all mentions of `magenta` with a themeable CSS property.
2. Add an easy way to inline style DOM nodes
3. Use CSS properties to add tab animation

* Fix up rendering test

* Avoid DOM noodling as much as possible
2020-05-12 17:14:43 +00:00

20 lines
429 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;
}