src/resources/themes/stylesheets/sencha-touch/mountainview/src/field/_Checkbox.scss

   1 /**
   2  * @class Ext.field.Checkbox
   3  */
   4
   5 @mixin checkmark($color: #000){
   6     @extend .x-checkmark-base;
   7     color: $color;
   8 }
   9
  10 .x-checkmark-base {
  11     position: absolute;
  12     top: -2px;
  13     right: -3px;
  14     bottom: 0;
  15     content: '3';
  16     font-family: 'Pictos';
  17     font-size: 23px;
  18     text-align: right;
  19     line-height: 1.9em;
  20     @include text-shadow(
  21         0 -1px $background-color,
  22         0 1px $background-color,
  23         -1px 0 $background-color,
  24         1px 0 $background-color,
  25         0 2px 4px rgba($base-color, .3),
  26         0 -2px 4px rgba($base-color, .3),
  27         2px 0 4px rgba($base-color, .3),
  28         -2px 0 4px rgba($base-color, .3)
  29     );
  30 }
  31
  32 .x-field-checkbox .x-field-mask::before,
  33 .x-field-radio .x-field-mask::before,
  34 .x-field-radio .x-field-mask::after {
  35     content: '';
  36     position: absolute;
  37     top: 50%;
  38     right: 0;
  39     margin-top: -10px;
  40     height: 20px;
  41     width: 20px;
  42     border: 1px solid $foreground-color;
  43 }
  44
  45 .x-field-checkbox .x-field-mask::after {
  46     @include checkmark($base-color);
  47     visibility: hidden;
  48 }
  49
  50 .x-input-checkbox,
  51 .x-input-radio {
  52     visibility: hidden;
  53 }
  54
  55 .x-input-el:checked + .x-field-mask::after {
  56     visibility: visible;
  57 }
  58
  59 .x-item-disabled {
  60     &.x-field-checkbox .x-field-mask::before,
  61     &.x-field-radio .x-field-mask::before {
  62         border-color: $secondary-color;
  63     }
  64
  65     &.x-field-checkbox .x-input-el:checked + .x-field-mask::after {
  66         text-shadow: none;
  67         color: $foreground-color;
  68     }
  69 }