@broxus/react-uikit 0.22.0 → 0.23.1

package/dist/assets/motion.css

@@ -0,0 +1,492 @@
+/* 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;
+}
+.uk-motion-zoom-appear, .uk-motion-zoom-enter {
+  animation-play-state: paused;
+  animation-timing-function: var(--ease-out-circ);
+  opacity: 0;
+  transform: scale(0);
+}
+.uk-motion-zoom-appear-active, .uk-motion-zoom-enter-active {
+  animation-name: uk-scale-zoom-in;
+  animation-play-state: running;
+}
+.uk-motion-zoom-appear-prepare, .uk-motion-zoom-enter-prepare {
+  transform: none;
+}
+.uk-motion-zoom-leave {
+  animation-play-state: paused;
+  animation-timing-function: var(--ease-in-out-circ);
+}
+.uk-motion-zoom-leave-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;
+}
+.uk-motion-fade-appear, .uk-motion-fade-enter {
+  animation-timing-function: linear;
+  opacity: 0;
+}
+.uk-motion-fade-appear-active, .uk-motion-fade-enter-active {
+  animation-name: uk-fade;
+  animation-play-state: running;
+}
+.uk-motion-fade-leave {
+  animation-play-state: paused;
+  animation-timing-function: linear;
+}
+.uk-motion-fade-leave-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;
+}
+.uk-motion-scale-up-appear, .uk-motion-scale-up-enter {
+  animation-play-state: paused;
+  animation-timing-function: var(--ease-out-quint);
+  opacity: 0;
+}
+.uk-motion-scale-up-appear-active, .uk-motion-scale-up-enter-active {
+  animation-name: uk-scale-up-in;
+  animation-play-state: running;
+}
+.uk-motion-scale-up-leave {
+  animation-play-state: paused;
+  animation-timing-function: var(--ease-in-quint);
+}
+.uk-motion-scale-up-leave-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;
+}
+.uk-motion-scale-down-appear, .uk-motion-scale-down-enter {
+  animation-play-state: paused;
+  animation-timing-function: var(--ease-out-quint);
+  opacity: 0;
+}
+.uk-motion-scale-down-appear-active, .uk-motion-scale-down-enter-active {
+  animation-name: uk-scale-down-in;
+  animation-play-state: running;
+}
+.uk-motion-scale-down-leave {
+  animation-play-state: paused;
+  animation-timing-function: var(--ease-in-quint);
+}
+.uk-motion-scale-down-leave-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;
+}
+.uk-motion-scale-left-appear, .uk-motion-scale-left-enter {
+  animation-play-state: paused;
+  animation-timing-function: var(--ease-out-quint);
+  opacity: 0;
+}
+.uk-motion-scale-left-appear-active, .uk-motion-scale-left-enter-active {
+  animation-name: uk-scale-left-in;
+  animation-play-state: running;
+}
+.uk-motion-scale-left-leave {
+  animation-play-state: paused;
+  animation-timing-function: var(--ease-in-quint);
+}
+.uk-motion-scale-left-leave-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;
+}
+.uk-motion-scale-right-appear, .uk-motion-scale-right-enter {
+  animation-play-state: paused;
+  animation-timing-function: var(--ease-out-quint);
+  opacity: 0;
+}
+.uk-motion-scale-right-appear-active, .uk-motion-scale-right-enter-active {
+  animation-name: uk-scale-right-in;
+  animation-play-state: running;
+}
+.uk-motion-scale-right-leave {
+  animation-play-state: paused;
+  animation-timing-function: var(--ease-in-quint);
+}
+.uk-motion-scale-right-leave-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;
+}
+.uk-motion-slide-top-small-enter, .uk-motion-slide-top-small-appear {
+  animation-play-state: paused;
+  animation-timing-function: var(--ease-out-quint);
+  opacity: 0;
+}
+.uk-motion-slide-top-small-enter-active, .uk-motion-slide-top-small-appear-active {
+  animation-name: uk-slide-top-small-in;
+  animation-play-state: running;
+}
+.uk-motion-slide-top-small-leave {
+  animation-play-state: paused;
+  animation-timing-function: var(--ease-in-quint);
+}
+.uk-motion-slide-top-small-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;
+}
+.uk-motion-slide-bottom-small-enter, .uk-motion-slide-bottom-small-appear {
+  animation-play-state: paused;
+  animation-timing-function: var(--ease-out-quint);
+  opacity: 0;
+}
+.uk-motion-slide-bottom-small-enter-active, .uk-motion-slide-bottom-small-appear-active {
+  animation-name: uk-slide-bottom-small-in;
+  animation-play-state: running;
+}
+.uk-motion-slide-bottom-small-leave {
+  animation-play-state: paused;
+  animation-timing-function: var(--ease-in-quint);
+}
+.uk-motion-slide-bottom-small-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;
+}
+.uk-motion-slide-left-small-enter, .uk-motion-slide-left-small-appear {
+  animation-play-state: paused;
+  animation-timing-function: var(--ease-out-quint);
+  opacity: 0;
+}
+.uk-motion-slide-left-small-enter-active, .uk-motion-slide-left-small-appear-active {
+  animation-name: uk-slide-left-small-in;
+  animation-play-state: running;
+}
+.uk-motion-slide-left-small-leave {
+  animation-play-state: paused;
+  animation-timing-function: var(--ease-in-quint);
+}
+.uk-motion-slide-left-small-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;
+}
+.uk-motion-slide-right-small-enter, .uk-motion-slide-right-small-appear {
+  animation-play-state: paused;
+  animation-timing-function: var(--ease-out-quint);
+  opacity: 0;
+}
+.uk-motion-slide-right-small-enter-active, .uk-motion-slide-right-small-appear-active {
+  animation-name: uk-slide-right-small-in;
+  animation-play-state: running;
+}
+.uk-motion-slide-right-small-leave {
+  animation-play-state: paused;
+  animation-timing-function: var(--ease-in-quint);
+}
+.uk-motion-slide-right-small-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(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(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(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(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;
+  }
+}