@broxus/react-uikit 0.18.0 → 0.19.0

package/{dist/esm/components/DatePicker/index.scss → styles/datepicker.scss}

@@ -11,10 +11,13 @@
 //
 // ========================================================================
 
+@use 'sass:meta';
+
+
 // Variables
 // ========================================================================
 
-@import '../../styles/variables.scss';
+@use 'variables' as *;
 
 
 /* Picker
@@ -42,7 +45,7 @@
     padding-right: var(--control-padding-horizontal);
     position: relative;
     transition: all var(--transition-duration);
-    @if mixin-exists(hook-datepicker) {
+    @if meta.mixin-exists('hook-datepicker') {
         @include hook-datepicker;
     }
 }
@@ -52,7 +55,7 @@
     background-color: var(--control-hover-background);
     border-color: var(--control-hover-border);
     color: var(--control-hover-color);
-    @if mixin-exists(hook-datepicker-hover) {
+    @if meta.mixin-exists('hook-datepicker-hover') {
         @include hook-datepicker-hover;
     }
 }
@@ -65,7 +68,7 @@
     border-color: var(--control-focus-border);
     color: var(--control-focus-color);
     outline: none;
-    @if mixin-exists(hook-datepicker-focus) {
+    @if meta.mixin-exists('hook-datepicker-focus') {
         @include hook-datepicker-focus;
     }
 }
@@ -73,7 +76,7 @@
 /* Disabled state */
 .uk-datepicker-disabled {
     background-color: var(--control-disabled-background);
-    @if mixin-exists(hook-datepicker-disabled) {
+    @if meta.mixin-exists('hook-datepicker-disabled') {
         @include hook-datepicker-disabled;
     }
 }
@@ -91,7 +94,7 @@
     display: inline-flex;
     position: relative;
     width: 100%;
-    @if mixin-exists(hook-datepicker-input) {
+    @if meta.mixin-exists('hook-datepicker-input') {
         @include hook-datepicker-input;
     }
 }
@@ -102,7 +105,7 @@
     min-height: var(--datepicker-height);
     min-width: 1px;
     padding: 0;
-    @if mixin-exists(hook-datepicker-control) {
+    @if meta.mixin-exists('hook-datepicker-control') {
         @include hook-datepicker-control;
     }
 }
@@ -118,7 +121,7 @@
 .uk-datepicker-small {
     font-size: var(--control-small-font-size);
     padding: 0 var(--control-small-padding-horizontal);
-    @if mixin-exists(hook-datepicker-small) {
+    @if meta.mixin-exists('hook-datepicker-small') {
         @include hook-datepicker-small;
     }
 }
@@ -134,7 +137,7 @@
 .uk-datepicker-medium {
     font-size: var(--control-medium-font-size);
     padding: 0 var(--control-medium-padding-horizontal);
-    @if mixin-exists(hook-datepicker-medium) {
+    @if meta.mixin-exists('hook-datepicker-medium') {
         @include hook-datepicker-medium;
     }
 }
@@ -150,7 +153,7 @@
 .uk-datepicker-large {
     font-size: var(--control-large-font-size);
     padding: 0 var(--control-large-padding-horizontal);
-    @if mixin-exists(hook-datepicker-large) {
+    @if meta.mixin-exists('hook-datepicker-large') {
         @include hook-datepicker-large;
     }
 }
@@ -172,7 +175,7 @@
 .uk-datepicker-success:focus-within {
     border-color: var(--datepicker-success-border);
     color: var(--datepicker-success-color);
-    @if mixin-exists(hook-datepicker-success) {
+    @if meta.mixin-exists('hook-datepicker-success') {
         @include hook-datepicker-success;
     }
 }
@@ -186,7 +189,7 @@
 .uk-datepicker-warning:focus-within {
     border-color: var(--datepicker-warning-border);
     color: var(--datepicker-warning-color);
-    @if mixin-exists(hook-datepicker-warning) {
+    @if meta.mixin-exists('hook-datepicker-warning') {
         @include hook-datepicker-warning;
     }
 }
@@ -200,7 +203,7 @@
 .uk-datepicker-danger:focus-within {
     border-color: var(--datepicker-danger-border);
     color: var(--datepicker-danger-color);
-    @if mixin-exists(hook-datepicker-danger) {
+    @if meta.mixin-exists('hook-datepicker-danger') {
         @include hook-datepicker-danger;
     }
 }
@@ -215,14 +218,14 @@
     background-color: transparent;
     border-color: transparent;
     border-style: var(--datepicker-blank-border-style);
-    @if mixin-exists(hook-datepicker-blank) {
+    @if meta.mixin-exists('hook-datepicker-blank') {
         @include hook-datepicker-blank;
     }
 }
 
 .uk-datepicker-blank:focus-within {
     border-color: var(--datepicker-blank-focus-border);
-    @if mixin-exists(hook-datepicker-blank-focus) {
+    @if meta.mixin-exists('hook-datepicker-blank-focus') {
         @include hook-datepicker-blank-focus;
     }
 }
@@ -235,7 +238,7 @@
     align-items: stretch;
     display: flex;
     flex-wrap: nowrap;
-    @if mixin-exists(hook-datepicker-panel-layout) {
+    @if meta.mixin-exists('hook-datepicker-panel-layout') {
         @include hook-datepicker-panel-layout;
     }
 }
@@ -247,14 +250,14 @@
     flex-direction: column;
     text-align: center;
     vertical-align: top;
-    @if mixin-exists(hook-datepicker-panel) {
+    @if meta.mixin-exists('hook-datepicker-panel') {
         @include hook-datepicker-panel;
     }
 }
 
 .uk-datepicker-datetime-panel {
     display: flex;
-    @if mixin-exists(hook-datepicker-datetime-panel) {
+    @if meta.mixin-exists('hook-datepicker-datetime-panel') {
         @include hook-datepicker-datetime-panel;
     }
 }
@@ -275,7 +278,7 @@
 .uk-datepicker-time-panel {
     min-width: auto;
     width: auto;
-    @if mixin-exists(hook-datepicker-time-panel) {
+    @if meta.mixin-exists('hook-datepicker-time-panel') {
         @include hook-datepicker-time-panel;
     }
 }
@@ -285,37 +288,37 @@
 }
 
 .uk-datepicker-date-panel {
-    @if mixin-exists(hook-datepicker-date-panel) {
+    @if meta.mixin-exists('hook-datepicker-date-panel') {
         @include hook-datepicker-date-panel;
     }
 }
 
 .uk-datepicker-month-panel {
-    @if mixin-exists(hook-datepicker-month-panel) {
+    @if meta.mixin-exists('hook-datepicker-month-panel') {
         @include hook-datepicker-month-panel;
     }
 }
 
 .uk-datepicker-quarter-panel {
-    @if mixin-exists(hook-datepicker-quarter-panel) {
+    @if meta.mixin-exists('hook-datepicker-quarter-panel') {
         @include hook-datepicker-quarter-panel;
     }
 }
 
 .uk-datepicker-decade-panel {
-    @if mixin-exists(hook-datepicker-decade-panel) {
+    @if meta.mixin-exists('hook-datepicker-decade-panel') {
         @include hook-datepicker-decade-panel;
     }
 }
 
 .uk-datepicker-week-panel {
-    @if mixin-exists(hook-datepicker-week-panel) {
+    @if meta.mixin-exists('hook-datepicker-week-panel') {
         @include hook-datepicker-week-panel;
     }
 }
 
 .uk-datepicker-year-panel {
-    @if mixin-exists(hook-datepicker-year-panel) {
+    @if meta.mixin-exists('hook-datepicker-year-panel') {
         @include hook-datepicker-year-panel;
     }
 }
@@ -328,7 +331,7 @@
     display: flex;
     padding-left: var(--datepicker-header-padding-horizontal);
     padding-right: var(--datepicker-header-padding-horizontal);
-    @if mixin-exists(hook-datepicker-header) {
+    @if meta.mixin-exists('hook-datepicker-header') {
         @include hook-datepicker-header;
     }
 }
@@ -340,7 +343,7 @@
     font-weight: var(--datepicker-header-font-weight);
     justify-content: center;
     line-height: var(--datepicker-header-height);
-    @if mixin-exists(hook-datepicker-header-view) {
+    @if meta.mixin-exists('hook-datepicker-header-view') {
         @include hook-datepicker-header-view;
     }
 }
@@ -348,7 +351,7 @@
 /* Body and content */
 .uk-datepicker-body {
     padding: var(--datepicker-body-padding-vertical) var(--datepicker-body-padding-horizontal);
-    @if mixin-exists(hook-datepicker-body) {
+    @if meta.mixin-exists('hook-datepicker-body') {
         @include hook-datepicker-body;
     }
 }
@@ -358,7 +361,7 @@
     table-layout: fixed;
     text-align: center;
     width: 100%;
-    @if mixin-exists(hook-datepicker-content) {
+    @if meta.mixin-exists('hook-datepicker-content') {
         @include hook-datepicker-content;
     }
 }
@@ -457,7 +460,7 @@
 .uk-datepicker-footer {
     border-top: var(--datepicker-border-width) var(--datepicker-border-style) var(--datepicker-border);
     padding: var(--datepicker-footer-padding-vertical) var(--datepicker-footer-padding-horizontal);
-    @if mixin-exists(hook-datepicker-footer) {
+    @if meta.mixin-exists('hook-datepicker-footer') {
         @include hook-datepicker-footer;
     }
 }
@@ -471,7 +474,7 @@
     overflow: hidden;
     padding-inline: var(--datepicker-footer-ranges-padding-vertical) var(--datepicker-footer-ranges-padding-horizontal);
     text-align: start;
-    @if mixin-exists(hook-datepicker-ranges) {
+    @if meta.mixin-exists('hook-datepicker-ranges') {
         @include hook-datepicker-ranges;
     }
 }
@@ -491,7 +494,7 @@
     padding: var(--datepicker-cell-padding) calc(var(--datepicker-cell-padding) / 2);
     position: relative;
     transition: background var(--transition-medium-fast-duration);
-    @if mixin-exists(hook-datepicker-cell) {
+    @if meta.mixin-exists('hook-datepicker-cell') {
         @include hook-datepicker-cell;
     }
 }
@@ -519,7 +522,7 @@
     min-width: var(--datepicker-cell-height);
     position: relative;
     z-index: 2;
-    @if mixin-exists(hook-datepicker-cell-inner) {
+    @if meta.mixin-exists('hook-datepicker-cell-inner') {
         @include hook-datepicker-cell-inner;
     }
 }
@@ -633,7 +636,7 @@
     text-align: start;
     transition: background var(--transition-medium-fast-duration);
     width: var(--datepicker-time-column-width);
-    @if mixin-exists(hook-datepicker-time-panel-column) {
+    @if meta.mixin-exists('hook-datepicker-time-panel-column') {
         @include hook-datepicker-time-panel-column;
     }
 }
@@ -699,7 +702,7 @@
     margin-inline-start: calc(var(--datepicker-suffix-padding-horizontal) / 2);
     pointer-events: none;
     transition: opacity var(--transition-medium-fast-duration),
-        color var(--transition-medium-fast-duration);
+    color var(--transition-medium-fast-duration);
 }
 
 .uk-datepicker:hover .uk-datepicker-suffix:not(:last-child) {
@@ -730,7 +733,6 @@
 .uk-datepicker-dropdown {
     background-color: var(--datepicker-dropdown-background);
     border: var(--datepicker-dropdown-border-width) var(--datepicker-dropdown-border-style) var(--datepicker-dropdown-border);
-    border-radius: var(--datepicker-dropdown-border-radius);
     font-variant: initial;
     left: -9999px;
     max-width: fit-content;
@@ -740,7 +742,7 @@
     position: absolute;
     top: -9999px;
     z-index: calc(var(--global-z-index) + 30);
-    @if mixin-exists(hook-datepicker-dropdown) {
+    @if meta.mixin-exists('hook-datepicker-dropdown') {
         @include hook-datepicker-dropdown;
     }
 }
@@ -824,9 +826,8 @@
     --datepicker-suffix-color: var(--global-muted-color);
     --datepicker-suffix-padding-horizontal: var(--global-small-gutter);
     --datepicker-clear-color: var(--global-color);
-    --datepicker-dropdown-background: #{$datepicker-dropdown-background};
+    --datepicker-dropdown-background: var(--global-muted-background);
     --datepicker-dropdown-border: var(--global-border);
     --datepicker-dropdown-border-style: var(--global-border-style);
     --datepicker-dropdown-border-width: var(--global-border-width);
-    --datepicker-dropdown-border-radius: var(--global-border-radius);
 }

package/{dist/cjs/components/DescriptionList/index.scss → styles/description-list.scss}

@@ -7,11 +7,13 @@
 //
 // ========================================================================
 
+@use 'sass:meta';
+
 
 // Variables
 // ========================================================================
 
-@import '../../styles/variables.scss';
+@use 'variables' as *;
 
 
 /* ========================================================================
@@ -24,7 +26,7 @@
 
 .uk-description-list > dt {
     color: var(--description-list-term-color);
-    @if mixin-exists(hook-description-list-term) {
+    @if meta.mixin-exists('hook-description-list-term') {
         @include hook-description-list-term;
     }
 }
@@ -38,7 +40,7 @@
  */
 
 .uk-description-list > dd {
-    @if mixin-exists(hook-description-list-description) {
+    @if meta.mixin-exists('hook-description-list-description') {
         @include hook-description-list-description;
     }
 }
@@ -55,7 +57,7 @@
     border-top: var(--description-list-divider-term-border-width) solid var(--description-list-divider-term-border);
     margin-top: var(--description-list-divider-term-margin-top);
     padding-top: var(--description-list-divider-term-margin-top);
-    @if mixin-exists(hook-description-list-divider-term) {
+    @if meta.mixin-exists('hook-description-list-divider-term') {
         @include hook-description-list-divider-term;
     }
 }
@@ -64,7 +66,7 @@
 // Hooks
 // ========================================================================
 
-@if mixin-exists(hook-description-list-misc) {
+@if meta.mixin-exists('hook-description-list-misc') {
     @include hook-description-list-misc;
 }
 

package/{dist/esm/components/Divider/index.scss → styles/divider.scss}

@@ -7,11 +7,13 @@
 //
 // ========================================================================
 
+@use 'sass:meta';
+
 
 // Variables
 // ========================================================================
 
-@import '../../styles/variables.scss';
+@use 'variables' as *;
 
 
 /* ========================================================================
@@ -45,10 +47,10 @@
     background-repeat: no-repeat;
     height: var(--divider-icon-height);
     position: relative;
-    @if mixin-exists(svg-fill) {
+    @if meta.mixin-exists('svg-fill') {
         @include svg-fill($internal-divider-icon-image, '#000', $divider-icon-color);
     }
-    @if mixin-exists(hook-divider-icon) {
+    @if meta.mixin-exists('hook-divider-icon') {
         @include hook-divider-icon;
     }
 }
@@ -60,7 +62,7 @@
     max-width: calc(50% - (var(--divider-icon-width) / 2));
     position: absolute;
     top: var(--divider-icon-line-top);
-    @if mixin-exists(hook-divider-icon-line) {
+    @if meta.mixin-exists('hook-divider-icon-line') {
         @include hook-divider-icon-line;
     }
 }
@@ -68,7 +70,7 @@
 .uk-divider-icon::before {
     right: calc(50% + (var(--divider-icon-width) / 2));
     width: var(--divider-icon-line-width);
-    @if mixin-exists(hook-divider-icon-line-left) {
+    @if meta.mixin-exists('hook-divider-icon-line-left') {
         @include hook-divider-icon-line-left;
     }
 }
@@ -76,7 +78,7 @@
 .uk-divider-icon::after {
     left: calc(50% + (var(--divider-icon-width) / 2));
     width: var(--divider-icon-line-width);
-    @if mixin-exists(hook-divider-icon-line-right) {
+    @if meta.mixin-exists('hook-divider-icon-line-right') {
         @include hook-divider-icon-line-right;
     }
 }
@@ -103,7 +105,7 @@
     max-width: 100%;
     vertical-align: top;
     width: var(--divider-small-width);
-    @if mixin-exists(hook-divider-small) {
+    @if meta.mixin-exists('hook-divider-small') {
         @include hook-divider-small;
     }
 }
@@ -118,7 +120,7 @@
     margin-left: auto;
     margin-right: auto;
     width: 1px;
-    @if mixin-exists(hook-divider-vertical) {
+    @if meta.mixin-exists('hook-divider-vertical') {
         @include hook-divider-vertical;
     }
 }
@@ -127,7 +129,7 @@
 // Hooks
 // ========================================================================
 
-@if mixin-exists(hook-divider-misc) {
+@if meta.mixin-exists('hook-divider-misc') {
     @include hook-divider-misc;
 }
 

package/{dist/cjs/components/Dotnav/index.scss → styles/dotnav.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(--dotnav-margin-horizontal) * -1);
     padding: 0;
-    @if mixin-exists(hook-dotnav) {
+    @if meta.mixin-exists('hook-dotnav') {
         @include hook-dotnav;
     }
 }
@@ -75,7 +77,7 @@
     text-indent: 100%;
     white-space: nowrap;
     width: var(--dotnav-item-width);
-    @if mixin-exists(hook-dotnav-item) {
+    @if meta.mixin-exists('hook-dotnav-item') {
         @include hook-dotnav-item;
     }
 }
@@ -85,7 +87,7 @@
 .uk-dotnav > * > :focus {
     background-color: var(--dotnav-item-hover-background);
     outline: none;
-    @if mixin-exists(hook-dotnav-item-hover) {
+    @if meta.mixin-exists('hook-dotnav-item-hover') {
         @include hook-dotnav-item-hover;
     }
 }
@@ -93,7 +95,7 @@
 /* OnClick */
 .uk-dotnav > * > :active {
     background-color: var(--dotnav-item-onclick-background);
-    @if mixin-exists(hook-dotnav-item-onclick) {
+    @if meta.mixin-exists('hook-dotnav-item-onclick') {
         @include hook-dotnav-item-onclick;
     }
 }
@@ -101,7 +103,7 @@
 /* Active */
 .uk-dotnav > .uk-active > * {
     background-color: var(--dotnav-item-active-background);
-    @if mixin-exists(hook-dotnav-item-active) {
+    @if meta.mixin-exists('hook-dotnav-item-active') {
         @include hook-dotnav-item-active;
     }
 }
@@ -135,7 +137,7 @@
 // Hooks
 // ========================================================================
 
-@if mixin-exists(hook-dotnav-misc) {
+@if meta.mixin-exists('hook-dotnav-misc') {
     @include hook-dotnav-misc;
 }
 

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;
     }
 }
@@ -74,7 +76,7 @@
 .uk-drawer-content-wrapper {
     position: absolute;
     transition: var(--drawer-transition-duration) var(--ease-in-out);
-    @if mixin-exists(hook-drawer-content-wrapper) {
+    @if meta.mixin-exists('hook-drawer-content-wrapper') {
         @include hook-drawer-content-wrapper;
     }
 }
@@ -92,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;
     }
 }
@@ -514,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;
     }
 }
@@ -540,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;
     }
 }
@@ -558,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);