add extjs 6.0.1 sources

[extjs.git] / extjs / classic / theme-neutral / sass / src / slider / Multi.scss

@if $slider-imageless {\r
    .#{$prefix}slider:before {\r
        @if $slider-track-border-width != null and $slider-track-border-width != 0 {\r
            border: $slider-track-border-width $slider-track-border-style $slider-track-border-color;\r
        }\r
        content: '';\r
        position: absolute;\r
        @if $slider-track-border-radius != 0 {\r
            border-radius: $slider-track-border-radius;\r
        }\r
        background-color: $slider-track-background-color;\r
\r
        // pseudo elements don't inheit box sizing via the global * rule\r
        box-sizing:border-box;\r
        -moz-box-sizing:border-box;\r
        -ms-box-sizing:border-box;\r
        -webkit-box-sizing:border-box;\r
    }\r
\r
    .#{$prefix}slider-thumb {\r
        background-color: $slider-thumb-background-color;\r
        @if $slider-thumb-border-width != null and $slider-thumb-border-width != 0 {\r
            border: $slider-thumb-border-width $slider-thumb-border-style $slider-thumb-border-color;\r
        }\r
        @if $slider-thumb-border-radius != 0 {\r
            border-radius: $slider-thumb-border-radius;\r
        }\r
        &:before {\r
            color: $slider-thumb-glyph-color;\r
        }\r
    }\r
\r
    .#{$prefix}slider-thumb-over {\r
        background-color: $slider-thumb-background-color-over;\r
        border-color: $slider-thumb-border-color-over;\r
        &:before {\r
            color: $slider-thumb-glyph-color-over;\r
        }\r
    }\r
\r
    .#{$prefix}slider-focus .#{$prefix}slider-thumb {\r
        background-color: $slider-thumb-background-color-focus;\r
        border-color: $slider-thumb-border-color-focus;\r
        &:before {\r
            color: $slider-thumb-glyph-color-focus;\r
        }\r
    }\r
\r
    .#{$prefix}slider-focus .#{$prefix}slider-thumb-over {\r
        background-color: $slider-thumb-background-color-over;\r
    }\r
\r
    .#{$prefix}slider-thumb-drag {\r
        background-color: $slider-thumb-background-color-drag;\r
        border-color: $slider-thumb-border-color-drag;\r
        &:before {\r
            color: $slider-thumb-glyph-color-drag;\r
        }\r
    }\r
\r
    .#{$prefix}slider-focus .#{$prefix}slider-thumb-drag {\r
        background-color: $slider-thumb-background-color-drag;\r
    }\r
}\r
\r
/* Horizontal styles */\r
\r
// private\r
$slider-vert-margin: ($form-field-height - $horizontal-slider-thumb-height) / 2;\r
$slider-top-margin: ceil($slider-vert-margin);\r
$slider-bottom-margin: floor($slider-vert-margin);\r
\r
.#{$prefix}slider-horz {\r
    padding-left: $horizontal-slider-start-cap-width;\r
    background: no-repeat 0 (-$horizontal-slider-thumb-height);\r
\r
    // make sure the slider is vertically centered in form-field space\r
    margin: $slider-top-margin 0 $slider-bottom-margin;\r
\r
    .#{$prefix}slider-end {\r
        padding-right: $horizontal-slider-end-cap-width;\r
        background: no-repeat right (-$horizontal-slider-thumb-height * 2);\r
    }\r
\r
    .#{$prefix}slider-inner {\r
        height: $horizontal-slider-thumb-height;\r
    }\r
\r
    @if $slider-imageless {\r
        &:before {\r
            height: $slider-track-size;\r
            width: 100%;\r
            top: 50%;\r
            left: 0;\r
            margin-top: -($slider-track-size / 2);\r
        }\r
    }\r
}\r
\r
.#{$prefix}slider-horz .#{$prefix}slider-thumb {\r
    width: $horizontal-slider-thumb-width;\r
    height: $horizontal-slider-thumb-height;\r
    margin-left: -$horizontal-slider-start-cap-width;\r
    @if not $slider-imageless {\r
        background-image: theme-background-image('slider/slider-thumb', 'png');\r
    }\r
\r
    @if $enable-font-icons and ($horizontal-slider-thumb-glyph != null) {\r
        @include font-icon($horizontal-slider-thumb-glyph);\r
    }\r
}\r
\r
@if not $slider-imageless {\r
    .#{$prefix}slider-horz.#{$prefix}slider-focus .#{$prefix}slider-thumb {\r
        background-position: (-$horizontal-slider-thumb-width * 3) (-$horizontal-slider-thumb-height * 3);\r
    }\r
\r
    .#{$prefix}slider-horz .#{$prefix}slider-thumb-over {\r
        background-position: (-$horizontal-slider-thumb-width) (-$horizontal-slider-thumb-height);\r
    }\r
\r
    .#{$prefix}slider-horz.#{$prefix}slider-focus .#{$prefix}slider-thumb-over {\r
        background-position: (-$horizontal-slider-thumb-width * 4) (-$horizontal-slider-thumb-height * 4);\r
    }\r
\r
    .#{$prefix}slider-horz .#{$prefix}slider-thumb-drag {\r
        background-position: (-$horizontal-slider-thumb-width * 2) (-$horizontal-slider-thumb-height * 2);\r
    }\r
