@finqu/cool 1.2.29 → 2.0.2

package/scss/_select.scss

@@ -1,187 +1,559 @@
-// Select
-// ---------------------------------------------------------------------------------------------------------------
-
-.select-container {
-    display: inline-flex;
-    flex-direction: column;
-    flex-basis: 100%;
-    width: 100%;
-    max-width: 100%;
-    position: relative;
-    height: $input-height;
-    vertical-align: top;
-    border-radius: $select-border-radius;
-    font-family: $font-family-base;
-
-    &.form-control {
-        border: 0;
-        padding: 0;
-    }
-
-    svg,
-    .icon {
-        pointer-events: none;
-    }
-
-    .select {
-        position: absolute;
-        left: 0;
-        right: 0;
-        font-size: $font-size-base;
-        text-align: left;
-        background-color: $select-bg;
-        transition: box-shadow .1s ease-in-out, max-height .3s cubic-bezier(0.23, 1, 0.32, 1);
-        z-index: 1;
-        border: $select-border-width solid $select-border-color;
-        max-height: $input-height;
-        overflow: hidden;
-        border-radius: $select-border-radius;
-
-        &.show {
-            z-index: $zindex-select;
-            box-shadow: $select-box-shadow;
-
-            .select-content {
-                opacity: 1;
-            }
-        }
-
-        .select-header {
-            display: flex;
-            justify-content: space-between;
-            padding: 0 $select-item-padding-x;
-            height: $input-height;
-            line-height: $input-height;
-            color: $select-header-color;
-            white-space: nowrap;
-            box-sizing: border-box;
-            cursor: pointer;
-            user-select: none;
-
-            .select-title {
-                overflow: hidden;
-                text-overflow: ellipsis;
-
-                & + .select-icon {
-                    padding-left: $select-item-padding-x;
-
-                    > .icon {
-                        pointer-events: none;
-                    }
-                }
-            }
-
-            &.select-placeholder {
-                color: theme-color('medium');
-                font-style: italic;
-                cursor: default;
-            }
-        }
-
-        .select-content {
-            opacity: 0;
-            margin: $select-spacer 0;
-
-            .select-search {
-                display: flex;
-                justify-content: space-between;
-                border-bottom: $select-border-width solid $select-border-color;
-                margin: $select-spacer $select-item-padding-x;
-                box-sizing: border-box;
-                color: $select-item-color;
-                transition: border-color .1s;
-                border-radius: $border-radius;
-                background-color: $select-search-bg-color;
-
-                &.focused {
-                    border-color: rgba($select-border-color, 0.35);
-                }
-
-                .select-search-input {
-                    flex: 1 auto;
-
-                    input[name="select-search"] {
-                        width: 100%;
-                        border: 0;
-                        padding: $select-item-padding-y $select-item-padding-x;
-                        box-sizing: border-box;
-                        background-color: $select-search-bg-color;
-                        border-radius: $border-radius;
-
-                        &:focus {
-                            outline: 0;
-                            &::placeholder {
-                                color: transparent;
-                            }
-                        }
-                    }
-                }
-
-                .select-search-icon {
-                    color: theme-color('medium');
-                    padding: $select-item-padding-y $select-item-padding-x;
-
-                    &[data-clear-search="true"] {
-                        cursor: pointer;
-                    }
-                }
-            }
-
-            .select-scrollable-content {
-                position: relative;
-                margin: $select-spacer 0;
-            }
-
-            .select-footer {
-                padding: $select-item-padding-y $select-item-padding-x;
-                margin: $select-spacer 0;
-                box-sizing: border-box;
-
-                .btn,
-                button {
-                    margin: 0;
-                }
-            }
-
-            .select-item {
-                width: 100%;
-                color: $select-item-color;
-                text-align: inherit;
-                white-space: nowrap;
-                background-color: transparent;
-                box-sizing: border-box;
-
-                &:hover,
-                &:focus {
-                    color: $select-item-hover-color;
-                    text-decoration: none;
-                    @include gradient-bg($select-item-hover-bg);
-                }
-
-                &.disabled,
-                &:disabled {
-                    color: $select-item-disabled-color;
-                    background-color: transparent;
-                }
-
-                label {
-                    display: flex;
-                    align-items: center;
-                    width: 100%;
-                    padding: $select-item-padding-y $select-item-padding-x;
-                    font-weight: $font-weight-normal;
-                    box-sizing: border-box;
-                }
-
-                .select-item-checkbox,
-                .select-item-radio {
-                    padding: 0;
-                }
-            }
-
-            .select-divider {
-                @include nav-divider($select-divider-bg);
-            }
-        }
-    }
-}
+@use "variables" as *;
+/* Select ========================================================================== */
+
+@mixin cool-select {
+    .select-container {
+        display: inline-flex;
+        flex-direction: column;
+        flex-basis: 100%;
+        width: 100%;
+        max-width: 100%;
+        position: relative;
+        vertical-align: top;
+        border-radius: var(--cool-select-border-radius);
+        font-family: var(--cool-font-family-base);
+
+        &.form-control {
+            border: 0;
+            padding: 0;
+            height: fit-content;
+        }
+
+        &.select-auto-height {
+            height: fit-content;
+        }
+
+        svg,
+        .icon {
+            pointer-events: none;
+        }
+
+        .select {
+            font-size: var(--cool-input-font-size);
+            text-align: left;
+            background-color: var(--cool-select-bg);
+            transition:
+                box-shadow 0.1s ease-in-out,
+                max-height 0.3s var(--cool-select-animation-timing);
+            border: var(--cool-select-border-width) solid var(--cool-select-border-color);
+            border-radius: var(--cool-select-border-radius);
+
+            .select-header {
+                display: flex;
+                justify-content: space-between;
+                padding: var(--cool-select-item-padding-y) var(--cool-select-item-padding-x);
+                color: var(--cool-select-header-color);
+                white-space: nowrap;
+                box-sizing: border-box;
+                cursor: pointer;
+                user-select: none;
+                min-height: calc(var(--cool-input-height) - var(--cool-input-border-width) * 2);
+                font-size: var(--cool-input-font-size);
+                line-height: var(--cool-line-height-base);
+                height: min-content;
+                align-items: center;
+
+                .select-title {
+                    overflow: hidden;
+                    text-overflow: ellipsis;
+                    flex: 1;
+
+                    input {
+                        background-color: transparent;
+                    }
+
+                    & + .select-icon {
+                        padding-left: var(--cool-select-item-padding-x);
+                        pointer-events: none;
+                    }
+
+                    &:has(.chip) {
+                        display: flex;
+                        flex-wrap: wrap;
+                        gap: 5px;
+                        align-items: center;
+                        max-width: 100%;
+                    }
+
+                    > span:not(.chip) {
+                        white-space: normal;
+                        display: inline-flex;
+                        min-width: 0;
+                        overflow: hidden;
+                        text-overflow: ellipsis;
+                        line-height: var(--cool-line-height-base);
+                    }
+
+                    .chip {
+                        background-color: var(--cool-select-chip-bg);
+                        border-radius: var(--cool-select-chip-border-radius);
+                        padding: var(--cool-select-chip-padding);
+                        font-size: var(--cool-select-chip-font-size);
+                        display: flex;
+                        align-items: center;
+
+                        &:not(.chip-truncated) {
+                            span.chip-title {
+                                text-wrap: balance;
+                            }
+                        }
+
+                        &.chip-truncated {
+                            max-width: var(--cool-select-chip-max-width);
+
+                            span.chip-title {
+                                text-overflow: ellipsis;
+                            }
+                        }
+
+                        span.chip-title {
+                            display: inline-block;
+                            min-width: 0;
+                            overflow: hidden;
+                        }
+                    }
+                }
+
+                &.select-placeholder {
+                    color: var(--cool-select-placeholder-color);
+                    font-style: var(--cool-select-placeholder-font-style);
+                    cursor: default;
+                }
+            }
+
+            .select-content {
+                display: none;
+                pointer-events: none;
+                opacity: 0;
+                margin: var(--cool-select-spacer) 0;
+                overflow: hidden;
+                position: absolute;
+                background: var(--cool-select-bg, #fff);
+                opacity: 0;
+                width: var(--cool-select-content-width, auto);
+                height: 100%;
+                border: var(--cool-select-border-width) solid var(--cool-select-border-color);
+                margin-top: 5px;
+                border-radius: var(--cool-select-border-radius);
+                left: 0;
+                box-shadow: var(--cool-select-box-shadow);
+
+                &:has(.select-footer) .select-scrollable-content {
+                    padding-bottom: 0;
+                }
+
+                .select-search {
+                    display: flex;
+                    justify-content: space-between;
+                    border-bottom: var(--cool-select-border-width) solid var(--cool-select-border-color);
+                    margin: var(--cool-select-spacer) var(--cool-select-item-padding-x) 0
+                        var(--cool-select-item-padding-x);
+                    box-sizing: border-box;
+                    color: var(--cool-select-item-color);
+
+                    .select-search-input {
+                        flex: 1 auto;
+
+                        input[name="select-search"] {
+                            width: 100%;
+                            border: 0;
+                            padding: var(--cool-select-item-padding-y) var(--cool-select-item-padding-x);
+                            box-sizing: border-box;
+                            background-color: transparent;
+
+                            &:focus {
+                                outline: 0;
+
+                                &::placeholder {
+                                    color: transparent;
+                                }
+                            }
+                        }
+                    }
+
+                    .select-search-icon {
+                        color: var(--cool-select-search-icon-color);
+                        padding: var(--cool-select-item-padding-y) var(--cool-select-item-padding-x);
+
+                        &[data-clear-search="true"] {
+                            cursor: pointer;
+                        }
+                    }
+                }
+
+                .select-scrollable-content {
+                    position: relative;
+                    padding: var(--cool-select-spacer) 0;
+                    overflow-y: auto;
+                    overflow-x: hidden;
+                }
+
+                .select-footer {
+                    padding: var(--cool-select-item-padding-y) var(--cool-select-item-padding-x);
+                    box-sizing: border-box;
+
+                    .btn,
+                    button {
+                        margin: 0;
+                    }
+                }
+
+                .select-item {
+                    width: 100%;
+                    color: var(--cool-select-item-color);
+                    text-align: inherit;
+                    white-space: nowrap;
+                    background-color: transparent;
+                    box-sizing: border-box;
+
+                    &:hover,
+                    &:focus {
+                        color: var(--cool-select-item-hover-color);
+                        text-decoration: none;
+                        background-color: var(--cool-select-item-hover-bg);
+                    }
+
+                    &.disabled,
+                    &:disabled {
+                        color: var(--cool-select-item-disabled-color);
+                        background-color: transparent;
+                    }
+
+                    label {
+                        display: flex;
+                        align-items: center;
+                        width: 100%;
+                        padding: var(--cool-select-item-padding-y) var(--cool-select-item-padding-x);
+                        font-weight: var(--cool-font-weight-normal);
+                        box-sizing: border-box;
+                    }
+
+                    .select-item-checkbox,
+                    .select-item-radio {
+                        padding: 0;
+                    }
+
+                    .form-check {
+                        display: flex;
+
+                        .form-check-label {
+                            white-space: nowrap;
+                        }
+                    }
+                }
+
+                .select-divider {
+                    height: 0;
+                    margin: var(--cool-nav-divider-margin-y) 0;
+                    overflow: hidden;
+                    border-top: 1px solid var(--cool-select-divider-bg);
+                }
+            }
+
+            .select-content-expander {
+                display: grid;
+                grid-template-rows: 0fr;
+                overflow: hidden;
+                position: absolute;
+                background: white;
+                opacity: 0;
+                width: 100%;
+                margin: 5px 0;
+                border-radius: var(--cool-select-border-radius);
+                left: 0;
+                opacity: 0;
+
+                .select-content {
+                    position: relative;
+                    margin: 0;
+                    min-height: 0;
+                }
+            }
+
+            &.show {
+                z-index: var(--cool-zindex-select);
+                box-shadow: var(--cool-select-box-shadow);
+
+                .select-content-expander {
+                    grid-template-rows: 1fr;
+                }
+
+                .select-content-expander,
+                .select-content {
+                    pointer-events: all;
+                    opacity: 1;
+                    visibility: visible;
+                    transition:
+                        visibility var(--animation-length),
+                        opacity 10ms var(--cool-select-animation-timing);
+                }
+
+                .select-content {
+                    display: block;
+                }
+            }
+
+            &.select-dropup {
+                .select-content {
+                    bottom: 100%;
+                    top: auto;
+                    margin-bottom: 5px;
+                    margin-top: 0;
+                }
+            }
+        }
+
+        &.select-inline {
+            width: auto;
+
+            .select {
+                position: relative;
+                overflow: hidden;
+
+                .select-header {
+                    position: relative;
+                    z-index: 2;
+                    background-color: var(--cool-select-bg);
+                    border-radius: var(--cool-select-border-radius) var(--cool-select-border-radius) 0 0;
+                }
+
+                .select-content {
+                    top: calc(100% - var(--cool-select-border-radius));
+                    z-index: 1;
+                    position: absolute;
+                    left: calc(var(--cool-select-border-width) * -1);
+                    width: calc(var(--cool-select-content-width, 100%) + var(--cool-select-border-width) * 2);
+                    background-color: var(--cool-select-bg);
+                    margin: 0;
+                    border-left: var(--cool-select-border-width) solid var(--cool-select-border-color);
+                    border-right: var(--cool-select-border-width) solid var(--cool-select-border-color);
+                    border-bottom: var(--cool-select-border-width) solid var(--cool-select-border-color);
+                    transition: box-shadow 0.1s ease-in-out;
+                    border-radius: 0 0 var(--cool-select-border-radius) var(--cool-select-border-radius);
+                }
+
+                &.show {
+                    overflow: visible;
+                    z-index: var(--cool-zindex-select);
+                    box-shadow: none;
+
+                    .select-content {
+                        opacity: 1;
+                        box-shadow: var(--cool-select-box-shadow);
+                    }
+                }
+            }
+        }
+
+        &.form-control-sm {
+            .select {
+                font-size: var(--cool-font-size-sm);
+                border-radius: var(--cool-input-border-radius-sm);
+
+                .select-header {
+                    min-height: calc(var(--cool-input-height-sm) - var(--cool-input-border-width) * 2);
+                    padding: var(--cool-select-item-padding-y-sm) var(--cool-select-item-padding-x-sm);
+                }
+
+                .select-content {
+                    .select-search {
+                        margin: var(--cool-select-spacer-sm) var(--cool-select-item-padding-x-sm);
+
+                        .select-search-input input[name="select-search"] {
+                            padding: var(--cool-select-item-padding-y-sm) var(--cool-select-item-padding-x-sm);
+                        }
+
+                        .select-search-icon {
+                            padding: var(--cool-select-item-padding-y-sm) var(--cool-select-item-padding-x-sm);
+                        }
+                    }
+
+                    .select-scrollable-content {
+                        padding: var(--cool-select-spacer-sm) 0;
+                    }
+
+                    .select-item label {
+                        padding: var(--cool-select-item-padding-y-sm) var(--cool-select-item-padding-x-sm);
+                    }
+
+                    .select-footer {
+                        padding: var(--cool-select-item-padding-y-sm) var(--cool-select-item-padding-x-sm);
+                    }
+                }
+            }
+        }
+    }
+
+    body {
+        > .select-fixed-container {
+            font-size: var(--cool-font-size-base);
+            text-align: left;
+            background-color: var(--cool-select-bg);
+            transition:
+                box-shadow 0.1s ease-in-out,
+                max-height 0.3s var(--cool-select-animation-timing);
+            z-index: 1;
+            border: var(--cool-select-border-width) solid var(--cool-select-border-color);
+            border-radius: var(--cool-select-border-radius);
+
+            .select-content {
+                pointer-events: none;
+                opacity: 0;
+                margin: var(--cool-select-spacer) 0;
+                overflow: hidden;
+                position: absolute;
+                background: var(--cool-select-bg);
+                opacity: 0;
+                width: var(--cool-select-content-width, auto);
+                border: var(--cool-select-border-width) solid var(--cool-select-border-color);
+                margin-top: 5px;
+                border-radius: var(--cool-select-border-radius);
+                left: 0;
+                box-shadow: var(--cool-select-box-shadow);
+
+                .select-search {
+                    display: flex;
+                    justify-content: space-between;
+                    border-bottom: var(--cool-select-border-width) solid var(--cool-select-border-color);
+                    margin: var(--cool-select-spacer) var(--cool-select-item-padding-x);
+                    box-sizing: border-box;
+                    color: var(--cool-select-item-color);
+
+                    .select-search-input {
+                        flex: 1 auto;
+
+                        input[name="select-search"] {
+                            width: 100%;
+                            border: 0;
+                            padding: var(--cool-select-item-padding-y) var(--cool-select-item-padding-x);
+                            box-sizing: border-box;
+                            background-color: transparent;
+
+                            &:focus {
+                                outline: 0;
+
+                                &::placeholder {
+                                    color: transparent;
+                                }
+                            }
+                        }
+                    }
+
+                    .select-search-icon {
+                        color: var(--cool-select-search-icon-color);
+                        padding: var(--cool-select-item-padding-y) var(--cool-select-item-padding-x);
+
+                        &[data-clear-search="true"] {
+                            cursor: pointer;
+                        }
+                    }
+                }
+
+                .select-scrollable-content {
+                    position: relative;
+                    padding: var(--cool-select-spacer) 0;
+                }
+
+                .select-footer {
+                    padding: var(--cool-select-item-padding-y) var(--cool-select-item-padding-x);
+                    box-sizing: border-box;
+
+                    .btn,
+                    button {
+                        margin: 0;
+                    }
+                }
+
+                .select-item {
+                    width: 100%;
+                    color: var(--cool-select-item-color);
+                    text-align: inherit;
+                    white-space: nowrap;
+                    background-color: transparent;
+                    box-sizing: border-box;
+
+                    &:hover,
+                    &:focus {
+                        color: var(--cool-select-item-hover-color);
+                        text-decoration: none;
+                        background-color: var(--cool-select-item-hover-bg);
+                    }
+
+                    &.disabled,
+                    &:disabled {
+                        color: var(--cool-select-item-disabled-color);
+                        background-color: transparent;
+                    }
+
+                    label {
+                        display: flex;
+                        align-items: center;
+                        width: 100%;
+                        padding: var(--cool-select-item-padding-y) var(--cool-select-item-padding-x);
+                        font-weight: var(--cool-font-weight-normal);
+                        box-sizing: border-box;
+                    }
+
+                    .select-item-checkbox,
+                    .select-item-radio {
+                        padding: 0;
+                    }
+                }
+
+                .select-divider {
+                    height: 0;
+                    margin: var(--cool-nav-divider-margin-y) 0;
+                    overflow: hidden;
+                    border-top: 1px solid var(--cool-select-divider-bg);
+                }
+            }
+
+            .select-content-expander {
+                display: grid;
+                grid-template-rows: 0fr;
+                overflow: hidden;
+                position: absolute;
+                background: white;
+                opacity: 0;
+                width: 100%;
+                margin: 5px 0;
+                border-radius: var(--cool-select-border-radius);
+                left: 0;
+                opacity: 0;
+
+                .select-content {
+                    position: relative;
+                    transition: opacity 10ms var(--cool-select-animation-timing) var(--animation-length);
+                    margin: 0;
+                    min-height: 0;
+                }
+            }
+
+            &.show {
+                .select-content-expander {
+                    grid-template-rows: 1fr;
+                    z-index: var(--cool-zindex-select);
+                    box-shadow: var(--cool-select-box-shadow);
+                }
+
+                .select-content-expander,
+                .select-content {
+                    pointer-events: all;
+                    opacity: 1;
+                    visibility: visible;
+                    transition:
+                        visibility var(--animation-length),
+                        opacity 10ms var(--cool-select-animation-timing);
+                }
+            }
+        }
+    }
+}
+
+@if $cool-use-component-layer {
+    @layer components {
+        @include cool-select;
+    }
+} @else {
+    @include cool-select;
+}