@broxus/react-uikit 0.3.0 → 0.4.0

package/dist/esm/styles/_import.components.scss

@@ -4,56 +4,61 @@
 @import 'base.scss';
 
 // Elements
-@import '../components/Link/index.scss';
-@import '../components/Heading/index.scss';
-@import '../components/Divider/index.scss';
-@import '../components/List/index.scss';
-@import '../components/DescriptionList/index.scss';
+@import 'link.scss';
+@import 'heading.scss';
+@import 'divider.scss';
+@import 'list.scss';
+@import 'description-list.scss';
 
 // @import '../components/Table/index.scss';
-@import '../components/Icon/index.scss';
-@import '../components/Form/index.scss'; // After: Icon
-@import '../components/Control/index.scss'; // After: Icon
-@import '../components/Button/index.scss';
-@import '../components/Progress/index.scss';
+@import 'icon.scss';
+@import 'form.scss'; // After: Icon
+@import 'control.scss'; // After: Icon
+@import 'button.scss';
+@import 'progress.scss';
+@import 'switch.scss';
 
 // Layout
-@import '../components/Section/index.scss';
-@import '../components/Container/index.scss';
-@import '../components/Grid/index.scss';
-@import '../components/Tile/index.scss';
-@import '../components/Card/index.scss';
+@import 'section.scss';
+@import 'container.scss';
+@import 'grid.scss';
+@import 'tile.scss';
+@import 'card.scss';
 
 // Common
-@import '../components/Close/index.scss'; // After: Icon
-@import '../components/Spinner/index.scss'; // After: Icon
+@import 'close.scss'; // After: Icon
+@import 'spinner.scss'; // After: Icon
 // @import 'totop.scss'; // After: Icon
-@import '../components/Alert/index.scss'; // After: Close
-@import '../components/Badge/index.scss';
-@import '../components/Label/index.scss';
+// @import 'marker.scss'; // After: Icon
+@import 'alert.scss'; // After: Close
+// @import 'placeholder.scss';
+@import 'badge.scss';
+@import 'label.scss';
 
-// @import './components/Overlay/index.scss'; // After: Icon
-@import '../components/Article/index.scss'; // After: Subnav
-// @import 'comment.scss'; // After: Subnav
+// @import 'overlay.scss'; // After: Icon
+@import 'article.scss'; // After: Subnav
+// @import 'comment.scss';
 // @import 'search.scss'; // After: Icon
 
 // Navs
-@import '../components/Nav/index.scss';
-@import '../components/Navbar/index.scss'; // After: Card, Grid, Nav, Icon, Search
-// @import '../components/Subnav/index.scss';
-@import '../components/Breadcrumb/index.scss';
+@import 'nav.scss';
+@import 'navbar.scss'; // After: Card, Grid, Nav, Icon, Search
+// @import 'subnav.scss';
+@import 'breadcrumb.scss';
 
 // @import 'pagination.scss';
-// @import 'tab.scss';
-// @import 'slidenav.scss'; // After: Icon
-@import '../components/Dotnav/index.scss';
+@import 'tabs';
+@import 'dotnav.scss';
 
-// @import '../components/Thumbnav/index.scss';
+// @import 'thumbnav.scss';
+// @import 'iconnav.scss';
 
 // JavaScript
-@import '../components/Accordion/index.scss'; // After: Card
-@import '../components/Drop/index.scss'; // After: Card
-@import '../components/Dropdown/index.scss'; // After: Card
-@import '../components/Modal/index.scss'; // After: Close
+@import 'accordion.scss'; // After: Card
+@import 'drop.scss'; // After: Card
+@import 'dropdown.scss'; // After: Card
+@import 'modal.scss'; // After: Close
+@import 'drawer.scss';
+
 // @import 'sticky.scss';
 // @import '../components/Switcher/index.scss';

package/dist/esm/styles/_import.scss

@@ -16,6 +16,7 @@
 @import 'control.scss';
 @import 'button.scss';
 @import 'progress.scss';
+@import 'switch.scss';
 
 // Layout
 @import 'section.scss';
@@ -62,7 +63,7 @@
 @import 'breadcrumb.scss';
 
 // @import 'pagination.scss';
-@import 'tab.scss';
+@import 'tabs';
 @import 'dotnav.scss';
 
 // @import 'thumbnav.scss';

package/dist/esm/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/esm/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/esm/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/esm/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);