]>
Commit | Line | Data |
---|---|---|
81bea17a AD |
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 | ||
21 | @import "variables"; | |
22 | ||
23 | .claro .dijitToolbar { | |
24 | border-bottom: 1px solid @border-color; | |
25 | background-color: @bar-background-color; | |
1354d172 | 26 | background-image: url(@image-common-highlight); |
81bea17a AD |
27 | background-position:0 0; |
28 | background-repeat:repeat-x; | |
29 | padding: 2px 0 2px 4px; | |
30 | zoom: 1; | |
31 | } | |
32 | ||
33 | .claro .dijitToolbar label { | |
34 | padding: 0 3px 0 6px; | |
35 | } | |
36 | ||
1354d172 AD |
37 | /** override claro/form/Button.css, and also ComboBox down arrow **/ |
38 | .claro .dijitToolbar .dijitButton .dijitButtonNode, | |
39 | .claro .dijitToolbar .dijitDropDownButton .dijitButtonNode, | |
40 | .claro .dijitToolbar .dijitComboButton .dijitButtonNode, | |
41 | .claro .dijitToolbar .dijitToggleButton .dijitButtonNode, | |
42 | .claro .dijitToolbar .dijitComboBox .dijitButtonNode { | |
81bea17a AD |
43 | border-width: 0; /* on hover/active, border-->1px, padding-->1px */ |
44 | padding: 2px; | |
45 | .border-radius(@toolbar-button-border-radius); | |
46 | .box-shadow(none); | |
47 | .transition-property(background-color); | |
48 | .transition-duration(.3s, .35s); | |
49 | ||
1354d172 | 50 | background-image: url(@image-common-highlight); |
81bea17a AD |
51 | background-position:0 -30px; |
52 | background-repeat:repeat-x; | |
53 | background-color:rgba(171,214,255,0); | |
54 | } | |
1354d172 AD |
55 | .dj_ie .claro .dijitToolbar .dijitButton .dijitButtonNode, |
56 | .dj_ie .claro .dijitToolbar .dijitDropDownButton .dijitButtonNode, | |
57 | .dj_ie .claro .dijitToolbar .dijitComboButton .dijitButtonNode, | |
58 | .dj_ie .claro .dijitToolbar .dijitToggleButton .dijitButtonNode, | |
59 | .dj_ie .claro .dijitToolbar .dijitComboBox .dijitButtonNode { | |
81bea17a AD |
60 | background-color: transparent; /* for IE, which doesn't understand rgba(...) */ |
61 | } | |
1354d172 AD |
62 | .dj_ie6 .claro .dijitToolbar .dijitButton .dijitButtonNode, |
63 | .dj_ie6 .claro .dijitToolbar .dijitDropDownButton .dijitButtonNode, | |
64 | .dj_ie6 .claro .dijitToolbar .dijitComboButton .dijitButtonNode, | |
65 | .dj_ie6 .claro .dijitToolbar .dijitToggleButton .dijitButtonNode, | |
66 | .dj_ie6 .claro .dijitToolbar .dijitComboBox .dijitButtonNode { | |
67 | background: none; /* because background-color: transparent above doesn't work on IE*/ | |
68 | } | |
69 | /* hover status */ | |
70 | .dj_ie .claro .dijitToolbar .dijitButtonHover .dijitButtonNode, | |
71 | .dj_ie .claro .dijitToolbar .dijitDropDownButtonHover .dijitButtonNode, | |
72 | .dj_ie .claro .dijitToolbar .dijitComboButton .dijitButtonNodeHover, | |
73 | .dj_ie .claro .dijitToolbar .dijitComboButton .dijitDownArrowButtonHover, | |
74 | .dj_ie .claro .dijitToolbar .dijitToggleButtonHover .dijitButtonNode { | |
75 | /* button should still turn blue on hover, so need to override .dj_ie rules above */ | |
76 | background-color: @button-hovered-background-color; | |
77 | } | |
78 | ||
79 | /* active status */ | |
80 | .dj_ie .claro .dijitToolbar .dijitButtonActive .dijitButtonNode, | |
81 | .dj_ie .claro .dijitToolbar .dijitDropDownButtonActive .dijitButtonNode, | |
82 | .dj_ie .claro .dijitToolbar .dijitComboButtonActive .dijitButtonNode, | |
83 | .dj_ie .claro .dijitToolbar .dijitToggleButtonActive .dijitButtonNode { | |
84 | /* button should still turn blue on press, so need to override .dj_ie rules above */ | |
85 | background-color: @button-pressed-background-color; | |
81bea17a AD |
86 | } |
87 | ||
88 | .claro .dijitToolbar .dijitComboButton .dijitStretch { | |
89 | /* no rounded border on side adjacent to arrow */ | |
90 | .border-radius(@toolbar-button-border-radius 0 0 @toolbar-button-border-radius); | |
91 | } | |
92 | .claro .dijitToolbar .dijitComboButton .dijitArrowButton { | |
93 | /* no rounded border on side adjacent to button */ | |
94 | .border-radius(0 @toolbar-button-border-radius @toolbar-button-border-radius 0); | |
95 | } | |
96 | ||
97 | .claro .dijitToolbar .dijitComboBox .dijitButtonNode { | |
98 | padding: 0; | |
99 | } | |
100 | ||
101 | /* hover status */ | |
102 | .claro .dijitToolbar .dijitButtonHover .dijitButtonNode, | |
103 | .claro .dijitToolbar .dijitDropDownButtonHover .dijitButtonNode, | |
104 | .claro .dijitToolbar .dijitToggleButtonHover .dijitButtonNode, | |
105 | .claro .dijitToolbar .dijitComboButtonHover .dijitButtonNode { | |
106 | background-position:0 0; | |
107 | border-width:1px; | |
108 | background-color: @hovered-background-color; | |
109 | padding: 1px; | |
110 | } | |
111 | .claro .dijitToolbar .dijitComboButtonHover .dijitButtonNode, | |
112 | .claro .dijitToolbar .dijitComboButtonHover .dijitDownArrowButton { | |
113 | background-position:0 0; | |
114 | background-color: @toolbar-combobutton-hovered-unhoveredsection-background-color; | |
115 | } | |
116 | .claro .dijitToolbar .dijitComboButtonHover .dijitButtonNodeHover, | |
117 | .claro .dijitToolbar .dijitComboButtonHover .dijitDownArrowButtonHover { | |
118 | background-color: @hovered-background-color; | |
119 | } | |
120 | ||
121 | /* active status */ | |
122 | .claro .dijitToolbar .dijitButtonActive .dijitButtonNode, | |
123 | .claro .dijitToolbar .dijitDropDownButtonActive .dijitButtonNode, | |
124 | .claro .dijitToolbar .dijitToggleButtonActive .dijitButtonNode { | |
125 | border-width: 1px; | |
126 | background-color:@pressed-background-color; | |
127 | background-position:0 -177px; | |
128 | padding: 1px; | |
129 | } | |
130 | .claro .dijitToolbar .dijitComboButtonActive { | |
131 | .transition-duration(.2s); | |
132 | border-width: 1px; | |
133 | padding: 0; | |
134 | } | |
135 | .claro .dijitToolbar .dijitComboButtonActive .dijitButtonNode, | |
136 | .claro .dijitToolbar .dijitComboButtonActive .dijitDownArrowButton { | |
137 | background-color: @toolbar-combobutton-hovered-unhoveredsection-background-color; | |
138 | background-position:0 -177px; | |
139 | padding: 2px; | |
140 | } | |
141 | .claro .dijitToolbar .dijitComboButtonActive .dijitButtonNodeActive { | |
142 | background-color: @pressed-background-color; | |
143 | } | |
144 | .claro .dijitToolbar .dijitComboButtonActive .dijitDownArrowButtonActive { | |
145 | background-color: @pressed-background-color; | |
146 | } | |
147 | ||
148 | /* Avoid double border between button and arrow */ | |
149 | .claro .dijitToolbar .dijitComboButtonHover .dijitDownArrowButton, | |
150 | .claro .dijitToolbar .dijitComboButtonActive .dijitDownArrowButton { | |
151 | border-left-width: 0; | |
152 | } | |
153 | .claro .dijitToolbar .dijitComboButtonHover .dijitDownArrowButton { | |
154 | padding-left: 2px; /* since there's no left border, don't reduce from 2px --> 1px */ | |
155 | } | |
156 | ||
157 | /* toggle button checked status */ | |
158 | .claro .dijitToolbar .dijitToggleButtonChecked .dijitButtonNode { | |
159 | margin: 0; /* remove margin and add a border */ | |
160 | border-width: 1px; | |
161 | border-style: solid; | |
162 | background-image: none; | |
163 | border-color: @selected-border-color; | |
164 | background-color: @toolbar-button-checked-background-color; | |
165 | padding: 1px; | |
166 | } | |
167 | ||
168 | .dj_ie6 .claro .dijitToolbar { | |
169 | background-image: none; | |
170 | } | |
171 | ||
172 | .claro .dijitToolbarSeparator { | |
173 | /* separator icon in the editor sprite */ | |
1354d172 | 174 | background: url(@image-editor-icons-enabled); |
81bea17a AD |
175 | } |
176 | ||
177 | /* Toolbar inside of disabled Editor */ | |
178 | .claro .dijitDisabled .dijitToolbar { | |
179 | background:none; | |
180 | background-color:@disabled-background-color; | |
181 | border-bottom: 1px solid @disabled-border-color; | |
182 | } | |
183 | ||
184 | .claro .dijitToolbar .dijitComboBoxDisabled .dijitArrowButtonInner { | |
185 | background-position:0 50%; | |
186 | } | |
187 |