_mixins.scss 1.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475
  1. //
  2. // General: Mixins
  3. //
  4. // Select2 Variant
  5. @mixin select2-variant($name, $color) {
  6. .select2-#{$name} {
  7. + .select2-container--default {
  8. &.select2-container--open {
  9. .select2-selection--single {
  10. border-color: lighten($color, 25%);
  11. }
  12. }
  13. &.select2-container--focus .select2-selection--single {
  14. border-color: lighten($color, 25%);
  15. }
  16. }
  17. .select2-container--default &,
  18. .select2-container--default {
  19. &.select2-dropdown,
  20. .select2-dropdown,
  21. .select2-search--inline {
  22. .select2-search__field {
  23. &:focus {
  24. border: $input-border-width solid lighten($color, 25%);
  25. }
  26. }
  27. }
  28. .select2-results__option--highlighted {
  29. background-color: $color;
  30. color: color-yiq($color);
  31. &[aria-selected] {
  32. &,
  33. &:hover {
  34. background-color: darken($color, 3%);
  35. color: color-yiq(darken($color, 3%));
  36. }
  37. }
  38. }
  39. //Multiple select
  40. & {
  41. .select2-selection--multiple {
  42. &:focus {
  43. border-color: lighten($color, 25%);
  44. }
  45. .select2-selection__choice {
  46. background-color: $color;
  47. border-color: darken($color, 5%);
  48. color: color-yiq($color);
  49. }
  50. .select2-selection__choice__remove {
  51. color: rgba(color-yiq($color), 0.7);
  52. &:hover {
  53. color: color-yiq($color);
  54. }
  55. }
  56. }
  57. &.select2-container--focus .select2-selection--multiple {
  58. border-color: lighten($color, 25%);
  59. }
  60. }
  61. }
  62. }
  63. }