diff options
Diffstat (limited to 'packages/ui/src/components/cycle-label.css')
| -rw-r--r-- | packages/ui/src/components/cycle-label.css | 85 |
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)); + } + } } |
