2019-09-25 10:24:16 +02:00
|
|
|
//
|
|
|
|
// General: Mixins
|
|
|
|
//
|
|
|
|
|
|
|
|
// Select2 Variant
|
|
|
|
@mixin select2-variant($name, $color) {
|
|
|
|
.select2-#{$name} {
|
|
|
|
|
2020-02-13 13:50:38 +01:00
|
|
|
+ .select2-container--default {
|
|
|
|
&.select2-container--open {
|
|
|
|
.select2-selection--single {
|
|
|
|
border-color: lighten($color, 25%);
|
|
|
|
}
|
|
|
|
}
|
2020-03-13 17:41:13 +01:00
|
|
|
|
|
|
|
&.select2-container--focus .select2-selection--single {
|
|
|
|
border-color: lighten($color, 25%);
|
|
|
|
}
|
2020-02-13 13:50:38 +01:00
|
|
|
}
|
|
|
|
|
2019-09-25 10:24:16 +02:00
|
|
|
.select2-container--default &,
|
|
|
|
.select2-container--default {
|
|
|
|
&.select2-dropdown,
|
|
|
|
.select2-dropdown,
|
|
|
|
.select2-search--inline {
|
|
|
|
.select2-search__field {
|
|
|
|
&:focus {
|
|
|
|
border: $input-border-width solid lighten($color, 25%);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
.select2-results__option--highlighted {
|
|
|
|
background-color: $color;
|
|
|
|
color: color-yiq($color);
|
|
|
|
|
|
|
|
&[aria-selected] {
|
|
|
|
&,
|
|
|
|
&:hover {
|
|
|
|
background-color: darken($color, 3%);
|
|
|
|
color: color-yiq(darken($color, 3%));
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
//Multiple select
|
|
|
|
& {
|
|
|
|
.select2-selection--multiple {
|
|
|
|
&:focus {
|
|
|
|
border-color: lighten($color, 25%);
|
|
|
|
}
|
|
|
|
|
2019-10-29 09:22:51 +01:00
|
|
|
.select2-selection__choice {
|
|
|
|
background-color: $color;
|
|
|
|
border-color: darken($color, 5%);
|
|
|
|
color: color-yiq($color);
|
|
|
|
}
|
2019-09-25 10:24:16 +02:00
|
|
|
|
2019-10-29 09:22:51 +01:00
|
|
|
.select2-selection__choice__remove {
|
|
|
|
color: rgba(color-yiq($color), 0.7);
|
2019-09-25 10:24:16 +02:00
|
|
|
|
2019-10-29 09:22:51 +01:00
|
|
|
&:hover {
|
|
|
|
color: color-yiq($color);
|
|
|
|
}
|
2019-09-25 10:24:16 +02:00
|
|
|
}
|
|
|
|
}
|
2020-03-13 17:41:13 +01:00
|
|
|
|
2019-10-29 09:22:51 +01:00
|
|
|
&.select2-container--focus .select2-selection--multiple {
|
|
|
|
border-color: lighten($color, 25%);
|
|
|
|
}
|
2019-09-25 10:24:16 +02:00
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|