devextreme/less/sources/widgets/material/slider.material.less

HTML5 JavaScript Component Suite for Responsive Web Development

/**
* DevExtreme (widgets/material/slider.material.less)
* Version: 20.1.4
* Build date: Tue Jun 02 2020
*
* Copyright (c) 2012 - 2020 Developer Express Inc. ALL RIGHTS RESERVED
* Read about DevExtreme licensing here: https://js.devexpress.com/Licensing/
*/
.dx-size-default() {
    @MATERIAL_SLIDER_WIDTH: 14px;
    @MATERIAL_SLIDER_TRACK_HEIGHT: 4px;
    @MATERIAL_SLIDER_HANDLE_SIZE: 32px;
    @MATERIAL_SLIDER_WRAPPER_HEIGHT: 32px;
    @MATERIAL_SLIDER_TOOLTIP_WIDTH: 34px;
    @MATERIAL_SLIDER_TOP_TOOLTIP_MARGIN: -5px;
}
.dx-size-compact() {
    @MATERIAL_SLIDER_WIDTH: 14px;
    @MATERIAL_SLIDER_TRACK_HEIGHT: 4px;
    @MATERIAL_SLIDER_HANDLE_SIZE: 26px;
    @MATERIAL_SLIDER_WRAPPER_HEIGHT: 26px;
    @MATERIAL_SLIDER_TOOLTIP_WIDTH: 28px;
    @MATERIAL_SLIDER_TOP_TOOLTIP_MARGIN: -2px;
}
@MATERIAL_SLIDER_RADIUS: 50%;
@MATERIAL_SLIDER_BAR_HEIGHT: 2px;
@MATERIAL_SLIDER_HANDLE_ACTIVE_BORDER_WIDTH: 2px;
@MATERIAL_SLIDER_HANDLE_INNER_SIZE: 12px;
@MATERIAL_SLIDER_HANDLE_INNER_BORDER_WIDTH: 1px;
@MATERIAL_SLIDER_HANDLE_INNER_DISABLED_SIZE: 2px;


@MATERIAL_SLIDER_TOOLTIP_POPUP_CONTENT_HORIZONTAL_PADDING: 3px;
@MATERIAL_SLIDER_TOOLTIP_WIDTH_WITHOUT_PADDINGS: @MATERIAL_SLIDER_TOOLTIP_WIDTH - 2 * @MATERIAL_SLIDER_TOOLTIP_POPUP_CONTENT_HORIZONTAL_PADDING;
@MATERIAL_SLIDER_DISABLED_TOOLTIP_TOP_MARGIN: 5px;

.dx-slider-wrapper {
    height: @MATERIAL_SLIDER_WRAPPER_HEIGHT;
}

.dx-slider-bar,
.dx-slider-range {
    margin-top: (@MATERIAL_SLIDER_WRAPPER_HEIGHT - @MATERIAL_SLIDER_BAR_HEIGHT) / 2;
    height: @MATERIAL_SLIDER_BAR_HEIGHT;
}

.dx-slider-bar {
    margin-right: @MATERIAL_SLIDER_HANDLE_SIZE / 2 + @MATERIAL_SLIDER_HANDLE_ACTIVE_BORDER_WIDTH;
    margin-left: @MATERIAL_SLIDER_HANDLE_SIZE / 2 + @MATERIAL_SLIDER_HANDLE_ACTIVE_BORDER_WIDTH;
    background: @material-slider-bar-bg;
}

.dx-slider-range {
    top: @MATERIAL_SLIDER_BAR_HEIGHT / 2 - @MATERIAL_SLIDER_HANDLE_SIZE / 2;

    &.dx-slider-range-visible {
        background: @material-slider-bg;
    }
}

