@broxus/react-uikit 0.1.2 → 0.2.0

package/dist/cjs/styles/motion.scss

@@ -4,8 +4,12 @@
 // Component:       `uk-motion-*`
 //
 // Modifiers:       `uk-motion-collapse`
-//                  `uk-motion-slide-up`
-//                  `uk-motion-slide-down`
+//                  `uk-motion-scale-up`
+//                  `uk-motion-scale-down`
+//                  `uk-motion-scale-left`
+//                  `uk-motion-scale-right`
+//                  `uk-motion-zoom-in`
+//                  `uk-motion-zoom-out`
 //
 // ========================================================================
 
@@ -20,7 +24,7 @@
    Component: Motion
  ========================================================================== */
 
-[class*='uk-motion-']:not(.uk-motion-collapse, .uk-motion-zoom) {
+[class*='uk-motion-']:not(.uk-motion-collapse) {
     animation-duration: var(--animation-medium-fast-duration);
     animation-fill-mode: both;
 }
@@ -43,34 +47,35 @@
  */
 
 .uk-motion-zoom {
+    transform-origin: 0 0;
+
     &-enter,
     &-appear {
-        animation-duration: var(--animation-medium-fast-duration);
-        animation-fill-mode: both;
         animation-play-state: paused;
         animation-timing-function: var(--ease-out-circ);
         opacity: 0;
+        transform: scale(0);
+    }
+
+    &-enter-active,
+    &-appear-active {
+        animation-name: uk-scale-zoom-in;
+        animation-play-state: running;
+    }
+
+    &-enter-prepare,
+    &-appear-prepare {
         transform: none;
-        user-select: none;
     }
 
     &-leave {
-        animation-duration: var(--animation-medium-fast-duration);
-        animation-fill-mode: both;
         animation-play-state: paused;
         animation-timing-function: var(--ease-in-out-circ);
     }
 
-    &-enter.uk-motion-zoom-enter-active,
-    &-appear.uk-motion-zoom-appear-active {
-        animation-name: uk-scale-zoom-in;
-        animation-play-state: running;
-    }
-
-    &-leave.uk-motion-zoom-leave-active {
+    &-leave-active {
         animation-name: uk-scale-zoom-out;
         animation-play-state: running;
-        pointer-events: none;
     }
 }
 
@@ -107,11 +112,12 @@
     }
 }
 
+
 /*
- * Slide Up
+ * Scale Up
  */
 
