source: Dev/branches/rest-dojo-ui/client/rft/css/rftButtons.css @ 396

Last change on this file since 396 was 396, checked in by tjcschipper, 13 years ago
  • Modifiers property on LineWithActions? and selectors is gone! Yay! Colour handling now happens through a combination of up to four CSS classes.

    "red/blue/orange/green/purple/etc": These do not do anything in themselves, they just mark a certain element as being of that colour.
    "inheritBgColor": Any element that has this class assigned will adjust its color to the color class of their parents. A 'div.blue' has no colour itself, but a 'div.inheritBgColor' within that div will turn blue. It also adjusts text colour to white.
    "bg": Any element with this property will also take on any colour class assigned to itself. This overrides 'inheritBgColor' if the element has both classes, so you could still make an orange button in a 'blue' container if you wanted. If the element itself does not have a colour class, it will stay transparent. This also adjusts text colour to white.
    "light": This class modifies the inherited/set colour to its lighter version (see RFT Design Sheet). For example, it can be used when placing a blue BlockButton? on an already blue LineWithActions?: adding the light class will differentiate the button from the background.

For examples of how to implement/derive more specific style rules using these classes, see rftButtons.css.

  • Changed all widgets still using the 'modifiers' to assign proper colour classes where necessary. (For instance, changed Selector.js to always set its main buttons to "light".)
