119 lines
2.6 KiB
SCSS
119 lines
2.6 KiB
SCSS
// npm package: select2
|
|
// github link: https://github.com/select2/select2
|
|
|
|
.select2-container--default {
|
|
.select2-selection--single,
|
|
.select2-selection--multiple {
|
|
background: $input-bg;
|
|
border: 1px solid $input-border-color;
|
|
border-radius: $border-radius;
|
|
@at-root #{selector-append(".select2-container--focus", &)} {
|
|
border: 1px solid $input-focus-border-color;
|
|
}
|
|
}
|
|
}
|
|
|
|
.select2-dropdown {
|
|
background: $dropdown-bg;
|
|
border: 1px solid $input-focus-border-color;
|
|
border-radius: $dropdown-border-radius;
|
|
}
|
|
|
|
.select2-container--default {
|
|
.select2-search--dropdown .select2-search__field {
|
|
@extend .form-control;
|
|
}
|
|
.select2-results__option--highlighted[aria-selected] {
|
|
background-color: $component-hover-bg;
|
|
color: $component-hover-color;
|
|
}
|
|
|
|
.select2-results__option[aria-selected=true] {
|
|
background-color: $component-active-bg;
|
|
color: $component-active-color
|
|
}
|
|
.select2-search--inline .select2-search__field {
|
|
color: var(--#{$prefix}body-color);
|
|
}
|
|
}
|
|
|
|
.select2-container .select2-selection--single,
|
|
.select2-container .select2-selection--multiple {
|
|
height: auto;
|
|
}
|
|
|
|
.select2-container--default .select2-selection--single {
|
|
.select2-selection__rendered {
|
|
color: var(--#{$prefix}body-color);
|
|
line-height: 1.5;
|
|
padding: $input-btn-padding-y $input-btn-padding-x;
|
|
}
|
|
.select2-selection__arrow {
|
|
height: 100%;
|
|
b {
|
|
left: 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
.select2-container--default .select2-selection--multiple {
|
|
min-height: 38px;
|
|
.select2-selection__rendered {
|
|
padding: 0px;
|
|
list-style: none;
|
|
margin: 0;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
align-items: center;
|
|
min-height: unset;
|
|
|
|
|
|
// Hide empty ul when no items selected
|
|
&:empty {
|
|
display: none;
|
|
}
|
|
|
|
// Remove list bullets
|
|
li {
|
|
list-style: none;
|
|
list-style-type: none;
|
|
}
|
|
|
|
&::before,
|
|
li::before {
|
|
content: none;
|
|
display: none;
|
|
}
|
|
}
|
|
.select2-selection__choice {
|
|
background-color: $component-active-bg;
|
|
color: $component-active-color;
|
|
border-color: $component-active-bg;
|
|
padding: 1px 8px;
|
|
border-radius: .15rem;
|
|
margin: 5px 0 0 5px;
|
|
list-style: none;
|
|
}
|
|
.select2-selection__choice__remove {
|
|
color: $component-active-color;
|
|
opacity: .5;
|
|
margin-right: 4px;
|
|
}
|
|
// Placeholder styling
|
|
.select2-selection__placeholder {
|
|
margin-top: 0;
|
|
padding: 5px 8px;
|
|
}
|
|
// Search field styling
|
|
.select2-search--inline {
|
|
margin-top: 0;
|
|
.select2-search__field {
|
|
margin-top: 5px;
|
|
margin-left: 5px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.select2-container .select2-search--inline {
|
|
margin-top: 3px;
|
|
} |