Checkbox.css 1.5 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667
  1. /*
  2. * CheckBox and Radio Widgets,
  3. * and the CSS to embed a checkbox or radio icon inside a ToggleButton.
  4. *
  5. * Order of images in the default sprite (from L to R, checkbox and radio in same image):
  6. * checkbox normal - checked
  7. * - unchecked
  8. * disabled - checked
  9. * - unchecked
  10. * hover - checked
  11. * - unchecked
  12. *
  13. * radio normal - checked
  14. * - unchecked
  15. * disabled - checked
  16. * - unchecked
  17. * hover - checked
  18. * - unchecked
  19. */
  20. .nihilo .dijitToggleButton .dijitCheckBox,
  21. .nihilo .dijitToggleButton .dijitCheckBoxIcon {
  22. background-image: url('../images/spriteCheckbox.gif');
  23. }
  24. .nihilo .dijitCheckBox,
  25. .nihilo .dijitCheckBoxIcon { /* inside a toggle button */
  26. background-image: url('../images/spriteCheckbox.gif'); /* checkbox sprite image */
  27. background-repeat: no-repeat;
  28. width: 16px;
  29. height: 16px;
  30. margin: 0;
  31. padding: 0;
  32. }
  33. .nihilo .dijitCheckBox,
  34. .nihilo .dijitToggleButton .dijitCheckBoxIcon {
  35. /* unchecked */
  36. background-position: -16px;
  37. }
  38. .nihilo .dijitCheckBoxChecked,
  39. .nihilo .dijitToggleButtonChecked .dijitCheckBoxIcon {
  40. /* checked */
  41. background-position: 0;
  42. }
  43. .nihilo .dijitCheckBoxDisabled {
  44. /* disabled */
  45. background-position: -48px;
  46. }
  47. .nihilo .dijitCheckBoxCheckedDisabled {
  48. /* disabled but checked */
  49. background-position: -32px;
  50. }
  51. .nihilo .dijitCheckBoxHover {
  52. /* hovering over an unchecked enabled checkbox */
  53. background-position: -80px;
  54. }
  55. .nihilo .dijitCheckBoxCheckedHover {
  56. /* hovering over a checked enabled checkbox */
  57. background-position: -64px;
  58. }