.claro .dijitToolbar {
border-bottom: 1px solid @border-color;
background-color: @bar-background-color;
- background-image: url("images/commonHighlight.png");
+ background-image: url(@image-common-highlight);
background-position:0 0;
background-repeat:repeat-x;
padding: 2px 0 2px 4px;
padding: 0 3px 0 6px;
}
-/** override claro/form/Button.css **/
-.claro .dijitToolbar .dijitButtonNode {
+/** override claro/form/Button.css, and also ComboBox down arrow **/
+.claro .dijitToolbar .dijitButton .dijitButtonNode,
+.claro .dijitToolbar .dijitDropDownButton .dijitButtonNode,
+.claro .dijitToolbar .dijitComboButton .dijitButtonNode,
+.claro .dijitToolbar .dijitToggleButton .dijitButtonNode,
+.claro .dijitToolbar .dijitComboBox .dijitButtonNode {
border-width: 0; /* on hover/active, border-->1px, padding-->1px */
padding: 2px;
.border-radius(@toolbar-button-border-radius);
.transition-property(background-color);
.transition-duration(.3s, .35s);
- background-image: url("images/commonHighlight.png");
+ background-image: url(@image-common-highlight);
background-position:0 -30px;
background-repeat:repeat-x;
background-color:rgba(171,214,255,0);
}
-.dj_ie .claro .dijitToolbar .dijitButtonNode {
+.dj_ie .claro .dijitToolbar .dijitButton .dijitButtonNode,
+.dj_ie .claro .dijitToolbar .dijitDropDownButton .dijitButtonNode,
+.dj_ie .claro .dijitToolbar .dijitComboButton .dijitButtonNode,
+.dj_ie .claro .dijitToolbar .dijitToggleButton .dijitButtonNode,
+.dj_ie .claro .dijitToolbar .dijitComboBox .dijitButtonNode {
background-color: transparent; /* for IE, which doesn't understand rgba(...) */
}
-.dj_ie6 .claro .dijitToolbar .dijitButtonNode {
- background: none; /* because background-color: transparent above doesn't work */
+.dj_ie6 .claro .dijitToolbar .dijitButton .dijitButtonNode,
+.dj_ie6 .claro .dijitToolbar .dijitDropDownButton .dijitButtonNode,
+.dj_ie6 .claro .dijitToolbar .dijitComboButton .dijitButtonNode,
+.dj_ie6 .claro .dijitToolbar .dijitToggleButton .dijitButtonNode,
+.dj_ie6 .claro .dijitToolbar .dijitComboBox .dijitButtonNode {
+ background: none; /* because background-color: transparent above doesn't work on IE*/
+}
+/* hover status */
+.dj_ie .claro .dijitToolbar .dijitButtonHover .dijitButtonNode,
+.dj_ie .claro .dijitToolbar .dijitDropDownButtonHover .dijitButtonNode,
+.dj_ie .claro .dijitToolbar .dijitComboButton .dijitButtonNodeHover,
+.dj_ie .claro .dijitToolbar .dijitComboButton .dijitDownArrowButtonHover,
+.dj_ie .claro .dijitToolbar .dijitToggleButtonHover .dijitButtonNode {
+ /* button should still turn blue on hover, so need to override .dj_ie rules above */
+ background-color: @button-hovered-background-color;
+}
+
+/* active status */
+.dj_ie .claro .dijitToolbar .dijitButtonActive .dijitButtonNode,
+.dj_ie .claro .dijitToolbar .dijitDropDownButtonActive .dijitButtonNode,
+.dj_ie .claro .dijitToolbar .dijitComboButtonActive .dijitButtonNode,
+.dj_ie .claro .dijitToolbar .dijitToggleButtonActive .dijitButtonNode {
+ /* button should still turn blue on press, so need to override .dj_ie rules above */
+ background-color: @button-pressed-background-color;
}
.claro .dijitToolbar .dijitComboButton .dijitStretch {
.claro .dijitToolbarSeparator {
/* separator icon in the editor sprite */
- background: url('../../icons/images/editorIconsEnabled.png');
+ background: url(@image-editor-icons-enabled);
}
/* Toolbar inside of disabled Editor */