devextreme/less/sources/widgets/generic/slider.generic.less

HTML5 JavaScript Component Suite for Responsive Web Development

/**
* DevExtreme (widgets/generic/slider.generic.less)
* Version: 19.2.6
* Build date: Thu Jan 30 2020
*
* Copyright (c) 2012 - 2020 Developer Express Inc. ALL RIGHTS RESERVED
* Read about DevExtreme licensing here: https://js.devexpress.com/Licensing/
*/
.dx-size-default() {
    @GENERIC_SLIDER_WIDTH: 14px;
    @GENERIC_SLIDER_TRACK_HEIGHT: 4px;
}
.dx-size-compact() {
    @GENERIC_SLIDER_WIDTH: 9px;
    @GENERIC_SLIDER_TRACK_HEIGHT: 2px;
}

@GENERIC_SLIDER_RADIUS: 2px;


.dx-slider {
    .dx-tooltip-wrapper {
        .dx-overlay-content {
            box-shadow: none;
        }
    }

    .dx-state-active {
        &.dx-slider-handle {
            border: 1px solid @slider-handle-border-color;
            background: @slider-handle-active-bg;
        }
    }

    .dx-state-focused {
        &.dx-slider-handle:not(.dx-state-active) {
            border: 1px solid @slider-handle-border-color;
            background: @slider-handle-focused-bg;
        }
    }

    .dx-state-hover {
        &.dx-slider-handle:not(.dx-state-active) {
            border: 1px solid @slider-handle-border-color;
            background: @slider-handle-hover-bg;
        }
    }
}

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

.dx-slider-bar {
    margin: @GENERIC_SLIDER_HEIGHT/2 @GENERIC_SLIDER_WIDTH / 2;
    height: @GENERIC_SLIDER_TRACK_HEIGHT;
    background: @slider-bar-bg;
    border-radius: @GENERIC_SLIDER_RADIUS;
}

.dx-slider-range {
    border: 1px solid transparent;
    height: @GENERIC_SLIDER_TRACK_HEIGHT - 2px;
    box-sizing: content-box;

    &.dx-slider-range-visible {
        border: 1px solid @slider-range-border-color;
        background: @slider-range-bg;
        border-radius: @GENERIC_SLIDER_RADIUS;
    }
}

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

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


.dx-slider-handle {
    margin-top: -@GENERIC_SLIDER_HEIGHT / 2;
    margin-right: -@GENERIC_SLIDER_WIDTH / 2;
    width: @GENERIC_SLIDER_WIDTH;
    height: @GENERIC_SLIDER_HEIGHT;
    border: 1px solid @slider-handle-border-color;
    background-color: @slider-handle-bg;
    border-radius: @slider-handle-border-radius;
    box-sizing: content-box;
}

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

    .dx-slider-bar {
        opacity: 0.5;
    }
}

.dx-invalid {
    .dx-slider-handle {
        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-state-hover,
    .dx-state-focused {
        &.dx-slider-handle:not(.dx-state-active) {
            background: @slider-invalid-handle-accent-bg;
        }
    }
}

.dx-rtl .dx-slider-handle {
    margin-left: -(@GENERIC_SLIDER_WIDTH + 1px) / 2;
}