File size: 11.6 KB
Line 
1/*LargeButton*/
2.claro .rftLargeButton,
3.claro .rftLargeButton * {
4    user-select: none;
5    -webkit-user-select: none;
6}
7.claro .rftLargeButton {
8    margin-right: 16px;
9    height: 30px;
10}
11.claro .rftLargeButton .dijitButtonNode {
12    border: none;
13    height: 24px;
14    background-image: none;
15    background: transparent;
16    color: #999999;
17    font-size: 20px;
18    box-shadow: none;
19    transition: color 0.3s;
20    -moz-transition: color 0.3s;
21    -webkit-transition: color 0.3s;
22    -o-transition: color 0.3s;
23}
24.claro .rftLargeButton .rftIcon {
25    width: 24px;
26    height: 24px;
27    background-image: url('images/icons/rftIcons24.png');
28}
29.claro .rftLargeButton.black .rftIcon {
30    background-image: url('images/icons/rftIcons24b.png');
31}
32.claro .rftLargeButton .dijitButtonText {
33    line-height: 24px;
34    margin-left: 6px;
35    padding: 0;
36}
37.claro .rftLargeButton.rftLargeButtonHover .dijitButtonNode {
38    transition: color 0.1s;
39    -moz-transition: color 0.1s;
40    -webkit-transition: color 0.1s;
41    -o-transition: color 0.1s;
42    color: #ffffff;
43}
44.claro .rftLargeButton.rftLargeButtonActive .dijitButtonNode {
45    transition: color 0.1s;
46    -moz-transition: color 0.1s;
47    -webkit-transition: color 0.1s;
48    -o-transition: color 0.1s;
49}
50.claro span.blue.rftLargeButton.rftLargeButtonActive .dijitButtonNode,
51.claro .blue .rftLargeButton.rftLargeButtonActive .dijitButtonNode {
52    color: #0794d1;
53}
54.claro span.orange.rftLargeButton.rftLargeButtonActive .dijitButtonNode,
55.claro .orange .rftLargeButton.rftLargeButtonActive .dijitButtonNode {
56    color: #ff9140;
57}
58.claro span.green.rftLargeButton.rftLargeButtonActive .dijitButtonNode,
59.claro .green .rftLargeButton.rftLargeButtonActive .dijitButtonNode {
60    color: #79ca0a;
61}
62.claro span.red.rftLargeButton.rftLargeButtonActive .dijitButtonNode,
63.claro .red .rftLargeButton.rftLargeButtonActive .dijitButtonNode {
64    color: #bd0013;
65}
66.claro span.purple.rftLargeButton.rftLargeButtonActive .dijitButtonNode,
67.claro .purple .rftLargeButton.rftLargeButtonActive .dijitButtonNode {
68    color: #993dec;
69}
70
71/****************************************************
72/*  BlockButton
73/***************************************************/
74
75.claro .rftBlockButton {
76    height: 24px;
77    margin: 0;
78    line-height: 20px;
79}
80.claro .rftBlockButton .dijitButtonNode {
81    height: 24px;
82    padding: 0 4px;
83    border: none;
84    background-image: none;
85    color: #ffffff;
86    font-size: 13px;
87    border-radius: 0;
88    -moz-border-radius: 0;
89    transition: background-color 0.3s;
90    -moz-transition: background-color 0.3s;
91    -webkit-transition: background-color 0.3s;
92    -o-transition: background-color 0.3s;
93}
94.claro .rftBlockButton .rftIcon {
95    height: 16px !important;
96    width: 16px !important;
97    background-image: url('images/icons/rftIcons16.png') !important;
98}
99.claro .rftBlockButton .rftIcon.black {
100    background-image: url('images/icons/rftIcons16b.png') !important;
101}
102.claro .rftBlockButton.rftBlockButtonHover .rftIcon {
103    background-image: url('images/icons/rftIcons16b.png') !important;
104}
105.claro .rftBlockButton.rftBlockButtonActive .rftIcon {
106    background-image: url('images/icons/rftIcons16b.png') !important;
107}
108.claro .rftBlockButton.rftBlockButtonHover .dijitButtonNode {
109    /*background: #999999 !important;*/
110    /* Currently not used, only applicable when all the different colours of BlockButton need the same background colour on hover */
111    transition: background-color 0.1s;
112    -moz-transition: background-color 0.1s;
113    -webkit-transition: background-color 0.1s;
114    -o-transition: background-color 0.1s;
115}
116
117/* Hover effects */
118/*Normal*/
119.claro span.blue.bg.rftBlockButtonHover,
120.claro .blue .inheritBgColor.rftBlockButtonHover {
121    background-color: #0794d1;
122}
123.claro span.orange.bg.rftBlockButtonHover,
124.claro .orange .inheritBgColor.rftBlockButtonHover {
125    background-color: #ff9140;
126}
127.claro span.green.bg.rftBlockButtonHover,
128.claro .green .inheritBgColor.rftBlockButtonHover {
129    background-color: #79ca0a;
130}
131.claro span.red.bg.rftBlockButtonHover,
132.claro .red .inheritBgColor.rftBlockButtonHover {
133    background-color: #bd0013;
134}
135.claro span.purple.bg.rftBlockButtonHover,
136.claro .purple .inheritBgColor.rftBlockButtonHover {
137    background-color: #993dec;
138}
139/*Light*/
140.claro span.blue.light.bg.rftBlockButtonHover .dijitButtonNode,
141.claro .blue .light.inheritBgColor.rftBlockButtonHover .dijitButtonNode {
142    color: #0072bc;
143}
144.claro span.orange.light.bg.rftBlockButtonHover .dijitButtonNode,
145.claro .orange .light.inheritBgColor.rftBlockButtonHover .dijitButtonNode {
146    color: #ff5b12;
147}
148.claro span.green.light.bg.rftBlockButtonHover .dijitButtonNode,
149.claro .green .light.inheritBgColor.rftBlockButtonHover .dijitButtonNode {
150    color: #3aa605;
151}
152.claro span.red.light.bg.rftBlockButtonHover .dijitButtonNode,
153.claro .red .light.inheritBgColor.rftBlockButtonHover .dijitButtonNode {
154    color: #8c0310;
155}
156.claro span.purple.light.bg.rftBlockButtonHover .dijitButtonNode,
157.claro .purple .light.inheritBgColor.rftBlockButtonHover .dijitButtonNode {
158    color: #6529b7;
159}
160/* Set all .light .bg/.inheritBgColors hover to White background! */
161.claro span.light.bg.rftBlockButtonHover,
162.claro .light.inheritBgColor.rftBlockButtonHover {
163    background-color: #ffffff;
164}
165
166/* Active effects */
167/*Normal*/
168.claro span.blue.bg.rftBlockButtonActive .dijitButtonNode,
169.claro .blue .inheritBgColor.rftBlockButtonActive .dijitButtonNode {
170    color: #0072bc;
171}
172.claro span.orange.bg.rftBlockButtonActive .dijitButtonNode,
173.claro .orange .inheritBgColor.rftBlockButtonActive .dijitButtonNode {
174    color: #ff5b12;
175}
176.claro span.green.bg.rftBlockButtonActive .dijitButtonNode,
177.claro .green .inheritBgColor.rftBlockButtonActive .dijitButtonNode {
178    color: #3aa605;
179}
180.claro span.red.bg.rftBlockButtonActive .dijitButtonNode,
181.claro .red .inheritBgColor.rftBlockButtonActive .dijitButtonNode {
182    color: #8c0310;
183}
184.claro span.purple.bg.rftBlockButtonActive .dijitButtonNode,
185.claro .purple .inheritBgColor.rftBlockButtonActive .dijitButtonNode {
186    color: #6529b7;
187}
188/* Set bg color to white for all normal .bg/.inheritBgColors on active! */
189.claro span.bg.rftBlockButtonActive,
190.claro .inheritBgColor.rftBlockButtonActive {
191    background-color: #ffffff;
192}
193/*Light*/
194.claro span.blue.light.bg.rftBlockButtonActive,
195.claro .blue .light.inheritBgColor.rftBlockButtonActive {
196    background-color: #0072bc;
197}
198.claro span.orange.light.bg.rftBlockButtonActive,
199.claro .orange .light.inheritBgColor.rftBlockButtonActive {
200    background-color: #ff5b12;
201}
202.claro span.green.light.bg.rftBlockButtonActive,
203.claro .green .light.inheritBgColor.rftBlockButtonActive {
204    background-color: #3aa605;
205}
206.claro span.red.light.bg.rftBlockButtonActive,
207.claro .red .light.inheritBgColor.rftBlockButtonActive {
208    background-color: #8c0310;
209}
210.claro span.purple.light.bg.rftBlockButtonActive,
211.claro .purple .light.inheritBgColor.rftBlockButtonActive {
212    background-color: #6529b7;
213}
214/* Set text color to white for all .light.bg/.light.inheritBgColor on active! */
215.claro span.light.bg.rftBlockButtonActive .dijitButtonNode,
216.claro .light.inheritBgColor.rftBlockButtonActive .dijitButtonNode {
217    color: #ffffff;
218}
219
220/****************************************************
221/*  InlineButton
222/***************************************************/
223.claro .rftInlineButton {
224    float: right;
225    height: 24px;
226    width: 24px;
227}
228.claro .rftInlineButton .dijitButtonNode {
229    width: 24px;
230    height: 24px;
231    margin: 0;
232    padding: 0;
233    background: transparent;
234    border: none;
235}
236.claro .rftInlineButton .rftIcon {
237    width: 16px;
238    height: 16px;
239    background-image: url('images/icons/rftIcons16.png');
240}
241.claro .rftInlineButton.white .rftIcon {
242    background-image: url('images/icons/rftIcons16.png');
243}
244.claro .rftInlineButton.black .rftIcon {
245    background-image: url('images/icons/rftIcons16b.png');
246}
247.claro .rftInlineButton .rftIcon.black {
248    background-image: url('images/icons/rftIcons16b.png');
249}
250.claro .rftInlineButton .rftIcon.white {
251    background-image: url('images/icons/rftIcons16.png');
252}
253.claro .rftInlineButton.rftInlineButtonHover .rftIcon {
254    /* We should use either the displacement or the background image change, not both! */
255    /*background-image: url('../../icons/images/rftIcons16c.png');*/
256    margin-top: 1px;
257}
258.claro .rftInlineButton.rftInlineButtonActive .rftIcon {
259    /* This "afterclick" is optional. Check to see if people like it or not! */
260    /* Good, the displacement on click does not come from these settings! */
261}
262
263/* MainMenuButton */
264.claro .dijitMenuBar .rftMainMenuButton {
265    border: none;
266    height: 30px;
267    width: auto;
268    background-image: none;
269    background: transparent;
270    text-align: center;
271    color: #999999;
272    font-size: 24px;
273    line-height: 30px;
274    padding: 0 4px;
275    margin: 0 5px;
276    box-shadow: none;
277    transition: all 0.3s;
278    -moz-transition: all 0.3s;
279    -webkit-transition: all 0.3s;
280    -o-transition: all 0.3s;
281}
282.claro .dijitMenuBar .rftMainMenuButton.dijitMenuItemHover {
283    color: #ffffff;
284    font-size: 26px;
285    transition: all 0.1s;
286    -moz-transition: all 0.1s;
287    -webkit-transition: all 0.1s;
288    -o-transition: all 0.1s;
289}
290.claro .dijitMenuBar .rftMainMenuButton.dijitMenuItemActive {
291    color: #0794d1 !important;
292    font-size: 26px;
293    transition: all 0.1s;
294    -moz-transition: all 0.1s;
295    -webkit-transition: all 0.1s;
296    -o-transition: all 0.1s;
297}
298.claro .dijitMenuBar .rftMainMenuButton.dijitMenuItemSelected {
299    color: #ffffff;
300    font-size: 26px;
301}
302
303/* IndexMenuButton */
304.claro .rftIndexMenuButton {
305    display: block;
306    margin: 0;
307    padding: 0;
308    line-height: 32px;
309    vertical-align: middle;
310    text-align: left;
311    transition: all 0.3s;
312    -moz-transition: all 0.3s;
313    -webkit-transition: all 0.3s;
314    -o-transition: all 0.3s;
315}
316.claro .rftIndexMenuButton .dijitButtonNode {
317    border: none;
318    color: #999999;
319    font-size: 24px;
320    font-weight: normal;
321}
322.claro .rftIndexMenuButton .dijitButtonText {
323    padding-bottom: 10px;
324    line-height: 20px;
325    transition: all 0.3s;
326    -moz-transition: all 0.3s;
327    -webkit-transition: all 0.3s;
328    -o-transition: all 0.3s;
329}
330.claro .rftIndexMenuButton .dijitButtonContents {
331    vertical-align: top;
332}
333.claro .rftIndexMenuButton .rftIcon {
334    height: 32px;
335    width: 32px;
336    margin: 0 8px;
337    padding: 0;
338    background-image: url('images/icons/rftIcons32.png');
339    vertical-align: top;
340}
341.claro .oneHeight {
342    height: 100px;
343}
344.claro .oneHeight .dijitButtonNode {
345    margin: 34px 0 0 0;
346}
347.claro .twoHeight {
348    height: 200px;
349}
350.claro .twoHeight .dijitButtonNode {
351    margin: 82px 0 0 0;
352}
353.claro .fourHeight {
354    height: 400px;
355}
356.claro .fourHeight .dijitButtonNode {
357    margin: 184px 0 0 0;
358}
359.claro .rftIndexMenuButton.rftIndexMenuButtonHover,
360.claro .rftIndexMenuButton.rftIndexMenuButtonHover .dijitButtonText {
361    color: #ffffff;
362    transition: all 0.1s;
363    -moz-transition: all 0.1s;
364    -webkit-transition: all 0.1s;
365    -o-transition: all 0.1s;
366}
367.claro .rftIndexMenuButton.rftIndexMenuButtonHover.blue {
368    background: #0072bc;
369}
370.claro .rftIndexMenuButton.rftIndexMenuButtonHover.green {
371    background: #3aa605;
372}
373.claro .rftIndexMenuButton.rftIndexMenuButtonHover.red {
374    background: #8c0310;
375}
376.claro .rftIndexMenuButton.rftIndexMenuButtonHover.purple {
377    background: #6529b7;
378}
379.claro .rftIndexMenuButton.rftIndexMenuButtonHover.orange {
380    background: #ff5b12;
381}
382.claro .rftIndexMenuButton.rftIndexMenuButtonActive {
383    color: #000000;
384    background: #ffffff;
385    transition: all 0.3s;
386    -moz-transition: all 0.3s;
387    -webkit-transition: all 0.3s;
388    -o-transition: all 0.3s;
389}
390.claro .rftIndexMenuButton.rftIndexMenuButtonActive .rftIcon {
391    background-image: url('images/icons/rftIcons32b.png');
392}
393
Note: See TracBrowser for help on using the repository browser.