Ta/dasena-web/public/assets/admin/scss/themes/plugins/_select2.scss

121 lines
2.5 KiB
SCSS

/*
<--!----------------------------------------------------------------!-->
<--! Select2 !-->
<--!----------------------------------------------------------------!-->
*/
.select2-container {
width: -webkit-fill-available !important;
.select2-selection {
color: $brand-dark;
font-size: $font-13;
padding-bottom: 0;
border-color: $border-color;
min-height: calc(2.5em + 0.75rem + 2px);
}
.select2-selection--single {
background-size: 15px 8px;
padding: 0.475rem 2.25rem 0.375rem 0.75rem;
.select2-selection__rendered {
color: $brand-dark;
padding: 5px;
width: 100%;
max-width: 100%;
overflow: hidden;
font-weight: $font-500;
/*
text-overflow: ellipsis;
white-space: initial;
display: -webkit-box !important;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
*/
}
}
&.select2-container--focus,
&.select2-container--open {
.select2-selection {
box-shadow: none;
border-color: $border-color;
}
}
.select2-dropdown {
z-index: 999999;
color: $brand-dark;
border-color: $border-color;
border-radius: $radius-md;
box-shadow: 0 4px 24px 0 rgba(62, 57, 107, 0.18);
.select2-results__options {
.select2-results__option {
color: $brand-dark;
font-size: $font-13;
padding: 10px 25px;
font-weight: $font-500;
&.select2-results__option--selected,
&.select2-results__option--highlighted {
color: $primary;
background-color: rgba(84, 133, 228, 0.075);
}
}
}
.select2-search {
.select2-search__field {
color: $brand-dark;
font-size: $font-13;
border-color: $border-color;
}
}
}
.select2-selection--multiple {
.select2-selection__rendered {
.select2-selection__choice {
position: relative;
color: $brand-dark;
font-size: $font-13;
font-weight: $font-600;
padding: 8px 30px 8px 15px;
border-color: $border-color;
.select2-selection__choice__remove {
right: 5px;
width: 7px;
height: 7px;
margin-right: 5px;
position: absolute;
}
}
}
}
.select2-selection--multiple {
.select2-search {
height: 0;
.select2-search__field {
height: 0;
}
}
}
}
.select-wd-sm {
.select2-container {
width: 50px !important;
}
}
.select-wd-md {
.select2-container {
width: 125px !important;
}
}
.select-wd-lg {
.select2-container {
width: 225px !important;
}
}
.select-wd-xl {
.select2-container {
width: 350px !important;
}
}
.select-wd-xxl {
.select2-container {
width: 500px !important;
}
}