.dx-slider-handle {
    margin-top: @MATERIAL_SLIDER_BAR_HEIGHT / 2 - @MATERIAL_SLIDER_HANDLE_SIZE / 2;
    margin-right: -@MATERIAL_SLIDER_HANDLE_SIZE / 2;
    width: @MATERIAL_SLIDER_HANDLE_SIZE;
    height: @MATERIAL_SLIDER_HANDLE_SIZE;
    border-radius: @MATERIAL_SLIDER_RADIUS;

    &:after {
        position: absolute;
        top: 50%;
        left: 50%;
        display: block;
        margin-top: -@MATERIAL_SLIDER_HANDLE_INNER_SIZE / 2;
        margin-left: -@MATERIAL_SLIDER_HANDLE_INNER_SIZE / 2;
        width: @MATERIAL_SLIDER_HANDLE_INNER_SIZE;
        height: @MATERIAL_SLIDER_HANDLE_INNER_SIZE;
        background: @material-slider-bg;
        content: "";
        border-radius: @MATERIAL_SLIDER_RADIUS;
    }

    .dx-tooltip-wrapper {
        .dx-overlay-content {
            background-color: transparent;
            min-width: @MATERIAL_SLIDER_TOOLTIP_WIDTH;

            &:before {
                content: "";
                position: absolute;
                width: @MATERIAL_SLIDER_TOOLTIP_WIDTH;
                height: @MATERIAL_SLIDER_TOOLTIP_WIDTH;
                border-radius: 0 50% 50% 50%;
                transform: rotate(45deg);
                display: block;
                background-color: @material-slider-tooltip-bg;
                top: 0;

                .dx-slider-tooltip-position-top & {
                    transform: rotate(-135deg);
                    bottom: 0;
                    margin-top: @MATERIAL_SLIDER_TOP_TOOLTIP_MARGIN;
                }
            }

            .dx-popup-content {
                line-height: normal;
                font-size: 10px;
                max-width: @MATERIAL_SLIDER_TOOLTIP_WIDTH_WITHOUT_PADDINGS;
                min-width: @MATERIAL_SLIDER_TOOLTIP_WIDTH_WITHOUT_PADDINGS;
                width: @MATERIAL_SLIDER_TOOLTIP_WIDTH_WITHOUT_PADDINGS;
                text-overflow: ellipsis;
                padding: @MATERIAL_SLIDER_TOOLTIP_WIDTH / 2 - @MATERIAL_SLIDER_DISABLED_TOOLTIP_TOP_MARGIN - 1 @MATERIAL_SLIDER_TOOLTIP_POPUP_CONTENT_HORIZONTAL_PADDING 5px;
                color: @material-slider-tooltip-color;
                position: relative;

                .dx-slider-tooltip-position-top & {
                    padding-top: 6px;
                }
            }

            &.dx-state-disabled {
                &:before {
                    margin-top: @MATERIAL_SLIDER_DISABLED_TOOLTIP_TOP_MARGIN;

                    .dx-slider-tooltip-position-top & {
                        margin-top: -@MATERIAL_SLIDER_DISABLED_TOOLTIP_TOP_MARGIN;
                    }
                }

                .dx-popup-content {
                    padding-top: @MATERIAL_SLIDER_TOOLTIP_WIDTH / 2;

                    .dx-slider-tooltip-position-top & {
                        padding-top: 6px;
                        padding-bottom: @MATERIAL_SLIDER_TOOLTIP_WIDTH / 2;
                    }
                }
            }
        }
    }

    .dx-inkripple-wave {
        background-color: @material-slider-active;
    }
}

.dx-slider-tooltip-position-top {
    padding-top: @MATERIAL_SLIDER_TOOLTIP_WIDTH + 6;
}

.dx-slider-tooltip-position-bottom {
    padding-bottom: @MATERIAL_SLIDER_TOOLTIP_WIDTH + 6;
}

.dx-slider-label-position-bottom {
    .dx-slider-label {
        bottom: -18px;
    }
}

.dx-slider-label-position-top {
    .dx-slider-label {
        top: -15px;
    }
}

.dx-state-disabled {
    &.dx-slider,
    .dx-slider {
        opacity: 1;

        .dx-slider-handle {
            opacity: 1;
        }
    }

    .dx-slider-bar {
        background: @material-slider-bar-disabled-bg;
    }

    .dx-slider-range.dx-slider-range-visible {
        background: @material-slider-disabled-bg;
    }

    .dx-slider-handle {
        width: 12px;
        height: 12px;
        margin-top: -5px;
        margin-right: -5px;
        border-radius: 50%;
        border: 2px solid @base-bg;

        &:after {
            margin-top: -@MATERIAL_SLIDER_HANDLE_INNER_DISABLED_SIZE / 2 - @MATERIAL_SLIDER_HANDLE_INNER_BORDER_WIDTH - 2px;
            margin-left: -@MATERIAL_SLIDER_HANDLE_INNER_DISABLED_SIZE / 2 - @MATERIAL_SLIDER_HANDLE_INNER_BORDER_WIDTH - 2px;
            width: 8px;
            height: 8px;
            background: grey;
        }

        .dx-overlay-content {
            margin-top: -12px;
        }
    }
}

.dx-invalid {
    .dx-slider-handle:after {
        background-color: @base-invalid-color;
    }

    .dx-slider-range-visible {
        background-color: @base-invalid-color;
        border-color: @base-invalid-color;
    }

    .dx-slider-bar {
        background-color: fade(@base-invalid-color, 40%);
    }
}

.dx-rtl {
    .dx-slider-handle {
        margin-left: -@MATERIAL_SLIDER_HANDLE_SIZE / 2;
    }

    &.dx-state-disabled {
        .dx-slider-handle {
            margin-left: -5px;
            margin-right: 0;
        }

        .dx-overlay-content {
            margin-left: -13px;
        }
    }
}