@broxus/react-uikit 0.22.0 → 0.23.0

package/styles/search.scss

@@ -35,17 +35,10 @@
  */
 
 .uk-search {
-    /* 1 */
-    display: inline-block;
-
-    /* 4 */
-    margin: 0;
-
-    /* 3 */
-    max-width: 100%;
-
-    /* 2 */
-    position: relative;
+    display: inline-block; /* 1 */
+    margin: 0; /* 4 */
+    max-width: 100%; /* 3 */
+    position: relative; /* 2 */
 }
 
 
@@ -82,33 +75,16 @@
  */
 
 .uk-search-input {
-    /* 6 */
-    -webkit-appearance: none;
-
-    /* 9 */
-    border: none;
-
-    /* 3 */
-    border-radius: 0;
-
-    /* 1 */
-    box-sizing: border-box;
+    -webkit-appearance: none; /* 6 */
+    border: none; /* 9 */
+    border-radius: 0; /* 3 */
+    box-sizing: border-box; /* 1 */
     color: var(--search-color);
-
-    /* 4 */
-    font: inherit;
-
-    /* 2 */
-    margin: 0;
-
-    /* 5 */
-    overflow: visible;
-
-    /* 7 */
-    vertical-align: middle;
-
-    /* 8 */
-    width: 100%;
+    font: inherit; /* 4 */
+    margin: 0; /* 2 */
+    overflow: visible; /* 5 */
+    vertical-align: middle; /* 7 */
+    width: 100%; /* 8 */
     @if meta.mixin-exists('hook-search-input') {
         @include hook-search-input;
     }
@@ -149,17 +125,11 @@
 .uk-search .uk-search-icon {
     align-items: center;
     bottom: 0;
-
-    /* 3 */
-    color: var(--search-icon-color);
-
-    /* 2 */
-    display: inline-flex;
+    color: var(--search-icon-color); /* 3 */
+    display: inline-flex; /* 2 */
     justify-content: center;
     left: 0;
-
-    /* 1 */
-    position: absolute;
+    position: absolute; /* 1 */
     top: 0;
 }
 

package/styles/select.scss

@@ -1,4 +1,4 @@
-// Name:            Control
+// Name:            Select
 // Description:     Component to create Select elements
 //
 // Component:       `uk-control-select`
@@ -24,7 +24,6 @@
 // ========================================================================
 
 @mixin select-item() {
-    color: var(--select-item-color);
     display: block;
     font-weight: normal;
     line-height: var(--select-item-line-height);
@@ -277,7 +276,7 @@
     font-family: inherit;
     min-width: 4.1px; // fix search cursor missing
     transition: color var(--transition-duration);
-    width: calc(var(--select-input-width, 10) * 1px);
+    width: calc(var(--select-search-input-width, 10) * 1px);
     @if meta.mixin-exists('hook-select-multiple-search-input') {
         @include hook-select-multiple-search-input;
     }
@@ -333,6 +332,10 @@
     }
 }
 
+:not(.uk-select-suffix) + .uk-select-clear:last-child {
+    min-width: var(--select-height);
+}
+
 
 /* Dropdown
  ========================================================================== */
@@ -414,6 +417,7 @@
 
 /* Items */
 .uk-select-item {
+    color: var(--select-item-color);
     cursor: pointer;
     transition: background var(--transition-duration) ease;
     @if meta.mixin-exists('select-item') {
@@ -610,8 +614,9 @@
     --select-content-small-padding-horizontal: var(--control-small-padding-horizontal);
     --select-content-medium-padding-horizontal: var(--control-medium-padding-horizontal);
     --select-content-large-padding-horizontal: var(--control-large-padding-horizontal);
-    --select-placeholder-color: var(--control-placeholder-color);
+    --select-search-input-width: #{$select-search-input-width};
     --select-search-input-color: var(--control-color);
+    --select-placeholder-color: var(--control-placeholder-color);
     --select-selection-item-background: var(--global-background);
     --select-selection-item-border-radius: var(--control-border-radius);
     --select-selection-item-font-size: #{$select-selection-item-font-size};

package/styles/subnav.scss

@@ -144,7 +144,7 @@
     border-left: var(--subnav-divider-border-width) solid transparent;
     content: '';
     height: var(--subnav-divider-border-height);
-    margin-left: calc(var(--subnav-divider-margin-horizontal) - var(subnav-margin-horizontal));
+    margin-left: calc(var(--subnav-divider-margin-horizontal) - var(--subnav-margin-horizontal));
     margin-right: var(--subnav-divider-margin-horizontal);
 }
 

package/styles/switch.scss

@@ -179,6 +179,18 @@
 }
 
 
