@broxus/react-uikit 0.18.0 → 0.19.0

package/{dist/cjs/components/Modal/index.scss → styles/modal.scss}

@@ -22,11 +22,14 @@
 //
 // ========================================================================
 
+@use 'sass:meta';
+@use 'sass:string';
+
 
 // Variables
 // ========================================================================
 
-@import '../../styles/variables.scss';
+@use 'variables' as *;
 
 
 /* ========================================================================
@@ -51,7 +54,7 @@
     pointer-events: none;
     width: var(--modal-width);
     z-index: var(--modal-z-index);
-    @if mixin-exists(hook-modal) {
+    @if meta.mixin-exists('hook-modal') {
         @include hook-modal;
     }
 }
@@ -106,7 +109,7 @@
     pointer-events: auto;
     position: relative;
     width: 100%;
-    @if mixin-exists(hook-modal-content) {
+    @if meta.mixin-exists('hook-modal-content') {
         @include hook-modal-content;
     }
 }
@@ -128,7 +131,7 @@
     /* 1 */
     position: fixed;
     z-index: var(--modal-z-index);
-    @if mixin-exists(hook-modal-mask) {
+    @if meta.mixin-exists('hook-modal-mask') {
         @include hook-modal-mask;
     }
 }
@@ -174,7 +177,7 @@
     max-width: 100%;
     transform: translateY(0);
     width: 100%;
-    @if mixin-exists(hook-modal-full) {
+    @if meta.mixin-exists('hook-modal-full') {
         @include hook-modal-full;
     }
 }
