@broxus/react-uikit 0.17.4 → 0.19.0

package/{dist/cjs/components/Iconnav/index.scss → styles/iconnav.scss}

@@ -9,11 +9,13 @@
 //
 // ========================================================================
 
+@use 'sass:meta';
+
 
 // Variables
 // ========================================================================
 
-@import '../../styles/variables.scss';
+@use 'variables' as *;
 
 
 /* ========================================================================
@@ -36,7 +38,7 @@
     /* 2 */
     margin: 0 0 0 /* 3 */ calc(var(--iconnav-margin-horizontal) * -1);
     padding: 0;
-    @if mixin-exists(hook-iconnav) {
+    @if meta.mixin-exists('hook-iconnav') {
         @include hook-iconnav;
     }
 }
@@ -67,7 +69,7 @@
 
     /* 1 */
     display: block;
-    @if mixin-exists(hook-iconnav-item) {
+    @if meta.mixin-exists('hook-iconnav-item') {
         @include hook-iconnav-item;
     }
 }
@@ -77,7 +79,7 @@
 .uk-iconnav > * > a:focus {
     color: var(--iconnav-item-hover-color);
     outline: none;
-    @if mixin-exists(hook-iconnav-item-hover) {
+    @if meta.mixin-exists('hook-iconnav-item-hover') {
         @include hook-iconnav-item-hover;
     }
 }
@@ -85,7 +87,7 @@
 /* Active */
 .uk-iconnav > .uk-active > a {
     color: var(--iconnav-item-active-color);
-    @if mixin-exists(hook-iconnav-item-active) {
+    @if meta.mixin-exists('hook-iconnav-item-active') {
         @include hook-iconnav-item-active;
     }
 }
@@ -118,7 +120,7 @@
 // Hooks
 // ========================================================================
 
-@if mixin-exists(hook-iconnav-misc) {
+@if meta.mixin-exists('hook-iconnav-misc') {
     @include hook-iconnav-misc;
 }
 

package/{dist/cjs/components/Control/Input/Number/index.scss → styles/input-number.scss}

@@ -66,7 +66,7 @@
     background-color: transparent;
     border: 0 none;
     border-radius: 0;
-    height: 2em;
+    height: calc(2em - var(--control-border-width) * 2);
     opacity: 1;
     order: 99;
 }

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

@@ -6,11 +6,14 @@
 //
 // ========================================================================
 
+@use 'sass:meta';
+
 
 // Variables
 // ========================================================================
 
-@import 'variables.scss';
+@use 'variables' as *;
+@use 'mixins' as *;
 
 
 /* ========================================================================
@@ -25,7 +28,7 @@
 
 @if $inverse-global-color-mode == light {
     .uk-light {
-        @if mixin-exists(hook-inverse) {
+        @if meta.mixin-exists('hook-inverse') {
             @include hook-inverse;
         }
     }
@@ -33,7 +36,7 @@
 
 @if $inverse-global-color-mode == dark {
     .uk-dark {
-        @if mixin-exists(hook-inverse) {
+        @if meta.mixin-exists('hook-inverse') {
             @include hook-inverse;
         }
     }

package/{dist/esm/components/Label/index.scss → styles/label.scss}

@@ -10,11 +10,13 @@
 //
 // ========================================================================
 
+@use 'sass:meta';
+
 
 // Variables
 // ========================================================================
 
-@import '../../styles/variables.scss';
+@use 'variables' as *;
 
 
 /* ========================================================================
@@ -31,7 +33,7 @@
     padding: var(--label-padding-vertical) var(--label-padding-horizontal);
     vertical-align: middle;
     white-space: nowrap;
-    @if mixin-exists(hook-label) {
+    @if meta.mixin-exists('hook-label') {
         @include hook-label;
     }
 }
@@ -57,7 +59,7 @@
 .uk-label-success {
     background-color: var(--label-success-background);
     color: var(--label-success-color);
-    @if mixin-exists(hook-label-success) {
+    @if meta.mixin-exists('hook-label-success') {
         @include hook-label-success;
     }
 }
@@ -69,7 +71,7 @@
 .uk-label-warning {
     background-color: var(--label-warning-background);
     color: var(--label-warning-color);
-    @if mixin-exists(hook-label-warning) {
+    @if meta.mixin-exists('hook-label-warning') {
         @include hook-label-warning;
     }
 }
@@ -81,7 +83,7 @@
 .uk-label-danger {
     background-color: var(--label-danger-background);
     color: var(--label-danger-color);
-    @if mixin-exists(hook-label-danger) {
+    @if meta.mixin-exists('hook-label-danger') {
         @include hook-label-danger;
     }
 }
@@ -90,7 +92,7 @@
 // Hooks
 // ========================================================================
 
-@if mixin-exists(hook-label-misc) {
+@if meta.mixin-exists('hook-label-misc') {
     @include hook-label-misc;
 }
 
@@ -99,16 +101,16 @@
 // ========================================================================
 
 :root {
-    --label-padding-vertical: #{$label-padding-vertical};
     --label-padding-horizontal: var(--global-small-margin);
+    --label-padding-vertical: #{$label-padding-vertical};
     --label-background: var(--global-primary-background);
     --label-border-radius: #{$label-border-radius};
-    --label-line-height: var(--global-line-height);
     --label-font-size: var(--global-small-font-size);
-    --label-large-padding-vertical: var(--global-xsmall-margin);
+    --label-line-height: var(--global-line-height);
     --label-large-padding-horizontal: var(--global-margin);
-    --label-large-line-height: var(--global-line-height);
+    --label-large-padding-vertical: var(--global-xsmall-margin);
     --label-large-font-size: var(--global-small-font-size);
+    --label-large-line-height: var(--global-line-height);
     --label-color: var(--global-inverse-color);
     --label-success-background: var(--global-success-background);
     --label-success-color: var(--global-inverse-color);

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

@@ -5,11 +5,13 @@
 //
 // ========================================================================
 
+@use 'sass:meta';
+
 
 // Variables
 // ========================================================================
 
-@import 'variables.scss';
+@use 'variables' as *;
 
 
 /* ========================================================================

package/{dist/cjs/components/Link/index.scss → styles/link.scss}

@@ -10,11 +10,13 @@
 //
 // ========================================================================
 
+@use 'sass:meta';
+
 
 // Variables
 // ========================================================================
 
-@import '../../styles/variables.scss';
+@use 'variables' as *;
 
 
 /* ========================================================================
@@ -29,7 +31,7 @@
 a.uk-link-muted,
 .uk-link-muted a {
     color: var(--link-muted-color);
-    @if mixin-exists(hook-link-muted) {
+    @if meta.mixin-exists('hook-link-muted') {
         @include hook-link-muted;
     }
 }
@@ -39,7 +41,7 @@ a.uk-link-muted:hover,
 .uk-link-toggle:hover .uk-link-muted,
 .uk-link-toggle:focus .uk-link-muted {
     color: var(--link-muted-hover-color);
-    @if mixin-exists(hook-link-muted-hover) {
+    @if meta.mixin-exists('hook-link-muted-hover') {
         @include hook-link-muted-hover;
     }
 }
@@ -52,7 +54,7 @@ a.uk-link-muted:hover,
 a.uk-link-text,
 .uk-link-text a {
     color: inherit;
-    @if mixin-exists(hook-link-text) {
+    @if meta.mixin-exists('hook-link-text') {
         @include hook-link-text;
     }
 }
@@ -62,7 +64,7 @@ a.uk-link-text:hover,
 .uk-link-toggle:hover .uk-link-text,
 .uk-link-toggle:focus .uk-link-text {
     color: var(--link-text-hover-color);
-    @if mixin-exists(hook-link-text-hover) {
+    @if meta.mixin-exists('hook-link-text-hover') {
         @include hook-link-text-hover;
     }
 }
@@ -75,7 +77,7 @@ a.uk-link-text:hover,
 a.uk-link-heading,
 .uk-link-heading a {
     color: inherit;
-    @if mixin-exists(hook-link-heading) {
+    @if meta.mixin-exists('hook-link-heading') {
         @include hook-link-heading;
     }
 }
@@ -86,7 +88,7 @@ a.uk-link-heading:hover,
 .uk-link-toggle:focus .uk-link-heading {
     color: var(--link-heading-hover-color);
     text-decoration: var(--link-heading-hover-text-decoration);
-    @if mixin-exists(hook-link-heading-hover) {
+    @if meta.mixin-exists('hook-link-heading-hover') {
         @include hook-link-heading-hover;
     }
 }
@@ -104,7 +106,7 @@ a.uk-link-reset,
 .uk-link-reset a {
     color: inherit !important;
     text-decoration: none !important;
-    @if mixin-exists(hook-link-reset) {
+    @if meta.mixin-exists('hook-link-reset') {
         @include hook-link-reset;
     }
 }
@@ -126,7 +128,7 @@ a.uk-link-reset,
 // Hooks
 // ========================================================================
 
-@if mixin-exists(hook-link-misc) {
+@if meta.mixin-exists('hook-link-misc') {
     @include hook-link-misc;
 }
 

package/{dist/esm/components/List/index.scss → styles/list.scss}

@@ -20,11 +20,14 @@
 //
 // ========================================================================
 
+@use 'sass:meta';
+
 
 // Variables
 // ========================================================================
 
-@import '../../styles/variables.scss';
+@use 'variables' as *;
+@use 'mixin' as *;
 
 
 /* ========================================================================
@@ -148,7 +151,7 @@
     margin-bottom: calc(var(--list-marker-height) * -1);
     position: relative;
     width: var(--list-padding-left);
-    @if mixin-exists(svg-fill) {
+    @if meta.mixin-exists('svg-fill') {
         @include svg-fill($list-bullet-icon-image-path, '#000', $list-bullet-icon-color);
     }
 }
@@ -165,7 +168,7 @@
     border-top: var(--list-divider-border-width) solid var(--list-divider-border);
     margin-top: var(--list-divider-margin-top);
     padding-top: var(--list-divider-margin-top);
-    @if mixin-exists(hook-list-divider) {
+    @if meta.mixin-exists('hook-list-divider') {
         @include hook-list-divider;
     }
 }
@@ -176,7 +179,7 @@
 
 .uk-list-striped > * {
     padding: var(--list-striped-padding-vertical) var(--list-striped-padding-horizontal);
-    @if mixin-exists(hook-list-striped) {
+    @if meta.mixin-exists('hook-list-striped') {
         @include hook-list-striped;
     }
 }
@@ -239,7 +242,7 @@
 // Hooks
 // ========================================================================
 
-@if mixin-exists(hook-list-misc) {
+@if meta.mixin-exists('hook-list-misc') {
     @include hook-list-misc;
 }
 

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

@@ -11,11 +11,13 @@
 //
 // ========================================================================
 
+@use 'sass:meta';
+
 
 // Variables
 // ========================================================================
 
-@import 'variables.scss';
+@use 'variables' as *;
 
 
 /* ========================================================================
@@ -286,12 +288,10 @@
 // Hooks
 // ========================================================================
 
-@if mixin-exists(hook-margin-misc) {
+@if meta.mixin-exists('hook-margin-misc') {
     @include hook-margin-misc;
 }
 
-// @mixin hook-margin-misc() {}
-
 
 // Vars
 // ========================================================================

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

@@ -5,10 +5,13 @@
 //
 // ========================================================================
 
+@use 'sass:meta';
+
+
 // Variables
 // ========================================================================
 
-@import 'variables.scss';
+@use 'variables' as *;
 
 
 /* ========================================================================
@@ -23,7 +26,7 @@
     background: var(--marker-background);
     color: var(--marker-color);
     padding: var(--marker-padding);
-    @if mixin-exists(hook-marker) {
+    @if meta.mixin-exists('hook-marker') {
         @include hook-marker;
     }
 }
@@ -33,7 +36,7 @@
 .uk-marker:focus {
     color: var(--marker-hover-color);
     outline: none;
-    @if mixin-exists(hook-marker-hover) {
+    @if meta.mixin-exists('hook-marker-hover') {
         @include hook-marker-hover;
     }
 }
@@ -42,7 +45,7 @@
 // Hooks
 // ========================================================================
 
-@if mixin-exists(hook-marker-misc) {
+@if meta.mixin-exists('hook-marker-misc') {
     @include hook-marker-misc;
 }
 

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

@@ -4,6 +4,7 @@
 //
 // ========================================================================
 
+@use 'sass:string';
 
 // SVG
 // ========================================================================
@@ -15,10 +16,10 @@
 /// @param {String} $replace ('') - New value
 /// @return {String} - Updated string
 @function str-replace($string, $search, $replace: '') {
-    $index: str-index($string, $search);
+    $index: string.index($string, $search);
 
     @if $index {
-        @return str-slice($string, 1, $index - 1) + $replace + str-replace(str-slice($string, $index + str-length($search)), $search, $replace);
+        @return string.slice($string, 1, $index - 1) + $replace + str-replace(string.slice($string, $index + string.length($search)), $search, $replace);
     }
 
     @return $string;
@@ -28,6 +29,6 @@
 @mixin svg-fill($src, $color-default, $color-new) {
     $replace-src: str-replace($src, $color-default, $color-new) !default;
     $replace-src: str-replace($replace-src, "#", "%23");
-
-    background-image: url(quote($replace-src));
+    $string: string.quote($replace-src);
+    background-image: url($string);
 }