@broxus/react-uikit 0.23.3 → 0.24.1

package/styles/motion/_motion.scss

@@ -0,0 +1,640 @@
+// 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:map';
+@use 'sass:meta';
+@use 'sass:string';
+
+
+// Variables
+// ========================================================================
+
+@use '../variables' as *;
+@use '../mixins' as *;
+
+
+@mixin motion-styles {
+    /* ========================================================================
+       Component: Motions
+     ========================================================================== */
+
+    /*
+     * Noop
+     */
+
+    .#{$prefix}-motion-noop {
+        transition: all var(--transition-medium-fast-duration) var(--ease-in-out);
+    }
+
+
+    /*
+     * Collapse
+     */
+
+    .#{$prefix}-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
+     */
+
+    .#{$prefix}-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
+     */
+
+    .#{$prefix}-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
+     */
+
+    .#{$prefix}-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
+     */
+
+    .#{$prefix}-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
+     */
+
+    .#{$prefix}-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
+     */
+
+    .#{$prefix}-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
+     */
+
+    .#{$prefix}-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
+     */
+
+    .#{$prefix}-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
+     */
+
+    .#{$prefix}-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
+     */
+
+    .#{$prefix}-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;
+        }
+    }
+
+
+    @content;
+}
+
+// No CSS custom properties for this component
+@mixin motion-tokens {
+    @content;
+}

package/styles/nav/_index.scss

@@ -0,0 +1,11 @@
+@use 'nav' as *;
+
+$generate-tokens: true !default;
+
+@include nav-styles;
+
+@if $generate-tokens {
+    :root {
+        @include nav-tokens;
+    }
+}