select.less 1.4 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455
  1. // Select variants
  2. //
  3. .select-variant(@color; @background; @hover-background; @active-background; @disabled-background: @gray-light; @arrow-color) {
  4. .select2-choice {
  5. color: @color;
  6. background-color: @background;
  7. &:hover,
  8. &.hover,
  9. &:focus,
  10. &:active {
  11. color: @color;
  12. background-color: @hover-background;
  13. border-color: @hover-background;
  14. }
  15. &:active {
  16. background: @active-background;
  17. border-color: @active-background;
  18. }
  19. .select2-container-disabled& {
  20. &,
  21. &:hover,
  22. &:focus,
  23. &:active {
  24. background-color: @disabled-background;
  25. border-color: @background;
  26. }
  27. }
  28. .select2-arrow {
  29. border-top-color: @arrow-color;
  30. }
  31. }
  32. }
  33. .select-size(@padding-vertical; @padding-horizontal; @font-size; @line-height; @border-radius) {
  34. .button-size(@padding-vertical; @padding-horizontal; @font-size; @line-height; @border-radius);
  35. padding-right: (@padding-horizontal * 2 + 9px);
  36. min-height: round((@line-height*@font-size + 2*@padding-vertical)); // we need min-height for empty ones
  37. }
  38. .multiple-select-variant(@background; @hover-background; @border-color) {
  39. .select2-container-multi& {
  40. border-color: @border-color;
  41. .select2-search-choice {
  42. background-color: @background;
  43. &:hover {
  44. background-color: @hover-background;
  45. }
  46. }
  47. }
  48. }