2025-01-12 04:36:52 +08:00

201 lines
6.0 KiB
SCSS

$enable-shadows: true !default;
$select-font-family: if($input-btn-font-family, $input-btn-font-family, inherit) !default;
$select-font-size: $input-btn-font-size !default;
$select-line-height: $input-btn-line-height !default; //formerly line-height-computed
$select-color-rgb: var(--bs-emphasis-color-rgb, 0, 0, 0) !default;
$select-color-text: RGBA($select-color-rgb, 0.83) !default;
$select-color-highlight: rgba(255, 237, 40, 0.4) !default;
$select-color-input: $input-bg !default;
$select-color-input-full: $input-bg !default;
$select-color-input-error: $danger !default;
$select-color-input-error-focus: darken(
$select-color-input-error,
10%
) !default;
$select-color-disabled: $input-bg !default;
$select-color-item: RGBA($select-color-rgb, 0.05) !default;
$select-color-item-border: $border-color !default;
$select-color-item-active: $component-active-bg !default;
$select-color-item-active-text: color-contrast($select-color-item-active) !default;
$select-color-item-active-border: rgba(0, 0, 0, 0) !default;
$select-color-optgroup: $dropdown-bg !default;
$select-color-optgroup-text: $dropdown-header-color !default;
$select-color-optgroup-border: $dropdown-divider-bg !default;
$select-color-dropdown: $dropdown-bg !default;
$select-color-dropdown-border-top: rgba($input-border-color, 0.8) !default;
$select-color-dropdown-item-active: $dropdown-link-hover-bg !default;
$select-color-dropdown-item-active-text: $dropdown-link-hover-color !default;
$select-color-dropdown-item-create-active-text: $dropdown-link-hover-color !default;
$select-opacity-disabled: 0.5 !default;
$select-shadow-input: none !default;
$select-shadow-input-focus: inset 0 1px 2px rgba(0, 0, 0, 0.15) !default;
$select-shadow-input-error: inset 0 1px 1px rgba(0, 0, 0, 0.075) !default;
$select-shadow-input-error-focus: inset 0 1px 1px rgba(0, 0, 0, 0.075),
0 0 6px lighten($select-color-input-error, 20%) !default;
$select-border: 1px solid $input-border-color !default;
$select-border-radius: $input-border-radius !default;
$select-width-item-border: 0px !default;
$select-padding-x: $input-btn-padding-x !default;
$select-padding-y: $input-btn-padding-y !default;
$select-padding-dropdown-item-x: $input-btn-padding-x !default;
$select-padding-dropdown-item-y: 3px !default;
$select-padding-item-x: 5px !default;
$select-padding-item-y: 1px !default;
$select-margin-item-x: 3px !default;
$select-margin-item-y: 3px !default;
$select-arrow-size: 5px !default;
$select-arrow-color: $select-color-text !default;
$select-arrow-offset: calc(#{$select-padding-x} + 5px) !default;
@import "selectize";
.#{$selectize}-dropdown,
.#{$selectize}-dropdown.form-control {
height: auto;
padding: 0;
margin: 2px 0 0 0;
z-index: $zindex-dropdown;
background: $select-color-dropdown;
border: 1px solid $dropdown-border-color; //$dropdown-fallback-border
border-radius: $border-radius;
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
}
.#{$selectize}-dropdown {
.optgroup-header {
font-size: $font-size-sm;
line-height: $line-height-base;
}
.optgroup:first-child:before {
display: none;
}
.optgroup:before {
content: " ";
display: block;
height: 0;
margin: $dropdown-divider-margin-y 0;
overflow: hidden;
border-top: 1px solid $dropdown-divider-bg;
margin-left: $select-padding-dropdown-item-x * -1;
margin-right: $select-padding-dropdown-item-x * -1;
}
.create {
padding-left: $select-padding-dropdown-item-x;
}
}
.#{$selectize}-dropdown-content {
padding: 5px 0;
}
.#{$selectize}-dropdown-emptyoptionlabel {
text-align: center;
}
.#{$selectize}-input {
min-height: $input-height;
@include box-shadow($input-box-shadow);
@include transition($input-transition);
&.dropdown-active {
border-radius: $select-border-radius;
}
&.dropdown-active::before {
display: none;
}
&.focus {
border-color: $input-focus-border-color;
outline: 0;
@if $enable-shadows {
box-shadow: $input-box-shadow, $input-focus-box-shadow;
} @else {
box-shadow: $input-focus-box-shadow;
}
}
}
.is-invalid .#{$selectize}-input {
border-color: $select-color-input-error;
box-shadow: $select-shadow-input-error;
&:focus {
border-color: $select-color-input-error-focus;
box-shadow: $select-shadow-input-error-focus;
}
}
.#{$selectize}-control {
&.form-control-sm {
.#{$selectize}-input {
min-height: $input-height-sm !important;
height: $input-height-sm;
padding: $input-padding-y-sm $input-padding-x-sm !important;
font-size: $input-font-size-sm;
line-height: $line-height-sm;
}
}
&.multi {
.#{$selectize}-input {
height: auto;
padding-left: calc(#{$select-padding-x} - #{$select-padding-item-x});
padding-right: calc(#{$select-padding-x} - #{$select-padding-item-x});
}
.#{$selectize}-input > div {
border-radius: calc(#{$select-border-radius} - 1px);
}
}
}
.form-select.#{$selectize}-control,
.form-control.#{$selectize}-control {
padding: 0;
height: auto;
border: none;
background: none;
box-shadow: none;
border-radius: 0;
}
.input-group>.input-group-append>.btn, .input-group>.form-control:not(:first-child) {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
.input-group>.input-group-prepend>.btn {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
.input-group .#{$selectize}-control:not(:last-child) {
.#{$selectize}-input{
overflow: unset;
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
}
.input-group .#{$selectize}-control:not(:first-child) {
.#{$selectize}-input{
overflow: unset;
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
}
.#{selectize}-dropdown.plugin-auto_position.#{$selectize}-position-top {
border-top: $select-border!important;
border-bottom: $select-border!important;
border-radius: $select-border-radius!important;
}
.#{selectize}-control.plugin-auto_position .#{selectize}-input.#{$selectize}-position-top.dropdown-active {
border-radius: $select-border-radius!important;
border-top: $select-border!important;
}