@broxus/react-uikit 0.17.4 → 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
@@ -38,58 +41,60 @@
     cursor: text;
     display: flex;
     font-size: inherit;
-    min-height: var(--control-height);
     padding-left: var(--control-padding-horizontal);
     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;
     }
 }
 
+/* Hover state (unused for disabled state) */
 .uk-datepicker:hover {
     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;
     }
 }
 
-/* Focus state  (unused for disabled state) */
+/* Focus state (unused for disabled state) */
 .uk-datepicker:focus,
-.uk-datepicker:focus-within {
+.uk-datepicker:focus-within,
+.uk-datepicker-focused {
     background-color: var(--control-focus-background);
     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;
     }
 }
 
-.uk-datepicker-small {
-    font-size: var(--control-small-font-size);
-    padding: 0 var(--control-small-padding-horizontal);
+/* Disabled state */
+.uk-datepicker-disabled {
+    background-color: var(--control-disabled-background);
+    @if meta.mixin-exists('hook-datepicker-disabled') {
+        @include hook-datepicker-disabled;
+    }
 }
 
-.uk-datepicker-medium {
-    font-size: var(--control-medium-font-size);
-    padding: 0 var(--control-medium-padding-horizontal);
+.uk-datepicker-disabled .uk-control.uk-disabled {
+    background: none;
 }
 
-.uk-datepicker-large {
-    font-size: var(--control-large-font-size);
-    padding: 0 var(--control-large-padding-horizontal);
-}
+
+/* Control Input
+ ========================================================================== */
 
 .uk-datepicker .uk-datepicker-input {
     align-items: center;
     display: inline-flex;
     position: relative;
     width: 100%;
-    @if mixin-exists(hook-datepicker-input) {
+    @if meta.mixin-exists('hook-datepicker-input') {
         @include hook-datepicker-input;
     }
 }
@@ -97,8 +102,132 @@
 .uk-datepicker .uk-datepicker-input .uk-control {
     border: 0 none;
     flex: 1;
+    min-height: var(--datepicker-height);
     min-width: 1px;
     padding: 0;
+    @if meta.mixin-exists('hook-datepicker-control') {
+        @include hook-datepicker-control;
+    }
+}
+
+
+/* Size modifier
+ ========================================================================== */
+
+/*
+ * Small
+ */
+
+.uk-datepicker-small {
+    font-size: var(--control-small-font-size);
+    padding: 0 var(--control-small-padding-horizontal);
+    @if meta.mixin-exists('hook-datepicker-small') {
+        @include hook-datepicker-small;
+    }
+}
+
+.uk-datepicker-small .uk-datepicker-input .uk-control {
+    min-height: var(--datepicker-small-height);
+}
+
+/*
+ * Medium
+ */
+
+.uk-datepicker-medium {
+    font-size: var(--control-medium-font-size);
+    padding: 0 var(--control-medium-padding-horizontal);
+    @if meta.mixin-exists('hook-datepicker-medium') {
+        @include hook-datepicker-medium;
+    }
+}
+
+.uk-datepicker-medium .uk-datepicker-input .uk-control {
+    min-height: var(--datepicker-medium-height);
+}
+
+/*
+ * Large
+ */
+
+.uk-datepicker-large {
+    font-size: var(--control-large-font-size);
+    padding: 0 var(--control-large-padding-horizontal);
+    @if meta.mixin-exists('hook-datepicker-large') {
+        @include hook-datepicker-large;
+    }
+}
+
+.uk-datepicker-large .uk-datepicker-input .uk-control {
+    min-height: var(--datepicker-large-height);
+}
+
+
+/* Style modifier
+ ========================================================================== */
+
+/*
+ * Success
+ */
+
+.uk-datepicker-success,
+.uk-datepicker-success:hover,
+.uk-datepicker-success:focus-within {
+    border-color: var(--datepicker-success-border);
+    color: var(--datepicker-success-color);
+    @if meta.mixin-exists('hook-datepicker-success') {
+        @include hook-datepicker-success;
+    }
+}
+
+/*
+ * Warning
+ */
+
+.uk-datepicker-warning,
+.uk-datepicker-warning:hover,
+.uk-datepicker-warning:focus-within {
+    border-color: var(--datepicker-warning-border);
+    color: var(--datepicker-warning-color);
+    @if meta.mixin-exists('hook-datepicker-warning') {
+        @include hook-datepicker-warning;
+    }
+}
+
+/*
+ * Danger
+ */
+
+.uk-datepicker-danger,
+.uk-datepicker-danger:hover,
+.uk-datepicker-danger:focus-within {
+    border-color: var(--datepicker-danger-border);
+    color: var(--datepicker-danger-color);
+    @if meta.mixin-exists('hook-datepicker-danger') {
+        @include hook-datepicker-danger;
+    }
+}
+
+/*
+ * Blank
+ */
+
+.uk-datepicker-blank,
+.uk-datepicker-blank:hover,
+.uk-datepicker-blank:focus-within {
+    background-color: transparent;
+    border-color: transparent;
+    border-style: var(--datepicker-blank-border-style);
+    @if meta.mixin-exists('hook-datepicker-blank') {
+        @include hook-datepicker-blank;
+    }
+}
+
+.uk-datepicker-blank:focus-within {
+    border-color: var(--datepicker-blank-focus-border);
+    @if meta.mixin-exists('hook-datepicker-blank-focus') {
+        @include hook-datepicker-blank-focus;
+    }
 }
 
 
@@ -109,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;
     }
 }
@@ -121,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;
     }
 }
@@ -149,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;
     }
 }
@@ -159,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;
     }
 }
@@ -202,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;
     }
 }
@@ -214,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;
     }
 }
@@ -222,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;
     }
 }
@@ -232,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;
     }
 }
@@ -331,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;
     }
 }
@@ -345,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;
     }
 }
@@ -365,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;
     }
 }
@@ -393,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;
     }
 }
@@ -507,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;
     }
 }
@@ -573,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) {
@@ -604,16 +733,16 @@
 .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;
     outline: none;
     overflow: hidden;
     padding: calc(var(--datepicker-gutter) / 2);
     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;
     }
 }
@@ -644,9 +773,21 @@
 // ========================================================================
 
 :root {
-    --datepicker-border-width: var(--global-border-width);
-    --datepicker-border-style: var(--global-border-style);
-    --datepicker-border: var(--global-border);
+    --datepicker-border: var(--control-border);
+    --datepicker-border-style: var(--control-border-style);
+    --datepicker-border-width: var(--control-border-width);
+    --datepicker-height: #{$datepicker-height};
+    --datepicker-small-height: #{$datepicker-small-height};
+    --datepicker-medium-height: #{$datepicker-medium-height};
+    --datepicker-large-height: #{$datepicker-large-height};
+    --datepicker-success-border: var(--control-success-border);
+    --datepicker-success-color: var(--control-success-color);
+    --datepicker-warning-border: var(--control-warning-border);
+    --datepicker-warning-color: var(--control-warning-color);
+    --datepicker-danger-border: var(--control-danger-border);
+    --datepicker-danger-color: var(--control-danger-color);
+    --datepicker-blank-border-style: var(--control-blank-border-style);
+    --datepicker-blank-focus-border: var(--control-blank-focus-border);
     --datepicker-header-padding-horizontal: var(--global-small-gutter);
     --datepicker-header-font-size: var(--global-font-size);
     --datepicker-header-font-weight: var(--global-bold-font-weight);
@@ -685,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;
 }