Select.less 3.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124
  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. .claro .dijitSelect .dijitButtonText {
  21. padding: @textbox-padding;
  22. }
  23. /* normal status */
  24. .claro .dijitSelect {
  25. border: 1px solid @border-color;
  26. background-color: @textbox-background-color;
  27. border-collapse: separate;
  28. }
  29. .dj_ie6 .claro .dijitSelect,
  30. .dj_ie6 .claro .dijitSelect .dijitButtonNode {
  31. background-image:none;
  32. }
  33. .claro .dijitSelect .dijitButtonContents {
  34. border: 0 solid @border-color;
  35. border-right-width: 1px;
  36. }
  37. .claro .dijitSelect .dijitArrowButton {
  38. padding: 0;
  39. border: 1px solid @arrowbutton-inner-border-color;
  40. border-top:none;
  41. background-color: @arrowbutton-background-color;
  42. background-image: url("images/formHighlight.png");
  43. background-repeat:repeat-x;
  44. }
  45. .claro .dijitSelect .dijitArrowButton .dijitArrowButtonInner {
  46. background-image: url("images/commonFormArrows.png");
  47. background-position:-35px 70%;
  48. background-repeat: no-repeat;
  49. width:16px;
  50. height:16px;
  51. }
  52. /* hover status */
  53. .claro .dijitSelectHover {
  54. border: 1px solid @hovered-border-color;
  55. background-color: @textbox-hovered-background-color;
  56. background-image: url('images/textBox_back.png');
  57. background-repeat: repeat-x;
  58. }
  59. .claro .dijitSelectHover .dijitButtonContents {
  60. border-color:@hovered-border-color;
  61. }
  62. .claro .dijitSelectHover .dijitArrowButton {
  63. background-color:@arrowbutton-hovered-background-color;
  64. }
  65. .claro .dijitSelectHover .dijitArrowButton .dijitArrowButtonInner {
  66. background-position:-70px 70%;
  67. }
  68. /* focused status */
  69. .claro .dijitSelectFocused {
  70. border: 1px solid @focused-border-color;
  71. }
  72. .claro .dijitSelectFocused .dijitButtonContents {
  73. border-color:@focused-border-color;
  74. }
  75. .claro .dijitSelectFocused .dijitArrowButton {
  76. background-color:#7dbefa; // TODO. Mailed Jason about inconsistent ComboBox/Spinner behavior.
  77. background-position:0 -177px;
  78. border: none;
  79. padding: 0 1px;
  80. }
  81. .claro .dijitSelectFocused .dijitArrowButton .dijitArrowButtonInner {
  82. background-position:-70px 70%;
  83. margin-bottom: 1px;
  84. }
  85. /* disable status */
  86. .claro .dijitSelectDisabled {
  87. border: 1px solid @disabled-border-color;
  88. background-color: @disabled-background-color;
  89. background-image: none;
  90. color: @disabled-text-color;
  91. }
  92. .claro .dijitSelectDisabled .dijitArrowButton {
  93. background-color: @disabled-background-color;
  94. }
  95. .claro .dijitSelectDisabled .dijitArrowButton .dijitArrowButtonInner {
  96. background-position:0 70%
  97. }
  98. /* Dropdown menu style for select */
  99. .claro .dijitSelectMenu td.dijitMenuItemIconCell,
  100. .claro .dijitSelectMenu td.dijitMenuArrowCell {
  101. /* so that arrow and icon cells from MenuItem are not displayed */
  102. display: none;
  103. }
  104. .claro .dijitSelectMenu td.dijitMenuItemLabel {
  105. /* line up menu text with text in select box (in LTR and RTL modes) */
  106. padding: @textbox-padding;
  107. }
  108. .claro .dijitSelectMenu .dijitMenuSeparatorTop {
  109. border-bottom:1px solid @focused-border-color;
  110. }