@broxus/react-uikit 0.23.3 → 0.24.1

package/styles/select.scss

@@ -1,644 +0,0 @@
-// Name:            Select
-// Description:     Component to create Select elements
-//
-// Component:       `uk-control-select`
-//
-// Modifier:        `uk-select-single`
-//                  `uk-select-multiple`
-//                  `uk-control-small`
-//                  `uk-control-medium`
-//                  `uk-control-large`
-//
-// ========================================================================
-
-@use 'sass:meta';
-
-
-// Variables
-// ========================================================================
-
-@use 'variables' as *;
-
-
-// Mixins
-// ========================================================================
-
-@mixin select-item() {
-    display: block;
-    font-weight: normal;
-    line-height: var(--select-item-line-height);
-    padding: var(--select-gutter);
-    position: relative;
-}
-
-/* ========================================================================
-   Component: Select
- ========================================================================== */
-
-.uk-select {
-    cursor: pointer;
-    display: flex;
-    min-height: 100%;
-    padding: 0;
-    position: relative;
-    width: 100%;
-    @if meta.mixin-exists('hook-select') {
-        @include hook-select;
-    }
-}
-
-.uk-select-content {
-    align-items: center;
-    display: flex;
-    flex: auto;
-    min-width: 0;
-    order: 0;
-    overflow: hidden;
-    padding: 0 var(--select-content-padding-horizontal);
-    position: relative;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    @if meta.mixin-exists('hook-select-content') {
-        @include hook-select-content;
-    }
-}
-
-.uk-select-content input {
-    cursor: inherit;
-    font: inherit;
-}
-
-/* Disabled */
-.uk-select-content.uk-select-disabled,
-.uk-select-content.uk-select-disabled input {
-    cursor: not-allowed;
-}
-
-// Reset search input style
-.uk-select-content .uk-select-input {
-    appearance: none;
-    background: transparent;
-    border: none;
-    color: var(--select-search-input-color);
-    margin: 0;
-    outline: none;
-    padding: 0;
-    @if meta.mixin-exists('hook-select-search-input') {
-        @include hook-select-search-input;
-    }
-}
-
-.uk-select-content .uk-select-input::-webkit-search-cancel-button {
-    appearance: none;
-    display: none;
-}
-
-//
-// Selection
-//
-
-.uk-select-content-value {
-    flex: 1;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-
-    // IE11 css hack. `*::-ms-backdrop,` is a must have
-    @media all and (-ms-high-contrast: none) {
-        *::-ms-backdrop,
-        & { flex: auto; }
-    }
-}
-
-//
-// Placeholder
-//
-
-.uk-select-placeholder {
-    color: var(--select-placeholder-color);
-    overflow: hidden;
-    pointer-events: none;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-
-    &::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; }
-    }
-
-    @if meta.mixin-exists('hook-select-placeholder') {
-        @include hook-select-placeholder;
-    }
-}
-
-//
-// Search
-//
-
-.uk-select-show-search {
-    cursor: text;
-}
-
-
-/* Single selection
- ========================================================================== */
-
-.uk-select-single .uk-select-content {
-    overflow: hidden;
-    @if meta.mixin-exists('hook-select-single-content') {
-        @include hook-select-single-content;
-    }
-}
-
-.uk-select-single .uk-select-input {
-    align-items: center;
-    display: flex;
-    height: 100%;
-    inset: 0 var(--select-content-padding-horizontal);
-    line-height: initial;
-    position: absolute;
-    @if meta.mixin-exists('hook-select-single-search-input') {
-        @include hook-select-single-search-input;
-    }
-}
-
-.uk-select-single .uk-select-content-value,
-.uk-select-single .uk-select-placeholder {
-    padding: 0;
-    transition: color var(--transition-duration);
-}
-
-.uk-select-single .uk-select-content-value {
-    position: relative;
-    user-select: none;
-    @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-content-value {
-    color: var(--select-placeholder-color);
-    @if meta.mixin-exists('hook-select-single-open-content-value') {
-        @include hook-select-single-open-content-value;
-    }
-}
-
-
-/* Multiple selection
- ========================================================================== */
-
-.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-placeholder {
-    left: var(--select-content-padding-horizontal);
-    position: absolute;
-    right: var(--select-content-padding-horizontal);
-    top: 50%;
-    transform: translateY(-50%);
-    transition: all var(--transition-duration);
-    @if meta.mixin-exists('hook-select-multiple-placeholder') {
-        @include hook-select-multiple-placeholder;
-    }
-}
-
-.uk-select-multiple .uk-select-content-item {
-    flex: none;
-    max-width: 100%;
-}
-
-.uk-select-multiple .uk-select-selection-item {
-    align-items: center;
-    background-color: var(--select-selection-item-background);
-    border-radius: var(--select-selection-item-border-radius);
-    box-sizing: border-box;
-    display: flex;
-    flex: none;
-    font-size: var(--select-selection-item-font-size);
-    line-height: var(--select-selection-item-line-height);
-    max-width: 100%;
-    padding: 0;
-    position: relative;
-    transition: font-size var(--transition-duration),
-        line-height var(--transition-duration),
-        height var(--transition-duration);
-    user-select: none;
-    @if meta.mixin-exists('hook-select-multiple-selection-item') {
-        @include hook-select-multiple-selection-item;
-    }
-}
-
-.uk-select-multiple .uk-select-selection-item-content {
-    display: inline-flex;
-    flex-wrap: wrap;
-    overflow: hidden;
-    padding: 0 var(--select-gutter);
-    text-overflow: ellipsis;
-    white-space: pre;
-}
-
-.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;
-    display: inline-flex;
-    flex-wrap: wrap;
-    padding-right: var(--select-gutter);
-    @if meta.mixin-exists('hook-select-multiple-selection-item-remove') {
-        @include hook-select-multiple-selection-item-remove;
-    }
-}
-
-.uk-select-multiple .uk-select-selection-item-remove:hover {
-    color: var(--select-selection-item-remove-icon-hover-color);
-}
-
-.uk-select-multiple .uk-select-input {
-    font-family: inherit;
-    min-width: 4.1px; // fix search cursor missing
-    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;
-    }
-}
-
-
-/* Icons
- ========================================================================== */
-
-.uk-select-suffix {
-    order: 20;
-}
-
-.uk-select-arrow,
-.uk-select-clear {
-    align-items: center;
-    color: var(--select-icon-color);
-    cursor: pointer;
-    display: flex;
-    height: 100%;
-    justify-content: center;
-    overflow: hidden;
-    transition: color var(--transition-duration) var(--ease-in-out);
-    width: min-content;
-}
-
-.uk-select:not(.uk-select-disabled) .uk-select-arrow:hover,
-.uk-select:not(.uk-select-disabled) .uk-select-clear:hover {
-    color: var(--select-icon-hover-color);
-}
-
-.uk-select-disabled .uk-select-arrow,
-.uk-select-disabled .uk-select-clear {
-    color: var(--select-icon-disabled-color);
-    cursor: not-allowed;
-}
-
-/* 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;
-    }
-}
-
-/* Clear */
-.uk-select-clear {
-    min-width: fit-content;
-    order: 10;
-    @if meta.mixin-exists('hook-select-clear') {
-        @include hook-select-clear;
-    }
-}
-
-:not(.uk-select-suffix) + .uk-select-clear:last-child {
-    min-width: var(--select-height);
-}
-
-
-/* Dropdown
- ========================================================================== */
-
-.uk-select-dropdown {
-    background-color: var(--select-dropdown-background);
-    border: var(--select-dropdown-border-width) var(--select-dropdown-border-style) var(--select-dropdown-border);
-    border-radius: var(--select-dropdown-border-radius);
-    box-sizing: border-box;
-    font-variant: initial;
-    left: -9999px;
-    outline: none;
-    overflow: hidden;
-    padding: calc(var(--select-gutter) / 2);
-    position: absolute;
-    top: -9999px;
-    z-index: calc(var(--global-z-index) + 30);
-    @if meta.mixin-exists('hook-select-dropdown') {
-        @include hook-select-dropdown;
-    }
-}
-
-.uk-select-dropdown-placement-bottom-left.uk-slide-up-enter.uk-slide-up-enter-active,
-.uk-select-dropdown-placement-bottom-left.uk-slide-up-appear.uk-slide-up-appear-active {
-    animation-name: uk-slide-up-in;
-}
-
-.uk-select-dropdown-placement-top-left.uk-slide-up-enter.uk-slide-up-enter-active,
-.uk-select-dropdown-placement-top-left.uk-slide-up-appear.uk-slide-up-appear-active {
-    animation-name: uk-slide-down-in;
-}
-
-.uk-select-dropdown-placement-bottom-left .uk-slide-up-leave.uk-slide-up-leave-active {
-    animation-name: uk-slide-up-out;
-}
-
-.uk-select-dropdown-placement-top-left.uk-slide-up-leave.uk-slide-up-leave-active {
-    animation-name: uk-slide-down-out;
-}
-
-.uk-select-dropdown-hidden {
-    display: none;
-}
-
-.uk-select-dropdown-empty {
-    color: var(--control-disabled-color);
-}
-
-
-/* Dropdown options
- ========================================================================== */
-
-/* Empty */
-.uk-select-item-empty {
-    color: var(--select-item-disabled-color);
-    text-align: center;
-    @if meta.mixin-exists('select-item') {
-        @include select-item;
-    }
-}
-
-.uk-select-item-empty .uk-empty {
-    margin: var(--global-small-margin) 0;
-}
-
-.uk-select-item-empty .uk-empty-img-simple-ellipse {
-    fill: var(--control-icon-color);
-    fill-opacity: 0.08;
-}
-
-.uk-select-item-empty .uk-empty-img-simple-g {
-    stroke: var(--control-icon-color);
-}
-
-.uk-select-item-empty .uk-empty-img-simple-path {
-    fill: var(--global-default-background);
-    stroke: var(--control-icon-color);
-}
-
-/* Items */
-.uk-select-item {
-    color: var(--select-item-color);
-    cursor: pointer;
-    transition: background var(--transition-duration) ease;
-    @if meta.mixin-exists('select-item') {
-        @include select-item;
-    }
-}
-
-// Option
-.uk-select-item-option {
-    align-items: center;
-    display: flex;
-}
-
-.uk-select-item-option-content {
-    display: flex;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    width: 100%;
-}
-
-.uk-select-item-option-state {
-    align-items: center;
-    display: flex;
-    flex: none;
-}
-
-.uk-select-item-option-active {
-    background-color: var(--select-item-active-background);
-}
-
-.uk-select-item-option-selected {
-    background-color: var(--select-item-selected-background);
-
-    .uk-select-item-option-state {
-        color: var(--select-item-selected-state-color);
-    }
-}
-
-.uk-select-item-option-disabled {
-    color: var(--select-item-disabled-color);
-    cursor: not-allowed;
-}
-
-.uk-select-item-option-grouped {
-    padding-left: calc(var(--control-padding-horizontal) * 2);
-}
-
-// Group
-.uk-select-item-group {
-    color: var(--select-item-group-color);
-    cursor: default;
-    font-size: var(--select-item-group-font-size);
-    padding: 0 var(--select-item-group-padding-horizontal);
-    text-transform: var(--select-item-group-text-transform);
-}
-
-.uk-select-item-group:not(:first-child) {
-    margin: var(--select-gutter) 0;
-}
-
-.uk-select-item-group:not(:first-child):empty {
-    border-bottom: var(--control-border-width) var(--control-border-style) var(--control-border);
-}
-
-
-/* Control
- ========================================================================== */
-
-.uk-control.uk-control-select {
-    align-items: unset;
-    border: 0 none;
-    height: auto;
-    min-height: var(--select-height);
-    padding: 0;
-}
-
-.uk-control-select .uk-select {
-    border: var(--select-border-width) var(--select-border-style) var(--select-border);
-    border-radius: var(--select-border-radius);
-    box-sizing: border-box;
-    transition: var(--transition-medium-fast-duration) var(--ease-in-out);
-    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);
-}
-
-// Focus state (unused for disabled state)
-.uk-control-select:not(.uk-disabled):focus .uk-select,
-.uk-control-select:not(.uk-disabled):focus-within .uk-select,
-.uk-control-select.uk-focused:not(.uk-disabled) .uk-select {
-    border-color: var(--select-focus-border);
-}
-
-// Disabled state
-.uk-control-select.uk-disabled {
-    border-color: var(--select-disabled-border);
-}
-
-//
-// Sizes
-//
-
-/* Small */
-.uk-control-select.uk-control-small {
-    min-height: var(--select-small-height);
-}
-
-.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 {
-    min-width: var(--select-small-height);
-    width: var(--select-small-height);
-}
-
-/* Medium */
-.uk-control-select.uk-control-medium {
-    min-height: var(--select-medium-height);
-}
-
-.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 {
-    min-width: var(--select-medium-height);
-    width: var(--select-medium-height);
-}
-
-/* Large */
-.uk-control-select.uk-control-large {
-    min-height: var(--select-large-height);
-}
-
-.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 {
-    min-width: calc(var(--select-large-height) * 0.8667);
-    width: calc(var(--select-large-height) * 0.8667);
-}
-
-
-/* Right to Left Direction
- ========================================================================== */
-
-.uk-control-select.uk-control-rtl,
-.uk-select-dropdown.uk-dropdown-rtl {
-    direction: rtl;
-}
-
-//
-// Dropdown
-//
-
-.uk-select-dropdown-rtl .uk-select-item-option-grouped {
-    padding-left: var(--select-gutter);
-    padding-right: calc(var(--control-padding-horizontal) * 2);
-}
-
-
-// Vars
-// ========================================================================
-
-:root {
-    --select-border: var(--control-border);
-    --select-border-style: var(--control-border-style);
-    --select-border-width: var(--control-border-width);
-    --select-border-radius: var(--control-border-radius);
-    --select-hover-border: var(--control-hover-border);
-    --select-focus-border: var(--control-focus-border);
-    --select-disabled-border: var(--control-disabled-border);
-    --select-height: var(--control-height);
-    --select-small-height: var(--control-small-height);
-    --select-medium-height: var(--control-medium-height);
-    --select-large-height: var(--control-large-height);
-    --select-arrow-icon-size: #{$select-arrow-icon-size};
-    --select-gutter: #{$select-gutter};
-    --select-small-gutter: #{$select-small-gutter};
-    --select-medium-gutter: #{$select-medium-gutter};
-    --select-large-gutter: #{$select-large-gutter};
-    --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};
-    --select-selection-item-line-height: #{$select-selection-item-line-height};
-    --select-selection-item-remove-icon-size: var(--select-selection-item-font-size);
-    --select-selection-item-remove-icon-hover-color: var(--global-primary-background);
-    --select-dropdown-background: var(--global-muted-background);
-    --select-dropdown-border: var(--control-border);
-    --select-dropdown-border-style: var(--control-border-style);
-    --select-dropdown-border-width: var(--control-border-width);
-    --select-dropdown-border-radius: var(--control-border-radius);
-    --select-icon-color: var(--control-icon-color);
-    --select-icon-hover-color: var(--control-icon-hover-color);
-    --select-icon-disabled-color: var(--control-disabled-color);
-    --select-item-color: var(--control-color);
-    --select-item-line-height: #{$select-item-line-height};
-    --select-item-active-background: var(--global-default-background);
-    --select-item-selected-background: #{$select-item-selected-background};
-    --select-item-selected-state-color: var(--global-primary-background);
-    --select-item-disabled-color: var(--control-disabled-color);
-    --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);
-}