Checkbox.css 1.9 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071
  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. .claro .dijitToggleButton .dijitCheckBoxIcon {
  22. background-image: url('../images/checkmarkNoBorder.png');
  23. }
  24. .dj_ie6 .claro .dijitToggleButton .dijitCheckBoxIcon {
  25. background-image: url('../images/checkmarkNoBorder.gif');
  26. }
  27. .claro .dijitCheckBox, .claro .dijitCheckBoxIcon {
  28. background-image: url('images/checkboxRadioButtonStates.png');
  29. /* checkbox sprite image */
  30. background-repeat: no-repeat;
  31. width: 15px;
  32. height: 16px;
  33. margin: 0 2px 0 0;
  34. padding: 0;
  35. }
  36. .dj_ie6 .claro .dijitCheckBox, .dj_ie6 .claro .dijitCheckBoxIcon {
  37. background-image: url('images/checkboxAndRadioButtons_IE6.png');
  38. /* checkbox sprite image */
  39. }
  40. .claro .dijitCheckBox, .claro .dijitToggleButton .dijitCheckBoxIcon {
  41. /* unchecked */
  42. background-position: -15px;
  43. }
  44. .claro .dijitCheckBoxChecked, .claro .dijitToggleButtonChecked .dijitCheckBoxIcon {
  45. /* checked */
  46. background-position: 0;
  47. }
  48. .claro .dijitCheckBoxDisabled {
  49. /* disabled */
  50. background-position: -75px;
  51. }
  52. .claro .dijitCheckBoxCheckedDisabled {
  53. /* disabled but checked */
  54. background-position: -60px;
  55. }
  56. .claro .dijitCheckBoxHover {
  57. /* hovering over an unchecked enabled checkbox */
  58. background-position: -45px;
  59. }
  60. .claro .dijitCheckBoxCheckedHover {
  61. /* hovering over an checked enabled checkbox */
  62. background-position: -30px;
  63. }