lib/dijit/themes/claro/form/RadioButton.less

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