partkeepr/PartKeepr

/**
 * Creates the base structure of slider.
 * @member Ext.slider.Multi
 */
@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;
        @include no-select;
        display:block;
        overflow:hidden;
    }

    /* Horizontal styles */
    .#{$prefix}slider-horz {
        padding-left:7px;
        background:transparent no-repeat 0 -24px;
        width: 100%;
    }

    .#{$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: $horizontal-slider-thumb-width;
        height: $horizontal-slider-thumb-height;
        margin-left: -($horizontal-slider-thumb-width / 2);
        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: $vertical-slider-thumb-width;
        height: $vertical-slider-thumb-height;
        margin-bottom: -($vertical-slider-thumb-height / 2);
        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-background-image($theme-name, 'slider/slider-bg.png');
    }

    .#{$prefix}slider-horz .#{$prefix}slider-thumb {
        background-image: theme-background-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-background-image($theme-name, 'slider/slider-v-bg.png');
    }

    .#{$prefix}slider-vert .#{$prefix}slider-thumb {
        background-image: theme-background-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-background-image($theme-name, 'slider/slider-bg.gif');
            }

            .#{$prefix}slider-horz .#{$prefix}slider-thumb {
                background-image: theme-background-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-background-image($theme-name, 'slider/slider-v-bg.gif');
            }

            .#{$prefix}slider-vert .#{$prefix}slider-thumb {
                background-image: theme-background-image($theme-name, 'slider/slider-v-thumb.gif');
            }
        }
    }
}