devextreme/less/sources/widgets/ios7/slider.ios7.less

HTML5 JavaScript Component Suite for Responsive Web Development

/**
* DevExtreme (widgets/ios7/slider.ios7.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/
*/
@IOS7_SLIDER_BAR_HEIGHT: 1px;
@IOS7_SLIDER_HANDLE_SIZE: 28px;
@IOS7_SLIDER_WRAPPER_SIZE: 30px;
@IOS7_SLIDER_HANDLE_BORDER: 1px solid @IOS7_SLIDER_HANDLE_BORDER_COLOR;

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

.dx-slider-bar {
    margin: 13px (@IOS7_SLIDER_HANDLE_SIZE + 1px) / 2;
    height: @IOS7_SLIDER_BAR_HEIGHT;
    background: @IOS7_SLIDER_BAR_BACKGROUND;
    border-radius: 3px;
}

.dx-slider-range {
    height: @IOS7_SLIDER_BAR_HEIGHT;

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

.dx-slider-handle {
    margin-right: -(@IOS7_SLIDER_HANDLE_SIZE + 1px) / 2;
    margin-top: -(@IOS7_SLIDER_WRAPPER_SIZE - @IOS7_SLIDER_BAR_HEIGHT) / 2;
    width: @IOS7_SLIDER_HANDLE_SIZE;
    height: @IOS7_SLIDER_HANDLE_SIZE;
    border: @IOS7_SLIDER_HANDLE_BORDER;
    background: @IOS7_SLIDER_HANDLE_BACKGROUND;
    box-shadow: @IOS7_SLIDER_HANDLE_SHADOW;
    border-radius: 50%;

    .dx-hairlines & {
        border-width: 0.5px;
    }
}

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

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

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