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