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

   1 /**
   2  * @class Ext.slider.Slider
   3  */
   4
   5 // Private variables
   6 $form-thumb-space: ($form-thumb-size - $form-toggle-size) / 2;
   7
   8 .x-slider,
   9 .x-toggle {
  10     height: $form-thumb-size;
  11 }
  12
  13 .x-slider.x-item-disabled {
  14     opacity: .6;
  15 }
  16
  17 .x-thumb {
  18     height: $form-thumb-size;
  19     width: $form-thumb-size;
  20     background: transparent none;
  21     border: 0;
  22
  23     // The actual thumb
  24     &:after {
  25         border: 1px solid #999;
  26         @include insertion($form-toggle-size, $form-toggle-size, $form-thumb-space, $form-thumb-space);
  27         @include background-image(linear-gradient(top, #afafaf, #f1f1f1));
  28         @include background-clip(padding-box);
  29         @include box-shadow(inset 0 1px 0 rgba(255,255,255,.6), 0 1px 4px rgba(0,0,0,.2));
  30         @include border-radius($form-toggle-size/2);
  31     }
  32
  33     &.x-dragging {
  34         opacity: 1;
  35         &:after {
  36             // @include background-gradient(darken($form-light, 5%));
  37         }
  38     }
  39 }
  40
  41 // Create the slider track
  42 .x-slider:before {
  43     margin: 0 $form-toggle-size/2;
  44     border: .1em solid #999999;
  45     border-bottom: 0;
  46
  47     @include insertion(auto, $form-slider-size, $form-toggle-size / 2 - $form-slider-size/2 + $form-spacing/2 - $form-thumb-space / 2, 0);
  48     @include background-image(linear-gradient(top, #c3c3c3, #fdfdfd));
  49     @include box-shadow(#d1d1d1 0 .1em 0);
  50     @include border-radius($form-slider-size/2);
  51 }