@broxus/react-uikit 0.23.3 → 0.24.0

package/styles/motion.scss

@@ -1,627 +0,0 @@
-// Name:            Motion
-// Description:     Utilities for keyframe motions
-//
-// Component:       `uk-motion-*`
-//
-// Modifiers:       `uk-motion-collapse`
-//                  `uk-motion-scale-up`
-//                  `uk-motion-scale-down`
-//                  `uk-motion-scale-left`
-//                  `uk-motion-scale-right`
-//                  `uk-motion-zoom-in`
-//                  `uk-motion-zoom-out`
-//
-// ========================================================================
-
-@use 'sass:meta';
-@use 'sass:string';
-
-
-// Variables
-// ========================================================================
-
-@use 'variables' as *;
-
-
-/* Motions
- ========================================================================== */
-
-/*
- * Noop
- */
-
-.uk-motion-noop {
-    transition: all var(--transition-medium-fast-duration) var(--ease-in-out);
-}
-
-
-/*
- * Collapse
- */
-
-.uk-motion-collapse {
-    overflow: hidden;
-    transition: height var(--transition-medium-fast-duration) var(--ease-in-out),
-        opacity var(--transition-medium-fast-duration) var(--ease-in-out);
-}
-
-/*
- * Zoom
- */
-
-.uk-motion-zoom {
-    animation-duration: var(--animation-medium-fast-duration);
-    animation-fill-mode: both;
-    transform-origin: 0 0;
-    will-change: opacity, transform;
-
-    &-appear,
-    &-enter {
-        animation-play-state: paused;
-        animation-timing-function: var(--ease-out-circ);
-        opacity: 0;
-        transform: scale(0);
-
-        &-active {
-            animation-name: uk-scale-zoom-in;
-            animation-play-state: running;
-        }
-
-        &-prepare { transform: none; }
-    }
-
-    &-leave {
-        animation-play-state: paused;
-        animation-timing-function: var(--ease-in-out-circ);
-
-        &-active {
-            animation-name: uk-scale-zoom-out;
-            animation-play-state: running;
-        }
-    }
-}
-
-
-/*
- * Fade
- */
-
-.uk-motion-fade {
-    animation-duration: var(--animation-fade-duration);
-    animation-fill-mode: both;
-    will-change: opacity;
-
-    &-appear,
-    &-enter {
-        animation-timing-function: linear;
-        opacity: 0;
-
-        &-active {
-            animation-name: uk-fade;
-            animation-play-state: running;
-        }
-    }
-
-    &-leave {
-        animation-play-state: paused;
-        animation-timing-function: linear;
-
-        &-active {
-            animation-direction: reverse;
-            animation-name: uk-fade;
-            animation-play-state: running;
-            pointer-events: none;
-        }
-    }
-}
-
-
-/*
- * Scale Up
- */
-
-.uk-motion-scale-up {
-    animation-duration: var(--animation-medium-fast-duration);
-    animation-fill-mode: both;
-    will-change: opacity, transform;
-
-    &-appear,
-    &-enter {
-        animation-play-state: paused;
-        animation-timing-function: var(--ease-out-quint);
-        opacity: 0;
-
-        &-active {
-            animation-name: uk-scale-up-in;
-            animation-play-state: running;
-        }
-    }
-
-    &-leave {
-        animation-play-state: paused;
-        animation-timing-function: var(--ease-in-quint);
-
-        &-active {
-            animation-name: uk-scale-up-out;
-            animation-play-state: running;
-            pointer-events: none;
-        }
-    }
-}
-
-/*
- * Scale Down
- */
-
-.uk-motion-scale-down {
-    animation-duration: var(--animation-medium-fast-duration);
-    animation-fill-mode: both;
-    will-change: opacity, transform;
-
-    &-appear,
-    &-enter {
-        animation-play-state: paused;
-        animation-timing-function: var(--ease-out-quint);
-        opacity: 0;
-
-        &-active {
-            animation-name: uk-scale-down-in;
-            animation-play-state: running;
-        }
-    }
-
-    &-leave {
-        animation-play-state: paused;
-        animation-timing-function: var(--ease-in-quint);
-
-        &-active {
-            animation-name: uk-scale-down-out;
-            animation-play-state: running;
-            pointer-events: none;
-        }
-    }
-}
-
-/*
- * Scale Left
- */
-
-.uk-motion-scale-left {
-    animation-duration: var(--animation-medium-fast-duration);
-    animation-fill-mode: both;
-    will-change: opacity, transform;
-
-    &-appear,
-    &-enter {
-        animation-play-state: paused;
-        animation-timing-function: var(--ease-out-quint);
-        opacity: 0;
-
-        &-active {
-            animation-name: uk-scale-left-in;
-            animation-play-state: running;
-        }
-    }
-
-    &-leave {
-        animation-play-state: paused;
-        animation-timing-function: var(--ease-in-quint);
-
-        &-active {
-            animation-name: uk-scale-left-out;
-            animation-play-state: running;
-            pointer-events: none;
-        }
-    }
-}
-
-/*
- * Scale Right
- */
-
-.uk-motion-scale-right {
-    animation-duration: var(--animation-medium-fast-duration);
-    animation-fill-mode: both;
-    will-change: opacity, transform;
-
-    &-appear,
-    &-enter {
-        animation-play-state: paused;
-        animation-timing-function: var(--ease-out-quint);
-        opacity: 0;
-
-        &-active {
-            animation-name: uk-scale-right-in;
-            animation-play-state: running;
-        }
-    }
-
-    &-leave {
-        animation-play-state: paused;
-        animation-timing-function: var(--ease-in-quint);
-
-        &-active {
-            animation-name: uk-scale-right-out;
-            animation-play-state: running;
-            pointer-events: none;
-        }
-    }
-}
-
-
-/*
- * Slide Top Small
- */
-
-.uk-motion-slide-top-small {
-    animation-duration: var(--animation-medium-fast-duration);
-    animation-fill-mode: both;
-
-    &-enter,
-    &-appear {
-        animation-play-state: paused;
-        animation-timing-function: var(--ease-out-quint);
-        opacity: 0;
-    }
-
-    &-enter-active,
-    &-appear-active {
-        animation-name: uk-slide-top-small-in;
-        animation-play-state: running;
-    }
-
-    &-leave {
-        animation-play-state: paused;
-        animation-timing-function: var(--ease-in-quint);
-    }
-
-    &-leave-active {
-        animation-name: uk-slide-top-small-out;
-        animation-play-state: running;
-        pointer-events: none;
-    }
-}
-
-/*
- * Slide Bottom Small
- */
-
-.uk-motion-slide-bottom-small {
-    animation-duration: var(--animation-medium-fast-duration);
-    animation-fill-mode: both;
-
-    &-enter,
-    &-appear {
-        animation-play-state: paused;
-        animation-timing-function: var(--ease-out-quint);
-        opacity: 0;
-    }
-
-    &-enter-active,
-    &-appear-active {
-        animation-name: uk-slide-bottom-small-in;
-        animation-play-state: running;
-    }
-
-    &-leave {
-        animation-play-state: paused;
-        animation-timing-function: var(--ease-in-quint);
-    }
-
-    &-leave-active {
-        animation-name: uk-slide-bottom-small-out;
-        animation-play-state: running;
-        pointer-events: none;
-    }
-}
-
-/*
- * Slide Left Small
- */
-
-.uk-motion-slide-left-small {
-    animation-duration: var(--animation-medium-fast-duration);
-    animation-fill-mode: both;
-
-    &-enter,
-    &-appear {
-        animation-play-state: paused;
-        animation-timing-function: var(--ease-out-quint);
-        opacity: 0;
-    }
-
-    &-enter-active,
-    &-appear-active {
-        animation-name: uk-slide-left-small-in;
-        animation-play-state: running;
-    }
-
-    &-leave {
-        animation-play-state: paused;
-        animation-timing-function: var(--ease-in-quint);
-    }
-
-    &-leave-active {
-        animation-name: uk-slide-left-small-out;
-        animation-play-state: running;
-        pointer-events: none;
-    }
-}
-
-/*
- * Slide Right Small
- */
-
-.uk-motion-slide-right-small {
-    animation-duration: var(--animation-medium-fast-duration);
-    animation-fill-mode: both;
-
-    &-enter,
-    &-appear {
-        animation-play-state: paused;
-        animation-timing-function: var(--ease-out-quint);
-        opacity: 0;
-    }
-
-    &-enter-active,
-    &-appear-active {
-        animation-name: uk-slide-right-small-in;
-        animation-play-state: running;
-    }
-
-    &-leave {
-        animation-play-state: paused;
-        animation-timing-function: var(--ease-in-quint);
-    }
-
-    &-leave-active {
-        animation-name: uk-slide-right-small-out;
-        animation-play-state: running;
-        pointer-events: none;
-    }
-}
-
-
-/* Keyframes used by motion classes
- ========================================================================== */
-
-@keyframes uk-slide-top-small-in {
-    0% {
-        opacity: 0;
-        transform: translateY(string.unquote('calc(var(--animation-slide-small-translate) * -1)'));
-    }
-
-    100% {
-        opacity: 1;
-        transform: translateY(0);
-    }
-}
-
-@keyframes uk-slide-top-small-out {
-    0% {
-        opacity: 1;
-        transform: translateY(0);
-    }
-
-    100% {
-        opacity: 0;
-        transform: translateY(string.unquote('calc(var(--animation-slide-small-translate) * -1)'));
-    }
-}
-
-@keyframes uk-slide-bottom-small-in {
-    0% {
-        opacity: 0;
-        transform: translateY(var(--animation-slide-small-translate));
-    }
-
-    100% {
-        opacity: 1;
-        transform: translateY(0);
-    }
-}
-
-@keyframes uk-slide-bottom-small-out {
-    0% {
-        opacity: 1;
-        transform: translateY(0);
-    }
-
-    100% {
-        opacity: 0;
-        transform: translateY(var(--animation-slide-small-translate));
-    }
-}
-
-@keyframes uk-slide-left-small-in {
-    0% {
-        opacity: 0;
-        transform: translateX(string.unquote('calc(var(--animation-slide-small-translate) * -1)'));
-    }
-
-    100% {
-        opacity: 1;
-        transform: translateX(0);
-    }
-}
-
-@keyframes uk-slide-left-small-out {
-    0% {
-        opacity: 1;
-        transform: translateX(0);
-    }
-
-    100% {
-        opacity: 0;
-        transform: translateX(string.unquote('calc(var(--animation-slide-small-translate) * -1)'));
-    }
-}
-
-@keyframes uk-slide-right-small-in {
-    0% {
-        opacity: 0;
-        transform: translateX(var(--animation-slide-small-translate));
-    }
-
-    100% {
-        opacity: 1;
-        transform: translateX(0);
-    }
-}
-
-@keyframes uk-slide-right-small-out {
-    0% {
-        opacity: 1;
-        transform: translateX(0);
-    }
-
-    100% {
-        opacity: 0;
-        transform: translateX(var(--animation-slide-small-translate));
-    }
-}
-
-@keyframes uk-scale-up-in {
-    0% {
-        opacity: 0;
-        transform: scaleY(0.8);
-        transform-origin: 0 0;
-    }
-
-    100% {
-        opacity: 1;
-        transform: scaleY(1);
-        transform-origin: 0 0;
-    }
-}
-
-@keyframes uk-scale-up-out {
-    0% {
-        opacity: 1;
-        transform: scaleY(1);
-        transform-origin: 0 0;
-    }
-
-    100% {
-        opacity: 0;
-        transform: scaleY(0.8);
-        transform-origin: 0 0;
-    }
-}
-
-@keyframes uk-scale-down-in {
-    0% {
-        opacity: 0;
-        transform: scaleY(0.8);
-        transform-origin: 100% 100%;
-    }
-
-    100% {
-        opacity: 1;
-        transform: scaleY(1);
-        transform-origin: 100% 100%;
-    }
-}
-
-@keyframes uk-scale-down-out {
-    0% {
-        opacity: 1;
-        transform: scaleY(1);
-        transform-origin: 100% 100%;
-    }
-
-    100% {
-        opacity: 0;
-        transform: scaleY(0.8);
-        transform-origin: 100% 100%;
-    }
-}
-
-@keyframes uk-scale-left-in {
-    0% {
-        opacity: 0;
-        transform: scaleX(0.8);
-        transform-origin: 0 0;
-    }
-
-    100% {
-        opacity: 1;
-        transform: scaleX(1);
-        transform-origin: 0 0;
-    }
-}
-
-@keyframes uk-scale-left-out {
-    0% {
-        opacity: 1;
-        transform: scaleX(1);
-        transform-origin: 0 0;
-    }
-
-    100% {
-        opacity: 0;
-        transform: scaleX(0.8);
-        transform-origin: 0 0;
-    }
-}
-
-@keyframes uk-scale-right-in {
-    0% {
-        opacity: 0;
-        transform: scaleX(0.8);
-        transform-origin: 100% 0;
-    }
-
-    100% {
-        opacity: 1;
-        transform: scaleX(1);
-        transform-origin: 100% 0;
-    }
-}
-
-@keyframes uk-scale-right-out {
-    0% {
-        opacity: 1;
-        transform: scaleX(1);
-        transform-origin: 100% 0;
-    }
-
-    100% {
-        opacity: 0;
-        transform: scaleX(0.8);
-        transform-origin: 100% 0;
-    }
-}
-
-@keyframes uk-scale-zoom-in {
-    0% {
-        opacity: 0;
-        transform: scale(0.8);
-    }
-
-    100% {
-        opacity: 1;
-        transform: scale(1);
-    }
-}
-
-@keyframes uk-scale-zoom-out {
-    0% {
-        transform: scale(1);
-    }
-
-    100% {
-        opacity: 0;
-        transform: scale(0.8);
-    }
-}
-
-@keyframes uk-noop {
-    0% {
-        font-size: 0;
-    }
-
-    100% {
-        font-size: 1rem;
-    }
-}