summaryrefslogtreecommitdiffhomepage
path: root/packages/ui/src/components/cycle-label.css
diff options
context:
space:
mode:
Diffstat (limited to 'packages/ui/src/components/cycle-label.css')
-rw-r--r--packages/ui/src/components/cycle-label.css85
1 files changed, 42 insertions, 43 deletions
diff --git a/packages/ui/src/components/cycle-label.css b/packages/ui/src/components/cycle-label.css
index 46a6408f0..e3b5256d4 100644
--- a/packages/ui/src/components/cycle-label.css
+++ b/packages/ui/src/components/cycle-label.css
@@ -1,52 +1,51 @@
.cycle-label {
- --c-dur: 200ms;
- --c-stag: 30ms;
- --c-ease: cubic-bezier(0.25, 0, 0.5, 1);
- --c-opacity-start: 0;
- --c-opacity-end: 1;
- --c-blur-start: 0px;
- --c-blur-end: 0px;
- --c-skew: 10deg;
+ --c-dur: 200ms;
+ --c-stag: 30ms;
+ --c-ease: cubic-bezier(0.25, 0, 0.5, 1);
+ --c-opacity-start: 0;
+ --c-opacity-end: 1;
+ --c-blur-start: 0px;
+ --c-blur-end: 0px;
+ --c-skew: 10deg;
- display: inline-flex;
- position: relative;
+ display: inline-flex;
+ position: relative;
- transform-style: preserve-3d;
- perspective: 500px;
- transition: width 200ms var(--c-ease);
- will-change: width;
- overflow: hidden;
+ transform-style: preserve-3d;
+ perspective: 500px;
+ transition: width 200ms var(--c-ease);
+ will-change: width;
+ overflow: hidden;
- .cycle-char {
- display: inline-block;
- transform-style: preserve-3d;
- min-width: 0.25em;
- backface-visibility: hidden;
+ .cycle-char {
+ display: inline-block;
+ transform-style: preserve-3d;
+ min-width: 0.25em;
+ backface-visibility: hidden;
- transition:
- transform var(--c-dur) var(--c-ease),
- opacity var(--c-dur) var(--c-ease),
- filter var(--c-dur) var(--c-ease);
- transition-delay: calc(var(--i, 0) * var(--c-stag));
+ transition:
+ transform var(--c-dur) var(--c-ease),
+ opacity var(--c-dur) var(--c-ease),
+ filter var(--c-dur) var(--c-ease);
+ transition-delay: calc(var(--i, 0) * var(--c-stag));
- &.enter {
- opacity: var(--c-opacity-end);
- filter: blur(var(--c-blur-end));
- transform: translateY(0) rotateX(0) skewX(0);
- }
+ &.enter {
+ opacity: var(--c-opacity-end);
+ filter: blur(var(--c-blur-end));
+ transform: translateY(0) rotateX(0) skewX(0);
+ }
- &.exit {
- opacity: var(--c-opacity-start);
- filter: blur(var(--c-blur-start));
- transform: translateY(50%) rotateX(90deg) skewX(var(--c-skew));
- }
+ &.exit {
+ opacity: var(--c-opacity-start);
+ filter: blur(var(--c-blur-start));
+ transform: translateY(50%) rotateX(90deg) skewX(var(--c-skew));
+ }
- &.pre {
- opacity: var(--c-opacity-start);
- filter: blur(var(--c-blur-start));
- transition: none;
- transform: translateY(-50%) rotateX(-90deg)
- skewX(calc(var(--c-skew) * -1));
- }
- }
+ &.pre {
+ opacity: var(--c-opacity-start);
+ filter: blur(var(--c-blur-start));
+ transition: none;
+ transform: translateY(-50%) rotateX(-90deg) skewX(calc(var(--c-skew) * -1));
+ }
+ }
}