resources/themes/stylesheets/ext4/default/widgets/_slider.scss

   1 @mixin extjs-slider {
   2     .#{$prefix}slider {
   3         zoom:1;
   4     }
   5
   6     .#{$prefix}slider-inner {
   7         position:relative;
   8         left:0;
   9         top:0;
  10         overflow:visible;
  11         zoom:1;
  12     }
  13
  14     .#{$prefix}slider-focus {
  15         position:absolute;
  16         left:0;
  17         top:0;
  18         width:1px;
  19         height:1px;
  20         line-height:1px;
  21         font-size:1px;
  22         -moz-outline:0 none;
  23         outline:0 none;
  24         -moz-user-select: none;
  25         -khtml-user-select:none;
  26         -webkit-user-select:ignore;
  27         display:block;
  28         overflow:hidden;
  29     }
  30
  31     /* Horizontal styles */
  32     .#{$prefix}slider-horz {
  33         padding-left:7px;
  34         background:transparent no-repeat 0 -24px;
  35     }
  36
  37     .#{$prefix}slider-horz .#{$prefix}slider-end {
  38         padding-right:7px;
  39         zoom:1;
  40         background:transparent no-repeat right -46px;
  41     }
  42
  43     .#{$prefix}slider-horz .#{$prefix}slider-inner {
  44         background:transparent repeat-x 0 -2px;
  45         height:18px;
  46     }
  47
  48     .#{$prefix}slider-horz .#{$prefix}slider-thumb {
  49         width:14px;
  50         height:15px;
  51         position:absolute;
  52         left:0;
  53         top:1px;
  54         background:transparent no-repeat 0 0;
  55     }
  56
  57     .#{$prefix}slider-horz .#{$prefix}slider-thumb-over {
  58         background-position: -14px -15px;
  59     }
  60
  61     .#{$prefix}slider-horz .#{$prefix}slider-thumb-drag {
  62         background-position: -28px -30px;
  63     }
  64
  65     /* Vertical styles */
  66     .#{$prefix}slider-vert {
  67         padding-top:7px;
  68         background:transparent no-repeat -44px 0;
  69     }
  70
  71     .#{$prefix}slider-vert .#{$prefix}slider-end {
  72         padding-bottom:7px;
  73         zoom:1;
  74         background:transparent no-repeat -22px bottom;
  75         width:22px;
  76     }
  77
  78     .#{$prefix}slider-vert .#{$prefix}slider-inner {
  79         background:transparent repeat-y 0 0;
  80         width:22px;
  81     }
  82
  83     .#{$prefix}slider-vert .#{$prefix}slider-thumb {
  84         width:15px;
  85         height:14px;
  86         position:absolute;
  87         left:3px;
  88         bottom:0;
  89         background:transparent no-repeat 0 0;
  90     }
  91
  92     .#{$prefix}slider-vert .#{$prefix}slider-thumb-over {
  93         background-position: -15px -14px;
  94     }
  95
  96     .#{$prefix}slider-vert .#{$prefix}slider-thumb-drag {
  97         background-position: -30px -28px;
  98     }
  99
 100     .#{$prefix}slider-horz,
 101     .#{$prefix}slider-horz .#{$prefix}slider-end,
 102     .#{$prefix}slider-horz .#{$prefix}slider-inner {
 103         background-image: theme-image($theme-name, 'slider/slider-bg.png');
 104     }
 105
 106     .#{$prefix}slider-horz .#{$prefix}slider-thumb {
 107         background-image: theme-image($theme-name, 'slider/slider-thumb.png');
 108     }
 109
 110     .#{$prefix}slider-vert,
 111     .#{$prefix}slider-vert .#{$prefix}slider-end,
 112     .#{$prefix}slider-vert .#{$prefix}slider-inner {
 113         background-image: theme-image($theme-name, 'slider/slider-v-bg.png');
 114     }
 115
 116     .#{$prefix}slider-vert .#{$prefix}slider-thumb {
 117         background-image: theme-image($theme-name, 'slider/slider-v-thumb.png');
 118     }
 119
 120     @if $include-ie {
 121         .#{$prefix}ie6 {
 122             .#{$prefix}slider-horz,
 123             .#{$prefix}slider-horz .#{$prefix}slider-end,
 124             .#{$prefix}slider-horz .#{$prefix}slider-inner {
 125                 background-image: theme-image($theme-name, 'slider/slider-bg.gif');
 126             }
 127
 128             .#{$prefix}slider-horz .#{$prefix}slider-thumb {
 129                 background-image: theme-image($theme-name, 'slider/slider-thumb.gif');
 130             }
 131
 132             .#{$prefix}slider-vert,
 133             .#{$prefix}slider-vert .#{$prefix}slider-end,
 134             .#{$prefix}slider-vert .#{$prefix}slider-inner {
 135                 background-image: theme-image($theme-name, 'slider/slider-v-bg.gif');
 136             }
 137
 138             .#{$prefix}slider-vert .#{$prefix}slider-thumb {
 139                 background-image: theme-image($theme-name, 'slider/slider-v-thumb.gif');
 140             }
 141         }
 142     }
 143 }