RadioButton.css 2.1 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879
  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. .claro .dijitToggleButton .dijitRadio, .claro .dijitToggleButton .dijitRadioIcon {
  22. background-image: url('images/checkboxRadioButtonStates.png');
  23. }
  24. .dj_ie6 .claro .dijitToggleButton .dijitRadio, .dj_ie6 .claro .dijitToggleButton .dijitRadioIcon {
  25. background-image: url('images/checkboxAndRadioButtons_IE6.png');
  26. }
  27. .claro .dijitRadio, .claro .dijitRadioIcon {
  28. /* inside a toggle button */
  29. background-image: url('images/checkboxRadioButtonStates.png');
  30. /* checkbox sprite image */
  31. background-repeat: no-repeat;
  32. width: 15px;
  33. height: 15px;
  34. margin: 0 2px 0 0;
  35. padding: 0;
  36. }
  37. .dj_ie6 .claro .dijitRadio, .dj_ie6 .claro .dijitRadioIcon {
  38. /* inside a toggle button */
  39. background-image: url('images/checkboxAndRadioButtons_IE6.png');
  40. /* checkbox sprite image */
  41. }
  42. .claro .dijitRadio {
  43. /* unselected */
  44. background-position: -105px;
  45. }
  46. .claro .dijitToggleButton .dijitRadioIcon {
  47. /* unselected */
  48. background-position: -107px;
  49. }
  50. .claro .dijitRadioDisabled {
  51. /* unselected and disabled */
  52. background-position: -165px;
  53. }
  54. .claro .dijitRadioHover {
  55. /* hovering over an unselected enabled radio button */
  56. background-position: -135px;
  57. }
  58. .claro .dijitRadioChecked {
  59. background-position: -90px;
  60. }
  61. .claro .dijitToggleButtonChecked .dijitRadioIcon {
  62. background-position: -92px;
  63. }
  64. .claro .dijitRadioCheckedHover {
  65. background-position: -120px;
  66. }
  67. .claro .dijitRadioCheckedDisabled {
  68. /* selected but disabled */
  69. background-position: -150px;
  70. }