-.uk-motion-slide-up {
+.uk-motion-scale-up {
     &-enter,
     &-appear {
         animation-play-state: paused;
@@ -121,7 +127,7 @@
 
     &-enter-active,
     &-appear-active {
-        animation-name: uk-slide-up-in;
+        animation-name: uk-scale-up-in;
         animation-play-state: running;
     }
 
@@ -131,17 +137,17 @@
     }
 
     &-leave-active {
-        animation-name: uk-slide-up-out;
+        animation-name: uk-scale-up-out;
         animation-play-state: running;
         pointer-events: none;
     }
 }
 
 /*
- * Slide Down
+ * Scale Down
  */
 
-.uk-motion-slide-down {
+.uk-motion-scale-down {
     &-enter,
     &-appear {
         animation-play-state: paused;
@@ -151,7 +157,7 @@
 
     &-enter-active,
     &-appear-active {
-        animation-name: uk-slide-down-in;
+        animation-name: uk-scale-down-in;
         animation-play-state: running;
     }
 
@@ -161,17 +167,17 @@
     }
 
     &-leave-active {
-        animation-name: uk-slide-down-out;
+        animation-name: uk-scale-down-out;
         animation-play-state: running;
         pointer-events: none;
     }
 }
 
 /*
- * Slide Left
+ * Scale Left
  */
 
-.uk-motion-slide-left {
+.uk-motion-scale-left {
     &-enter,
     &-appear {
         animation-play-state: paused;
@@ -181,7 +187,7 @@
 
     &-enter-active,
     &-appear-active {
-        animation-name: uk-slide-left-in;
+        animation-name: uk-scale-left-in;
         animation-play-state: running;
     }
 
@@ -191,17 +197,17 @@
     }
 
     &-leave-active {
-        animation-name: uk-slide-left-out;
+        animation-name: uk-scale-left-out;
         animation-play-state: running;
         pointer-events: none;
     }
 }
 
 /*
- * Slide Right
+ * Scale Right
  */
 
-.uk-motion-slide-right {
+.uk-motion-scale-right {
     &-enter,
     &-appear {
         animation-play-state: paused;
@@ -211,7 +217,7 @@
 
     &-enter-active,
     &-appear-active {
-        animation-name: uk-slide-right-in;
+        animation-name: uk-scale-right-in;
         animation-play-state: running;
     }
 
@@ -221,7 +227,228 @@
     }
 
     &-leave-active {
-        animation-name: uk-slide-right-out;
+        animation-name: uk-scale-right-out;
+        animation-play-state: running;
+        pointer-events: none;
+    }
+}
+
+
+/*
+ * Slide
+ */
+
+.uk-motion-slide {
+    &-left,
+    &-right,
+    &-bottom,
+    &-top {
+        &-enter,
+        &-appear,
+        &-leave {
+            &-start {
+                transition: none !important;
+            }
+
+            &-active {
+                transition: all var(--transition-medium-fast-duration);
+            }
+        }
+    }
+
+    &-left {
+        &-enter,
+        &-appear {
+            transform: translateX(-100%);
+
+            &-active {
+                transform: translateX(0);
+            }
+        }
+
+        &-leave {
+            transform: translateX(0);
+
+            &-active {
+                transform: translateX(-100%) !important;
+            }
+        }
+    }
+
+    &-right {
+        &-enter,
+        &-appear {
+            transform: translateX(100%);
+
+            &-active {
+                transform: translateX(0);
+            }
+        }
+
+        &-leave {
+            transform: translateX(0);
+
+            &-active {
+                transform: translateX(100%) !important;
+            }
+        }
+    }
+
+    &-bottom {
+        &-enter,
+        &-appear {
+            transform: translateY(100%);
+
+            &-active {
+                transform: translateY(0);
+            }
+        }
+
+        &-leave {
+            transform: translateX(0);
+
+            &-active {
+                transform: translateY(100%) !important;
+            }
+        }
+    }
+
+    &-top {
+        &-enter,
+        &-appear {
+            transform: translateY(-100%);
+
+            &-active {
+                transform: translateY(0);
+            }
+        }
+
+        &-leave {
+            transform: translateX(0);
+
+            &-active {
+                transform: translateY(-100%) !important;
+            }
+        }
+    }
+}
+
+
+/*
+ * Slide Top Small
+ */
+
+.uk-motion-slide-top-small {
+    &-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 {
+    &-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 {
+    &-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 {
+    &-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;
     }
@@ -231,7 +458,103 @@
 /* Keyframes used by motion classes
  ========================================================================== */
 
-@keyframes uk-slide-up-in {
+@keyframes uk-slide-top-small-in {
+    0% {
+        opacity: 0;
+        transform: translateY(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(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(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(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);
@@ -245,7 +568,7 @@
     }
 }
 
-@keyframes uk-slide-up-out {
+@keyframes uk-scale-up-out {
     0% {
         opacity: 1;
         transform: scaleY(1);
@@ -259,7 +582,7 @@
     }
 }
 
-@keyframes uk-slide-down-in {
+@keyframes uk-scale-down-in {
     0% {
         opacity: 0;
         transform: scaleY(0.8);
@@ -273,7 +596,7 @@
     }
 }
 
-@keyframes uk-slide-down-out {
+@keyframes uk-scale-down-out {
     0% {
         opacity: 1;
         transform: scaleY(1);
@@ -287,7 +610,7 @@
     }
 }
 
-@keyframes uk-slide-left-in {
+@keyframes uk-scale-left-in {
     0% {
         opacity: 0;
         transform: scaleX(0.8);
@@ -301,7 +624,7 @@
     }
 }
 
-@keyframes uk-slide-left-out {
+@keyframes uk-scale-left-out {
     0% {
         opacity: 1;
         transform: scaleX(1);
@@ -315,7 +638,7 @@
     }
 }
 
-@keyframes uk-slide-right-in {
+@keyframes uk-scale-right-in {
     0% {
         opacity: 0;
         transform: scaleX(0.8);
@@ -329,7 +652,7 @@
     }
 }
 
-@keyframes uk-slide-right-out {
+@keyframes uk-scale-right-out {
     0% {
         opacity: 1;
         transform: scaleX(1);
@@ -346,22 +669,22 @@
 @keyframes uk-scale-zoom-in {
     0% {
         opacity: 0;
-        transform: scale(0, 0);
+        transform: scale(0.8);
     }
 
     100% {
         opacity: 1;
-        transform: scale(1, 1);
+        transform: scale(1);
     }
 }
 
 @keyframes uk-scale-zoom-out {
     0% {
-        transform: scale(1, 1);
+        transform: scale(1);
     }
 
     100% {
         opacity: 0;
-        transform: scale(0, 0);
+        transform: scale(0.8);
     }
 }

package/dist/cjs/styles/progress.scss

@@ -1,129 +1 @@
-// Name:            Progress
-// Description:     Component to create progress bars
-//
-// Component:       `uk-progress`
-//
-// ========================================================================
-
-
-// Variables
-// ========================================================================
-
-@import 'variables.scss';
-
-
-/* ========================================================================
-   Component: Progress
- ========================================================================== */
-
-/*
- * 1. Add the correct vertical alignment in Chrome, Firefox, and Opera.
- * 2. Remove default style
- * 3. Behave like a block element
- * 4. Remove borders in Firefox and Edge
- * 5. Set background color for progress container in Firefox, IE11 and Edge
- * 6. Style
- */
-
-.uk-progress {
-    /* 2 */
-    appearance: none;
-
-    /* 5 */
-    background-color: var(--progress-background);
-
-    /* 4 */
-    border: 0;
-
-    /* 3 */
-    display: block;
-    height: var(--progress-height);
-
-    /* 6 */
-    margin-bottom: var(--progress-margin-vertical);
-
-    /* 1 */
-    vertical-align: baseline;
-    width: 100%;
-    @if mixin-exists(hook-progress) {
-        @include hook-progress;
-    }
-}
-
-/* Add margin if adjacent element */
-* + .uk-progress { margin-top: var(--progress-margin-vertical); }
-
-/*
- * Remove animated circles for indeterminate state in IE11 and Edge
- */
-
-.uk-progress:indeterminate { color: transparent; }
-
-/*
- * Progress container
- * 2. Remove progress bar for indeterminate state in Firefox
- */
-
-.uk-progress::-webkit-progress-bar {
-    background-color: var(--progress-background);
-    @if mixin-exists(hook-progress) {
-        @include hook-progress;
-    }
-}
-
-/* 2 */
-.uk-progress:indeterminate::-moz-progress-bar { width: 0; }
-
-/*
- * Progress bar
- * 1. Remove right border in IE11 and Edge
- */
-
-.uk-progress::-webkit-progress-value {
-    background-color: var(--progress-bar-background);
-    transition: width 0.6s ease;
-    @if mixin-exists(hook-progress-bar) {
-        @include hook-progress-bar;
-    }
-}
-
-.uk-progress::-moz-progress-bar {
-    background-color: var(--progress-bar-background);
-    @if mixin-exists(hook-progress-bar) {
-        @include hook-progress-bar;
-    }
-}
-
-.uk-progress::-ms-fill {
-    background-color: var(--progress-bar-background);
-
-    /* 1 */
-    border: 0;
-    transition: width 0.6s ease;
-    @if mixin-exists(hook-progress-bar) {
-        @include hook-progress-bar;
-    }
-}
-
-
-// Hooks
-// ========================================================================
-
-@if mixin-exists(hook-progress-misc) {
-    @include hook-progress-misc;
-}
-
-// @mixin hook-progress() {}
-// @mixin hook-progress-bar() {}
-// @mixin hook-progress-misc() {}
-
-
-// Vars
-// ========================================================================
-
-:root {
-    --progress-height: #{$progress-height};
-    --progress-margin-vertical: var(--global-margin);
-    --progress-background: var(--global-muted-background);
-    --progress-bar-background: var(--global-primary-background);
-}
+@import '../components/Progress/index.scss';