@broxus/react-uikit 0.3.0 → 0.4.0

package/dist/cjs/styles/animation.scss

@@ -35,8 +35,8 @@
 
 [class*='uk-animation-'] {
     animation-duration: var(--animation-duration);
-    animation-timing-function: var(--ease-out);
     animation-fill-mode: both;
+    animation-timing-function: var(--ease-out);
 }
 
 
@@ -48,8 +48,8 @@
  */
 
 .uk-animation-fade {
-    animation-name: uk-fade;
     animation-duration: var(--animation-fade-duration);
+    animation-name: uk-fade;
     animation-timing-function: linear;
 }
 
@@ -102,8 +102,8 @@
  */
 
 .uk-animation-kenburns {
-    animation-name: uk-scale-kenburns;
     animation-duration: var(--animation-kenburns-duration);
+    animation-name: uk-scale-kenburns;
 }
 
 /*
@@ -121,8 +121,8 @@
  */
 
 .uk-animation-stroke {
-    animation-name: uk-stroke;
     animation-duration: var(--animation-stroke-duration);
+    animation-name: uk-stroke;
     stroke-dasharray: var(--uk-animation-stroke);
 }
 
@@ -131,8 +131,8 @@
  ========================================================================== */
 
 .uk-animation-reverse {
-    animation-timing-function: var(--ease-in);
     animation-direction: reverse;
+    animation-timing-function: var(--ease-in);
 }
 
 
@@ -187,13 +187,13 @@
 
 @keyframes uk-fade-top {
     0% {
-        transform: translateY(-100%);
         opacity: 0;
+        transform: translateY(-100%);
     }
 
     100% {
-        transform: translateY(0);
         opacity: 1;
+        transform: translateY(0);
     }
 }
 
@@ -203,13 +203,13 @@
 
 @keyframes uk-fade-bottom {
     0% {
-        transform: translateY(100%);
         opacity: 0;
+        transform: translateY(100%);
     }
 
     100% {
-        transform: translateY(0);
         opacity: 1;
+        transform: translateY(0);
     }
 }
 
@@ -219,13 +219,13 @@
 
 @keyframes uk-fade-left {
     0% {
-        transform: translateX(-100%);
         opacity: 0;
+        transform: translateX(-100%);
     }
 
     100% {
-        transform: translateX(0);
         opacity: 1;
+        transform: translateX(0);
     }
 }
 
@@ -235,13 +235,13 @@
 
 @keyframes uk-fade-right {
     0% {
-        transform: translateX(100%);
         opacity: 0;
+        transform: translateX(100%);
     }
 
     100% {
-        transform: translateX(0);
         opacity: 1;
+        transform: translateX(0);
     }
 }
 
@@ -251,13 +251,13 @@
 
 @keyframes uk-fade-top-small {
     0% {
-        transform: translateY(unquote('calc(var(--animation-slide-small-translate) * -1)'));
         opacity: 0;
+        transform: translateY(unquote('calc(var(--animation-slide-small-translate) * -1)'));
     }
 
     100% {
-        transform: translateY(0);
         opacity: 1;
+        transform: translateY(0);
     }
 }
 
@@ -267,13 +267,13 @@
 
 @keyframes uk-fade-bottom-small {
     0% {
-        transform: translateY(var(--animation-slide-small-translate));
         opacity: 0;
+        transform: translateY(var(--animation-slide-small-translate));
     }
 
     100% {
-        transform: translateY(0);
         opacity: 1;
+        transform: translateY(0);
     }
 }
 
@@ -283,13 +283,13 @@
 
 @keyframes uk-fade-left-small {
     0% {
-        transform: translateX(unquote('calc(var(--animation-slide-small-translate) * -1)'));
         opacity: 0;
+        transform: translateX(unquote('calc(var(--animation-slide-small-translate) * -1)'));
     }
 
     100% {
-        transform: translateX(0);
         opacity: 1;
+        transform: translateX(0);
     }
 }
 
@@ -299,13 +299,13 @@
 
 @keyframes uk-fade-right-small {
     0% {
-        transform: translateX(var(--animation-slide-small-translate));
         opacity: 0;
+        transform: translateX(var(--animation-slide-small-translate));
     }
 
     100% {
-        transform: translateX(0);
         opacity: 1;
+        transform: translateX(0);
     }
 }
 
@@ -315,13 +315,13 @@
 
 @keyframes uk-fade-top-medium {
     0% {
-        transform: translateY(unquote('calc(var(--animation-slide-medium-translate) * -1)'));
         opacity: 0;
+        transform: translateY(unquote('calc(var(--animation-slide-medium-translate) * -1)'));
     }
 
     100% {
-        transform: translateY(0);
         opacity: 1;
+        transform: translateY(0);
     }
 }
 
