]>
Commit | Line | Data |
---|---|---|
81bea17a AD |
1 | /* CheckBox |
2 | * | |
3 | * Styling CheckBox mainly includes: | |
4 | * | |
5 | * 1. Containers | |
6 | * .dijitCheckBox|.dijitCheckBoxIcon - for border, padding, width|height and background image | |
7 | * | |
8 | * 2. CheckBox within ToggleButton | |
9 | * .dijitToggleButton|.dijitToggleButtonChecked .* - for background image | |
10 | * | |
11 | * 3. Checked state | |
12 | * .dijitCheckBoxChecked - for checked background-color|image | |
13 | * .dijitToggleButtonChecked - for border, background-color|image, display and width|height | |
14 | * | |
15 | * 4. Hover state | |
16 | * .dijitCheckBoxHover|.dijitCheckBoxCheckedHover - for background image | |
17 | * | |
18 | * 5. Disabled state | |
19 | * .dijitCheckBoxDisabled|.dijitCheckBoxCheckedDisabled - for background image | |
20 | */ | |
21 | ||
22 | @import "../variables"; | |
23 | ||
24 | .claro .dijitToggleButton .dijitCheckBoxIcon { | |
1354d172 | 25 | background-image: url("../@{image-checkmark}"); |
81bea17a AD |
26 | } |
27 | ||
28 | .dj_ie6 .claro .dijitToggleButton .dijitCheckBoxIcon { | |
1354d172 | 29 | background-image: url("../@{image-checkmark-ie6}"); |
81bea17a AD |
30 | } |
31 | ||
32 | .claro .dijitCheckBox, | |
33 | .claro .dijitCheckBoxIcon /* inside a toggle button */ { | |
1354d172 | 34 | background-image: url("../@{image-form-checkbox-and-radios}"); /* checkbox sprite image */ |
81bea17a AD |
35 | background-repeat: no-repeat; |
36 | width: 15px; | |
37 | height: 16px; | |
38 | margin: 0 2px 0 0; | |
39 | padding: 0; | |
40 | } | |
41 | ||
42 | .dj_ie6 .claro .dijitCheckBox, | |
43 | .dj_ie6 .claro .dijitCheckBoxIcon /* inside a toggle button */ { | |
1354d172 | 44 | background-image: url("../@{image-form-checkbox-and-radios-ie6}"); /* checkbox sprite image */ |
81bea17a AD |
45 | } |
46 | ||
47 | .claro .dijitCheckBox, | |
48 | .claro .dijitToggleButton .dijitCheckBoxIcon { | |
49 | /* unchecked */ | |
50 | background-position: -15px; | |
51 | } | |
52 | ||
53 | .claro .dijitCheckBoxChecked, | |
54 | .claro .dijitToggleButtonChecked .dijitCheckBoxIcon { | |
55 | /* checked */ | |
56 | background-position: -0; | |
57 | } | |
58 | ||
59 | .claro .dijitCheckBoxDisabled { | |
60 | /* disabled */ | |
61 | background-position: -75px; | |
62 | } | |
63 | ||
64 | .claro .dijitCheckBoxCheckedDisabled { | |
65 | /* disabled but checked */ | |
66 | background-position: -60px; | |
67 | } | |
68 | ||
69 | .claro .dijitCheckBoxHover { | |
70 | /* hovering over an unchecked enabled checkbox */ | |
71 | background-position: -45px; | |
72 | } | |
73 | ||
74 | .claro .dijitCheckBoxCheckedHover { | |
75 | /* hovering over an checked enabled checkbox */ | |
76 | background-position: -30px; | |
77 | } | |
78 | ||
79 |