diff options
Diffstat (limited to 'lib/dijit/themes/claro/form/Checkbox.css')
-rw-r--r-- | lib/dijit/themes/claro/form/Checkbox.css | 91 |
1 files changed, 58 insertions, 33 deletions
diff --git a/lib/dijit/themes/claro/form/Checkbox.css b/lib/dijit/themes/claro/form/Checkbox.css index be3604ddd..5765bb370 100644 --- a/lib/dijit/themes/claro/form/Checkbox.css +++ b/lib/dijit/themes/claro/form/Checkbox.css @@ -1,46 +1,71 @@ - +/* CheckBox + * + * Styling CheckBox mainly includes: + * + * 1. Containers + * .dijitCheckBox|.dijitCheckBoxIcon - for border, padding, width|height and background image + * + * 2. CheckBox within ToggleButton + * .dijitToggleButton|.dijitToggleButtonChecked .* - for background image + * + * 3. Checked state + * .dijitCheckBoxChecked - for checked background-color|image + * .dijitToggleButtonChecked - for border, background-color|image, display and width|height + * + * 4. Hover state + * .dijitCheckBoxHover|.dijitCheckBoxCheckedHover - for background image + * + * 5. Disabled state + * .dijitCheckBoxDisabled|.dijitCheckBoxCheckedDisabled - for background image + */ .claro .dijitToggleButton .dijitCheckBoxIcon { - background-image: url('../images/checkmarkNoBorder.png'); + background-image: url('../images/checkmarkNoBorder.png'); } .dj_ie6 .claro .dijitToggleButton .dijitCheckBoxIcon { - background-image: url('../images/checkmarkNoBorder.gif'); -} -.claro .dijitCheckBox, -.claro .dijitCheckBoxIcon { - background-image: url('images/checkboxRadioButtonStates.png'); - background-repeat: no-repeat; - width: 15px; - height: 16px; - margin: 0 2px 0 0; - padding: 0; -} -.dj_ie6 .claro .dijitCheckBox, -.dj_ie6 .claro .dijitCheckBoxIcon { - background-image: url('images/checkboxAndRadioButtons_IE6.png'); -} -.claro .dijitCheckBox, -.claro .dijitToggleButton .dijitCheckBoxIcon { - - background-position: -15px; + background-image: url('../images/checkmarkNoBorder.gif'); +} +.claro .dijitCheckBox, .claro .dijitCheckBoxIcon { + background-image: url('images/checkboxRadioButtonStates.png'); + /* checkbox sprite image */ + + background-repeat: no-repeat; + width: 15px; + height: 16px; + margin: 0 2px 0 0; + padding: 0; } -.claro .dijitCheckBoxChecked, -.claro .dijitToggleButtonChecked .dijitCheckBoxIcon { - - background-position: -0px; +.dj_ie6 .claro .dijitCheckBox, .dj_ie6 .claro .dijitCheckBoxIcon { + background-image: url('images/checkboxAndRadioButtons_IE6.png'); + /* checkbox sprite image */ + +} +.claro .dijitCheckBox, .claro .dijitToggleButton .dijitCheckBoxIcon { + /* unchecked */ + + background-position: -15px; +} +.claro .dijitCheckBoxChecked, .claro .dijitToggleButtonChecked .dijitCheckBoxIcon { + /* checked */ + + background-position: 0; } .claro .dijitCheckBoxDisabled { - - background-position: -75px; + /* disabled */ + + background-position: -75px; } .claro .dijitCheckBoxCheckedDisabled { - - background-position: -60px; + /* disabled but checked */ + + background-position: -60px; } .claro .dijitCheckBoxHover { - - background-position: -45px; + /* hovering over an unchecked enabled checkbox */ + + background-position: -45px; } .claro .dijitCheckBoxCheckedHover { - - background-position: -30px; + /* hovering over an checked enabled checkbox */ + + background-position: -30px; } |