bootstrap 5 CSS

[bci24]

Has anyone able to do the stylish for bootstrap 5 ?

[hackel]

@bci24 I managed to get it pretty close, though I don't think it's perfect yet.

// Copy Bootstrap appearance
.vue-select {
    --vs-font-size: #{$form-select-font-size};
    --vs-indicator-icon-color: #{$form-select-indicator-color};
    --vs-menu-offset-top: 0;
    --vs-menu-z-index: 3;
    --vs-option-font-size: #{$form-select-font-size};

    :deep(.control) {
        @extend .form-select;
        display: flex;
        min-height: unset;
        padding: 0.15rem 0.25rem 0.15rem 0.25rem;
        --bs-form-select-bg-img: none;

        &.focused {
            border-color: $form-select-focus-border-color;
            outline: 0;
            @include box-shadow($form-select-box-shadow, $form-select-focus-box-shadow);
        }

        // Fix down-arrow alignment
        .indicators-container {
            position: absolute;
            right: 3px;
            top: 1px;
        }

        .value-container {
            .input-placeholder,
            .single-value {
                @include font-size($form-select-font-size);
                line-height: var(--vs-line-height);
            }
        }
    }

    &.vue-select-sm {
        --vs-font-size: #{$form-select-font-size-sm};
        --vs-option-font-size: #{$form-select-font-size-sm};

        :deep(.control) {
            @include border-radius($form-select-border-radius-sm);
            padding: 0;

            .value-container {
                --vs-padding: 3.5px 8px;
            }

            // Fix down-arrow alignment
            .indicators-container {
                top: -2px;
            }
        }
    }
}