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

package/tree-select/tree-select.scss

@@ -2,6 +2,7 @@
 @use 'sass:map';
 
 @use '../core/styles/common';
+@use '../core/styles/common/select' as *;
 
 @use '../core/styles/tokens';
 
@@ -9,184 +10,19 @@
 $tokens: meta.module-variables(tokens) !default;
 
 .kbq-tree-select {
-    box-sizing: border-box;
-
-    display: inline-block;
-
-    width: 100%;
-
-    outline: none;
-
-    &.kbq-disabled {
-        & .kbq-tree-select__trigger {
-            @include common.user-select(none);
-
-            cursor: default;
-        }
-    }
-}
-
-/* stylelint-disable no-descending-specificity */
-.kbq-tree-select__trigger {
-    display: flex;
-    box-sizing: border-box;
-    position: relative;
-
-    height: var(--kbq-form-field-size-height, map.get($tokens, form-field-size-height));
-
-    cursor: pointer;
-
-    padding-left: calc(
-        var(--kbq-select-size-left-padding, #{map.get($tokens, select-size-left-padding)}) -
-        var(--kbq-form-field-size-border-width, #{map.get($tokens, form-field-size-border-width)})
-    );
-    padding-right: calc(
-        var(--kbq-select-size-right-padding, #{map.get($tokens, select-size-right-padding)}) -
-        var(--kbq-form-field-size-border-width, #{map.get($tokens, form-field-size-border-width)})
-    );
-
-    &.kbq-tree-select__trigger_multiple {
-        padding-left: calc(
-            var(--kbq-select-size-left-padding-multiple, #{map.get($tokens, select-size-left-padding-multiple)}) -
-            var(--kbq-form-field-size-border-width, #{map.get($tokens, form-field-size-border-width)})
-        );
-
-        & .kbq-tree-select__placeholder {
-            margin-left: 8px;
-        }
-
-        & .kbq-tag.kbq-disabled .kbq-tag__text {
-            margin-right: 7px;
-        }
-    }
-}
-/* stylelint-enable no-descending-specificity */
-
-.kbq-tree-select__matcher {
-    display: flex;
-    align-items: center;
-
-    width: 100%;
-
-    overflow: hidden;
-    text-overflow: ellipsis;
-
-    white-space: nowrap;
-
-    & > span {
-        width: 100%;
-    }
-}
-
-.kbq-tree-select__multiple-matcher {
-    display: flex;
-
-    width: 100%;
-}
-
-.kbq-tree-select__match-list {
-    display: flex;
-    flex-wrap: wrap;
-
-    overflow: hidden;
-
-    max-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-tag {
-        margin-right: 4px;
-    }
-}
-
-.kbq-tree-select__match-container {
-    display: flex;
-    flex-direction: row;
-    justify-content: space-between;
-
-    width: 100%;
-
-    & .kbq-tree-select__match-hidden-text {
-        flex: 0 0 70px;
-        align-self: center;
-        padding: 0 8px;
-
-        text-align: right;
-    }
-}
-
-.kbq-tree-select__match-item {
-    display: flex;
-
-    border: 1px solid transparent;
-    border-radius: 3px;
-
-    padding-left: 7px;
-
-    margin-right: 4px;
-
-    max-width: 100%;
-}
-
-.kbq-tree-select__arrow-wrapper {
-    display: flex;
-    align-self: center;
-
-    // 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%);
-    }
+    @extend %kbq-select-base;
 }
 
 .kbq-tree-select__panel {
-    min-width: 100%; // prevents some animcion twitching and test inconsistencies in IE11
-    max-width: var(--kbq-select-panel-size-max-width, map.get($tokens, select-panel-size-max-width));
-
-    border: {
-        width: var(--kbq-select-panel-size-border-width, map.get($tokens, select-panel-size-border-width));
-        style: solid;
-    }
-
-    border-bottom-left-radius: var(
-        --kbq-select-panel-size-border-radius, map.get($tokens, select-panel-size-border-radius)
-    );
-    border-bottom-right-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-tree-select-option {
-        font-size: inherit;
-        line-height: var(--kbq-option-size-height, map.get($tokens, option-size-height));
-        height: var(--kbq-option-size-height, map.get($tokens, option-size-height));
-    }
+    @extend %kbq-select-panel;
 
     & .kbq-tree-select__footer {
-        display: flex;
-        align-items: center;
-        box-sizing: border-box;
-        padding: map.get($tokens, size-xxs) map.get($tokens, size-m);
-        border-top-width: 1px;
-        border-top-style: solid;
-        min-height: var(
-            --kbq-list-size-footer-min-height,
-            map.get($tokens, list-size-footer-min-height)
-        );
+        @extend %kbq-select-footer;
     }
 }
 
 .kbq-tree-select__content {
-    max-height: var(--kbq-select-panel-size-max-height, map.get($tokens, select-panel-size-max-height));
-
-    overflow: auto;
+    @extend %kbq-select-content;
 
     & .kbq-tree-selection {
         height: 100%;
@@ -198,28 +34,3 @@ $tokens: meta.module-variables(tokens) !default;
         cursor: pointer;
     }
 }
-
-.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));
-}
-
-.kbq-select__search-container {
-    border-bottom: {
-        width: 1px;
-        style: solid;
-    }
-}

package/core/styles/theming/_badges.scss

@@ -1,57 +0,0 @@
-@use 'sass:meta';
-@use 'sass:map';
-
-//@use '../tokens.kbq.import' as tokens;
-
-//$tokens: meta.module-variables(tokens) !default;
-
-
-@mixin kbq-badge($tokens) {
-    .kbq-badge-filled,
-    .kbq-badge-outline {
-        display: inline-flex;
-        flex-direction: row;
-        justify-content: flex-start;
-        align-items: center;
-
-        text-align: center;
-        white-space: nowrap;
-
-        border-style: solid;
-
-        box-sizing: border-box;
-
-        padding:
-            var(--kbq-badge-size-normal-vertical-padding, map.get($tokens, badge-size-normal-vertical-padding))
-            var(--kbq-badge-size-normal-horizontal-padding, map.get($tokens, badge-size-normal-horizontal-padding));
-
-        border: {
-            width: var(--kbq-badge-size-normal-border-width, map.get($tokens, badge-size-normal-border-width));
-            radius: var(--kbq-badge-size-normal-border-radius, map.get($tokens, badge-size-normal-border-radius));
-        }
-
-        & .kbq-badge-caption {
-            padding-left:
-                var(--kbq-badge-size-normal-content-padding, map.get($tokens, badge-size-normal-content-padding));
-        }
-
-        &.kbq-badge_compact {
-            padding:
-                var(--kbq-badge-size-compact-vertical-padding, map.get($tokens, badge-size-compact-vertical-padding))
-                var(
-                    --kbq-badge-size-compact-horizontal-padding,
-                    map.get($tokens, badge-size-compact-horizontal-padding)
-                );
-
-            border: {
-                width: var(--kbq-badge-size-compact-border-width, map.get($tokens, badge-size-compact-border-width));
-                radius: var(--kbq-badge-size-compact-border-radius, map.get($tokens, badge-size-compact-border-radius));
-            }
-
-            & .kbq-badge-caption {
-                padding-left:
-                    var(--kbq-badge-size-compact-content-padding, map.get($tokens, badge-size-compact-content-padding));
-            }
-        }
-    }
-}

package/core/styles/theming/prebuilt/light-theme.scss

@@ -1,20 +0,0 @@
-@use 'sass:meta';
-
-// this file used only for generate .css bundle
-@use '../../tokens.kbq.import' as tokens;
-
-$tokens: meta.module-variables(tokens);
-
-@use '../../core';
-@use '../theming';
-@use '../../koobiq-theme' as koobiq-theme;
-
-
-@include core.kbq-core();
-
-// Include all theme styles for the components.
-$theme: theming.kbq-light-theme($tokens);
-@include koobiq-theme.koobiq-theme($theme);
-
-// Include all typography for the components.
-@include koobiq-theme.koobiq-typography($tokens);

package/list/_list-base.scss

@@ -1,54 +0,0 @@
-@use 'sass:meta';
-@use 'sass:map';
-
-@use '../core/styles/common/list';
-
-@use '../core/styles/tokens';
-
-@use '../core/styles/common';
-
-
-$tokens: meta.module-variables(tokens) !default;
-
-// This mixin provides all list-item styles, changing font size and height based on whether the list is in dense mode.
-@mixin kbq-list-item-base() {
-    position: relative;
-
-    display: flex;
-    align-items: center;
-
-    box-sizing: border-box;
-    height: var(--kbq-list-size-item-height, map.get($tokens, list-size-item-height));
-
-    border: 2px solid transparent;
-
-    padding-left: var(--kbq-list-size-horizontal-padding, map.get($tokens, list-size-horizontal-padding));
-
-    .kbq-list-text {
-        @include list.kbq-line-wrapper-base();
-
-        padding-right: var(--kbq-list-size-horizontal-padding, map.get($tokens, list-size-horizontal-padding));
-        display: inline-block;
-        @include common.kbq-truncate-line();
-    }
-
-    .kbq-divider {
-        position: absolute;
-
-        bottom: 0;
-        left: 0;
-
-        width: 100%;
-
-        margin: 0;
-
-        [dir='rtl'] & {
-            margin-left: auto;
-            margin-right: 0;
-        }
-
-        &.kbq-divider_inset {
-            position: absolute; // necessary to override card styles
-        }
-    }
-}