@broxus/react-uikit 0.23.2 → 0.24.0

package/styles/select/_select.scss

@@ -0,0 +1,641 @@
+// 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:map';
+@use 'sass:meta';
+
+
+// Variables
+// ========================================================================
+
+@use '../variables' as *;
+@use '../mixins' as *;
+
+
+@mixin -select-item() {
+    display: block;
+    font-weight: normal;
+    line-height: var(--select-item-line-height);
+    padding: var(--select-gutter);
+    position: relative;
+}
+
+@mixin select-styles {
+    /* ========================================================================
+       Component: Select
+     ========================================================================== */
+
+    .#{$prefix}-select {
+        cursor: pointer;
+        display: flex;
+        min-height: 100%;
+        padding: 0;
+        position: relative;
+        width: 100%;
+        @if map.has-key($mixins, 'hook-select') {
+            @include meta.apply(map.get($mixins, 'hook-select'));
+        }
+    }
+
+    .#{$prefix}-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 map.has-key($mixins, 'hook-select-content') {
+            @include meta.apply(map.get($mixins, 'hook-select-content'));
+        }
+    }
+
+    .#{$prefix}-select-content input {
+        cursor: inherit;
+        font: inherit;
+    }
+
+    /* Disabled */
+    .#{$prefix}-select-content.#{$prefix}-select-disabled,
+    .#{$prefix}-select-content.#{$prefix}-select-disabled input {
+        cursor: not-allowed;
+    }
+
+    // Reset search input style
+    .#{$prefix}-select-content .#{$prefix}-select-input {
+        appearance: none;
+        background: transparent;
+        border: none;
+        color: var(--select-search-input-color);
+        margin: 0;
+        outline: none;
+        padding: 0;
+        @if map.has-key($mixins, 'hook-select-search-input') {
+            @include meta.apply(map.get($mixins, 'hook-select-search-input'));
+        }
+    }
+
+    .#{$prefix}-select-content .#{$prefix}-select-input::-webkit-search-cancel-button {
+        appearance: none;
+        display: none;
+    }
+
+    //
+    // Selection
+    //
+
+    .#{$prefix}-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
+    //
+
+    .#{$prefix}-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 map.has-key($mixins, 'hook-select-placeholder') {
+            @include meta.apply(map.get($mixins, 'hook-select-placeholder'));
+        }
+    }
+
+    //
+    // Search
+    //
+
+    .#{$prefix}-select-show-search {
+        cursor: text;
+    }
+
+
+    /* Single selection
+     ========================================================================== */
+
+    .#{$prefix}-select-single .#{$prefix}-select-content {
+        overflow: hidden;
+        @if map.has-key($mixins, 'hook-select-single-content') {
+            @include meta.apply(map.get($mixins, 'hook-select-single-content'));
+        }
+    }
+
+    .#{$prefix}-select-single .#{$prefix}-select-input {
+        align-items: center;
+        display: flex;
+        height: 100%;
+        inset: 0 var(--select-content-padding-horizontal);
+        line-height: initial;
+        position: absolute;
+        @if map.has-key($mixins, 'hook-select-single-search-input') {
+            @include meta.apply(map.get($mixins, 'hook-select-single-search-input'));
+        }
+    }
+
+    .#{$prefix}-select-single .#{$prefix}-select-content-value,
+    .#{$prefix}-select-single .#{$prefix}-select-placeholder {
+        padding: 0;
+        transition: color var(--transition-duration);
+    }
+
+    .#{$prefix}-select-single .#{$prefix}-select-content-value {
+        position: relative;
+        user-select: none;
+        @if map.has-key($mixins, 'hook-select-single-content-value') {
+            @include meta.apply(map.get($mixins, 'hook-select-single-content-value'));
+        }
+    }
+
+    // Opacity selection if open
+    .#{$prefix}-select-single.#{$prefix}-select-open .#{$prefix}-select-content-value {
+        color: var(--select-placeholder-color);
+        @if map.has-key($mixins, 'hook-select-single-open-content-value') {
+            @include meta.apply(map.get($mixins, 'hook-select-single-open-content-value'));
+        }
+    }
+
+
+    /* Multiple selection
+     ========================================================================== */
+
+    .#{$prefix}-select-multiple .#{$prefix}-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 map.has-key($mixins, 'hook-select-multiple-content') {
+            @include meta.apply(map.get($mixins, 'hook-select-multiple-content'));
+        }
+    }
+
+    .#{$prefix}-select-multiple .#{$prefix}-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 map.has-key($mixins, 'hook-select-multiple-placeholder') {
+            @include meta.apply(map.get($mixins, 'hook-select-multiple-placeholder'));
+        }
+    }
+
+    .#{$prefix}-select-multiple .#{$prefix}-select-content-item {
+        flex: none;
+        max-width: 100%;
+    }
+
+    .#{$prefix}-select-multiple .#{$prefix}-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 map.has-key($mixins, 'hook-select-multiple-selection-item') {
+            @include meta.apply(map.get($mixins, 'hook-select-multiple-selection-item'));
+        }
+    }
+
+    .#{$prefix}-select-multiple .#{$prefix}-select-selection-item-content {
+        display: inline-flex;
+        flex-wrap: wrap;
+        overflow: hidden;
+        padding: 0 var(--select-gutter);
+        text-overflow: ellipsis;
+        white-space: pre;
+    }
+
+    .#{$prefix}-select-multiple .#{$prefix}-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 map.has-key($mixins, 'hook-select-multiple-selection-item-remove') {
+            @include meta.apply(map.get($mixins, 'hook-select-multiple-selection-item-remove'));
+        }
+    }
+
+    .#{$prefix}-select-multiple .#{$prefix}-select-selection-item-remove:hover {
+        color: var(--select-selection-item-remove-icon-hover-color);
+    }
+
+    .#{$prefix}-select-multiple .#{$prefix}-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 map.has-key($mixins, 'hook-select-multiple-search-input') {
+            @include meta.apply(map.get($mixins, 'hook-select-multiple-search-input'));
+        }
+    }
+
+
+    /* Icons
+     ========================================================================== */
+
+    .#{$prefix}-select-suffix {
+        order: 20;
+    }
+
+    .#{$prefix}-select-arrow,
+    .#{$prefix}-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;
+    }
+
+    .#{$prefix}-select:not(.#{$prefix}-select-disabled) .#{$prefix}-select-arrow:hover,
+    .#{$prefix}-select:not(.#{$prefix}-select-disabled) .#{$prefix}-select-clear:hover {
+        color: var(--select-icon-hover-color);
+    }
+
+    .#{$prefix}-select-disabled .#{$prefix}-select-arrow,
+    .#{$prefix}-select-disabled .#{$prefix}-select-clear {
+        color: var(--select-icon-disabled-color);
+        cursor: not-allowed;
+    }
+
+    /* Arrow */
+    .#{$prefix}-select-arrow {
+        --icon-size: var(--select-arrow-icon-size);
+        width: var(--select-height);
+        @if map.has-key($mixins, 'hook-select-arrow') {
+            @include meta.apply(map.get($mixins, 'hook-select-arrow'));
+        }
+    }
+
+    /* Clear */
+    .#{$prefix}-select-clear {
+        min-width: fit-content;
+        order: 10;
+        @if map.has-key($mixins, 'hook-select-clear') {
+            @include meta.apply(map.get($mixins, 'hook-select-clear'));
+        }
+    }
+
+    :not(.#{$prefix}-select-suffix) + .#{$prefix}-select-clear:last-child {
+        min-width: var(--select-height);
+    }
+
+
+    /* Dropdown
+     ========================================================================== */
+
+    .#{$prefix}-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 map.has-key($mixins, 'hook-select-dropdown') {
+            @include meta.apply(map.get($mixins, 'hook-select-dropdown'));
+        }
+    }
+
+    .#{$prefix}-select-dropdown-placement-bottom-left.#{$prefix}-slide-up-enter.#{$prefix}-slide-up-enter-active,
+    .#{$prefix}-select-dropdown-placement-bottom-left.#{$prefix}-slide-up-appear.#{$prefix}-slide-up-appear-active {
+        animation-name: uk-slide-up-in;
+    }
+
+    .#{$prefix}-select-dropdown-placement-top-left.#{$prefix}-slide-up-enter.#{$prefix}-slide-up-enter-active,
+    .#{$prefix}-select-dropdown-placement-top-left.#{$prefix}-slide-up-appear.#{$prefix}-slide-up-appear-active {
+        animation-name: uk-slide-down-in;
+    }
+
+    .#{$prefix}-select-dropdown-placement-bottom-left .#{$prefix}-slide-up-leave.#{$prefix}-slide-up-leave-active {
+        animation-name: uk-slide-up-out;
+    }
+
+    .#{$prefix}-select-dropdown-placement-top-left.#{$prefix}-slide-up-leave.#{$prefix}-slide-up-leave-active {
+        animation-name: uk-slide-down-out;
+    }
+
+    .#{$prefix}-select-dropdown-hidden {
+        display: none;
+    }
+
+    .#{$prefix}-select-dropdown-empty {
+        color: var(--control-disabled-color);
+    }
+
+
+    /* Dropdown options
+     ========================================================================== */
+
+    /* Empty */
+    .#{$prefix}-select-item-empty {
+        color: var(--select-item-disabled-color);
+        text-align: center;
+        @include -select-item;
+    }
+
+    .#{$prefix}-select-item-empty .#{$prefix}-empty {
+        margin: var(--global-small-margin) 0;
+    }
+
+    .#{$prefix}-select-item-empty .#{$prefix}-empty-img-simple-ellipse {
+        fill: var(--control-icon-color);
+        fill-opacity: 0.08;
+    }
+
+    .#{$prefix}-select-item-empty .#{$prefix}-empty-img-simple-g {
+        stroke: var(--control-icon-color);
+    }
+
+    .#{$prefix}-select-item-empty .#{$prefix}-empty-img-simple-path {
+        fill: var(--global-default-background);
+        stroke: var(--control-icon-color);
+    }
+
+    /* Items */
+    .#{$prefix}-select-item {
+        color: var(--select-item-color);
+        cursor: pointer;
+        transition: background var(--transition-duration) ease;
+        @include -select-item;
+    }
+
+    // Option
+    .#{$prefix}-select-item-option {
+        align-items: center;
+        display: flex;
+    }
+
+    .#{$prefix}-select-item-option-content {
+        display: flex;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        width: 100%;
+    }
+
+    .#{$prefix}-select-item-option-state {
+        align-items: center;
+        display: flex;
+        flex: none;
+    }
+
+    .#{$prefix}-select-item-option-active {
+        background-color: var(--select-item-active-background);
+    }
+
+    .#{$prefix}-select-item-option-selected {
+        background-color: var(--select-item-selected-background);
+
+        .#{$prefix}-select-item-option-state {
+            color: var(--select-item-selected-state-color);
+        }
+    }
+
+    .#{$prefix}-select-item-option-disabled {
+        color: var(--select-item-disabled-color);
+        cursor: not-allowed;
+    }
+
+    .#{$prefix}-select-item-option-grouped {
+        padding-left: calc(var(--control-padding-horizontal) * 2);
+    }
+
+    // Group
+    .#{$prefix}-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);
+    }
+
+    .#{$prefix}-select-item-group:not(:first-child) {
+        margin: var(--select-gutter) 0;
+    }
+
+    .#{$prefix}-select-item-group:not(:first-child):empty {
+        border-bottom: var(--control-border-width) var(--control-border-style) var(--control-border);
+    }
+
+
+    /* Control
+     ========================================================================== */
+
+    .#{$prefix}-control.#{$prefix}-control-select {
+        align-items: unset;
+        border: 0 none;
+        height: auto;
+        min-height: var(--select-height);
+        padding: 0;
+    }
+
+    .#{$prefix}-control-select .#{$prefix}-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;
+    }
+
+    .#{$prefix}-control-select .#{$prefix}-icon {
+        opacity: 1;
+    }
+
+    // Hover state (unused for disabled state)
+    .#{$prefix}-control-select:not(.#{$prefix}-disabled):hover .#{$prefix}-select {
+        border-color: var(--select-hover-border);
+    }
+
+    // Focus state (unused for disabled state)
+    .#{$prefix}-control-select:not(.#{$prefix}-disabled):focus .#{$prefix}-select,
+    .#{$prefix}-control-select:not(.#{$prefix}-disabled):focus-within .#{$prefix}-select,
+    .#{$prefix}-control-select.#{$prefix}-focused:not(.#{$prefix}-disabled) .#{$prefix}-select {
+        border-color: var(--select-focus-border);
+    }
+
+    // Disabled state
+    .#{$prefix}-control-select.#{$prefix}-disabled {
+        border-color: var(--select-disabled-border);
+    }
+
+    //
+    // Sizes
+    //
+
+    /* Small */
+    .#{$prefix}-control-select.#{$prefix}-control-small {
+        min-height: var(--select-small-height);
+    }
+
+    .#{$prefix}-control-select.#{$prefix}-control-small .#{$prefix}-select-content {
+        padding: 0 var(--select-content-small-padding-horizontal);
+    }
+
+    .#{$prefix}-control-select.#{$prefix}-control-small .#{$prefix}-select-arrow {
+        min-width: var(--select-small-height);
+        width: var(--select-small-height);
+    }
+
+    /* Medium */
+    .#{$prefix}-control-select.#{$prefix}-control-medium {
+        min-height: var(--select-medium-height);
+    }
+
+    .#{$prefix}-control-select.#{$prefix}-control-medium .#{$prefix}-select-content {
+        padding: 0 var(--select-content-medium-padding-horizontal);
+    }
+
+    .#{$prefix}-control-select.#{$prefix}-control-medium .#{$prefix}-select-arrow {
+        min-width: var(--select-medium-height);
+        width: var(--select-medium-height);
+    }
+
+    /* Large */
+    .#{$prefix}-control-select.#{$prefix}-control-large {
+        min-height: var(--select-large-height);
+    }
+
+    .#{$prefix}-control-select.#{$prefix}-control-large .#{$prefix}-select-content {
+        padding: 0 var(--select-content-large-padding-horizontal);
+    }
+
+    .#{$prefix}-control-select.#{$prefix}-control-large .#{$prefix}-select-arrow {
+        min-width: calc(var(--select-large-height) * 0.8667);
+        width: calc(var(--select-large-height) * 0.8667);
+    }
+
+
+    /* Right to Left Direction
+     ========================================================================== */
+
+    .#{$prefix}-control-select.#{$prefix}-control-rtl,
+    .#{$prefix}-select-dropdown.#{$prefix}-dropdown-rtl {
+        direction: rtl;
+    }
+
+    //
+    // Dropdown
+    //
+
+    .#{$prefix}-select-dropdown-rtl .#{$prefix}-select-item-option-grouped {
+        padding-left: var(--select-gutter);
+        padding-right: calc(var(--control-padding-horizontal) * 2);
+    }
+
+    @content;
+}
+
+@mixin select-tokens {
+    --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);
+
+    @content;
+}

package/styles/slider/_index.scss

@@ -0,0 +1,11 @@
+@use 'slider' as *;
+
+$generate-tokens: true !default;
+
+@include slider-styles;
+
+@if $generate-tokens {
+    :root {
+        @include slider-tokens;
+    }
+}