@broxus/react-uikit 0.21.0 → 0.23.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);
@@ -48,44 +47,48 @@
     }
 }
 
-.uk-select-selector {
+.uk-select-content {
     align-items: center;
     display: flex;
-    flex-wrap: wrap;
-    padding: 0 var(--select-selector-padding-horizontal);
+    flex: auto;
+    min-width: 0;
+    order: 0;
+    overflow: hidden;
+    padding: 0 var(--select-content-padding-horizontal);
     position: relative;
-    width: 100%;
-    @if meta.mixin-exists('hook-select-selector') {
-        @include hook-select-selector;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    @if meta.mixin-exists('hook-select-content') {
+        @include hook-select-content;
     }
 }
 
-.uk-select-selector input {
+.uk-select-content input {
     cursor: inherit;
     font: inherit;
 }
 
 /* Disabled */
-.uk-select-selector.uk-select-disabled,
-.uk-select-selector.uk-select-disabled input {
+.uk-select-content.uk-select-disabled,
+.uk-select-content.uk-select-disabled input {
     cursor: not-allowed;
 }
 
 // Reset search input style
-.uk-select-selector .uk-select-selection-search-input {
+.uk-select-content .uk-select-input {
     appearance: none;
     background: transparent;
     border: none;
-    color: var(--select-selection-search-input-color);
+    color: var(--select-search-input-color);
     margin: 0;
     outline: none;
     padding: 0;
-    @if meta.mixin-exists('hook-select-selection-search-input') {
-        @include hook-select-selection-search-input;
+    @if meta.mixin-exists('hook-select-search-input') {
+        @include hook-select-search-input;
     }
 }
 
-.uk-select-selector .uk-select-selection-search-input::-webkit-search-cancel-button {
+.uk-select-content .uk-select-input::-webkit-search-cancel-button {
     appearance: none;
     display: none;
 }
@@ -94,7 +97,7 @@
 // Selection
 //
 
-.uk-select-selection-item {
+.uk-select-content-value {
     flex: 1;
     overflow: hidden;
     text-overflow: ellipsis;
@@ -103,9 +106,7 @@
     // IE11 css hack. `*::-ms-backdrop,` is a must have
     @media all and (-ms-high-contrast: none) {
         *::-ms-backdrop,
-        & {
-            flex: auto;
-        }
+        & { flex: auto; }
     }
 }
 
@@ -113,22 +114,27 @@
 // Placeholder
 //
 
-.uk-select-selection-placeholder {
-    color: var(--select-selection-placeholder-color);
+.uk-select-placeholder {
+    color: var(--select-placeholder-color);
     overflow: hidden;
     pointer-events: none;
     text-overflow: ellipsis;
     white-space: nowrap;
-    @if meta.mixin-exists('hook-select-selection-placeholder') {
-        @include hook-select-selection-placeholder;
+
+    &::after {
+        content: '\00a0'; // nbsp placeholder
+        overflow: hidden;
+        width: 0;
     }
 
     // IE11 css hack. `*::-ms-backdrop,` is a must have
     @media all and (-ms-high-contrast: none) {
         *::-ms-backdrop,
-        & {
-            flex: auto;
-        }
+        & { flex: auto; }
+    }
+
+    @if meta.mixin-exists('hook-select-placeholder') {
+        @include hook-select-placeholder;
     }
 }
 
@@ -144,51 +150,44 @@
 /* Single selection
  ========================================================================== */
 
-.uk-select-single .uk-select-selector {
+.uk-select-single .uk-select-content {
     overflow: hidden;
-    @if meta.mixin-exists('hook-select-single-selector') {
-        @include hook-select-single-selector;
+    @if meta.mixin-exists('hook-select-single-content') {
+        @include hook-select-single-content;
     }
 }
 
-.uk-select-single .uk-select-selection-search {
+.uk-select-single .uk-select-input {
     align-items: center;
     display: flex;
-    inset: 0 var(--select-selector-padding-horizontal) 0 var(--select-selector-padding-horizontal);
-    position: absolute;
-    @if meta.mixin-exists('hook-select-single-selection-search') {
-        @include hook-select-single-selection-search;
-    }
-}
-
-.uk-select-single .uk-select-selection-search-input {
     height: 100%;
+    inset: 0 var(--select-content-padding-horizontal);
     line-height: initial;
-    width: 100%;
-    @if meta.mixin-exists('hook-select-single-selection-search-input') {
-        @include hook-select-single-selection-search-input;
+    position: absolute;
+    @if meta.mixin-exists('hook-select-single-search-input') {
+        @include hook-select-single-search-input;
     }
 }
 
-.uk-select-single .uk-select-selection-item,
-.uk-select-single .uk-select-selection-placeholder {
+.uk-select-single .uk-select-content-value,
+.uk-select-single .uk-select-placeholder {
     padding: 0;
-    transition: all var(--transition-duration);
+    transition: color var(--transition-duration);
 }
 
-.uk-select-single .uk-select-selection-item {
+.uk-select-single .uk-select-content-value {
     position: relative;
     user-select: none;
-    @if meta.mixin-exists('hook-select-single-selection-item') {
-        @include hook-select-single-selection-item;
+    @if meta.mixin-exists('hook-select-single-content-value') {
+        @include hook-select-single-content-value;
     }
 }
 
 // Opacity selection if open
-.uk-select-single.uk-select-open .uk-select-selection-item {
-    color: var(--select-selection-placeholder-color);
-    @if meta.mixin-exists('hook-select-single-open-selection-item') {
-        @include hook-select-single-open-selection-item;
+.uk-select-single.uk-select-open .uk-select-content-value {
+    color: var(--select-placeholder-color);
+    @if meta.mixin-exists('hook-select-single-open-content-value') {
+        @include hook-select-single-open-content-value;
     }
 }
 
@@ -196,52 +195,36 @@
 /* Multiple selection
  ========================================================================== */
 
-.uk-select-multiple .uk-select-selector {
-    padding: var(--select-gutter) var(--select-selector-padding-horizontal);
-    @if meta.mixin-exists('hook-select-multiple-selector') {
-        @include hook-select-multiple-selector;
+.uk-select-multiple .uk-select-content {
+    align-items: center;
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--select-gutter);
+    height: auto;
+    line-height: normal;
+    padding: var(--select-content-padding-vertical) var(--select-content-padding-horizontal);
+    @if meta.mixin-exists('hook-select-multiple-content') {
+        @include hook-select-multiple-content;
     }
 }
 
-.uk-select-multiple .uk-select-selection-placeholder {
-    left: var(--select-selector-padding-horizontal);
+.uk-select-multiple .uk-select-placeholder {
+    left: var(--select-content-padding-horizontal);
     position: absolute;
-    right: var(--select-selector-padding-horizontal);
+    right: var(--select-content-padding-horizontal);
     top: 50%;
     transform: translateY(-50%);
     transition: all var(--transition-duration);
-    @if meta.mixin-exists('hook-select-multiple-selection-placeholder') {
-        @include hook-select-multiple-selection-placeholder;
+    @if meta.mixin-exists('hook-select-multiple-placeholder') {
+        @include hook-select-multiple-placeholder;
     }
 }
 
-.uk-select-multiple .uk-select-selection-overflow {
-    align-items: center;
-    display: flex;
-    flex-wrap: wrap;
-    grid-gap: var(--select-gutter);
-    height: auto;
-    line-height: normal;
-    padding: 0;
-    width: 100%;
-}
-
-.uk-select-multiple .uk-select-selection-overflow-item {
+.uk-select-multiple .uk-select-content-item {
     flex: none;
     max-width: 100%;
 }
 
-.uk-select-multiple .uk-select-selection-overflow-item-suffix {
-    display: none;
-    left: unset !important;
-    position: unset !important;
-    top: unset !important;
-}
-
-.uk-select-multiple.uk-select-open .uk-select-selection-overflow-item-suffix {
-    display: block;
-}
-
 .uk-select-multiple .uk-select-selection-item {
     align-items: center;
     background-color: var(--select-selection-item-background);
@@ -274,7 +257,6 @@
 
 .uk-select-multiple .uk-select-selection-item-remove {
     --icon-size: var(--select-selection-item-remove-icon-size);
-
     align-items: center;
     color: var(--control-icon-color);
     cursor: pointer;
@@ -290,42 +272,24 @@
     color: var(--select-selection-item-remove-icon-hover-color);
 }
 
-.uk-select-multiple .uk-select-selection-search {
-    display: flex;
-    flex: none;
-    position: relative;
-    @if meta.mixin-exists('hook-select-multiple-selection-search') {
-        @include hook-select-multiple-selection-search;
-    }
-}
-
-.uk-select-multiple .uk-select-selection-search-input,
-.uk-select-multiple .uk-select-selection-search-mirror {
+.uk-select-multiple .uk-select-input {
     font-family: inherit;
-    transition: all var(--transition-duration);
-}
-
-.uk-select-multiple .uk-select-selection-search-input {
     min-width: 4.1px; // fix search cursor missing
-    width: 100%;
-    @if meta.mixin-exists('hook-select-multiple-selection-search-input') {
-        @include hook-select-multiple-selection-search-input;
+    transition: color var(--transition-duration);
+    width: calc(var(--select-search-input-width, 10) * 1px);
+    @if meta.mixin-exists('hook-select-multiple-search-input') {
+        @include hook-select-multiple-search-input;
     }
 }
 
-.uk-select-multiple .uk-select-selection-search-mirror {
-    left: 0;
-    position: absolute;
-    top: 0;
-    visibility: hidden;
-    white-space: pre; // fix whitespace wrapping caused width calculation bug
-    z-index: 999;
-}
-
 
 /* Icons
  ========================================================================== */
 
+.uk-select-suffix {
+    order: 20;
+}
+
 .uk-select-arrow,
 .uk-select-clear {
     align-items: center;
@@ -334,9 +298,9 @@
     display: flex;
     height: 100%;
     justify-content: center;
-    position: absolute;
+    overflow: hidden;
     transition: color var(--transition-duration) var(--ease-in-out);
-    width: var(--select-height);
+    width: min-content;
 }
 
 .uk-select:not(.uk-select-disabled) .uk-select-arrow:hover,
@@ -350,14 +314,10 @@
     cursor: not-allowed;
 }
 
-.uk-control-select:not(.uk-control-rtl) .uk-select-arrow,
-.uk-control-select:not(.uk-control-rtl) .uk-select-clear {
-    right: 0;
-}
-
 /* Arrow */
 .uk-select-arrow {
     --icon-size: var(--select-arrow-icon-size);
+    width: var(--select-height);
     @if meta.mixin-exists('hook-select-arrow') {
         @include hook-select-arrow;
     }
@@ -365,29 +325,15 @@
 
 /* Clear */
 .uk-select-clear {
+    min-width: fit-content;
+    order: 10;
     @if meta.mixin-exists('hook-select-clear') {
         @include hook-select-clear;
     }
 }
 
-.uk-control-select .uk-select-arrow + .uk-select-clear {
-    width: calc(var(--select-height) * 0.6777);
-}
-
-.uk-control-select:not(.uk-control-rtl) .uk-select-arrow + .uk-select-clear {
-    right: var(--select-height);
-}
-
-/* Selector */
-.uk-control-select:not(.uk-control-rtl) .uk-select-allow-clear .uk-select-selector,
-.uk-control-select:not(.uk-control-rtl) .uk-select-show-arrow .uk-select-selector {
-    padding-right: var(--select-height);
-}
-
-.uk-control-select:not(.uk-control-rtl) .uk-select-allow-clear.uk-select-show-arrow .uk-select-selector {
-    --arrow-width: var(--select-height);
-    --clear-width: calc(var(--select-height) * 0.6777);
-    padding-right: calc(var(--arrow-width) + var(--clear-width));
+:not(.uk-select-suffix) + .uk-select-clear:last-child {
+    min-width: var(--select-height);
 }
 
 
@@ -471,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') {
@@ -524,7 +471,7 @@
     color: var(--select-item-group-color);
     cursor: default;
     font-size: var(--select-item-group-font-size);
-    padding: 0;
+    padding: 0 var(--select-item-group-padding-horizontal);
     text-transform: var(--select-item-group-text-transform);
 }
 
@@ -556,6 +503,10 @@
     transition-property: border;
 }
 
+.uk-control-select .uk-icon {
+    opacity: 1;
+}
+
 // Hover state (unused for disabled state)
 .uk-control-select:not(.uk-disabled):hover .uk-select {
     border-color: var(--select-hover-border);
@@ -582,187 +533,52 @@
     min-height: var(--select-small-height);
 }
 
-.uk-control-select.uk-control-small .uk-select-selector {
-    padding: 0 var(--select-selector-small-padding-horizontal);
+.uk-control-select.uk-control-small .uk-select-content {
+    padding: 0 var(--select-content-small-padding-horizontal);
 }
 
-.uk-control-select.uk-control-small .uk-select-arrow,
-.uk-control-select.uk-control-small .uk-select-clear {
+.uk-control-select.uk-control-small .uk-select-arrow {
+    min-width: var(--select-small-height);
     width: var(--select-small-height);
 }
 
-// Clear
-.uk-control-select.uk-control-small .uk-select-arrow + .uk-select-clear {
-    width: calc(var(--select-small-height) * 0.6777);
-}
-
-.uk-control-select.uk-control-small:not(.uk-control-rtl) .uk-select-arrow + .uk-select-clear {
-    right: var(--select-small-height);
-}
-
-// Selector
-.uk-control-select.uk-control-small:not(.uk-control-rtl) .uk-select-allow-clear .uk-select-selector,
-.uk-control-select.uk-control-small:not(.uk-control-rtl) .uk-select-show-arrow .uk-select-selector {
-    padding-right: var(--select-small-height);
-}
-
-.uk-control-select.uk-control-small:not(.uk-control-rtl) .uk-select-allow-clear.uk-select-show-arrow .uk-select-selector {
-    --arrow-width: var(--select-small-height);
-    --clear-width: calc(var(--select-small-height) * 0.6777);
-    padding-right: calc(var(--arrow-width) + var(--clear-width));
-}
-
 /* Medium */
 .uk-control-select.uk-control-medium {
     min-height: var(--select-medium-height);
 }
 
-.uk-control-select.uk-control-medium .uk-select-selector {
-    padding: 0 var(--select-selector-medium-padding-horizontal);
+.uk-control-select.uk-control-medium .uk-select-content {
+    padding: 0 var(--select-content-medium-padding-horizontal);
 }
 
-.uk-control-select.uk-control-medium .uk-select-arrow,
-.uk-control-select.uk-control-medium .uk-select-clear {
+.uk-control-select.uk-control-medium .uk-select-arrow {
+    min-width: var(--select-medium-height);
     width: var(--select-medium-height);
 }
 
-// Clear
-.uk-control-select.uk-control-medium .uk-select-arrow + .uk-select-clear {
-    width: calc(var(--select-medium-height) * 0.6777);
-}
-
-.uk-control-select.uk-control-medium:not(.uk-control-rtl) .uk-select-arrow + .uk-select-clear {
-    right: var(--select-medium-height);
-}
-
-// Selector
-.uk-control-select.uk-control-medium:not(.uk-control-rtl) .uk-select-allow-clear .uk-select-selector,
-.uk-control-select.uk-control-medium:not(.uk-control-rtl) .uk-select-show-arrow .uk-select-selector {
-    padding-right: var(--select-medium-height);
-}
-
-.uk-control-select.uk-control-medium:not(.uk-control-rtl) .uk-select-allow-clear.uk-select-show-arrow .uk-select-selector {
-    --arrow-width: var(--select-medium-height);
-    --clear-width: calc(var(--select-medium-height) * 0.6777);
-    padding-right: calc(var(--arrow-width) + var(--clear-width));
-}
-
 /* Large */
 .uk-control-select.uk-control-large {
     min-height: var(--select-large-height);
 }
 
-.uk-control-select.uk-control-large .uk-select-selector {
-    padding: 0 var(--select-selector-large-padding-horizontal);
+.uk-control-select.uk-control-large .uk-select-content {
+    padding: 0 var(--select-content-large-padding-horizontal);
 }
 
-.uk-control-select.uk-control-large .uk-select-arrow ,
-.uk-control-select.uk-control-large .uk-select-clear {
+.uk-control-select.uk-control-large .uk-select-arrow {
+    min-width: calc(var(--select-large-height) * 0.8667);
     width: calc(var(--select-large-height) * 0.8667);
 }
 
-// Clear
-.uk-control-select.uk-control-large .uk-select-arrow + .uk-select-clear {
-    width: calc(var(--select-large-height) * 0.6777);
-}
-
-.uk-control-select.uk-control-large:not(.uk-control-rtl) .uk-select-arrow + .uk-select-clear {
-    right: calc(var(--select-large-height) * 0.8667);
-}
-
-// Selector
-.uk-control-select.uk-control-large:not(.uk-control-rtl) .uk-select-allow-clear .uk-select-selector,
-.uk-control-select.uk-control-large:not(.uk-control-rtl) .uk-select-show-arrow .uk-select-selector {
-    padding-right: calc(var(--select-large-height) * 0.8667);
-}
-
-.uk-control-select.uk-control-large:not(.uk-control-rtl) .uk-select-allow-clear.uk-select-show-arrow .uk-select-selector {
-    --arrow-width: calc(var(--select-large-height) * 0.8667);
-    --clear-width: calc(var(--select-large-height) * 0.6777);
-    padding-right: calc(var(--arrow-width) + var(--clear-width));
-}
 
 /* Right to Left Direction
  ========================================================================== */
 
 .uk-control-select.uk-control-rtl,
-.uk-select-dropdown-rtl {
+.uk-select-dropdown.uk-dropdown-rtl {
     direction: rtl;
 }
 
-.uk-control-select.uk-control-rtl .uk-select-arrow,
-.uk-control-select.uk-control-rtl .uk-select-clear {
-    left: 0;
-}
-
-.uk-control-select.uk-control-rtl .uk-select-arrow + .uk-select-clear {
-    left: var(--select-height);
-}
-
-.uk-control-select.uk-control-rtl .uk-select-allow-clear .uk-select-selector,
-.uk-control-select.uk-control-rtl .uk-select-show-arrow .uk-select-selector {
-    padding-left: var(--select-height);
-}
-
-.uk-control-select.uk-control-rtl .uk-select-allow-clear.uk-select-show-arrow .uk-select-selector {
-    --arrow-width: var(--select-height);
-    --clear-width: calc(var(--select-height) * 0.6777);
-    padding-left: calc(var(--arrow-width) + var(--clear-width));
-}
-
-/* Small */
-.uk-control-select.uk-control-small.uk-control-rtl .uk-select-arrow + .uk-select-clear {
-    left: var(--select-small-height);
-}
-
-.uk-control-select.uk-control-small.uk-control-rtl .uk-select-allow-clear .uk-select-selector,
-.uk-control-select.uk-control-small.uk-control-rtl .uk-select-show-arrow .uk-select-selector {
-    padding-left: var(--select-small-height);
-}
-
-.uk-control-select.uk-control-small.uk-control-rtl .uk-select-allow-clear.uk-select-show-arrow .uk-select-selector {
-    --arrow-width: var(--select-small-height);
-    --clear-width: calc(var(--select-small-height) * 0.6777);
-    padding-left: calc(var(--arrow-width) + var(--clear-width));
-}
-
-/* Medium */
-.uk-control-select.uk-control-medium.uk-control-rtl .uk-select-arrow .uk-select-clear {
-    left: var(--select-medium-height);
-}
-
-.uk-control-select.uk-control-medium.uk-control-rtl .uk-select-allow-clear .uk-select-selector,
-.uk-control-select.uk-control-medium.uk-control-rtl .uk-select-show-arrow .uk-select-selector {
-    padding-left: var(--select-medium-height);
-}
-
-.uk-control-select.uk-control-medium.uk-control-rtl .uk-select-allow-clear.uk-select-show-arrow .uk-select-selector {
-    --arrow-width: var(--select-medium-height);
-    --clear-width: calc(var(--select-medium-height) * 0.6777);
-    padding-left: calc(var(--arrow-width) + var(--clear-width));
-}
-
-/* Large */
-.uk-control-select.uk-control-large.uk-control-rtl .uk-select-clear {
-    left: calc(var(--select-large-height) * 0.8667);
-}
-
-.uk-control-select.uk-control-large.uk-control-rtl .uk-select-allow-clear .uk-select-selector,
-.uk-control-select.uk-control-large.uk-control-rtl .uk-select-show-arrow .uk-select-selector {
-    padding-left: calc(var(--select-large-height) * 0.8667);
-}
-
-.uk-control-select.uk-control-large.uk-control-rtl .uk-select-allow-clear.uk-select-show-arrow .uk-select-selector {
-    --arrow-width: calc(var(--select-large-height) * 0.8667);
-    --clear-width: calc(var(--select-large-height) * 0.6777);
-    padding-left: calc(var(--arrow-width) + var(--clear-width));
-}
-
-.uk-control-select.uk-control-rtl .uk-select-selection-item-remove {
-    padding-left: var(--select-gutter);
-    padding-right: unset;
-}
-
 //
 // Dropdown
 //
@@ -793,12 +609,14 @@
     --select-small-gutter: #{$select-small-gutter};
     --select-medium-gutter: #{$select-medium-gutter};
     --select-large-gutter: #{$select-large-gutter};
-    --select-selector-padding-horizontal: var(--control-padding-horizontal);
-    --select-selector-small-padding-horizontal: var(--control-small-padding-horizontal);
-    --select-selector-medium-padding-horizontal: var(--control-medium-padding-horizontal);
-    --select-selector-large-padding-horizontal: var(--control-large-padding-horizontal);
-    --select-selection-search-input-color: var(--control-color);
-    --select-selection-placeholder-color: var(--control-placeholder-color);
+    --select-content-padding-horizontal: var(--control-padding-horizontal);
+    --select-content-padding-vertical: var(--select-gutter);
+    --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-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};
@@ -822,4 +640,5 @@
     --select-item-group-color: var(--global-muted-color);
     --select-item-group-font-size: var(--global-small-font-size);
     --select-item-group-text-transform: #{$select-item-group-text-transform};
+    --select-item-group-padding-horizontal: var(--select-gutter);
 }