+/* Loading
+ ========================================================================== */
+
+.uk-switch-loading .uk-switch-handle::before {
+    visibility: hidden;
+}
+
+.uk-switch-loading-icon {
+    display: block;
+}
+
+
 /* Hooks
  ========================================================================== */
 

package/styles/tabs.scss

@@ -92,7 +92,6 @@
 
 .uk-tabs-nav-more {
     --icon-size: var(--tabs-nav-more-font-size);
-
     background: transparent;
     border: 0;
     color: var(--tabs-tab-color);
@@ -120,10 +119,12 @@
     border: var(--tabs-card-tab-border-width) var(--tabs-card-tab-border-style) var(--tabs-card-tab-border);
     color: var(--tabs-tab-color);
     cursor: pointer;
-    min-width: var(--tabs-card-height);
     outline: 0 none;
-    padding: 0 var(--small-padding);
+    padding: var(--tabs-card-tab-padding-vertical) var(--tabs-card-tab-padding-horizontal);
     transition: all var(--transition-duration) var(--ease-in-out);
+    @if meta.mixin-exists('hook-tabs-nav-add') {
+        @include hook-tabs-nav-add;
+    }
 }
 
 .uk-tabs-nav-add:hover {
@@ -204,7 +205,6 @@
 
 .uk-tabs-tab-remove {
     --icon-size: var(--tabs-tab-remove-font-size);
-
     align-items: center;
     background: transparent;
     border: none;
@@ -239,6 +239,9 @@
     margin: 0;
     padding: var(--tabs-card-tab-padding-vertical) var(--tabs-card-tab-padding-horizontal);
     transition: all var(--transition-duration) var(--ease-in-out);
+    @if meta.mixin-exists('hook-tabs-tab-card') {
+        @include hook-tabs-tab-card;
+    }
 }
 
 .uk-tabs-card .uk-tabs-tab-active {
@@ -280,7 +283,7 @@
 .uk-tabs-top {
     flex-direction: column;
 
-    .uk-tabs-nav::before {
+    > .uk-tabs-nav::before {
         border-bottom: var(--global-border-width) var(--global-border-style) var(--global-border);
         content: '';
         left: 0;
@@ -316,12 +319,12 @@
  */
 
 .uk-tabs-bottom {
-    .uk-tabs-nav {
+    > .uk-tabs-nav {
         margin-top: var(--tabs-margin-vertical);
         order: 1;
     }
 
-    .uk-tabs-nav::before {
+    > .uk-tabs-nav::before {
         top: 0;
     }
 
@@ -363,11 +366,11 @@
  */
 
 .uk-tabs-top {
-    .uk-tabs-nav {
+    > .uk-tabs-nav {
         margin-bottom: var(--tabs-margin-vertical);
     }
 
-    .uk-tabs-nav::before {
+    > .uk-tabs-nav::before {
         bottom: 0;
     }
 
@@ -447,6 +450,10 @@
         flex: 1 0 auto; // fix safari scroll problem
         flex-direction: column;
     }
+
+    &.uk-tabs-centered .uk-tabs-nav-list {
+        flex: none;
+    }
 }
 
 /*
@@ -574,11 +581,21 @@
 /* Size modifier
  ========================================================================== */
 
+.uk-tabs-medium .uk-tabs-tab {
+    padding: var(--tabs-medium-tab-padding-vertical) var(--tabs-medium-tab-padding-horizontal);
+}
+
 .uk-tabs-large .uk-tabs-tab {
     padding: var(--tabs-large-tab-padding-vertical) var(--tabs-large-tab-padding-horizontal);
 }
 
-.uk-tabs-card-large .uk-tabs-tab {
+.uk-tabs-medium.uk-tabs-card .uk-tabs-tab,
+.uk-tabs-medium.uk-tabs-card .uk-tabs-nav-add {
+    padding: var(--tabs-card-medium-tab-padding-vertical) var(--tabs-card-medium-tab-padding-horizontal);
+}
+
+.uk-tabs-large.uk-tabs-card .uk-tabs-tab,
+.uk-tabs-large.uk-tabs-card .uk-tabs-nav-add {
     padding: var(--tabs-card-large-tab-padding-vertical) var(--tabs-card-large-tab-padding-horizontal);
 }
 
@@ -597,6 +614,9 @@
     position: absolute;
     top: -9999px;
     z-index: calc(var(--global-z-index) + 50);
+    @if meta.mixin-exists('hook-tabs-dropdown') {
+        @include hook-tabs-dropdown;
+    }
 }
 
 .uk-tabs-dropdown-hidden {
@@ -653,6 +673,7 @@
 }
 
 .uk-tabs-dropdown-menu-item-remove {
+    --icon-size: var(--tabs-tab-remove-font-size);
     background: transparent;
     border: 0;
     color: var(--tabs-tab-remove-color);
@@ -686,31 +707,33 @@
 // Motion
 // ========================================================================
 
-.uk-tabs-motion-switch {
-    &-appear,
-    &-enter {
-        transition: none;
+.uk-tabs-motion-switch-appear,
+.uk-tabs-motion-switch-enter {
+    transition: none;
+}
 
-        &-start { opacity: 0; }
+.uk-tabs-motion-switch-appear-start,
+.uk-tabs-motion-switch-enter-start {
+    opacity: 0;
+}
 
-        &-active {
-            opacity: 1;
-            transition: opacity var(--transition-duration);
-        }
-    }
+.uk-tabs-motion-switch-appear-active,
+.uk-tabs-motion-switch-enter-active {
+    opacity: 1;
+    transition: opacity var(--transition-duration);
+}
 
-    &-leave {
-        inset: 0;
-        position: absolute;
-        transition: none;
+.uk-tabs-motion-switch-leave {
+    inset: 0;
+    position: absolute;
+    transition: none;
+}
 
-        &-start { opacity: 1; }
+.uk-tabs-motion-switch-leave-start { opacity: 1; }
 
-        &-active {
-            opacity: 0;
-            transition: opacity var(--transition-duration);
-        }
-    }
+.uk-tabs-motion-switch-leave-active {
+    opacity: 0;
+    transition: opacity var(--transition-duration);
 }
 
 
@@ -730,6 +753,8 @@
     --tabs-margin-vertical: #{$tabs-margin-vertical};
     --tabs-tab-padding-horizontal: #{$tabs-tab-padding-horizontal};
     --tabs-tab-padding-vertical: #{$tabs-tab-padding-vertical};
+    --tabs-medium-tab-padding-horizontal: #{$tabs-medium-tab-padding-horizontal};
+    --tabs-medium-tab-padding-vertical: #{$tabs-medium-tab-padding-vertical};
     --tabs-large-tab-padding-horizontal: #{$tabs-large-tab-padding-horizontal};
     --tabs-large-tab-padding-vertical: #{$tabs-large-tab-padding-vertical};
     --tabs-tab-font-size: var(--global-font-size);
@@ -738,10 +763,10 @@
     --tabs-tab-active-color: var(--global-primary-color);
     --tabs-tab-disabled-color: var(--global-muted-color);
     --tabs-tab-remove-color: var(--global-muted-color);
-    --tabs-tab-remove-font-size: var(--global-small-font-size);
+    --tabs-tab-remove-font-size: var(--global-font-size);
     --tabs-tab-remove-hover-color: var(--global-danger-color);
     --tabs-tab-remove-active-color: var(--global-danger-color);
-    --tabs-nav-more-font-size: var(--global-small-font-size);
+    --tabs-nav-more-font-size: var(--global-font-size);
     --tabs-ink-bar-color: var(--global-primary-color);
     --tabs-ink-bar-height: #{$tabs-ink-bar-height};
     --tabs-ink-bar-width: #{$tabs-ink-bar-width};
@@ -750,12 +775,15 @@
     --tabs-card-tab-border-style: var(--global-border-style);
     --tabs-card-tab-border: var(--global-border);
     --tabs-card-tab-border-radius: var(--global-border-radius);
-    --tabs-card-gutter: var(--global-xsmall-gutter);
-    --tabs-card-tab-padding-horizontal: #{$tabs-card-tab-padding-horizontal};
-    --tabs-card-tab-padding-vertical: #{$tabs-card-tab-padding-vertical};
-    --tabs-card-large-tab-padding-horizontal: #{$tabs-card-tab-padding-horizontal};
-    --tabs-card-large-tab-padding-vertical: #{$tabs-card-tab-padding-vertical};
+    --tabs-card-tab-padding-horizontal: var(--tabs-tab-padding-horizontal);
+    --tabs-card-tab-padding-vertical: var(--tabs-tab-padding-vertical);
+    --tabs-card-medium-tab-padding-horizontal: var(--tabs-medium-tab-padding-horizontal);
+    --tabs-card-medium-tab-padding-vertical: var(--tabs-medium-tab-padding-vertical);
+    --tabs-card-large-tab-padding-horizontal: var(--tabs-large-tab-padding-horizontal);
+    --tabs-card-large-tab-padding-vertical: var(--tabs-large-tab-padding-vertical);
     --tabs-card-tab-active-background: var(--global-background);
+    --tabs-card-tab-active-color: var(--global-emphasis-color);
+    --tabs-card-gutter: var(--global-xsmall-gutter);
     --tabs-dropdown-background: var(--dropdown-background);
     --tabs-dropdown-border-radius: var(--global-border-radius);
     --tabs-dropdown-item-color: var(--tabs-tab-color);

package/styles/text.scss

@@ -176,81 +176,81 @@
 @supports (-webkit-background-clip: text) {
     .uk-text-loading {
         background-image: linear-gradient(
-                90deg,
-                var(--text-loading-color) 25%,
-                var(--text-loading-emphasis-color) 50%,
-                var(--text-loading-color) 75%
+            90deg,
+            var(--text-loading-color) 25%,
+            var(--text-loading-emphasis-color) 50%,
+            var(--text-loading-color) 75%
         );
         color: transparent !important;
 
-        .uk-text-muted.uk-text-loading,
-        .uk-text-muted .uk-text-loading {
-            background-image: linear-gradient(
-                    90deg,
-                    var(--text-muted-color) 25%,
-                    var(--text-color) 50%,
-                    var(--text-muted-color) 75%
-            );
+        @if meta.mixin-exists('hook-text-loading') {
+            @include hook-text-loading;
         }
+    }
 
-        .uk-text-primary.uk-text-loading,
-        .uk-text-primary .uk-text-loading {
-            --primary-muted-color: color-mix(in sRGB, var(--text-primary-color) 50%, transparent);
-            background-image: linear-gradient(
-                    90deg,
-                    var(--text-primary-color) 25%,
-                    var(--primary-muted-color) 50%,
-                    var(--text-primary-color) 75%
-            );
-        }
+    .uk-text-muted.uk-text-loading,
+    .uk-text-muted .uk-text-loading {
+        background-image: linear-gradient(
+            90deg,
+            var(--text-muted-color) 25%,
+            var(--text-base-color) 50%,
+            var(--text-muted-color) 75%
+        );
+    }
 
-        .uk-text-secondary.uk-text-loading,
-        .uk-text-secondary .uk-text-loading {
-            --secondary-muted-color: color-mix(in sRGB, var(--text-secondary-color) 50%, transparent);
-            background-image: linear-gradient(
-                    90deg,
-                    var(--text-secondary-color) 25%,
-                    var(--secondary-muted-color) 50%,
-                    var(--text-secondary-color) 75%
-            );
-        }
+    .uk-text-primary.uk-text-loading,
+    .uk-text-primary .uk-text-loading {
+        --primary-muted-color: color-mix(in sRGB, var(--text-primary-color) 50%, transparent);
+        background-image: linear-gradient(
+            90deg,
+            var(--text-primary-color) 25%,
+            var(--primary-muted-color) 50%,
+            var(--text-primary-color) 75%
+        );
+    }
 
-        .uk-text-tertiary.uk-text-loading,
-        .uk-text-tertiary .uk-text-loading {
-            --tertiary-muted-color: color-mix(in sRGB, var(--text-tertiary-color) 50%, transparent);
-            background-image: linear-gradient(
-                    90deg,
-                    var(--text-tertiary-color) 25%,
-                    var(--tertiary-muted-color) 50%,
-                    var(--text-tertiary-color) 75%
-            );
-        }
+    .uk-text-secondary.uk-text-loading,
+    .uk-text-secondary .uk-text-loading {
+        --secondary-muted-color: color-mix(in sRGB, var(--text-secondary-color) 50%, transparent);
+        background-image: linear-gradient(
+            90deg,
+            var(--text-secondary-color) 25%,
+            var(--secondary-muted-color) 50%,
+            var(--text-secondary-color) 75%
+        );
+    }
 
-        .uk-text-warning.uk-text-loading,
-        .uk-text-warning .uk-text-loading {
-            --warning-muted-color: color-mix(in sRGB, var(--text-warning-color) 50%, transparent);
-            background-image: linear-gradient(
-                    90deg,
-                    var(--text-warning-color) 25%,
-                    var(--warning-muted-color) 50%,
-                    var(--text-warning-color) 75%
-            );
-        }
+    .uk-text-tertiary.uk-text-loading,
+    .uk-text-tertiary .uk-text-loading {
+        --tertiary-muted-color: color-mix(in sRGB, var(--text-tertiary-color) 50%, transparent);
+        background-image: linear-gradient(
+            90deg,
+            var(--text-tertiary-color) 25%,
+            var(--tertiary-muted-color) 50%,
+            var(--text-tertiary-color) 75%
+        );
+    }
 
-        .uk-text-danger.uk-text-loading,
-        .uk-text-danger .uk-text-loading {
-            --danger-muted-color: color-mix(in sRGB, var(--text-danger-color) 50%, transparent);
-            background-image: linear-gradient(
-                    90deg,
-                    var(--text-danger-color) 25%,
-                    var(--danger-muted-color) 50%,
-                    var(--text-danger-color) 75%
-            );
-        }
+    .uk-text-warning.uk-text-loading,
+    .uk-text-warning .uk-text-loading {
+        --warning-muted-color: color-mix(in sRGB, var(--text-warning-color) 50%, transparent);
+        background-image: linear-gradient(
+            90deg,
+            var(--text-warning-color) 25%,
+            var(--warning-muted-color) 50%,
+            var(--text-warning-color) 75%
+        );
+    }
 
-        @if meta.mixin-exists('hook-text-loading') {
-            @include hook-text-loading;
-        }
+    .uk-text-danger.uk-text-loading,
+    .uk-text-danger .uk-text-loading {
+        --danger-muted-color: color-mix(in sRGB, var(--text-danger-color) 50%, transparent);
+        background-image: linear-gradient(
+            90deg,
+            var(--text-danger-color) 25%,
+            var(--danger-muted-color) 50%,
+            var(--text-danger-color) 75%
+        );
     }
 }
 

package/styles/thumbnav.scss

@@ -50,7 +50,7 @@
 
 .uk-thumbnav > * {
     /* 1 */
-    padding-left: var(thumbnav-margin-horizontal);
+    padding-left: var(--thumbnav-margin-horizontal);
 }
 
 
@@ -99,13 +99,13 @@
 
     /* 2 */
     margin-left: 0;
-    margin-top: calc(var(thumbnav-margin-vertical) * -1);
+    margin-top: calc(var(--thumbnav-margin-vertical) * -1);
 }
 
 /* 2 */
 .uk-thumbnav-vertical > * {
     padding-left: 0;
-    padding-top: var(thumbnav-margin-vertical);
+    padding-top: var(--thumbnav-margin-vertical);
 }
 
 
@@ -120,7 +120,7 @@
 // Vars
 // ========================================================================
 
-.hook-inverse() {
+:root {
     --thumbnav-margin-horizontal: #{$thumbnav-margin-horizontal};
     --thumbnav-margin-vertical: var(--thumbnav-margin-horizontal);
 }