Select.less 2.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293
  1. /* Select
  2. *
  3. * Styling Select mainly includes:
  4. *
  5. * 1. Containers
  6. * .dijitSelect - for border, background-color
  7. * .dijitButtonContents - for border
  8. *
  9. * 2. Arrow
  10. * .dijitArrowButton - for border, padding and background-color|image
  11. * .dijitArrowButtonInner - for border, background-color|image, display and width|height
  12. *
  13. * 3. Menu
  14. * .dijitSelectMenu .* - for border, padding
  15. *
  16. * 4. Various states
  17. * .dijitSelectHover|.dijitSelectFocused|.dijitSelectDisabled .* - for border, padding and background-color|image
  18. */
  19. @import "../variables";
  20. /* normal status */
  21. .claro .dijitSelect .dijitArrowButtonContainer {
  22. border: 1px solid @arrowbutton-inner-border-color;
  23. }
  24. .claro .dijitSelect .dijitArrowButton {
  25. padding: 0;
  26. background-color: @arrowbutton-background-color;
  27. .standard-gradient("../");
  28. }
  29. .claro .dijitSelect .dijitArrowButton .dijitArrowButtonInner {
  30. height:16px;
  31. }
  32. /* hover status */
  33. .claro .dijitSelectHover {
  34. background-color: @textbox-hovered-background-color;
  35. .textbox-background-image;
  36. background-repeat: repeat-x;
  37. }
  38. .claro .dijitSelectHover .dijitArrowButton {
  39. background-color:@arrowbutton-hovered-background-color;
  40. }
  41. .claro .dijitSelectHover .dijitArrowButton .dijitArrowButtonInner {
  42. background-position:-70px 53%;
  43. }
  44. /* focused status */
  45. .claro .dijitSelectFocused .dijitArrowButton {
  46. background-color:#7dbefa; // TODO. Mailed Jason about inconsistent ComboBox/Spinner behavior.
  47. .active-gradient("../");
  48. }
  49. .claro .dijitSelectFocused .dijitArrowButton {
  50. border: none;
  51. padding: 1px;
  52. }
  53. .claro .dijitSelectFocused .dijitArrowButton .dijitArrowButtonInner {
  54. background-position:-70px 53%;
  55. }
  56. /* disable status */
  57. .claro .dijitSelectDisabled {
  58. border-color: @disabled-border-color;
  59. background-color: @disabled-background-color;
  60. background-image: none;
  61. color: @disabled-text-color;
  62. }
  63. .claro .dijitSelectDisabled .dijitArrowButton .dijitArrowButtonInner {
  64. background-position:0 53%
  65. }
  66. /* Dropdown menu style for select */
  67. .claro .dijitSelectMenu td.dijitMenuItemIconCell,
  68. .claro .dijitSelectMenu td.dijitMenuArrowCell {
  69. /* so that arrow and icon cells from MenuItem are not displayed */
  70. display: none;
  71. }
  72. .claro .dijitSelectMenu td.dijitMenuItemLabel {
  73. /* line up menu text with text in select box (in LTR and RTL modes) */
  74. padding: @textbox-padding;
  75. }
  76. .claro .dijitSelectMenu .dijitMenuSeparatorTop {
  77. border-bottom:1px solid @focused-border-color;
  78. }