@broxus/react-uikit 0.17.4 → 0.19.0

package/{dist/cjs/components/Drawer/index.scss → styles/drawer.scss}

@@ -19,11 +19,13 @@
 //
 // ========================================================================
 
+@use 'sass:meta';
+
 
 // Variables
 // ========================================================================
 
-@import '../../styles/variables.scss';
+@use 'variables' as *;
 
 
 /* ========================================================================
@@ -35,7 +37,7 @@
     inset: 0;
     position: fixed;
     z-index: var(--drawer-z-index);
-    @if mixin-exists(hook-drawer) {
+    @if meta.mixin-exists('hook-drawer') {
         @include hook-drawer;
     }
 }
@@ -73,15 +75,12 @@
 
 .uk-drawer-content-wrapper {
     position: absolute;
-    @if mixin-exists(hook-drawer-content-wrapper) {
+    transition: var(--drawer-transition-duration) var(--ease-in-out);
+    @if meta.mixin-exists('hook-drawer-content-wrapper') {
         @include hook-drawer-content-wrapper;
     }
 }
 
-.uk-drawer .uk-drawer-content-wrapper {
-    transition: var(--drawer-transition-duration) var(--ease-in-out);
-}
-
 .uk-drawer-content {
     background-clip: padding-box;
     background-color: var(--drawer-content-background);
@@ -95,7 +94,7 @@
     position: relative;
     width: 100%;
     z-index: 1;
-    @if mixin-exists(hook-drawer-content) {
+    @if meta.mixin-exists('hook-drawer-content') {
         @include hook-drawer-content;
     }
 }
@@ -517,14 +516,14 @@
     inset: 0;
     pointer-events: none;
     position: absolute;
-    @if mixin-exists(hook-drawer-mask) {
+    @if meta.mixin-exists('hook-drawer-mask') {
         @include hook-drawer-mask;
     }
 }
 
 .uk-drawer-animation .uk-drawer-mask {
     pointer-events: auto;
-    @if mixin-exists(hook-drawer-mask-open) {
+    @if meta.mixin-exists('hook-drawer-mask-open') {
         @include hook-drawer-mask-open;
     }
 }
@@ -543,7 +542,7 @@
     right: var(--drawer-close-position);
     top: var(--drawer-close-position);
     z-index: var(--drawer-z-index);
-    @if mixin-exists(hook-drawer-close) {
+    @if meta.mixin-exists('hook-drawer-close') {
         @include hook-drawer-close;
     }
 }
@@ -561,7 +560,7 @@
  */
 
 .uk-drawer-close:hover {
-    @if mixin-exists(hook-drawer-close-hover) {
+    @if meta.mixin-exists('hook-drawer-close-hover') {
         @include hook-drawer-close-hover;
     }
 }

package/{dist/cjs/components/Drop/index.scss → styles/drop.scss}

@@ -14,11 +14,13 @@
 //
 // ========================================================================
 
+@use 'sass:meta';
+
 
 // Variables
 // ========================================================================
 
-@import '../../styles/variables.scss';
+@use 'variables' as *;
 
 
 /* ========================================================================
@@ -53,14 +55,14 @@
     opacity: 0;
     pointer-events: none;
     position: fixed;
-    @if mixin-exists(hook-drop-mask) {
+    @if meta.mixin-exists('hook-drop-mask') {
         @include hook-drop-mask;
     }
 }
 
 .uk-drop-mask.uk-active {
     opacity: 1;
-    @if mixin-exists(hook-drop-mask-active) {
+    @if meta.mixin-exists('hook-drop-mask-active') {
         @include hook-drop-mask-active;
     }
 }
@@ -75,7 +77,7 @@
 // Hooks
 // ========================================================================
 
-@if mixin-exists(hook-drop-misc) {
+@if meta.mixin-exists('hook-drop-misc') {
     @include hook-drop-misc;
 }
 
@@ -84,6 +86,7 @@
 // ========================================================================
 
 :root {
+    --drop-mask-background: #{$drop-mask-background};
     --drop-margin: var(--global-margin);
     --drop-width: #{$drop-width};
     --drop-z-index: calc(var(--global-z-index) + 20);

package/{dist/cjs/components/Dropdown/index.scss → styles/dropdown.scss}

@@ -14,11 +14,13 @@
 //
 // ========================================================================
 
+@use 'sass:meta';
+
 
 // Variables
 // ========================================================================
 
-@import '../../styles/variables.scss';
+@use 'variables' as *;
 
 
 /* ========================================================================
@@ -40,7 +42,7 @@
     padding: var(--dropdown-padding); /* 3 */
     position: absolute; /* 1 */
     z-index: var(--dropdown-z-index); /* 1 */
-    @if mixin-exists(hook-dropdown) {
+    @if meta.mixin-exists('hook-dropdown') {
         @include hook-dropdown;
     }
 }
@@ -81,7 +83,7 @@
 
 .uk-dropdown-nav {
     white-space: nowrap;
-    @if mixin-exists(hook-dropdown-nav) {
+    @if meta.mixin-exists('hook-dropdown-nav') {
         @include hook-dropdown-nav;
     }
 }
@@ -92,7 +94,7 @@
 
 .uk-dropdown-nav > li > a {
     color: var(--dropdown-nav-item-color);
-    @if mixin-exists(hook-dropdown-nav-item) {
+    @if meta.mixin-exists('hook-dropdown-nav-item') {
         @include hook-dropdown-nav-item;
     }
 }
@@ -102,7 +104,7 @@
 .uk-dropdown-nav > li > a:focus,
 .uk-dropdown-nav > li.uk-active > a {
     color: var(--dropdown-nav-item-hover-color);
-    @if mixin-exists(hook-dropdown-nav-item-hover) {
+    @if meta.mixin-exists('hook-dropdown-nav-item-hover') {
         @include hook-dropdown-nav-item-hover;
     }
 }
@@ -113,7 +115,7 @@
 
 .uk-dropdown-nav .uk-nav-header {
     color: var(--dropdown-nav-header-color);
-    @if mixin-exists(hook-dropdown-nav-header) {
+    @if meta.mixin-exists('hook-dropdown-nav-header') {
         @include hook-dropdown-nav-header;
     }
 }
@@ -124,7 +126,7 @@
 
 .uk-dropdown-nav .uk-nav-divider {
     border-top: var(--dropdown-nav-divider-border-width) solid var(--dropdown-nav-divider-border);
-    @if mixin-exists(hook-dropdown-nav-divider) {
+    @if meta.mixin-exists('hook-dropdown-nav-divider') {
         @include hook-dropdown-nav-divider;
     }
 }
@@ -169,7 +171,7 @@
 // Hooks
 // ========================================================================
 
-@if mixin-exists(hook-dropdown-misc) {
+@if meta.mixin-exists('hook-dropdown-misc') {
     @include hook-dropdown-misc;
 }
 

package/{dist/esm/components/Flex/index.scss → styles/flex.scss}

@@ -5,11 +5,13 @@
 //
 // ========================================================================
 
+@use 'sass:meta';
+
 
 // Variables
 // ========================================================================
 
-@import '../../styles/variables.scss';
+@use 'variables' as *;
 
 
 /* ========================================================================
@@ -319,6 +321,6 @@
 // Hooks
 // ========================================================================
 
-@if mixin-exists(hook-flex-misc) {
+@if meta.mixin-exists('hook-flex-misc') {
     @include hook-flex-misc;
 }

package/{dist/esm/components/Form/index.scss → styles/form.scss}

@@ -29,11 +29,14 @@
 //
 // ========================================================================
 
+@use 'sass:meta';
+
 
 // Variables
 // ========================================================================
 
-@import '../../styles/variables.scss';
+@use 'variables' as *;
+@use 'mixin' as *;
 
 
 /* ========================================================================
@@ -68,7 +71,7 @@
     max-width: 100%; /* 5 */
     padding: 0 var(--form-padding-horizontal); /* 8 */
     width: 100%; /* 7 */
-    @if mixin-exists(hook-form) {
+    @if meta.mixin-exists('hook-form') {
         @include hook-form;
     }
 }
@@ -89,7 +92,7 @@
     /* 1 */
     overflow: visible;
     vertical-align: middle;
-    @if mixin-exists(hook-form-single-line) {
+    @if meta.mixin-exists('hook-form-single-line') {
         @include hook-form-single-line;
     }
 }
@@ -110,7 +113,7 @@
     padding-bottom: var(--form-padding-vertical);
     padding-top: var(--form-padding-vertical);
     vertical-align: top;
-    @if mixin-exists(hook-form-multi-line) {
+    @if meta.mixin-exists('hook-form-multi-line') {
         @include hook-form-multi-line;
     }
 }
@@ -180,7 +183,7 @@
     background-color: var(--form-focus-background);
     color: var(--form-focus-color);
     outline: none;
-    @if mixin-exists(hook-form-focus) {
+    @if meta.mixin-exists('hook-form-focus') {
         @include hook-form-focus;
     }
 }
@@ -190,7 +193,7 @@
 .uk-textarea:disabled {
     background-color: var(--form-disabled-background);
     color: var(--form-disabled-color);
-    @if mixin-exists(hook-form-disabled) {
+    @if meta.mixin-exists('hook-form-disabled') {
         @include hook-form-disabled;
     }
 }
@@ -288,7 +291,7 @@ textarea.uk-form-large,
 .uk-form-danger,
 .uk-form-danger:focus {
     color: var(--form-danger-color);
-    @if mixin-exists(hook-form-danger) {
+    @if meta.mixin-exists('hook-form-danger') {
         @include hook-form-danger;
     }
 }
@@ -300,7 +303,7 @@ textarea.uk-form-large,
 .uk-form-warning,
 .uk-form-warning:focus {
     color: var(--form-warning-color);
-    @if mixin-exists(hook-form-warning) {
+    @if meta.mixin-exists('hook-form-warning') {
         @include hook-form-warning;
     }
 }
@@ -312,7 +315,7 @@ textarea.uk-form-large,
 .uk-form-success,
 .uk-form-success:focus {
     color: var(--form-success-color);
-    @if mixin-exists(hook-form-success) {
+    @if meta.mixin-exists('hook-form-success') {
         @include hook-form-success;
     }
 }
@@ -323,13 +326,13 @@ textarea.uk-form-large,
 
 .uk-form-blank {
     background: none;
-    @if mixin-exists(hook-form-blank) {
+    @if meta.mixin-exists('hook-form-blank') {
         @include hook-form-blank;
     }
 }
 
 .uk-form-blank:focus {
-    @if mixin-exists(hook-form-blank-focus) {
+    @if meta.mixin-exists('hook-form-blank-focus') {
         @include hook-form-blank-focus;
     }
 }
@@ -384,7 +387,7 @@ input.uk-form-width-xsmall {
 
 .uk-input[list]:hover,
 .uk-input[list]:focus {
-    @if mixin-exists(svg-fill) {
+    @if meta.mixin-exists('svg-fill') {
         @include svg-fill($form-icon-datalist-image-path, '#000', $form-datalist-icon-color);
     }
 }
@@ -414,7 +417,7 @@ input.uk-form-width-xsmall {
 
     /* 1 */
     width: 100%;
-    @if mixin-exists(hook-form-legend) {
+    @if meta.mixin-exists('hook-form-legend') {
         @include hook-form-legend;
     }
 }
@@ -486,7 +489,7 @@ input.uk-form-width-xsmall {
  ========================================================================== */
 
 .uk-form-label {
-    @if mixin-exists(hook-form-label) {
+    @if meta.mixin-exists('hook-form-label') {
         @include hook-form-label;
     }
 }
@@ -502,7 +505,7 @@ input.uk-form-width-xsmall {
 .uk-form-stacked .uk-form-label {
     display: block;
     margin-bottom: var(--form-stacked-margin-bottom);
-    @if mixin-exists(hook-form-stacked-label) {
+    @if meta.mixin-exists('hook-form-stacked-label') {
         @include hook-form-stacked-label;
     }
 }
@@ -517,7 +520,7 @@ input.uk-form-width-xsmall {
     .uk-form-horizontal .uk-form-label {
         display: block;
         margin-bottom: var(--form-stacked-margin-bottom);
-        @if mixin-exists(hook-form-stacked-label) {
+        @if meta.mixin-exists('hook-form-stacked-label') {
             @include hook-form-stacked-label;
         }
     }
@@ -529,7 +532,7 @@ input.uk-form-width-xsmall {
         float: left;
         margin-top: var(--form-horizontal-label-margin-top);
         width: var(--form-horizontal-label-width);
-        @if mixin-exists(hook-form-horizontal-label) {
+        @if meta.mixin-exists('hook-form-horizontal-label') {
             @include hook-form-horizontal-label;
         }
     }
@@ -588,7 +591,7 @@ input.uk-form-width-xsmall {
 // Hooks
 // ========================================================================
 
-@if mixin-exists(hook-form-misc) {
+@if meta.mixin-exists('hook-form-misc') {
     @include hook-form-misc;
 }
 

package/{dist/cjs/components/Grid/index.scss → styles/grid.scss}

@@ -23,11 +23,13 @@
 //
 // ========================================================================
 
+@use 'sass:meta';
+
 
 // Variables
 // ========================================================================
 
-@import '../../styles/variables.scss';
+@use 'variables' as *;
 
 
 /* ========================================================================
@@ -43,19 +45,11 @@
 
 .uk-grid {
     display: flex;
-
-    /* 1 */
-    flex-wrap: wrap;
-
-    /* 2 */
-    list-style: none;
-
-    /* 3 */
-    margin: 0 0 0 calc(var(--grid-gutter-horizontal) * -1);
+    flex-wrap: wrap; /* 1 */
+    list-style: none; /* 2 */
+    margin-left: calc(var(--grid-gutter-horizontal) * -1); /* 3 */
     padding: 0;
-
-    /* 4 */
-    row-gap: var(--grid-gutter-vertical);
+    row-gap: var(--grid-gutter-vertical); /* 4 */
 }
 
 /*
@@ -361,7 +355,7 @@
     left: var(--grid-gutter-horizontal);
     position: absolute;
     top: 0;
-    @if mixin-exists(hook-grid-divider-horizontal) {
+    @if meta.mixin-exists('hook-grid-divider-horizontal') {
         @include hook-grid-divider-horizontal
     };
 }
@@ -374,7 +368,7 @@
     position: absolute;
     right: 0;
     top: calc(var(--grid-gutter-vertical) * -1);
-    @if mixin-exists(hook-grid-divider-vertical) {
+    @if meta.mixin-exists('hook-grid-divider-vertical') {
         @include hook-grid-divider-vertical
     };
 }
@@ -621,7 +615,7 @@
 // Hooks
 // ========================================================================
 
-@if mixin-exists(hook-grid-misc) {
+@if meta.mixin-exists('hook-grid-misc') {
     @include hook-grid-misc
 }
 

package/{dist/cjs/components/Heading/index.scss → styles/heading.scss}

@@ -9,11 +9,13 @@
 //
 // ========================================================================
 
+@use 'sass:meta';
+
 
 // Variables
 // ========================================================================
 
-@import '../../styles/variables.scss';
+@use 'variables' as *;
 
 
 /* ========================================================================
@@ -23,7 +25,7 @@
 .uk-heading-small {
     font-size: var(--heading-small-font-size);
     line-height: var(--heading-small-line-height);
-    @if mixin-exists(hook-heading-small) {
+    @if meta.mixin-exists('hook-heading-small') {
         @include hook-heading-small;
     }
 }
@@ -31,7 +33,7 @@
 .uk-heading-medium {
     font-size: var(--heading-medium-font-size);
     line-height: var(--heading-medium-line-height);
-    @if mixin-exists(hook-heading-medium) {
+    @if meta.mixin-exists('hook-heading-medium') {
         @include hook-heading-medium;
     }
 }
@@ -39,7 +41,7 @@
 .uk-heading-large {
     font-size: var(--heading-large-font-size);
     line-height: var(--heading-large-line-height);
-    @if mixin-exists(hook-heading-large) {
+    @if meta.mixin-exists('hook-heading-large') {
         @include hook-heading-large;
     }
 }
@@ -47,7 +49,7 @@
 .uk-heading-xlarge {
     font-size: var(--heading-xlarge-font-size);
     line-height: var(--heading-xlarge-line-height);
-    @if mixin-exists(hook-heading-xlarge) {
+    @if meta.mixin-exists('hook-heading-xlarge') {
         @include hook-heading-xlarge;
     }
 }
@@ -55,7 +57,7 @@
 .uk-heading-2xlarge {
     font-size: var(--heading-2xlarge-font-size);
     line-height: var(--heading-2xlarge-line-height);
-    @if mixin-exists(hook-heading-2xlarge) {
+    @if meta.mixin-exists('hook-heading-2xlarge') {
         @include hook-heading-2xlarge;
     }
 }
@@ -109,7 +111,7 @@
 .uk-heading-divider {
     border-bottom: var(--heading-divider-border-width) solid var(--heading-divider-border);
     padding-bottom: var(--heading-divider-padding-bottom);
-    @if mixin-exists(hook-heading-divider) {
+    @if meta.mixin-exists('hook-heading-divider') {
         @include hook-heading-divider;
     }
 }
@@ -143,7 +145,7 @@
     position: relative;
     top: var(--heading-bullet-top);
     vertical-align: middle;
-    @if mixin-exists(hook-heading-bullet) {
+    @if meta.mixin-exists('hook-heading-bullet') {
         @include hook-heading-bullet;
     }
 }
@@ -187,7 +189,7 @@
 
     /* 2 */
     width: var(--heading-line-width);
-    @if mixin-exists(hook-heading-line) {
+    @if meta.mixin-exists('hook-heading-line') {
         @include hook-heading-line;
     }
 }
@@ -206,7 +208,7 @@
 // Hooks
 // ========================================================================
 
-@if mixin-exists(hook-heading-misc) {
+@if meta.mixin-exists('hook-heading-misc') {
     @include hook-heading-misc;
 }
 

package/{dist/esm/styles → styles}/height.scss

@@ -5,11 +5,13 @@
 //
 // ========================================================================
 
+@use 'sass:meta';
+
 
 // Variables
 // ========================================================================
 
-@import 'variables.scss';
+@use 'variables' as *;
 
 
 /* ========================================================================
@@ -55,7 +57,7 @@
 // Hooks
 // ========================================================================
 
-@if mixin-exists(hook-height-misc) {
+@if meta.mixin-exists('hook-height-misc') {
     @include hook-height-misc;
 }
 

package/{dist/esm/components/Icon/index.scss → styles/icon.scss}

@@ -11,11 +11,13 @@
 //
 // ========================================================================
 
+@use 'sass:meta';
+
 
 // Variables
 // ========================================================================
 
-@import '../../styles/variables.scss';
+@use 'variables' as *;
 
 
 /* ========================================================================
@@ -108,9 +110,9 @@ button.uk-icon:not(:disabled) {
 
 .uk-icon-material {
     &:not(.uk-icon-button) {
-        height: var(--icon-size, 20px);
-        min-width: var(--icon-size, 20px);
-        width: var(--icon-size, 20px);
+        height: var(--icon-size, 1.4rem);
+        min-width: var(--icon-size, 1.4rem);
+        width: var(--icon-size, 1.4rem);
     }
 
     i {
@@ -122,7 +124,7 @@ button.uk-icon:not(:disabled) {
 
         /* Support for IE. */
         font-feature-settings: 'liga';
-        font-size: var(--icon-size, 20px);
+        font-size: var(--icon-size, 1.4rem);
 
         /* Support for all WebKit browsers. */
         -webkit-font-smoothing: antialiased;
@@ -159,7 +161,7 @@ button.uk-icon:not(:disabled) {
 
 .uk-icon-link {
     color: var(--icon-link-color);
-    @if mixin-exists(hook-icon-link) {
+    @if meta.mixin-exists('hook-icon-link') {
         @include hook-icon-link;
     }
 }
@@ -169,7 +171,7 @@ button.uk-icon:not(:disabled) {
     color: var(--icon-link-hover-color);
     outline: none;
     text-decoration: none;
-    @if mixin-exists(hook-icon-link-hover) {
+    @if meta.mixin-exists('hook-icon-link-hover') {
         @include hook-icon-link-hover;
     }
 }
@@ -178,7 +180,7 @@ button.uk-icon:not(:disabled) {
 .uk-icon-link:active,
 .uk-active > .uk-icon-link {
     color: var(--icon-link-active-color);
-    @if mixin-exists(hook-icon-link-active) {
+    @if meta.mixin-exists('hook-icon-link-active') {
         @include hook-icon-link-active;
     }
 }
@@ -199,7 +201,7 @@ button.uk-icon:not(:disabled) {
     justify-content: center; /* 1 */
     vertical-align: middle;
     width: var(--icon-button-size);
-    @if mixin-exists(hook-icon-button) {
+    @if meta.mixin-exists('hook-icon-button') {
         @include hook-icon-button;
     }
 }
@@ -211,7 +213,7 @@ button.uk-icon:not(:disabled) {
     color: var(--icon-button-hover-color);
     outline: none;
     text-decoration: none;
-    @if mixin-exists(hook-icon-button-hover) {
+    @if meta.mixin-exists('hook-icon-button-hover') {
         @include hook-icon-button-hover;
     }
 }
@@ -221,7 +223,7 @@ button.uk-icon:not(:disabled) {
 .uk-active > .uk-icon-button {
     background-color: var(--icon-button-active-background);
     color: var(--icon-button-active-color);
-    @if mixin-exists(hook-icon-button-active) {
+    @if meta.mixin-exists('hook-icon-button-active') {
         @include hook-icon-button-active;
     }
 }
@@ -230,7 +232,7 @@ button.uk-icon:not(:disabled) {
 // Hooks
 // ========================================================================
 
-@if mixin-exists(hook-icon-misc) {
+@if meta.mixin-exists('hook-icon-misc') {
     @include hook-icon-misc;
 }