@import '../global'; /* * Includes basic form slider styles. */ @mixin sencha-form-sliders { .x-slider { position: relative; height: $form-thumb-size; margin: $form-spacing; min-height: 0; } .x-thumb { position: absolute; height: $form-thumb-size; width: $form-thumb-size; border: 1px solid red; &.x-dragging { background-color: red; } } .x-input-slider { width: auto; background-color: #000; } .x-field-toggle, .x-field-slider { background-color: #fff; // @extend .x-input-el; } .x-field-toggle .x-slider { width: $form-thumb-size * 2; @if $include-border-radius { @include border-radius($form-thumb-size/2); } overflow: hidden; border: .1em solid darken($form-light, 15%); // -webkit-transform: translate3d(0px, 0px, 0px); @include background-gradient($form-light, 'recessed'); z-index: 2; // Masking the slider doesn't work in iOS 3, so we're fake-masking the outer area // UPDATED: Doesnt fly on Android... // &:after { // @include insertion($form-thumb-size*2, $form-thumb-size, 0, 0); // -webkit-mask: theme_image($theme-name, "trackmask_outer.png"); // background-color: white; // -webkit-mask-size: $form-thumb-size*2 $form-thumb-size; // pointer-events: none; // z-index: 4; // } .x-thumb { .x-toggle-thumb-off, .x-toggle-thumb-on { display: none; } &.x-dragging { opacity: 1; } &:before { top: ($form-thumb-size - $form-toggle-size) / 2; } // Actual thumb // &:after { // @include insertion($form-thumb-size, $form-thumb-size, 0, 0); // -webkit-box-shadow: rgba(0,0,0,.5) 0 0 .15em; // @if $include-border-radius { @include border-radius($form-thumb-size/2); } // -webkit-transform: scale(.65); // @include background-gradient($complement_light, 'glossy'); // border: 1px solid $complement; // overflow: visible; // z-index: 2; // } // &.x-dragging { // &:after { // -webkit-transform: scale(.75); // } // } // // Used to animate the thumb. class added/removed by javascript when needed. // &.x-animate { // -webkit-transition: left .2s ease-in-out; // } } &.x-toggle-on { @include background-gradient($confirm-color, 'recessed'); } } .x-android .x-field-toggle .x-slider { //-webkit-transform: translate(0px, 0px); } }