\r
    .#{$prefix}slider-horz.#{$prefix}slider-focus .#{$prefix}slider-thumb-drag {\r
        background-position: (-$horizontal-slider-thumb-width * 5) (-$horizontal-slider-thumb-height * 5);\r
    }\r
}\r
\r
@if $include-rtl {\r
    .#{$prefix}rtl.#{$prefix}slider-horz {\r
        padding-left: 0;\r
        padding-right: $horizontal-slider-start-cap-width;\r
        @if not $slider-imageless {\r
            background-position: right (-$horizontal-slider-thumb-height * 2);\r
        }\r
        \r
        .#{$prefix}slider-end {\r
            padding-right: 0;\r
            padding-left: $horizontal-slider-end-cap-width;\r
            @if not $slider-imageless {\r
                background-position: left (-$horizontal-slider-thumb-height);\r
            }\r
        }\r
        \r
        .#{$prefix}slider-thumb {\r
            margin-right: -$horizontal-slider-end-cap-width;\r
        }\r
    }\r
}\r
\r
/* Vertical styles */\r
.#{$prefix}slider-ct-vert {\r
    height: 100%;\r
}\r
\r
.#{$prefix}slider-vert {\r
    padding-top: $vertical-slider-start-cap-height;\r
    @if not $slider-imageless {\r
        background: no-repeat (-$vertical-slider-thumb-width * 2) 0;\r
    }\r
    height: 100%;\r
\r
    > .#{$prefix}slider-end {\r
        height: 100%;\r
        > .#{$prefix}slider-inner {\r
            height: 100%;\r
        }\r
    }\r
\r
    @if $slider-imageless {\r
        &:before {\r
            width: $slider-track-size;\r
            height: 100%;\r
            left: $vertical-slider-thumb-width / 2;\r
            top: 0;\r
            margin-left: -($slider-track-size / 2);\r
        }\r
    }\r
}\r
\r
.#{$prefix}slider-vert .#{$prefix}slider-end {\r
    padding-bottom: $vertical-slider-end-cap-height;\r
    background: no-repeat (-$vertical-slider-thumb-width) bottom;\r
    width: $vertical-slider-thumb-width;\r
}\r
\r
.#{$prefix}slider-vert .#{$prefix}slider-inner {\r
    width: $vertical-slider-thumb-width;\r
}\r
\r
.#{$prefix}slider-vert .#{$prefix}slider-thumb {\r
    width: $vertical-slider-thumb-width;\r
    height: $vertical-slider-thumb-height;\r
    margin-bottom: -$vertical-slider-end-cap-height;\r
    @if not $slider-imageless {\r
        background-image: theme-background-image('slider/slider-v-thumb', 'png');\r
    }\r
\r
    @if $enable-font-icons and ($vertical-slider-thumb-glyph != null) {\r
        @include font-icon($vertical-slider-thumb-glyph);\r
    }\r
}\r
\r
@if not $slider-imageless {\r
    .#{$prefix}slider-vert.#{$prefix}slider-focus .#{$prefix}slider-thumb {\r
        background-position: (-$vertical-slider-thumb-width * 3) (-$vertical-slider-thumb-height * 3);\r
    }\r
\r
    .#{$prefix}slider-vert .#{$prefix}slider-thumb-over {\r
        background-position: (-$vertical-slider-thumb-width) (-$vertical-slider-thumb-height);\r
    }\r
\r
    .#{$prefix}slider-vert.#{$prefix}slider-focus .#{$prefix}slider-thumb-over {\r
        background-position: (-$vertical-slider-thumb-width * 4) (-$vertical-slider-thumb-height * 4);\r
    }\r
\r
    .#{$prefix}slider-vert .#{$prefix}slider-thumb-drag {\r
        background-position: (-$vertical-slider-thumb-width * 2) (-$vertical-slider-thumb-height * 2);\r
    }\r
\r
    .#{$prefix}slider-vert.#{$prefix}slider-focus .#{$prefix}slider-thumb-drag {\r
        background-position: (-$vertical-slider-thumb-width * 5) (-$vertical-slider-thumb-height * 5);\r
    }\r
\r
    .#{$prefix}slider-horz,\r
    .#{$prefix}slider-horz .#{$prefix}slider-end,\r
    .#{$prefix}slider-horz .#{$prefix}slider-inner {\r
        background-image: theme-background-image('slider/slider-bg', 'png');\r
    }\r
\r
    .#{$prefix}slider-vert,\r
    .#{$prefix}slider-vert .#{$prefix}slider-end,\r
    .#{$prefix}slider-vert .#{$prefix}slider-inner {\r
        background-image: theme-background-image('slider/slider-v-bg', 'png');\r
    }\r
}\r
\r
.#{$prefix}slider-default-cell > .#{$prefix}grid-cell-inner,\r
.#{$prefix}sliderwidget-default-cell > .#{$prefix}grid-cell-inner {\r
    padding-top: max(floor(($grid-row-height - $horizontal-slider-thumb-height) / 2) - $slider-top-margin, 0);\r
    padding-bottom:  max(ceil(($grid-row-height - $horizontal-slider-thumb-height) / 2) - $slider-bottom-margin, 0);\r
}\r