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

   1 /**
   2  * @class Ext.field.Checkbox
   3  */
   4
   5 .x-field-checkbox .x-field-mask,
   6 .x-field-radio .x-field-mask {
   7     @include absolute-position;
   8
   9     &::before {
  10         content: '';
  11         width: 32px;
  12         height: 32px;
  13         position: absolute;
  14         border-color: #CECACE;
  15         @include border-radius($button-border-radius);
  16         @include background(linear-gradient(color-stops(#C6C3C6, #E7E7E7)));
  17         top: 7px;
  18         right: 3px;
  19     }
  20
  21     &::after {
  22         content: '';
  23         width: 28px;
  24         height: 28px;
  25         position: absolute;
  26         top: 9px;
  27         right: 5px;
  28         border: 1px solid #B9B7B9;
  29         @include border-radius(4px);
  30         @include background(linear-gradient(color-stops(#FFFFFF, #DEDFDE)));
  31         font-family: 'Pictos';
  32         font-size: 1.3em;
  33         text-align: center;
  34         line-height: 1.25em;
  35         color: #fff;
  36     }
  37 }
  38
  39 .x-input-checkbox,
  40 .x-input-radio {
  41     visibility: hidden;
  42 }
  43
  44 .x-input-checkbox:checked ~ .x-field-mask:after {
  45     @include background(linear-gradient(color-stops(#3498CB, #0974A8)));
  46     @include box-shadow(inset 0 1px 0 0 #55AAD5);
  47     content: '3';
  48 }
  49
  50 .x-item-disabled.x-field-checkbox {
  51     .x-input-checkbox:checked ~ .x-field-mask:after {
  52         @include background(linear-gradient(color-stops(#bfd7e3, #85b3c9)));
  53         @include box-shadow(inset 0 1px 0 0 #aac5d3);
  54     }
  55 }