@@ -331,13 +331,13 @@
 
 @keyframes uk-fade-bottom-medium {
     0% {
-        transform: translateY(var(--animation-slide-medium-translate));
         opacity: 0;
+        transform: translateY(var(--animation-slide-medium-translate));
     }
 
     100% {
-        transform: translateY(0);
         opacity: 1;
+        transform: translateY(0);
     }
 }
 
@@ -347,13 +347,13 @@
 
 @keyframes uk-fade-left-medium {
     0% {
-        transform: translateX(unquote('calc(var(--animation-slide-medium-translate) * -1)'));
         opacity: 0;
+        transform: translateX(unquote('calc(var(--animation-slide-medium-translate) * -1)'));
     }
 
     100% {
-        transform: translateX(0);
         opacity: 1;
+        transform: translateX(0);
     }
 }
 
@@ -363,13 +363,13 @@
 
 @keyframes uk-fade-right-medium {
     0% {
-        transform: translateX(var(--animation-slide-medium-translate));
         opacity: 0;
+        transform: translateX(var(--animation-slide-medium-translate));
     }
 
     100% {
-        transform: translateX(0);
         opacity: 1;
+        transform: translateX(0);
     }
 }
 
@@ -379,13 +379,13 @@
 
 @keyframes uk-fade-scale-02 {
     0% {
-        transform: scale(0.2);
         opacity: 0;
+        transform: scale(0.2);
     }
 
     100% {
-        transform: scale(1);
         opacity: 1;
+        transform: scale(1);
     }
 }
 
@@ -395,13 +395,13 @@
 
 @keyframes uk-fade-scale-18 {
     0% {
-        transform: scale(1.8);
         opacity: 0;
+        transform: scale(1.8);
     }
 
     100% {
-        transform: scale(1);
         opacity: 1;
+        transform: scale(1);
     }
 }
 
@@ -441,6 +441,22 @@
     100% { stroke-dashoffset: 0; }
 }
 
+/*
+ * Wave
+ */
+
+@keyframes uk-wave-effect {
+    0% {
+        opacity: 0.5;
+        transform: scale(1);
+    }
+
+    100% {
+        opacity: 0;
+        transform: scale(1.6);
+    }
+}
+
 
 // Hooks
 // ========================================================================

package/dist/cjs/styles/column.scss

@@ -143,7 +143,7 @@
     --column-gutter: var(--global-gutter);
     --column-gutter-l: var(--global-medium-gutter);
     --column-divider-rule-color: var(--global-border);
-    --column-divider-rule-width: $column-divider-rule-width;
+    --column-divider-rule-width: #{$column-divider-rule-width};
 
     // Inverse
     --inverse-column-divider-rule-color: var(--inverse-global-border);

package/dist/cjs/styles/leader.scss

@@ -63,23 +63,6 @@
     @include hook-leader-misc;
 }
 
-// @mixin hook-leader() {}
-// @mixin hook-leader-misc() {}
-
-
-// Inverse
-// ========================================================================
-
-@mixin hook-inverse() {
-    .uk-leader-fill::after {
-        @if  mixin-exists(hook-inverse-leader) {
-            @include hook-inverse-leader;
-        }
-    }
-}
-
-// @mixin hook-inverse-leader() {}
-
 
 // Vars
 // ========================================================================

package/dist/cjs/styles/marker.scss

@@ -46,41 +46,12 @@
     @include hook-marker-misc;
 }
 
-// @mixin hook-marker() {}
-// @mixin hook-marker-hover() {}
-// @mixin hook-marker-misc() {}
-
-
-// Inverse
-// ========================================================================
-
-@mixin hook-inverse() {
-    .uk-marker {
-        background: var(--inverse-marker-background);
-        color: var(--inverse-marker-color);
-        @if mixin-exists(hook-inverse-marker) {
-            @include hook-inverse-marker;
-        }
-    }
-
-    .uk-marker:hover,
-    .uk-marker:focus {
-        color: var(--inverse-marker-hover-color);
-        @if mixin-exists(hook-inverse-marker-hover) {
-            @include hook-inverse-marker-hover;
-        }
-    }
-}
-
-// @mixin hook-inverse-marker() {}
-// @mixin hook-inverse-marker-hover() {}
-
 
 // Vars
 // ========================================================================
 
 :root {
-    --marker-padding: $marker-padding;
+    --marker-padding: #{$marker-padding};
     --marker-background: var(--global-secondary-background);
     --marker-color: var(--global-inverse-color);
     --marker-hover-color: var(--global-inverse-color);