$enable-shadows: true !default; $select-font-family: inherit !default; $select-font-size: inherit !default; $select-line-height: $input-btn-line-height !default; //formerly line-height-computed $select-color-text: gray("800") !default; //$gray-800 $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: theme-color("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-text, 0.1) !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: mix( $input-border-color, $input-bg, 80% ) !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.has-items { 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: $input-line-height-sm; } } &.multi { .#{$selectize}-input.has-items { 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-control.#{$selectize}-control { padding: 0; height: auto; border: none; background: none; box-shadow: none; border-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; } } // .input-group .#{$selectize}-input { // overflow: unset; // border-radius: 0 $select-border-radius $select-border-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; }