devextreme/less/sources/widgets/common/progressBar.less

HTML5 JavaScript Component Suite for Responsive Web Development

/**
* DevExtreme (widgets/common/progressBar.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-progressbar {
    .dx-position-left,
    .dx-position-right {
        .dx-progressbar-range-container,
        .dx-progressbar-status {
            display: table-cell;
            vertical-align: middle;
        }
    }

    .dx-position-top-left,
    .dx-position-bottom-left {
        .dx-progressbar-range-container,
        .dx-progressbar-status {
            float: left;
        }
    }

    .dx-position-top-right,
    .dx-position-bottom-right {
        .dx-progressbar-range-container,
        .dx-progressbar-status {
            float: right;
        }
    }

    .dx-position-top-center,
    .dx-position-bottom-center {
        .dx-progressbar-status {
            text-align: center;
        }
    }

    .dx-position-left .dx-progressbar-status {
        padding-right: 8px;
    }

    .dx-position-right .dx-progressbar-status {
        padding-left: 8px;
    }

    &:before {
        display: inline-block;
        height: 100%;
        content: '';
        vertical-align: middle;
    }
}

.dx-progressbar-range-container {
    width: 100%;
}

.dx-progressbar-container {
    position: relative;
    width: 100%;
}

.dx-progressbar-wrapper {
    display: inline-block;
    width: 100%;
    vertical-align: middle;
    direction: ltr;
}

.dx-progressbar-range {
    height: 100%;
    .user-select(none);

    -webkit-user-drag: none;
}

.dx-progressbar-status {
    position: relative;
    top: 0;
    left: 0;
    width: auto;
    height: 20px;
    font-size: 12px;
}

.dx-progressbar-animating-segment {
    display: none;
}

.dx-progressbar-animating-container {
    width: 100%;
}

.dx-rtl.dx-progressbar,
.dx-rtl .dx-progressbar {
    .dx-progressbar-wrapper {
        direction: rtl;
    }
}