Button.css 5.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160
  1. /* Button | DropDownButton | ComboButton | ToggleButton
  2. *
  3. * Styling Buttons mainly includes:
  4. *
  5. * 1. Containers
  6. * .dijitButton
  7. * .dijitDropDownButton
  8. * .dijitComboButton
  9. * .dijitButtonNode - common button/arrow wrapper shared across all three button types
  10. *
  11. * 2. Button text
  12. * .dijitButtonText
  13. *
  14. * 3. Arrows - only for DropDownButton and ComboButton
  15. * There are total four directions arrows - down, left, right, up:
  16. * .dijitArrowButtonInner - down arrow by default
  17. * .dijitLeftArrowButton .dijitArrowButtonInner - left arrow
  18. * .dijitRightArrowButton .dijitArrowButtonInner - right arrow
  19. * .dijitUpArrowButton .dijitArrowButtonInner - up arrow
  20. *
  21. * 4. States - Hover, Active, Disabled, e.g.
  22. * .dijitButtonHover .dijitButtonNode
  23. * .dijitButtonActive .dijitButtonNode
  24. * .dijitButtonDisabled .dijitButtonNode
  25. *
  26. * .dijitDisabled .dijitArrowButtonInner - disabled arrow states
  27. */
  28. .claro .dijitButtonNode {
  29. /* rules for dijit.form.*Button widgets and arrow nodes on ComboBox, Spinner etc. */
  30. -webkit-transition-property: background-color;
  31. -moz-transition-property: background-color;
  32. transition-property: background-color;
  33. -webkit-transition-duration: 0.3s;
  34. -moz-transition-duration: 0.3s;
  35. transition-duration: 0.3s;
  36. }
  37. .claro .dijitButton .dijitButtonNode,
  38. .claro .dijitDropDownButton .dijitButtonNode,
  39. .claro .dijitComboButton .dijitButtonNode,
  40. .claro .dijitToggleButton .dijitButtonNode {
  41. /* rules for the dijit.form.*Button widgets (see also ComboButton section below) */
  42. border: 1px solid #769dc0;
  43. padding: 2px 4px 4px 4px;
  44. background-image: url("images/button.png");
  45. background-position: center top;
  46. background-repeat: repeat-x;
  47. background-color: #e9f4fe;
  48. -moz-border-radius: 4px;
  49. border-radius: 4px;
  50. -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15);
  51. -moz-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15);
  52. box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15);
  53. }
  54. .claro .dijitComboButton .dijitArrowButton {
  55. border-left-width: 0;
  56. padding: 4px 2px 4px 2px;
  57. /* TODO: still needed? */
  58. }
  59. /*arrow styles for down/up/left/right directions*/
  60. .claro .dijitArrowButtonInner {
  61. width: 15px;
  62. height: 15px;
  63. margin: 0 auto;
  64. background-image: url("images/buttonArrows.png");
  65. background-repeat: no-repeat;
  66. background-position: -51px 53%;
  67. }
  68. .claro .dijitLeftArrowButton .dijitArrowButtonInner {
  69. background-position: -77px 53%;
  70. }
  71. .claro .dijitRightArrowButton .dijitArrowButtonInner {
  72. background-position: -26px 53%;
  73. }
  74. .claro .dijitUpArrowButton .dijitArrowButtonInner {
  75. background-position: 0 53%;
  76. }
  77. .claro .dijitDisabled .dijitArrowButtonInner {
  78. background-position: -151px 53%;
  79. }
  80. .claro .dijitDisabled .dijitLeftArrowButton .dijitArrowButtonInner {
  81. background-position: -177px 53%;
  82. }
  83. .claro .dijitDisabled .dijitRightArrowButton .dijitArrowButtonInner {
  84. background-position: -126px 53%;
  85. }
  86. .claro .dijitDisabled .dijitUpArrowButton .dijitArrowButtonInner {
  87. background-position: -100px 53%;
  88. }
  89. .claro .dijitButtonText {
  90. padding: 0 0.3em;
  91. text-align: center;
  92. }
  93. /* hover status */
  94. .claro .dijitButtonHover .dijitButtonNode,
  95. .claro .dijitDropDownButtonHover .dijitButtonNode,
  96. .claro .dijitComboButton .dijitButtonNodeHover,
  97. .claro .dijitComboButton .dijitDownArrowButtonHover,
  98. .claro .dijitToggleButtonHover .dijitButtonNode {
  99. background-color: #abd6ff;
  100. color: #000000;
  101. -webkit-transition-duration: 0.2s;
  102. -moz-transition-duration: 0.2s;
  103. transition-duration: 0.2s;
  104. }
  105. /* checked status */
  106. .claro .dijitButtonActive .dijitButtonNode,
  107. .claro .dijitDropDownButtonActive .dijitButtonNode,
  108. .claro .dijitComboButtonActive .dijitButtonNode,
  109. .claro .dijitToggleButtonActive .dijitButtonNode {
  110. background-color: #abd6ff;
  111. -webkit-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
  112. -moz-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
  113. box-shadow: 0 0 0 rgba(0, 0, 0, 0);
  114. -webkit-transition-duration: 0.1s;
  115. -moz-transition-duration: 0.1s;
  116. transition-duration: 0.1s;
  117. }
  118. /* disabled status */
  119. .claro .dijitButtonDisabled,
  120. .claro .dijitDropDownButtonDisabled,
  121. .claro .dijitComboButtonDisabled,
  122. .claro .dijitToggleButtonDisabled {
  123. background-image: none;
  124. outline: none;
  125. }
  126. .claro .dijitButtonDisabled .dijitButtonNode,
  127. .claro .dijitDropDownButtonDisabled .dijitButtonNode,
  128. .claro .dijitComboButtonDisabled .dijitButtonNode,
  129. .claro .dijitToggleButtonDisabled .dijitButtonNode {
  130. background-position: 0 -149px;
  131. background-color: #efefef;
  132. border: solid 1px #d3d3d3;
  133. color: #818181;
  134. -webkit-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
  135. -moz-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
  136. box-shadow: 0 0 0 rgba(0, 0, 0, 0);
  137. }
  138. .claro .dijitComboButtonDisabled .dijitArrowButton {
  139. border-left-width: 0;
  140. }
  141. /* for ComboButton */
  142. .claro table.dijitComboButton {
  143. border-collapse: separate;
  144. /* override dijit.css so that ComboBox rounded corners work */
  145. }
  146. .dj_ie6 .claro .dijitButtonNode {
  147. background-image: none;
  148. }
  149. .claro .dijitComboButton .dijitStretch {
  150. -moz-border-radius: 4px 0 0 4px;
  151. border-radius: 4px 0 0 4px;
  152. }
  153. .claro .dijitComboButton .dijitArrowButton {
  154. -moz-border-radius: 0 4px 4px 0;
  155. border-radius: 0 4px 4px 0;
  156. }