Upgrade to ExtJS 4.0.0 - Released 04/26/2011

[extjs.git] / resources / themes / stylesheets / ext4 / default / widgets / _slider.scss

diff --git a/resources/themes/stylesheets/ext4/default/widgets/_slider.scss b/resources/themes/stylesheets/ext4/default/widgets/_slider.scss
new file mode 100644 (file)
index 0000000..ee5f09e
--- /dev/null
+++ b/resources/themes/stylesheets/ext4/default/widgets/_slider.scss
@@ -0,0 +1,143 @@
+@mixin extjs-slider {
+    .#{$prefix}slider {
+        zoom:1;
+    }
+
+    .#{$prefix}slider-inner {
+        position:relative;
+        left:0;
+        top:0;
+        overflow:visible;
+        zoom:1;
+    }
+
+    .#{$prefix}slider-focus {
+        position:absolute;
+        left:0;
+        top:0;
+        width:1px;
+        height:1px;
+        line-height:1px;
+        font-size:1px;
+        -moz-outline:0 none;
+        outline:0 none;
+        -moz-user-select: none;
+        -khtml-user-select:none;
+        -webkit-user-select:ignore;
+        display:block;
+        overflow:hidden;  
+    }
+
+    /* Horizontal styles */
+    .#{$prefix}slider-horz {
+        padding-left:7px;
+        background:transparent no-repeat 0 -24px;
+    }
+
+    .#{$prefix}slider-horz .#{$prefix}slider-end {
+        padding-right:7px;
+        zoom:1;
+        background:transparent no-repeat right -46px;
+    }
+
+    .#{$prefix}slider-horz .#{$prefix}slider-inner {
+        background:transparent repeat-x 0 -2px;
+        height:18px;
+    }
+
+    .#{$prefix}slider-horz .#{$prefix}slider-thumb {
+        width:14px;
+        height:15px;
+        position:absolute;
+        left:0;
+        top:1px;
+        background:transparent no-repeat 0 0;
+    }
+
+    .#{$prefix}slider-horz .#{$prefix}slider-thumb-over {
+        background-position: -14px -15px;
+    }
+
+    .#{$prefix}slider-horz .#{$prefix}slider-thumb-drag {
+        background-position: -28px -30px;
+    }
+
+    /* Vertical styles */
+    .#{$prefix}slider-vert {
+        padding-top:7px;
+        background:transparent no-repeat -44px 0;
+    }
+
+    .#{$prefix}slider-vert .#{$prefix}slider-end {
+        padding-bottom:7px;
+        zoom:1;
+        background:transparent no-repeat -22px bottom;
+        width:22px;
+    }
+
+    .#{$prefix}slider-vert .#{$prefix}slider-inner {
+        background:transparent repeat-y 0 0;
+        width:22px;
+    }
+
+    .#{$prefix}slider-vert .#{$prefix}slider-thumb {
+        width:15px;
+        height:14px;
+        position:absolute;
+        left:3px;
+        bottom:0;
+        background:transparent no-repeat 0 0;
+    }
+
+    .#{$prefix}slider-vert .#{$prefix}slider-thumb-over {
+        background-position: -15px -14px;
+    }
+
+    .#{$prefix}slider-vert .#{$prefix}slider-thumb-drag {
+        background-position: -30px -28px;
+    }
+    
+    .#{$prefix}slider-horz,
+    .#{$prefix}slider-horz .#{$prefix}slider-end,
+    .#{$prefix}slider-horz .#{$prefix}slider-inner {
+        background-image: theme-image($theme-name, 'slider/slider-bg.png');
+    }
+
+    .#{$prefix}slider-horz .#{$prefix}slider-thumb {
+        background-image: theme-image($theme-name, 'slider/slider-thumb.png');
+    }
+
+    .#{$prefix}slider-vert,
+    .#{$prefix}slider-vert .#{$prefix}slider-end,
+    .#{$prefix}slider-vert .#{$prefix}slider-inner {
+        background-image: theme-image($theme-name, 'slider/slider-v-bg.png');
+    }
+
+    .#{$prefix}slider-vert .#{$prefix}slider-thumb {
+        background-image: theme-image($theme-name, 'slider/slider-v-thumb.png');
+    }
+    
+    @if $include-ie {
+        .#{$prefix}ie6 {
+            .#{$prefix}slider-horz,
+            .#{$prefix}slider-horz .#{$prefix}slider-end,
+            .#{$prefix}slider-horz .#{$prefix}slider-inner {
+                background-image: theme-image($theme-name, 'slider/slider-bg.gif');
+            }
+
+            .#{$prefix}slider-horz .#{$prefix}slider-thumb {
+                background-image: theme-image($theme-name, 'slider/slider-thumb.gif');
+            }
+
+            .#{$prefix}slider-vert,
+            .#{$prefix}slider-vert .#{$prefix}slider-end,
+            .#{$prefix}slider-vert .#{$prefix}slider-inner {
+                background-image: theme-image($theme-name, 'slider/slider-v-bg.gif');
+            }
+
+            .#{$prefix}slider-vert .#{$prefix}slider-thumb {
+                background-image: theme-image($theme-name, 'slider/slider-v-thumb.gif');
+            }
+        }
+    }
+}
\ No newline at end of file