@broxus/react-uikit 0.3.0 → 0.4.0

package/dist/cjs/styles/motion.scss

@@ -20,17 +20,17 @@
 @import 'variables.scss';
 
 
-/* ========================================================================
-   Component: Motion
+/* Motions
  ========================================================================== */
 
-[class*='uk-motion-']:not(.uk-motion-collapse) {
-    animation-duration: var(--animation-medium-fast-duration);
-    animation-fill-mode: both;
+/*
+ * Noop
+ */
+
+.uk-motion-noop {
+    transition: all var(--transition-medium-fast-duration) var(--ease-in-out);
 }
 
-/* Motions
- ========================================================================== */
 
 /*
  * Collapse
@@ -47,35 +47,34 @@
  */
 
 .uk-motion-zoom {
+    animation-duration: var(--animation-medium-fast-duration);
+    animation-fill-mode: both;
     transform-origin: 0 0;
+    will-change: opacity, transform;
 
-    &-enter,
-    &-appear {
+    &-appear,
+    &-enter {
         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;
-    }
+        &-active {
+            animation-name: uk-scale-zoom-in;
+            animation-play-state: running;
+        }
 
-    &-enter-prepare,
-    &-appear-prepare {
-        transform: none;
+        &-prepare { transform: none; }
     }
 
     &-leave {
         animation-play-state: paused;
         animation-timing-function: var(--ease-in-out-circ);
-    }
 
-    &-leave-active {
-        animation-name: uk-scale-zoom-out;
-        animation-play-state: running;
+        &-active {
+            animation-name: uk-scale-zoom-out;
+            animation-play-state: running;
+        }
     }
 }
 
@@ -86,29 +85,30 @@
 
 .uk-motion-fade {
     animation-duration: var(--animation-fade-duration);
+    animation-fill-mode: both;
+    will-change: opacity;
 
-    &-enter,
-    &-appear {
+    &-appear,
+    &-enter {
         animation-timing-function: linear;
         opacity: 0;
-    }
 
-    &-enter-active,
-    &-appear-active {
-        animation-name: uk-fade;
-        animation-play-state: running;
+        &-active {
+            animation-name: uk-fade;
+            animation-play-state: running;
+        }
     }
 
     &-leave {
         animation-play-state: paused;
         animation-timing-function: linear;
-    }
 
-    &-leave-active {
-        animation-direction: reverse;
-        animation-name: uk-fade;
-        animation-play-state: running;
-        pointer-events: none;
+        &-active {
+            animation-direction: reverse;
+            animation-name: uk-fade;
+            animation-play-state: running;
+            pointer-events: none;
+        }
     }
 }
 
@@ -118,28 +118,31 @@
  */
 
 .uk-motion-scale-up {
-    &-enter,
-    &-appear {
+    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;
-    }
 
-    &-enter-active,
-    &-appear-active {
-        animation-name: uk-scale-up-in;
-        animation-play-state: running;
+        &-active {
+            animation-name: uk-scale-up-in;
+            animation-play-state: running;
+        }
     }
 
     &-leave {
         animation-play-state: paused;
         animation-timing-function: var(--ease-in-quint);
-    }
 
-    &-leave-active {
-        animation-name: uk-scale-up-out;
-        animation-play-state: running;
-        pointer-events: none;
+        &-active {
+            animation-name: uk-scale-up-out;
+            animation-play-state: running;
+            pointer-events: none;
+        }
     }
 }
 
@@ -148,28 +151,31 @@
  */
 
 .uk-motion-scale-down {
-    &-enter,
-    &-appear {
+    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;
-    }
 
-    &-enter-active,
-    &-appear-active {
-        animation-name: uk-scale-down-in;
-        animation-play-state: running;
+        &-active {
+            animation-name: uk-scale-down-in;
+            animation-play-state: running;
+        }
     }
 
     &-leave {
         animation-play-state: paused;
         animation-timing-function: var(--ease-in-quint);
-    }
 
-    &-leave-active {
-        animation-name: uk-scale-down-out;
-        animation-play-state: running;
-        pointer-events: none;
+        &-active {
+            animation-name: uk-scale-down-out;
+            animation-play-state: running;
+            pointer-events: none;
+        }
     }
 }
 
@@ -178,28 +184,31 @@
  */
 
 .uk-motion-scale-left {
-    &-enter,
-    &-appear {
+    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;
-    }
 
-    &-enter-active,
-    &-appear-active {
-        animation-name: uk-scale-left-in;
-        animation-play-state: running;
+        &-active {
+            animation-name: uk-scale-left-in;
+            animation-play-state: running;
+        }
     }
 
     &-leave {
         animation-play-state: paused;
         animation-timing-function: var(--ease-in-quint);
-    }
 
-    &-leave-active {
-        animation-name: uk-scale-left-out;
-        animation-play-state: running;
-        pointer-events: none;
+        &-active {
+            animation-name: uk-scale-left-out;
+            animation-play-state: running;
+            pointer-events: none;
+        }
     }
 }
 
@@ -208,127 +217,30 @@
  */
 
 .uk-motion-scale-right {
-    &-enter,
-    &-appear {
+    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;
-    }
 
-    &-enter-active,
-    &-appear-active {
-        animation-name: uk-scale-right-in;
-        animation-play-state: running;
+        &-active {
+            animation-name: uk-scale-right-in;
+            animation-play-state: running;
+        }
     }
 
     &-leave {
         animation-play-state: paused;
         animation-timing-function: var(--ease-in-quint);
-    }
-
-    &-leave-active {
-        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;
-            }
+        &-active {
+            animation-name: uk-scale-right-out;
+            animation-play-state: running;
+            pointer-events: none;
         }
     }
 }
@@ -339,6 +251,9 @@
  */
 
 .uk-motion-slide-top-small {
+    animation-duration: var(--animation-medium-fast-duration);
+    animation-fill-mode: both;
+
     &-enter,
     &-appear {
         animation-play-state: paused;
@@ -369,6 +284,9 @@
  */
 
 .uk-motion-slide-bottom-small {
+    animation-duration: var(--animation-medium-fast-duration);
+    animation-fill-mode: both;
+
     &-enter,
     &-appear {
         animation-play-state: paused;
@@ -399,6 +317,9 @@
  */
 
 .uk-motion-slide-left-small {
+    animation-duration: var(--animation-medium-fast-duration);
+    animation-fill-mode: both;
+
     &-enter,
     &-appear {
         animation-play-state: paused;
@@ -429,6 +350,9 @@
  */
 
 .uk-motion-slide-right-small {
+    animation-duration: var(--animation-medium-fast-duration);
+    animation-fill-mode: both;
+
     &-enter,
     &-appear {
         animation-play-state: paused;
@@ -688,3 +612,13 @@
         transform: scale(0.8);
     }
 }
+
+@keyframes uk-noop {
+    0% {
+        font-size: 0;
+    }
+
+    100% {
+        font-size: 1rem;
+    }
+}

package/dist/cjs/styles/overlay.scss

@@ -93,12 +93,6 @@
     @include hook-overlay-misc;
 }
 
-// @mixin hook-overlay(){}
-// @mixin hook-overlay-icon(){}
-// @mixin hook-overlay-default(){}
-// @mixin hook-overlay-primary(){}
-// @mixin hook-overlay-misc(){}
-
 
 // Vars
 // ========================================================================
@@ -106,6 +100,6 @@
 :root {
     --overlay-padding-horizontal: var(--global-gutter);
     --overlay-padding-vertical: var(--global-gutter);
-    --overlay-default-background: fade($global-background, 80%);
-    --overlay-primary-background: fade($global-secondary-background, 80%);
+    --overlay-default-background: #{$overlay-default-background};
+    --overlay-primary-background: #{$overlay-primary-background};
 }

package/dist/cjs/styles/pagination.scss

@@ -118,64 +118,17 @@
     @include hook-pagination-misc;
 }
 
-// @mixin hook-pagination() {}
-// @mixin hook-pagination-item() {}
-// @mixin hook-pagination-item-hover() {}
-// @mixin hook-pagination-item-active() {}
-// @mixin hook-pagination-item-disabled() {}
-// @mixin hook-pagination-misc() {}
-
-
-// Inverse
-// ========================================================================
-
-@mixin hook-inverse() {
-    .uk-pagination > * > * {
-        color: var(--inverse-pagination-item-color);
-        @if mixin-exists(hook-inverse-pagination-item) {
-            @include hook-inverse-pagination-item;
-        }
-    }
-
-    .uk-pagination > * > :hover,
-    .uk-pagination > * > :focus {
-        color: var(--inverse-pagination-item-hover-color);
-        @if mixin-exists(hook-inverse-pagination-item-hover) {
-            @include hook-inverse-pagination-item-hover;
-        }
-    }
-
-    .uk-pagination > .uk-active > * {
-        color: var(--inverse-pagination-item-active-color);
-        @if mixin-exists(hook-inverse-pagination-item-active) {
-            @include hook-inverse-pagination-item-active;
-        }
-    }
-
-    .uk-pagination > .uk-disabled > * {
-        color: var(--inverse-pagination-item-disabled-color);
-        @if mixin-exists(hook-inverse-pagination-item-disabled) {
-            @include hook-inverse-pagination-item-disabled;
-        }
-    }
-}
-
-// @mixin hook-inverse-pagination-item() {}
-// @mixin hook-inverse-pagination-item-hover() {}
-// @mixin hook-inverse-pagination-item-active() {}
-// @mixin hook-inverse-pagination-item-disabled() {}
-
 
 // Vars
 // ========================================================================
 
 :root {
-    --pagination-margin-horizontal: $pagination-margin-horizontal;
-    --pagination-item-padding-vertical: $pagination-item-padding-vertical;
-    --pagination-item-padding-horizontal: $pagination-item-padding-horizontal;
+    --pagination-margin-horizontal: #{$pagination-margin-horizontal};
+    --pagination-item-padding-vertical: #{$pagination-item-padding-vertical};
+    --pagination-item-padding-horizontal: #{$pagination-item-padding-horizontal};
     --pagination-item-color: var(--global-muted-color);
     --pagination-item-hover-color: var(--global-color);
-    --pagination-item-hover-text-decoration: $pagination-item-hover-text-decoration;
+    --pagination-item-hover-text-decoration: #{$pagination-item-hover-text-decoration};
     --pagination-item-active-color: var(--global-color);
     --pagination-item-disabled-color: var(--global-muted-color);
 

package/dist/cjs/styles/placeholder.scss

@@ -42,9 +42,6 @@
     @include hook-placeholder-misc;
 }
 
-// @mixin hook-placeholder() {}
-// @mixin hook-placeholder-misc() {}
-
 
 // Vars
 // ========================================================================

package/dist/cjs/styles/print.scss

@@ -52,8 +52,3 @@
         @include hook-print;
     }
 }
-
-// Hooks
-// ========================================================================
-
-// @mixin hook-print() {}

package/dist/cjs/styles/search.scss

@@ -173,7 +173,7 @@
  * Make `input` element clickable through icon, e.g. if it's a `span`
  */
 
-.uk-search .uk-search-icon:not(a):not(button):not(input) {
+.uk-search .uk-search-icon:not(a, button, input) {
     pointer-events: none;
 }
 
@@ -334,108 +334,6 @@
     @include hook-search-misc;
 }
 
-// @mixin hook-search-input() {}
-// @mixin hook-search-default-input() {}
-// @mixin hook-search-default-input-focus() {}
-// @mixin hook-search-navbar-input() {}
-// @mixin hook-search-large-input() {}
-// @mixin hook-search-toggle() {}
-// @mixin hook-search-toggle-hover() {}
-// @mixin hook-search-misc() {}
-
-
-// Inverse
-// ========================================================================
-
-@mixin hook-inverse() {
-    //
-    // Input
-    //
-
-    .uk-search-input {
-        color: var(--inverse-search-color);
-    }
-
-    .uk-search-input:-ms-input-placeholder {
-        color: var(--inverse-search-placeholder-color) !important;
-    }
-
-    .uk-search-input::placeholder {
-        color: var(--inverse-search-placeholder-color);
-    }
-
-
-    //
-    // Icon
-    //
-
-    .uk-search .uk-search-icon {
-        color: var(--inverse-search-icon-color);
-    }
-
-    .uk-search .uk-search-icon:hover {
-        color: var(--inverse-search-icon-color);
-    }
-
-    //
-    // Style modifier
-    //
-
-    .uk-search-default .uk-search-input {
-        background-color: var(--inverse-search-default-background);
-        @if mixin-exists(hook-inverse-search-default-input) {
-            @include hook-inverse-search-default-input;
-        }
-    }
-
-    .uk-search-default .uk-search-input:focus {
-        background-color: var(--inverse-search-default-focus-background);
-        @if mixin-exists(hook-inverse-search-default-input-focus) {
-            @include hook-inverse-search-default-input-focus;
-        }
-    }
-
-    .uk-search-navbar .uk-search-input {
-        background-color: var(--inverse-search-navbar-background);
-        @if mixin-exists(hook-inverse-search-navbar-input) {
-            @include hook-inverse-search-navbar-input;
-        }
-    }
-
-    .uk-search-large .uk-search-input {
-        background-color: var(--inverse-search-large-background);
-        @if mixin-exists(hook-inverse-search-large-input) {
-            @include hook-inverse-search-large-input;
-        }
-    }
-
-    //
-    // Toggle
-    //
-
-    .uk-search-toggle {
-        color: var(--inverse-search-toggle-color);
-        @if mixin-exists(hook-inverse-search-toggle) {
-            @include hook-inverse-search-toggle;
-        }
-    }
-
-    .uk-search-toggle:hover,
-    .uk-search-toggle:focus {
-        color: var(--inverse-search-toggle-hover-color);
-        @if mixin-exists(hook-inverse-search-toggle-hover) {
-            @include hook-inverse-search-toggle-hover;
-        }
-    }
-}
-
-// @mixin hook-inverse-search-default-input() {}
-// @mixin hook-inverse-search-default-input-focus() {}
-// @mixin hook-inverse-search-navbar-input() {}
-// @mixin hook-inverse-search-large-input() {}
-// @mixin hook-inverse-search-toggle() {}
-// @mixin hook-inverse-search-toggle-hover() {}
-
 
 // Vars
 // ========================================================================

package/dist/cjs/styles/sticky.scss

@@ -45,9 +45,9 @@
 // Hooks
 // ========================================================================
 
-@if mixin-exists(hook-sticky-misc) { @include hook-sticky-misc };
-
-// @mixin hook-sticky-misc() {}
+@if mixin-exists(hook-sticky-misc) {
+    @include hook-sticky-misc;
+}
 
 
 // Vars