Select.less 2.5 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798
  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 .dijitSelectFocused,
  39. .claro .dijitSelectHover {
  40. border-color:@hovered-border-color;
  41. }
  42. .claro .dijitSelectHover .dijitArrowButton {
  43. background-color:@arrowbutton-hovered-background-color;
  44. }
  45. .claro .dijitSelectHover .dijitArrowButton .dijitArrowButtonInner {
  46. background-position:-70px 53%;
  47. }
  48. /* focused status */
  49. .claro .dijitSelectFocused .dijitArrowButton {
  50. background-color:#7dbefa; // TODO. Mailed Jason about inconsistent ComboBox/Spinner behavior.
  51. .active-gradient("../");
  52. }
  53. .claro .dijitSelectFocused .dijitArrowButton {
  54. border: none;
  55. padding: 1px;
  56. }
  57. .claro .dijitSelectFocused .dijitArrowButton .dijitArrowButtonInner {
  58. background-position:-70px 53%;
  59. }
  60. /* disable status */
  61. .claro .dijitSelectDisabled {
  62. border-color: @disabled-border-color;
  63. background-color: @disabled-background-color;
  64. background-image: none;
  65. color: @disabled-text-color;
  66. }
  67. .claro .dijitSelectDisabled .dijitArrowButton .dijitArrowButtonInner {
  68. background-position:0 53%
  69. }
  70. /* Dropdown menu style for select */
  71. .claro .dijitSelectMenu td.dijitMenuItemIconCell,
  72. .claro .dijitSelectMenu td.dijitMenuArrowCell {
  73. /* so that arrow and icon cells from MenuItem are not displayed */
  74. display: none;
  75. }
  76. .claro .dijitSelectMenu td.dijitMenuItemLabel {
  77. /* line up menu text with text in select box (in LTR and RTL modes) */
  78. padding: @textbox-padding;
  79. }
  80. .claro .dijitSelectMenu .dijitMenuSeparatorTop {
  81. border-bottom:1px solid @focused-border-color;
  82. }