Toolbar.css 5.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158
  1. /* Toolbar
  2. *
  3. * Styling Toolbar means styling the toolbar container and the widget inside toolbar (dijitToolbar)
  4. *
  5. * 1. toolbar (default styling):
  6. * .dijitToolbar - styles for outer container
  7. *
  8. * 2. widget inside toolbar
  9. * .dijitToolbar .dijitButtonNode - Button widget
  10. * .dijitComboButton - ComboButton widget
  11. * .dijitDropDownButton - DropDownButton widget
  12. * .dijitToggleButton - ToggleButton widget
  13. *
  14. * 3. hovered widget inside toolbar (ie, mouse hover on the widget inside)
  15. * .dijitToolbar .dijitButtonNodeHover - styles for hovered Button widget
  16. *
  17. * 4. actived widget inside toolbar (ie, mouse down on the widget inside)
  18. * .dijitToolbar .dijitButtonNodeActive - mouse down on Button widget
  19. */
  20. .claro .dijitToolbar {
  21. border-bottom: 1px solid #b5bcc7;
  22. background-color: #efefef;
  23. background-image: url("images/commonHighlight.png");
  24. background-position: 0 0;
  25. background-repeat: repeat-x;
  26. padding: 2px 0 2px 4px;
  27. zoom: 1;
  28. }
  29. .claro .dijitToolbar label {
  30. padding: 0 3px 0 6px;
  31. }
  32. /** override claro/form/Button.css **/
  33. .claro .dijitToolbar .dijitButtonNode {
  34. border-width: 0;
  35. /* on hover/active, border-->1px, padding-->1px */
  36. padding: 2px;
  37. -moz-border-radius: 2px;
  38. border-radius: 2px;
  39. -webkit-box-shadow: none;
  40. -moz-box-shadow: none;
  41. box-shadow: none;
  42. -webkit-transition-property: background-color;
  43. -moz-transition-property: background-color;
  44. transition-property: background-color;
  45. -webkit-transition-duration: 0.3s, 0.35s;
  46. -moz-transition-duration: 0.3s, 0.35s;
  47. transition-duration: 0.3s, 0.35s;
  48. background-image: url("images/commonHighlight.png");
  49. background-position: 0 -30px;
  50. background-repeat: repeat-x;
  51. background-color: rgba(171, 214, 255, 0);
  52. }
  53. .dj_ie .claro .dijitToolbar .dijitButtonNode {
  54. background-color: transparent;
  55. /* for IE, which doesn't understand rgba(...) */
  56. }
  57. .dj_ie6 .claro .dijitToolbar .dijitButtonNode {
  58. background: none;
  59. /* because background-color: transparent above doesn't work */
  60. }
  61. .claro .dijitToolbar .dijitComboButton .dijitStretch {
  62. /* no rounded border on side adjacent to arrow */
  63. -moz-border-radius: 2px 0 0 2px;
  64. border-radius: 2px 0 0 2px;
  65. }
  66. .claro .dijitToolbar .dijitComboButton .dijitArrowButton {
  67. /* no rounded border on side adjacent to button */
  68. -moz-border-radius: 0 2px 2px 0;
  69. border-radius: 0 2px 2px 0;
  70. }
  71. .claro .dijitToolbar .dijitComboBox .dijitButtonNode {
  72. padding: 0;
  73. }
  74. /* hover status */
  75. .claro .dijitToolbar .dijitButtonHover .dijitButtonNode,
  76. .claro .dijitToolbar .dijitDropDownButtonHover .dijitButtonNode,
  77. .claro .dijitToolbar .dijitToggleButtonHover .dijitButtonNode,
  78. .claro .dijitToolbar .dijitComboButtonHover .dijitButtonNode {
  79. background-position: 0 0;
  80. border-width: 1px;
  81. background-color: #abd6ff;
  82. padding: 1px;
  83. }
  84. .claro .dijitToolbar .dijitComboButtonHover .dijitButtonNode, .claro .dijitToolbar .dijitComboButtonHover .dijitDownArrowButton {
  85. background-position: 0 0;
  86. background-color: #f4ffff;
  87. }
  88. .claro .dijitToolbar .dijitComboButtonHover .dijitButtonNodeHover, .claro .dijitToolbar .dijitComboButtonHover .dijitDownArrowButtonHover {
  89. background-color: #abd6ff;
  90. }
  91. /* active status */
  92. .claro .dijitToolbar .dijitButtonActive .dijitButtonNode, .claro .dijitToolbar .dijitDropDownButtonActive .dijitButtonNode, .claro .dijitToolbar .dijitToggleButtonActive .dijitButtonNode {
  93. border-width: 1px;
  94. background-color: #7dbefa;
  95. background-position: 0 -177px;
  96. padding: 1px;
  97. }
  98. .claro .dijitToolbar .dijitComboButtonActive {
  99. -webkit-transition-duration: 0.2s;
  100. -moz-transition-duration: 0.2s;
  101. transition-duration: 0.2s;
  102. border-width: 1px;
  103. padding: 0;
  104. }
  105. .claro .dijitToolbar .dijitComboButtonActive .dijitButtonNode, .claro .dijitToolbar .dijitComboButtonActive .dijitDownArrowButton {
  106. background-color: #f4ffff;
  107. background-position: 0 -177px;
  108. padding: 2px;
  109. }
  110. .claro .dijitToolbar .dijitComboButtonActive .dijitButtonNodeActive {
  111. background-color: #7dbefa;
  112. }
  113. .claro .dijitToolbar .dijitComboButtonActive .dijitDownArrowButtonActive {
  114. background-color: #7dbefa;
  115. }
  116. /* Avoid double border between button and arrow */
  117. .claro .dijitToolbar .dijitComboButtonHover .dijitDownArrowButton, .claro .dijitToolbar .dijitComboButtonActive .dijitDownArrowButton {
  118. border-left-width: 0;
  119. }
  120. .claro .dijitToolbar .dijitComboButtonHover .dijitDownArrowButton {
  121. padding-left: 2px;
  122. /* since there's no left border, don't reduce from 2px --> 1px */
  123. }
  124. /* toggle button checked status */
  125. .claro .dijitToolbar .dijitToggleButtonChecked .dijitButtonNode {
  126. margin: 0;
  127. /* remove margin and add a border */
  128. border-width: 1px;
  129. border-style: solid;
  130. background-image: none;
  131. border-color: #769dc0;
  132. background-color: #ffffff;
  133. padding: 1px;
  134. }
  135. .dj_ie6 .claro .dijitToolbar {
  136. background-image: none;
  137. }
  138. .claro .dijitToolbarSeparator {
  139. /* separator icon in the editor sprite */
  140. background: url('../../icons/images/editorIconsEnabled.png');
  141. }
  142. /* Toolbar inside of disabled Editor */
  143. .claro .dijitDisabled .dijitToolbar {
  144. background: none;
  145. background-color: #efefef;
  146. border-bottom: 1px solid #d3d3d3;
  147. }
  148. .claro .dijitToolbar .dijitComboBoxDisabled .dijitArrowButtonInner {
  149. background-position: 0 50%;
  150. }