Button.css 5.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162
  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 #759dc0;
  43. padding: 2px 4px 4px 4px;
  44. background-image: url("../form/images/button.png");
  45. background-position: center top;
  46. background-repeat: repeat-x;
  47. background-color: #e5f2fe;
  48. color: #000000;
  49. -moz-border-radius: 4px;
  50. border-radius: 4px;
  51. -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15);
  52. -moz-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15);
  53. box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15);
  54. }
  55. .claro .dijitComboButton .dijitArrowButton {
  56. border-left-width: 0;
  57. padding: 4px 2px 4px 2px;
  58. /* TODO: still needed? */
  59. }
  60. /*arrow styles for down/up/left/right directions*/
  61. .claro .dijitArrowButtonInner {
  62. width: 15px;
  63. height: 15px;
  64. margin: 0 auto;
  65. background-image: url("../form/images/buttonArrows.png");
  66. background-repeat: no-repeat;
  67. background-position: -51px 53%;
  68. }
  69. .claro .dijitLeftArrowButton .dijitArrowButtonInner {
  70. background-position: -77px 53%;
  71. }
  72. .claro .dijitRightArrowButton .dijitArrowButtonInner {
  73. background-position: -26px 53%;
  74. }
  75. .claro .dijitUpArrowButton .dijitArrowButtonInner {
  76. background-position: 0 53%;
  77. }
  78. .claro .dijitDisabled .dijitArrowButtonInner {
  79. background-position: -151px 53%;
  80. }
  81. .claro .dijitDisabled .dijitLeftArrowButton .dijitArrowButtonInner {
  82. background-position: -177px 53%;
  83. }
  84. .claro .dijitDisabled .dijitRightArrowButton .dijitArrowButtonInner {
  85. background-position: -126px 53%;
  86. }
  87. .claro .dijitDisabled .dijitUpArrowButton .dijitArrowButtonInner {
  88. background-position: -100px 53%;
  89. }
  90. .claro .dijitButtonText {
  91. padding: 0 0.3em;
  92. text-align: center;
  93. }
  94. /* hover status */
  95. .claro .dijitButtonHover .dijitButtonNode,
  96. .claro .dijitDropDownButtonHover .dijitButtonNode,
  97. .claro .dijitComboButton .dijitButtonNodeHover,
  98. .claro .dijitComboButton .dijitDownArrowButtonHover,
  99. .claro .dijitToggleButtonHover .dijitButtonNode {
  100. background-color: #abd6ff;
  101. color: #000000;
  102. -webkit-transition-duration: 0.2s;
  103. -moz-transition-duration: 0.2s;
  104. transition-duration: 0.2s;
  105. }
  106. /* active, checked status */
  107. .claro .dijitButtonActive .dijitButtonNode,
  108. .claro .dijitDropDownButtonActive .dijitButtonNode,
  109. .claro .dijitComboButtonActive .dijitButtonNode,
  110. .claro .dijitToggleButtonActive .dijitButtonNode,
  111. .claro .dijitStackController .dijitToggleButtonChecked .dijitButtonNode {
  112. background-color: #abd6ff;
  113. -webkit-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
  114. -moz-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
  115. box-shadow: 0 0 0 rgba(0, 0, 0, 0);
  116. -webkit-transition-duration: 0.1s;
  117. -moz-transition-duration: 0.1s;
  118. transition-duration: 0.1s;
  119. }
  120. /* disabled status */
  121. .claro .dijitButtonDisabled,
  122. .claro .dijitDropDownButtonDisabled,
  123. .claro .dijitComboButtonDisabled,
  124. .claro .dijitToggleButtonDisabled {
  125. background-image: none;
  126. outline: none;
  127. }
  128. .claro .dijitButtonDisabled .dijitButtonNode,
  129. .claro .dijitDropDownButtonDisabled .dijitButtonNode,
  130. .claro .dijitComboButtonDisabled .dijitButtonNode,
  131. .claro .dijitToggleButtonDisabled .dijitButtonNode {
  132. background-position: 0 -149px;
  133. background-color: #efefef;
  134. border: solid 1px #d3d3d3;
  135. color: #818181;
  136. -webkit-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
  137. -moz-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
  138. box-shadow: 0 0 0 rgba(0, 0, 0, 0);
  139. }
  140. .claro .dijitComboButtonDisabled .dijitArrowButton {
  141. border-left-width: 0;
  142. }
  143. /* for ComboButton */
  144. .claro table.dijitComboButton {
  145. border-collapse: separate;
  146. /* override dijit.css so that ComboBox rounded corners work */
  147. }
  148. .dj_ie6 .claro .dijitButtonNode {
  149. background-image: none;
  150. }
  151. .claro .dijitComboButton .dijitStretch {
  152. -moz-border-radius: 4px 0 0 4px;
  153. border-radius: 4px 0 0 4px;
  154. }
  155. .claro .dijitComboButton .dijitArrowButton {
  156. -moz-border-radius: 0 4px 4px 0;
  157. border-radius: 0 4px 4px 0;
  158. }