@@ -186,7 +189,7 @@
 .uk-modal-body {
     display: flow-root;
     padding: var(--modal-body-padding-vertical) var(--modal-body-padding-horizontal);
-    @if mixin-exists(hook-modal-body) {
+    @if meta.mixin-exists('hook-modal-body') {
         @include hook-modal-body;
     }
 }
@@ -196,7 +199,7 @@
     display: flow-root;
     padding: var(--modal-header-padding-vertical) var(--modal-header-padding-horizontal);
 
-    @if mixin-exists(hook-modal-header) {
+    @if meta.mixin-exists('hook-modal-header') {
         @include hook-modal-header;
     }
 }
@@ -205,7 +208,7 @@
     background: var(--modal-footer-background);
     display: flow-root;
     padding: var(--modal-footer-padding-vertical) var(--modal-footer-padding-horizontal);
-    @if mixin-exists(hook-modal-footer) {
+    @if meta.mixin-exists('hook-modal-footer') {
         @include hook-modal-footer;
     }
 }
@@ -227,7 +230,7 @@
 .uk-modal-title {
     font-size: var(--modal-title-font-size);
     line-height: var(--modal-title-line-height);
-    @if mixin-exists(hook-modal-title) {
+    @if meta.mixin-exists('hook-modal-title') {
         @include hook-modal-title;
     }
 }
@@ -247,7 +250,7 @@
     right: var(--modal-close-position);
     top: var(--modal-close-position);
     z-index: var(--modal-z-index);
-    @if mixin-exists(hook-modal-close) {
+    @if meta.mixin-exists('hook-modal-close') {
         @include hook-modal-close;
     }
 }
@@ -265,7 +268,7 @@
  */
 
 [class*='uk-modal-close-']:hover {
-    @if mixin-exists(hook-modal-close-hover) {
+    @if meta.mixin-exists('hook-modal-close-hover') {
         @include hook-modal-close-hover;
     }
 }
@@ -275,13 +278,13 @@
  */
 
 .uk-modal-close-default {
-    @if mixin-exists(hook-modal-close-default) {
+    @if meta.mixin-exists('hook-modal-close-default') {
         @include hook-modal-close-default;
     }
 }
 
 .uk-modal-close-default:hover {
-    @if mixin-exists(hook-modal-close-default-hover) {
+    @if meta.mixin-exists('hook-modal-close-default-hover') {
         @include hook-modal-close-default-hover;
     }
 }
@@ -297,15 +300,15 @@
     /* 1 */
     right: calc(var(--modal-close-padding) * -1);
     top: var(--modal-close-outside-position);
-    transform: translate(0, unquote('calc(var(--modal-close-outside-translate) * -1)'));
-    @if mixin-exists(hook-modal-close-outside) {
+    transform: translate(0, string.unquote('calc(var(--modal-close-outside-translate) * -1)'));
+    @if meta.mixin-exists('hook-modal-close-outside') {
         @include hook-modal-close-outside;
     }
 }
 
 .uk-modal-close-outside:hover {
     color: var(--modal-close-outside-hover-color);
-    @if mixin-exists(hook-modal-close-outside-hover) {
+    @if meta.mixin-exists('hook-modal-close-outside-hover') {
         @include hook-modal-close-outside-hover;
     }
 }
@@ -315,7 +318,7 @@
     /* 1 */
     .uk-modal-close-outside {
         right: var(--modal-close-outside-position);
-        transform: translate(var(--modal-close-outside-translate), unquote('calc(var(--modal-close-outside-translate) * -1)'));
+        transform: translate(var(--modal-close-outside-translate), string.unquote('calc(var(--modal-close-outside-translate) * -1)'));
     }
 }
 
@@ -324,13 +327,13 @@
  */
 
 .uk-modal-close-full {
-    @if mixin-exists(hook-modal-close-full) {
+    @if meta.mixin-exists('hook-modal-close-full') {
         @include hook-modal-close-full;
     }
 }
 
 .uk-modal-close-full:hover {
-    @if mixin-exists(hook-modal-close-full-hover) {
+    @if meta.mixin-exists('hook-modal-close-full-hover') {
         @include hook-modal-close-full-hover;
     }
 }
@@ -339,7 +342,7 @@
 // Hooks
 // ========================================================================
 
-@if mixin-exists(hook-modal-misc) {
+@if meta.mixin-exists('hook-modal-misc') {
     @include hook-modal-misc;
 }
 
@@ -360,12 +363,12 @@
     --modal-container-width: #{$modal-container-width};
     --modal-body-padding-horizontal: var(--global-gutter);
     --modal-body-padding-vertical: var(--global-gutter);
+    --modal-header-background: var(--global-muted-background);
     --modal-header-padding-horizontal: var(--global-gutter);
     --modal-header-padding-vertical: calc(var(--modal-header-padding-horizontal) / 2);
-    --modal-header-background: var(--global-muted-background);
+    --modal-footer-background: var(--global-muted-background);
     --modal-footer-padding-horizontal: var(--global-gutter);
     --modal-footer-padding-vertical: calc(var(--modal-header-padding-horizontal) / 2);
-    --modal-footer-background: var(--global-muted-background);
     --modal-title-font-size: var(--global-xlarge-font-size);
     --modal-title-line-height: #{$modal-title-line-height};
     --modal-close-position: var(--global-small-margin);

package/{dist/cjs/styles → styles}/motion.scss

@@ -13,11 +13,14 @@
 //
 // ========================================================================
 
+@use 'sass:meta';
+@use 'sass:string';
+
 
 // Variables
 // ========================================================================
 
-@import 'variables.scss';
+@use 'variables' as *;
 
 
 /* Motions
@@ -385,7 +388,7 @@
 @keyframes uk-slide-top-small-in {
     0% {
         opacity: 0;
-        transform: translateY(unquote('calc(var(--animation-slide-small-translate) * -1)'));
+        transform: translateY(string.unquote('calc(var(--animation-slide-small-translate) * -1)'));
     }
 
     100% {
@@ -402,7 +405,7 @@
 
     100% {
         opacity: 0;
-        transform: translateY(unquote('calc(var(--animation-slide-small-translate) * -1)'));
+        transform: translateY(string.unquote('calc(var(--animation-slide-small-translate) * -1)'));
     }
 }
 
@@ -433,7 +436,7 @@
 @keyframes uk-slide-left-small-in {
     0% {
         opacity: 0;
-        transform: translateX(unquote('calc(var(--animation-slide-small-translate) * -1)'));
+        transform: translateX(string.unquote('calc(var(--animation-slide-small-translate) * -1)'));
     }
 
     100% {
@@ -450,7 +453,7 @@
 
     100% {
         opacity: 0;
-        transform: translateX(unquote('calc(var(--animation-slide-small-translate) * -1)'));
+        transform: translateX(string.unquote('calc(var(--animation-slide-small-translate) * -1)'));
     }
 }
 

package/{dist/esm/components/Nav/index.scss → styles/nav.scss}

@@ -19,11 +19,13 @@
 //
 // ========================================================================
 
+@use 'sass:meta';
+
 
 // Variables
 // ========================================================================
 
-@import '../../styles/variables.scss';
+@use 'variables' as *;
 
 
 /* ========================================================================
@@ -128,8 +130,7 @@
         padding: 0;
 
         &:not([class*='-active']) {
-            overflow-x: hidden;
-            overflow-y: auto;
+            overflow: hidden auto;
         }
 
         .uk-nav-item {
@@ -194,9 +195,9 @@
             height: 1.5px;
             position: absolute;
             transition: background var(--transition-duration) var(--ease-in-out),
-                transform var(--transition-duration) var(--ease-in-out),
-                top var(--transition-duration) var(--ease-in-out),
-                color var(--transition-duration) var(--ease-in-out);
+            transform var(--transition-duration) var(--ease-in-out),
+            top var(--transition-duration) var(--ease-in-out),
+            color var(--transition-duration) var(--ease-in-out);
             width: 6px;
         }
     }
@@ -272,7 +273,7 @@
 
 ul.uk-nav-sub {
     padding: 0 0 0 var(--nav-sublist-padding-left);
-    @if mixin-exists(hook-nav-sub) {
+    @if meta.mixin-exists('hook-nav-sub') {
         @include hook-nav-sub;
     }
 }
@@ -302,7 +303,7 @@ ul.uk-nav-sub {
     font-size: var(--nav-header-font-size);
     padding: var(--nav-header-padding-vertical) var(--nav-header-padding-horizontal);
     text-transform: var(--nav-header-text-transform);
-    @if mixin-exists(hook-nav-header) {
+    @if meta.mixin-exists('hook-nav-header') {
         @include hook-nav-header;
     }
 }
@@ -319,7 +320,7 @@ ul.uk-nav-sub {
 .uk-nav-divider {
     border-top: var(--nav-divider-border-width) solid var(--nav-divider-border);
     margin: var(--nav-divider-margin-vertical) var(--nav-divider-margin-horizontal);
-    @if mixin-exists(hook-nav-divider) {
+    @if meta.mixin-exists('hook-nav-divider') {
         @include hook-nav-divider;
     }
 }
@@ -329,7 +330,7 @@ ul.uk-nav-sub {
  ========================================================================== */
 
 .uk-nav-default {
-    @if mixin-exists(hook-nav-default) {
+    @if meta.mixin-exists('hook-nav-default') {
         @include hook-nav-default;
     }
 }
@@ -340,7 +341,7 @@ ul.uk-nav-sub {
 
 .uk-nav-default > li > a {
     color: var(--nav-default-item-color);
-    @if mixin-exists(hook-nav-default-item) {
+    @if meta.mixin-exists('hook-nav-default-item') {
         @include hook-nav-default-item;
     }
 }
@@ -349,7 +350,7 @@ ul.uk-nav-sub {
 .uk-nav-default > li > a:hover,
 .uk-nav-default > li > a:focus {
     color: var(--nav-default-item-hover-color);
-    @if mixin-exists(hook-nav-default-item-hover) {
+    @if meta.mixin-exists('hook-nav-default-item-hover') {
         @include hook-nav-default-item-hover;
     }
 }
@@ -357,7 +358,7 @@ ul.uk-nav-sub {
 /* Active */
 .uk-nav-default > li.uk-active > a {
     color: var(--nav-default-item-active-color);
-    @if mixin-exists(hook-nav-default-item-active) {
+    @if meta.mixin-exists('hook-nav-default-item-active') {
         @include hook-nav-default-item-active;
     }
 }
@@ -368,7 +369,7 @@ ul.uk-nav-sub {
 
 .uk-nav-default .uk-nav-header {
     color: var(--nav-default-header-color);
-    @if mixin-exists(hook-nav-default-header) {
+    @if meta.mixin-exists('hook-nav-default-header') {
         @include hook-nav-default-header;
     }
 }
@@ -379,7 +380,7 @@ ul.uk-nav-sub {
 
 .uk-nav-default .uk-nav-divider {
     border-top: var(--nav-default-divider-border-width) solid var(--nav-default-divider-border);
-    @if mixin-exists(hook-nav-default-divider) {
+    @if meta.mixin-exists('hook-nav-default-divider') {
         @include hook-nav-default-divider;
     }
 }
@@ -406,7 +407,7 @@ ul.uk-nav-sub {
  ========================================================================== */
 
 .uk-nav-primary {
-    @if mixin-exists(hook-nav-primary) {
+    @if meta.mixin-exists('hook-nav-primary') {
         @include hook-nav-primary;
     }
 }
@@ -419,7 +420,7 @@ ul.uk-nav-sub {
     color: var(--nav-primary-item-color);
     font-size: var(--nav-primary-item-font-size);
     line-height: var(--nav-primary-item-line-height);
-    @if mixin-exists(hook-nav-primary-item) {
+    @if meta.mixin-exists('hook-nav-primary-item') {
         @include hook-nav-primary-item;
     }
 }
@@ -428,7 +429,7 @@ ul.uk-nav-sub {
 .uk-nav-primary > li > a:hover,
 .uk-nav-primary > li > a:focus {
     color: var(--nav-primary-item-hover-color);
-    @if mixin-exists(hook-nav-primary-item-hover) {
+    @if meta.mixin-exists('hook-nav-primary-item-hover') {
         @include hook-nav-primary-item-hover;
     }
 }
@@ -436,7 +437,7 @@ ul.uk-nav-sub {
 /* Active */
 .uk-nav-primary > li.uk-active > a {
     color: var(--nav-primary-item-active-color);
-    @if mixin-exists(hook-nav-primary-item-active) {
+    @if meta.mixin-exists('hook-nav-primary-item-active') {
         @include hook-nav-primary-item-active;
     }
 }
@@ -447,7 +448,7 @@ ul.uk-nav-sub {
 
 .uk-nav-primary .uk-nav-header {
     color: var(--nav-primary-header-color);
-    @if mixin-exists(hook-nav-primary-header) {
+    @if meta.mixin-exists('hook-nav-primary-header') {
         @include hook-nav-primary-header;
     }
 }
@@ -458,7 +459,7 @@ ul.uk-nav-sub {
 
 .uk-nav-primary .uk-nav-divider {
     border-top: var(--nav-primary-divider-border-width) solid var(--nav-primary-divider-border);
-    @if mixin-exists(hook-nav-primary-divider) {
+    @if meta.mixin-exists('hook-nav-primary-divider') {
         @include hook-nav-primary-divider;
     }
 }
@@ -513,7 +514,7 @@ ul.uk-nav-sub {
     border-top: var(--nav-dividers-border-width) solid var(--nav-dividers-border);
     margin-top: var(--nav-dividers-margin-top);
     padding-top: var(--nav-dividers-margin-top);
-    @if mixin-exists(hook-nav-dividers) {
+    @if meta.mixin-exists('hook-nav-dividers') {
         @include hook-nav-dividers;
     }
 }
@@ -522,7 +523,7 @@ ul.uk-nav-sub {
 // Hooks
 // ========================================================================
 
-@if mixin-exists(hook-nav-misc) {
+@if meta.mixin-exists('hook-nav-misc') {
     @include hook-nav-misc;
 }
 
@@ -531,8 +532,8 @@ ul.uk-nav-sub {
 // ========================================================================
 
 :root {
-    --nav-item-padding-vertical: #{$nav-item-padding-vertical};
     --nav-item-padding-horizontal: #{$nav-item-padding-horizontal};
+    --nav-item-padding-vertical: #{$nav-item-padding-vertical};
     --nav-sublist-padding-vertical: #{$nav-sublist-padding-vertical};
     --nav-sublist-padding-left: #{$nav-sublist-padding-left};
     --nav-sublist-deeper-padding-left: #{$nav-sublist-deeper-padding-left};
@@ -540,15 +541,15 @@ ul.uk-nav-sub {
     --nav-parent-icon-width: calc(var(--global-line-height) * 1em);
     --nav-parent-icon-height: var(--nav-parent-icon-width);
     --nav-parent-icon-color: var(--global-color);
-    --nav-header-padding-vertical: var(--nav-item-padding-vertical);
     --nav-header-padding-horizontal: var(--nav-item-padding-horizontal);
+    --nav-header-padding-vertical: var(--nav-item-padding-vertical);
     --nav-header-font-size: var(--global-small-font-size);
     --nav-header-text-transform: #{$nav-header-text-transform};
     --nav-header-margin-top: var(--global-margin);
     --nav-divider-border-width: var(--global-border-width);
     --nav-divider-border: var(--global-border);
-    --nav-divider-margin-vertical: #{$nav-divider-margin-vertical};
     --nav-divider-margin-horizontal: #{$nav-divider-margin-horizontal};
+    --nav-divider-margin-vertical: #{$nav-divider-margin-vertical};
     --nav-default-item-color: var(--global-muted-color);
     --nav-default-item-hover-color: var(--global-color);
     --nav-default-item-active-color: var(--global-emphasis-color);