_mixins.scss 1.4 KB

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