RadioButton.less 2.1 KB

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