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

   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 .claro .dijitToggleButton .dijitCheckBoxIcon {
  22   background-image: url("../images/checkmarkNoBorder.png");
  23 }
  24 .dj_ie6 .claro .dijitToggleButton .dijitCheckBoxIcon {
  25   background-image: url("../images/checkmarkNoBorder.gif");
  26 }
  27 .claro .dijitCheckBox, .claro .dijitCheckBoxIcon {
  28   background-image: url("../form/images/checkboxRadioButtonStates.png");
  29   /* checkbox sprite image */
  30
  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, .dj_ie6 .claro .dijitCheckBoxIcon {
  38   background-image: url("../form/images/checkboxAndRadioButtons_IE6.png");
  39   /* checkbox sprite image */
  40
  41 }
  42 .claro .dijitCheckBox, .claro .dijitToggleButton .dijitCheckBoxIcon {
  43   /* unchecked */
  44
  45   background-position: -15px;
  46 }
  47 .claro .dijitCheckBoxChecked, .claro .dijitToggleButtonChecked .dijitCheckBoxIcon {
  48   /* checked */
  49
  50   background-position: 0;
  51 }
  52 .claro .dijitCheckBoxDisabled {
  53   /* disabled */
  54
  55   background-position: -75px;
  56 }
  57 .claro .dijitCheckBoxCheckedDisabled {
  58   /* disabled but checked */
  59
  60   background-position: -60px;
  61 }
  62 .claro .dijitCheckBoxHover {
  63   /* hovering over an unchecked enabled checkbox */
  64
  65   background-position: -45px;
  66 }
  67 .claro .dijitCheckBoxCheckedHover {
  68   /* hovering over an checked enabled checkbox */
  69
  70   background-position: -30px;
  71 }