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

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