src/resources/themes/stylesheets/sencha-touch/cupertino-classic/src/slider/_Toggle.scss

   1 /**
   2  * @class Ext.slider.Toggle
   3  */
   4
   5 .x-toggle {
   6     $form-toggle-thumb-size: 26px;
   7
   8     width: 70px;
   9     height: $form-toggle-thumb-size;
  10     border: 0;
  11
  12     @include background-image(linear-gradient(top, #eeeeee, #ffffff));
  13     @include border-radius($form-thumb-size/2);
  14     @include box-shadow(inset 0 3px 4px rgba(0,0,0,.2), inset 0 1px 1px rgba(0,0,0,.3), inset 0 -1px 1px rgba(0,0,0,.1));
  15
  16     .x-thumb {
  17         width: $form-toggle-thumb-size;
  18         height: $form-toggle-thumb-size;
  19
  20         &.x-dragging {
  21             opacity: 1;
  22         }
  23
  24         &:after {
  25             top: 0;
  26             left: 0;
  27             width: $form-toggle-thumb-size;
  28             height: $form-toggle-thumb-size;
  29             @include box-shadow(inset 0 0 2px #fff);
  30             @include border-radius($form-toggle-thumb-size);
  31             border: 1px solid #7f8080;
  32         }
  33     }
  34 }
  35
  36 .x-toggle-on {
  37     @include background-image(linear-gradient(top, #2e7be8, #60a5ee));
  38 }