@koobiq/components 16.0.0-beta.1 → 16.0.0-beta.5

package/core/styles/common/_select.scss

@@ -0,0 +1,218 @@
+@use 'sass:meta';
+@use 'sass:map';
+
+@use '../common/vendor-prefixes';
+@use '../tokens';
+
+
+$tokens: meta.module-variables(tokens) !default;
+
+
+%kbq-select-base {
+    box-sizing: border-box;
+
+    display: inline-block;
+
+    width: 100%;
+
+    outline: none;
+
+    .kbq-select__matcher {
+        display: flex;
+        align-items: center;
+
+        width: 100%;
+
+        overflow: hidden;
+
+        white-space: nowrap;
+
+        // todo
+        & > span {
+            flex: 1;
+            overflow: hidden;
+        }
+    }
+
+    $border-width: map.get($tokens, form-field-size-border-width);
+
+    .kbq-select__trigger {
+        display: flex;
+        box-sizing: border-box;
+        position: relative;
+
+        cursor: pointer;
+
+        height: calc(
+            var(--kbq-form-field-size-height, map.get($tokens, form-field-size-height)) -
+            (var(--kbq-form-field-size-border-width, map.get($tokens, form-field-size-border-width)) * 2)
+        );
+
+        & .kbq-select__matcher {
+            $padding-vertical: map.get($tokens, select-size-single-padding-vertical);
+
+            padding:
+                calc(
+                    var(--kbq-select-size-single-padding-vertical, #{$padding-vertical}) -
+                    var(--kbq-form-field-size-border-width, #{$border-width})
+                )
+                calc(
+                    var(--kbq-select-size-single-padding-right, #{map.get($tokens, select-size-single-padding-right)}) -
+                    var(--kbq-form-field-size-border-width, #{$border-width})
+                )
+                calc(
+                    var(--kbq-select-size-single-padding-vertical, #{$padding-vertical}) -
+                    var(--kbq-form-field-size-border-width, #{$border-width})
+                )
+                calc(
+                    var(--kbq-select-size-single-padding-left, #{map.get($tokens, select-size-single-padding-left)}) -
+                    var(--kbq-form-field-size-border-width, #{$border-width})
+                );
+        }
+    }
+
+    .kbq-select__trigger.kbq-select__trigger_multiple:not(.kbq-select__trigger_empty) {
+        & .kbq-select__matcher {
+            padding-left: calc(
+                var(--kbq-select-size-multiple-padding-left, #{map.get($tokens, select-size-multiple-padding-left)}) -
+                var(--kbq-form-field-size-border-width, #{$border-width})
+            );
+
+            .kbq-select__match-container {
+                display: flex;
+            }
+        }
+    }
+
+    .kbq-select__match-container {
+        width: 100%;
+
+        text-overflow: ellipsis;
+        overflow: hidden;
+
+        & .kbq-select__match-hidden-text {
+            flex: 0 0 70px;
+            align-self: center;
+            padding-left: 4px;
+            padding-right: var(
+                --kbq-select-size-multiple-content-gap, #{map.get($tokens, select-size-multiple-content-gap)}
+            );
+
+            text-align: right;
+        }
+    }
+
+    .kbq-select__match-list {
+        display: flex;
+        flex-wrap: wrap;
+        overflow: hidden;
+
+        $padding-vertical: map.get($tokens, select-size-multiple-padding-vertical);
+
+        max-height: calc(
+            var(--kbq-form-field-size-height, map.get($tokens, form-field-size-height)) -
+            (var(--kbq-select-size-multiple-padding-vertical, $padding-vertical) * 2)
+        );
+
+        height: calc(
+            var(--kbq-form-field-size-height, map.get($tokens, form-field-size-height)) -
+            (var(--kbq-select-size-multiple-padding-vertical, $padding-vertical) * 2)
+        );
+
+        gap: var(
+            --kbq-select-size-multiple-content-gap, #{map.get($tokens, select-size-multiple-content-gap)}
+        );
+
+        margin-right: var(
+            --kbq-select-size-multiple-content-gap, #{map.get($tokens, select-size-multiple-content-gap)}
+        );
+    }
+
+    .kbq-select__arrow-wrapper {
+        display: flex;
+        align-self: center;
+
+        padding: 4px;
+
+        // When used in a box or standard appearance form-field the arrow should be shifted up 50%.
+        .kbq-form-field-appearance-fill &,
+        .kbq-form-field-appearance-standard & {
+            transform: translateY(-50%);
+        }
+
+        // When used in a outline form-field the arrow should be shifted up 25%.
+        .kbq-form-field-appearance-outline & {
+            transform: translateY(-25%);
+        }
+    }
+
+    .kbq-select__no-options-message {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        box-sizing: border-box;
+
+        position: relative;
+
+        max-width: 100%;
+        height: var(--kbq-option-size-height, map.get($tokens, option-size-height));
+
+        cursor: default;
+        outline: none;
+
+        padding-left: var(--kbq-option-size-horizontal-padding, map.get($tokens, option-size-horizontal-padding));
+        padding-right: var(--kbq-option-size-horizontal-padding, map.get($tokens, option-size-horizontal-padding));
+
+        border: var(--kbq-option-size-border-width, map.get($tokens, option-size-border-width)) solid transparent;
+    }
+
+    .kbq-select__search-container {
+        border-bottom: {
+            width: 1px;
+            style: solid;
+        }
+    }
+
+    &.kbq-disabled {
+        & .kbq-select__trigger {
+            @include vendor-prefixes.user-select(none);
+
+            cursor: default;
+        }
+    }
+}
+
+%kbq-select-panel {
+    min-width: 100%; // prevents some animation twitching and test inconsistencies in IE11
+
+    overflow: hidden;
+
+    border-radius: var(
+        --kbq-select-panel-size-border-radius, map.get($tokens, select-panel-size-border-radius)
+    );
+
+    // Override optgroup and option to scale based on font-size of the trigger.
+    .kbq-optgroup-label,
+    .kbq-option {
+        font-size: inherit;
+    }
+}
+
+%kbq-select-content {
+    max-height: var(--kbq-select-panel-size-max-height, map.get($tokens, select-panel-size-max-height));
+    padding: 4px 0;
+    overflow: hidden auto;
+}
+
+%kbq-select-footer {
+    display: flex;
+    align-items: center;
+    box-sizing: border-box;
+
+    min-height: 40px;
+
+    border-top-width: 1px;
+    border-top-style: solid;
+
+    padding: map.get($tokens, size-xxs) map.get($tokens, size-m);
+}