@broxus/react-uikit 0.18.0 → 0.19.1

package/{dist/cjs/components/Navbar/index.scss → styles/navbar.scss}

@@ -33,11 +33,13 @@
 //
 // ========================================================================
 
+@use 'sass:meta';
+
 
 // Variables
 // ========================================================================
 
-@import '../../styles/variables.scss';
+@use 'variables' as *;
 
 
 /* ========================================================================
@@ -54,7 +56,7 @@
 
     /* 1 */
     position: relative;
-    @if mixin-exists(hook-navbar) {
+    @if meta.mixin-exists('hook-navbar') {
         @include hook-navbar;
     }
 }
@@ -65,7 +67,7 @@
 
 .uk-navbar-container:not(.uk-navbar-transparent) {
     background: var(--navbar-background);
-    @if mixin-exists(hook-navbar-container) {
+    @if meta.mixin-exists('hook-navbar-container') {
         @include hook-navbar-container;
     }
 }
@@ -103,7 +105,7 @@
 
 .uk-navbar-left,
 .uk-navbar-right,
-/* 2. [class*='uk-navbar-center'], */
+    /* 2. [class*='uk-navbar-center'], */
 .uk-navbar-center,
 .uk-navbar-center-left > *,
 .uk-navbar-center-right > * {
@@ -219,7 +221,7 @@
 
     /* 1 */
     display: flex;
-    font-family: var(--navbar-nav-item-font-family);
+    font-family: var(--navbar-nav-item-font-family), system-ui;
 
     /* 3 */
     font-size: var(--navbar-nav-item-font-size);
@@ -237,7 +239,7 @@
 
 .uk-navbar-nav > li > a {
     color: var(--navbar-nav-item-color);
-    @if mixin-exists(hook-navbar-nav-item) {
+    @if meta.mixin-exists('hook-navbar-nav-item') {
         @include hook-navbar-nav-item;
     }
 }
@@ -252,7 +254,7 @@
 .uk-navbar-nav > li > a.uk-open {
     color: var(--navbar-nav-item-hover-color);
     outline: none;
-    @if mixin-exists(hook-navbar-nav-item-hover) {
+    @if meta.mixin-exists('hook-navbar-nav-item-hover') {
         @include hook-navbar-nav-item-hover;
     }
 }
@@ -260,7 +262,7 @@
 /* OnClick */
 .uk-navbar-nav > li > a:active {
     color: var(--navbar-nav-item-onclick-color);
-    @if mixin-exists(hook-navbar-nav-item-onclick) {
+    @if meta.mixin-exists('hook-navbar-nav-item-onclick') {
         @include hook-navbar-nav-item-onclick;
     }
 }
@@ -268,7 +270,7 @@
 /* Active */
 .uk-navbar-nav > li.uk-active > a {
     color: var(--navbar-nav-item-active-color);
-    @if mixin-exists(hook-navbar-nav-item-active) {
+    @if meta.mixin-exists('hook-navbar-nav-item-active') {
         @include hook-navbar-nav-item-active;
     }
 }
@@ -279,7 +281,7 @@
 
 .uk-navbar-item {
     color: var(--navbar-item-color);
-    @if mixin-exists(hook-navbar-item) {
+    @if meta.mixin-exists('hook-navbar-item') {
         @include hook-navbar-item;
     }
 }
@@ -298,7 +300,7 @@
 
 .uk-navbar-toggle {
     color: var(--navbar-toggle-color);
-    @if mixin-exists(hook-navbar-toggle) {
+    @if meta.mixin-exists('hook-navbar-toggle') {
         @include hook-navbar-toggle;
     }
 }
@@ -309,7 +311,7 @@
     color: var(--navbar-toggle-hover-color);
     outline: none;
     text-decoration: none;
-    @if mixin-exists(hook-navbar-toggle-hover) {
+    @if meta.mixin-exists('hook-navbar-toggle-hover') {
         @include hook-navbar-toggle-hover;
     }
 }
@@ -320,7 +322,7 @@
  */
 
 .uk-navbar-toggle-icon {
-    @if mixin-exists(hook-navbar-toggle-icon) {
+    @if meta.mixin-exists('hook-navbar-toggle-icon') {
         @include hook-navbar-toggle-icon;
     }
 }
@@ -328,7 +330,7 @@
 /* Hover + Focus */
 :hover > .uk-navbar-toggle-icon,
 :focus > .uk-navbar-toggle-icon {
-    @if mixin-exists(hook-navbar-toggle-icon-hover) {
+    @if meta.mixin-exists('hook-navbar-toggle-icon-hover') {
         @include hook-navbar-toggle-icon-hover;
     }
 }
@@ -339,7 +341,7 @@
 
 .uk-navbar-subtitle {
     font-size: var(--navbar-subtitle-font-size);
-    @if mixin-exists(hook-navbar-subtitle) {
+    @if meta.mixin-exists('hook-navbar-subtitle') {
         @include hook-navbar-subtitle;
     }
 }
@@ -349,19 +351,19 @@
  ========================================================================== */
 
 .uk-navbar-primary {
-    @if mixin-exists(hook-navbar-primary) {
+    @if meta.mixin-exists('hook-navbar-primary') {
         @include hook-navbar-primary;
     }
 }
 
 .uk-navbar-transparent {
-    @if mixin-exists(hook-navbar-transparent) {
+    @if meta.mixin-exists('hook-navbar-transparent') {
         @include hook-navbar-transparent;
     }
 }
 
 .uk-navbar-sticky {
-    @if mixin-exists(hook-navbar-sticky) {
+    @if meta.mixin-exists('hook-navbar-sticky') {
         @include hook-navbar-sticky;
     }
 }
@@ -395,7 +397,7 @@
     position: absolute;
     width: var(--navbar-dropdown-width);
     z-index: var(--navbar-dropdown-z-index);
-    @if mixin-exists(hook-navbar-dropdown) {
+    @if meta.mixin-exists('hook-navbar-dropdown') {
         @include hook-navbar-dropdown;
     }
 }
@@ -476,7 +478,7 @@
 .uk-navbar-dropdown-dropbar {
     margin-bottom: var(--navbar-dropdown-dropbar-margin-bottom);
     margin-top: var(--navbar-dropdown-dropbar-margin-top);
-    @if mixin-exists(hook-navbar-dropdown-dropbar) {
+    @if meta.mixin-exists('hook-navbar-dropdown-dropbar') {
         @include hook-navbar-dropdown-dropbar;
     }
 }
@@ -487,7 +489,7 @@
  ========================================================================== */
 
 .uk-navbar-dropdown-nav {
-    @if mixin-exists(hook-navbar-dropdown-nav) {
+    @if meta.mixin-exists('hook-navbar-dropdown-nav') {
         @include hook-navbar-dropdown-nav;
     }
 }
@@ -498,7 +500,7 @@
 
 .uk-navbar-dropdown-nav > li > a {
     color: var(--navbar-dropdown-nav-item-color);
-    @if mixin-exists(hook-navbar-dropdown-nav-item) {
+    @if meta.mixin-exists('hook-navbar-dropdown-nav-item') {
         @include hook-navbar-dropdown-nav-item;
     }
 }
@@ -507,7 +509,7 @@
 .uk-navbar-dropdown-nav > li > a:hover,
 .uk-navbar-dropdown-nav > li > a:focus {
     color: var(--navbar-dropdown-nav-item-hover-color);
-    @if mixin-exists(hook-navbar-dropdown-nav-item-hover) {
+    @if meta.mixin-exists('hook-navbar-dropdown-nav-item-hover') {
         @include hook-navbar-dropdown-nav-item-hover;
     }
 }
@@ -515,7 +517,7 @@
 /* Active */
 .uk-navbar-dropdown-nav > li.uk-active > a {
     color: var(--navbar-dropdown-nav-item-active-color);
-    @if mixin-exists(hook-navbar-dropdown-nav-item-active) {
+    @if meta.mixin-exists('hook-navbar-dropdown-nav-item-active') {
         @include hook-navbar-dropdown-nav-item-active;
     }
 }
@@ -526,7 +528,7 @@
 
 .uk-navbar-dropdown-nav .uk-nav-header {
     color: var(--navbar-dropdown-nav-header-color);
-    @if mixin-exists(hook-navbar-dropdown-nav-header) {
+    @if meta.mixin-exists('hook-navbar-dropdown-nav-header') {
         @include hook-navbar-dropdown-nav-header;
     }
 }
@@ -537,7 +539,7 @@
 
 .uk-navbar-dropdown-nav .uk-nav-divider {
     border-top: var(--navbar-dropdown-nav-divider-border-width) solid var(--navbar-dropdown-nav-divider-border);
-    @if mixin-exists(hook-navbar-dropdown-nav-divider) {
+    @if meta.mixin-exists('hook-navbar-dropdown-nav-divider') {
         @include hook-navbar-dropdown-nav-divider;
     }
 }
@@ -565,7 +567,7 @@
 
 .uk-navbar-dropbar {
     background: var(--navbar-dropbar-background);
-    @if mixin-exists(hook-navbar-dropbar) {
+    @if meta.mixin-exists('hook-navbar-dropbar') {
         @include hook-navbar-dropbar;
     }
 }
@@ -579,7 +581,7 @@
     position: absolute;
     right: 0;
     z-index: var(--navbar-dropbar-z-index);
-    @if mixin-exists(hook-navbar-dropbar-slide) {
+    @if meta.mixin-exists('hook-navbar-dropbar-slide') {
         @include hook-navbar-dropbar-slide;
     }
 }
@@ -588,7 +590,7 @@
 // Hooks
 // ========================================================================
 
-@if mixin-exists(hook-navbar-misc) {
+@if meta.mixin-exists('hook-navbar-misc') {
     @include hook-navbar-misc;
 }
 
@@ -610,12 +612,12 @@
     --navbar-toggle-color: var(--global-muted-color);
     --navbar-toggle-hover-color: var(--global-color);
     --navbar-subtitle-font-size: var(--global-small-font-size);
-    --navbar-dropdown-z-index: #{$global-z-index + 20};
-    --navbar-dropdown-width: #{$navbar-dropdown-width};
-    --navbar-dropdown-margin: #{$navbar-dropdown-margin};
-    --navbar-dropdown-padding: #{$navbar-dropdown-padding};
     --navbar-dropdown-background: var(--global-muted-background);
     --navbar-dropdown-color: var(--global-color);
+    --navbar-dropdown-margin: #{$navbar-dropdown-margin};
+    --navbar-dropdown-padding: #{$navbar-dropdown-padding};
+    --navbar-dropdown-width: #{$navbar-dropdown-width};
+    --navbar-dropdown-z-index: #{$navbar-dropdown-z-index};
     --navbar-dropdown-grid-gutter-horizontal: var(--global-gutter);
     --navbar-dropdown-grid-gutter-vertical: var(--navbar-dropdown-grid-gutter-horizontal);
     --navbar-dropdown-dropbar-margin-top: #{$navbar-dropdown-dropbar-margin-top};
@@ -630,7 +632,7 @@
     --navbar-dropdown-nav-sublist-item-hover-color: var(--global-color);
     --navbar-dropdown-nav-sublist-item-active-color: var(--global-emphasis-color);
     --navbar-dropbar-background: var(--navbar-dropdown-background);
-    --navbar-dropbar-z-index: #{$global-z-index - 20};
+    --navbar-dropbar-z-index: #{$navbar-dropbar-z-index};
 
     // Inverse
     --inverse-navbar-background: var(--inverse-global-muted-background);

package/{dist/cjs/components/Overlay/index.scss → styles/overlay.scss}

@@ -10,11 +10,13 @@
 //
 // ========================================================================
 
+@use 'sass:meta';
+
 
 // Variables
 // ========================================================================
 
-@import '../../styles/variables.scss';
+@use 'variables' as *;
 
 
 /* ========================================================================
@@ -23,7 +25,7 @@
 
 .uk-overlay {
     padding: var(--overlay-padding-vertical) var(--overlay-padding-horizontal);
-    @if mixin-exists(hook-overlay) {
+    @if meta.mixin-exists('hook-overlay') {
         @include hook-overlay;
     }
 }
@@ -41,7 +43,7 @@
  ========================================================================== */
 
 .uk-overlay-icon {
-    @if mixin-exists(hook-overlay-icon) {
+    @if meta.mixin-exists('hook-overlay-icon') {
         @include hook-overlay-icon;
     }
 }
@@ -56,7 +58,7 @@
 
 .uk-overlay-default {
     background: var(--overlay-default-background);
-    @if mixin-exists(hook-overlay-default) {
+    @if meta.mixin-exists('hook-overlay-default') {
         @include hook-overlay-default;
     }
 }
@@ -67,7 +69,7 @@
 
 .uk-overlay-primary {
     background: var(--overlay-primary-background);
-    @if mixin-exists(hook-overlay-primary) {
+    @if meta.mixin-exists('hook-overlay-primary') {
         @include hook-overlay-primary;
     }
 }
@@ -89,7 +91,7 @@
 // Hooks
 // ========================================================================
 
-@if mixin-exists(hook-overlay-misc) {
+@if meta.mixin-exists('hook-overlay-misc') {
     @include hook-overlay-misc;
 }
 

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

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

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

@@ -11,11 +11,13 @@
 //
 // ========================================================================
 
+@use 'sass:meta';
+
 
 // Variables
 // ========================================================================
 
-@import 'variables.scss';
+@use 'variables' as *;
 
 
 /* ========================================================================
@@ -40,7 +42,7 @@
 
     /* 3 */
     padding: 0;
-    @if mixin-exists(hook-pagination) {
+    @if meta.mixin-exists('hook-pagination') {
         @include hook-pagination;
     }
 }
@@ -79,7 +81,7 @@
 
     /* 2 */
     padding: var(--pagination-item-padding-vertical) var(--pagination-item-padding-horizontal);
-    @if mixin-exists(hook-pagination-item) {
+    @if meta.mixin-exists('hook-pagination-item') {
         @include hook-pagination-item;
     }
 }
@@ -89,7 +91,7 @@
 .uk-pagination > * > :focus {
     color: var(--pagination-item-hover-color);
     text-decoration: var(--pagination-item-hover-text-decoration);
-    @if mixin-exists(hook-pagination-item-hover) {
+    @if meta.mixin-exists('hook-pagination-item-hover') {
         @include hook-pagination-item-hover;
     }
 }
@@ -97,7 +99,7 @@
 /* Active */
 .uk-pagination > .uk-active > * {
     color: var(--pagination-item-active-color);
-    @if mixin-exists(hook-pagination-item-active) {
+    @if meta.mixin-exists('hook-pagination-item-active') {
         @include hook-pagination-item-active;
     }
 }
@@ -105,7 +107,7 @@
 /* Disabled */
 .uk-pagination > .uk-disabled > * {
     color: var(--pagination-item-disabled-color);
-    @if mixin-exists(hook-pagination-item-disabled) {
+    @if meta.mixin-exists('hook-pagination-item-disabled') {
         @include hook-pagination-item-disabled;
     }
 }
@@ -114,7 +116,7 @@
 // Hooks
 // ========================================================================
 
-@if mixin-exists(hook-pagination-misc) {
+@if meta.mixin-exists('hook-pagination-misc') {
     @include hook-pagination-misc;
 }
 

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

@@ -5,11 +5,13 @@
 //
 // ========================================================================
 
+@use 'sass:meta';
+
 
 // Variables
 // ========================================================================
 
-@import 'variables.scss';
+@use 'variables' as *;
 
 
 /* ========================================================================
@@ -20,7 +22,7 @@
     background: var(--placeholder-background);
     margin-bottom: var(--placeholder-margin-vertical);
     padding: var(--placeholder-padding-vertical) var(--placeholder-padding-horizontal);
-    @if mixin-exists(hook-placeholder) {
+    @if meta.mixin-exists('hook-placeholder') {
         @include hook-placeholder;
     }
 }
@@ -38,7 +40,7 @@
 // Hooks
 // ========================================================================
 
-@if mixin-exists(hook-placeholder-misc) {
+@if meta.mixin-exists('hook-placeholder-misc') {
     @include hook-placeholder-misc;
 }