Checkbox.less 2.0 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879
  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. @import "../variables";
  22. .claro .dijitToggleButton .dijitCheckBoxIcon {
  23. background-image: url("../@{image-checkmark}");
  24. }
  25. .dj_ie6 .claro .dijitToggleButton .dijitCheckBoxIcon {
  26. background-image: url("../@{image-checkmark-ie6}");
  27. }
  28. .claro .dijitCheckBox,
  29. .claro .dijitCheckBoxIcon /* inside a toggle button */ {
  30. background-image: url("../@{image-form-checkbox-and-radios}"); /* checkbox sprite image */
  31. background-repeat: no-repeat;
  32. width: 15px;
  33. height: 16px;
  34. margin: 0 2px 0 0;
  35. padding: 0;
  36. }
  37. .dj_ie6 .claro .dijitCheckBox,
  38. .dj_ie6 .claro .dijitCheckBoxIcon /* inside a toggle button */ {
  39. background-image: url("../@{image-form-checkbox-and-radios-ie6}"); /* checkbox sprite image */
  40. }
  41. .claro .dijitCheckBox,
  42. .claro .dijitToggleButton .dijitCheckBoxIcon {
  43. /* unchecked */
  44. background-position: -15px;
  45. }
  46. .claro .dijitCheckBoxChecked,
  47. .claro .dijitToggleButtonChecked .dijitCheckBoxIcon {
  48. /* checked */
  49. background-position: -0;
  50. }
  51. .claro .dijitCheckBoxDisabled {
  52. /* disabled */
  53. background-position: -75px;
  54. }
  55. .claro .dijitCheckBoxCheckedDisabled {
  56. /* disabled but checked */
  57. background-position: -60px;
  58. }
  59. .claro .dijitCheckBoxHover {
  60. /* hovering over an unchecked enabled checkbox */
  61. background-position: -45px;
  62. }
  63. .claro .dijitCheckBoxCheckedHover {
  64. /* hovering over an checked enabled checkbox */
  65. background-position: -30px;
  66. }