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