ui.less

.dx-clearfix {
    .dx-clearfix-mixin();
}

.dx-translate-disabled {
    .transform(e("none !important"));
}

.dx-hidden-input {
    position: fixed;
    top: -10px;
    left: -10px;
    width: 0;
    height: 0;
}

.dx-user-select {
    .user-select(text);
}

.dx-state-invisible {
    display: none !important;
}

.dx-gesture-cover {
    .transform(e("translate3d(0,0,0)"));
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    opacity: 0;
    z-index: 2147483647;
}

/* animations */

.dx-animating {
    pointer-events: none; /* T263724 */
}

.dx-fade-animation,
.dx-no-direction {
    &.dx-enter,
    &.dx-leave.dx-leave-active {
        opacity: 0;
    }

    &.dx-leave,
    &.dx-enter.dx-enter-active {
        opacity: 1;
    }
}

.dx-overflow-animation {

    &.dx-enter.dx-forward {
        -webkit-transform: translate3d(100%, 0, 0);
        -moz-transform: translate3d(100%, 0, 0);
        -o-transform: translate3d(100%, 0, 0);
        transform: translate3d(100%, 0, 0);
        z-index: 2;
    }

    &.dx-enter.dx-enter-active.dx-forward {
        -webkit-transform: translate3d(0, 0, 0);
        -moz-transform: translate3d(0, 0, 0);
        -o-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
        z-index: 2;
    }

    &.dx-enter.dx-backward {
        -webkit-transform: translate3d(0, 0, 0);
        -moz-transform: translate3d(0, 0, 0);
        -o-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
        z-index: 1;
    }

    &.dx-enter.dx-enter-active.dx-backward {
        -webkit-transform: translate3d(0, 0, 0);
        -moz-transform: translate3d(0, 0, 0);
        -o-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
        z-index: 1;
    }

    &.dx-leave.dx-forward {
        -webkit-transform: translate3d(0, 0, 0);
        -moz-transform: translate3d(0, 0, 0);
        -o-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
        z-index: 1;
    }

    &.dx-leave.dx-leave-active.dx-forward {
        -webkit-transform: translate3d(0, 0, 0);
        -moz-transform: translate3d(0, 0, 0);
        -o-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
        z-index: 1;
    }

    &.dx-leave.dx-backward {
        -webkit-transform: translate3d(0, 0, 0);
        -moz-transform: translate3d(0, 0, 0);
        -o-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
        z-index: 2;
    }

    &.dx-leave.dx-leave-active.dx-backward {
        -webkit-transform: translate3d(100%, 0, 0);
        -moz-transform: translate3d(100%, 0, 0);
        -o-transform: translate3d(100%, 0, 0);
        transform: translate3d(100%, 0, 0);
        z-index: 2;
    }
}

.dx-slide-animation {

    &.dx-enter.dx-forward {
        -webkit-transform: translate3d(100%, 0, 0);
        -moz-transform: translate3d(100%, 0, 0);
        -o-transform: translate3d(100%, 0, 0);
        transform: translate3d(100%, 0, 0);
    }

    &.dx-enter.dx-enter-active.dx-forward {
        -webkit-transform: translate3d(0, 0, 0);
        -moz-transform: translate3d(0, 0, 0);
        -o-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }

    &.dx-enter.dx-backward {
        -webkit-transform: translate3d(-100%, 0, 0);
        -moz-transform: translate3d(-100%, 0, 0);
        -o-transform: translate3d(-100%, 0, 0);
        transform: translate3d(-100%, 0, 0);
    }

    &.dx-enter.dx-enter-active.dx-backward {
        -webkit-transform: translate3d(0, 0, 0);
        -moz-transform: translate3d(0, 0, 0);
        -o-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }

    &.dx-leave.dx-forward {
        -webkit-transform: translate3d(0, 0, 0);
        -moz-transform: translate3d(0, 0, 0);
        -o-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }

    &.dx-leave.dx-leave-active.dx-forward {
        -webkit-transform: translate3d(-100%, 0, 0);
        -moz-transform: translate3d(-100%, 0, 0);
        -o-transform: translate3d(-100%, 0, 0);
        transform: translate3d(-100%, 0, 0);
    }

    &.dx-leave.dx-backward {
        -webkit-transform: translate3d(0, 0, 0);
        -moz-transform: translate3d(0, 0, 0);
        -o-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }

    &.dx-leave.dx-leave-active.dx-backward {
        -webkit-transform: translate3d(100%, 0, 0);
        -moz-transform: translate3d(100%, 0, 0);
        -o-transform: translate3d(100%, 0, 0);
        transform: translate3d(100%, 0, 0);
    }
}

.dx-opendoor-animation {
    &.dx-enter.dx-forward {
        -moz-transform: matrix3d(0.71,0,0.71,0.001,0.00,1,0.00,0,-0.71,0,0.71,0,0,0,0,1);
        -o-transform: matrix3d(0.71,0,0.71,0.001,0.00,1,0.00,0,-0.71,0,0.71,0,0,0,0,1);
        -webkit-transform: matrix3d(0.71,0,0.71,0.001,0.00,1,0.00,0,-0.71,0,0.71,0,0,0,0,1);
        transform: matrix3d(0.71,0,0.71,0.001,0.00,1,0.00,0,-0.71,0,0.71,0,0,0,0,1);
        -moz-transform-origin: center left 0px;
        -o-transform-origin: center left 0px;
        -webkit-transform-origin: center left 0px;
        transform-origin: center left 0px;
        opacity: 0;
    }

    &.dx-enter.dx-enter-active.dx-forward {
        -moz-transform: none;
        -o-transform: none;
        -webkit-transform: none;
        transform: none;
        opacity: 1;
    }

    &.dx-enter.dx-enter-active.dx-backward {
        -moz-transform: none;
        -o-transform: none;
        -webkit-transform: none;
        transform: none;
        opacity: 1;
    }

    &.dx-leave.dx-forward {
        -moz-transform: none;
        -o-transform: none;
        -webkit-transform: none;
        transform: none;
        -moz-transform-origin: center left 0px;
        -o-transform-origin: center left 0px;
        -webkit-transform-origin: center left 0px;
        transform-origin: center left 0px;
        opacity: 1;
    }

    &.dx-leave.dx-backward {
        -moz-transform: none;
        -o-transform: none;
        -webkit-transform: none;
        transform: none;
        -moz-transform-origin: center left 0px;
        -o-transform-origin: center left 0px;
        -webkit-transform-origin: center left 0px;
        transform-origin: center left 0px;
        opacity: 1;
    }

    &.dx-leave.dx-leave-active.dx-forward {
        -moz-transform: matrix3d(0.5,0,0.87,-0.001,0.00,1,0.00,0,-0.87,0,0.5,0,0,0,0,1);
        -o-transform: matrix3d(0.5,0,0.87,-0.001,0.00,1,0.00,0,-0.87,0,0.5,0,0,0,0,1);
        -webkit-transform: matrix3d(0.5,0,0.87,-0.001,0.00,1,0.00,0,-0.87,0,0.5,0,0,0,0,1);
        transform: matrix3d(0.5,0,0.87,-0.001,0.00,1,0.00,0,-0.87,0,0.5,0,0,0,0,1);
        -moz-transform-origin: center left 0px;
        -o-transform-origin: center left 0px;
        -webkit-transform-origin: center left 0px;
        transform-origin: center left 0px;
        opacity: 0;
    }

    &.dx-enter.dx-backward {
        -moz-transform: matrix3d(0.5,0,0.87,-0.001,0.00,1,0.00,0,-0.87,0,0.5,0,0,0,0,1);
        -o-transform: matrix3d(0.5,0,0.87,-0.001,0.00,1,0.00,0,-0.87,0,0.5,0,0,0,0,1);
        -webkit-transform: matrix3d(0.5,0,0.87,-0.001,0.00,1,0.00,0,-0.87,0,0.5,0,0,0,0,1);
        transform: matrix3d(0.5,0,0.87,-0.001,0.00,1,0.00,0,-0.87,0,0.5,0,0,0,0,1);
        -moz-transform-origin: center left 0px;
        -o-transform-origin: center left 0px;
        -webkit-transform-origin: center left 0px;
        transform-origin: center left 0px;
        opacity: 0;
    }

    &.dx-leave.dx-leave-active.dx-backward {
        -moz-transform: matrix3d(0.71,0,0.71,0.001,0.00,1,0.00,0,-0.71,0,0.71,0,0,0,0,1);
        -o-transform: matrix3d(0.71,0,0.71,0.001,0.00,1,0.00,0,-0.71,0,0.71,0,0,0,0,1);
        -webkit-transform: matrix3d(0.71,0,0.71,0.001,0.00,1,0.00,0,-0.71,0,0.71,0,0,0,0,1);
        transform: matrix3d(0.71,0,0.71,0.001,0.00,1,0.00,0,-0.71,0,0.71,0,0,0,0,1);
        opacity: 0;
    }
}

.dx-win-pop-animation {

    &.dx-enter.dx-forward {
        .scale(0.5);
        opacity: 0;
    }

    &.dx-enter.dx-enter-active.dx-forward {
        .scale(1);
        opacity: 1;
    }

    &.dx-leave.dx-leave-active.dx-forward {
        .scale(1.5);
        opacity: 0;
    }

    &.dx-enter.dx-backward {
        .scale(1.5);
        opacity: 0;
    }

    &.dx-enter.dx-enter-active.dx-backward {
        .scale(1);
        opacity: 1;
    }

    &.dx-leave.dx-leave-active.dx-backward {
        .scale(0.5);
        opacity: 0;
    }
}

.dx-android-pop-animation {
    &.dx-enter.dx-forward,
    &.dx-leave.dx-leave-active.dx-backward {
        -webkit-transform: translate3d(0,150px,0);
        -moz-transform: translate3d(0,150px,0);
        -o-transform: translate3d(0,150px,0);
        transform: translate3d(0,150px,0);
        opacity: 0;
    }

    &.dx-enter.dx-enter-active.dx-forward,
    &.dx-leave.dx-backward {
        -webkit-transform: translate3d(0,0,0);
        -moz-transform: translate3d(0,0,0);
        -o-transform: translate3d(0,0,0);
        transform: translate3d(0,0,0);
        opacity: 1;
    }

    &.dx-enter.dx-forward, &.dx-leave.dx-backward {
        z-index: 1;
    }
}

.dx-ios7-slide-animation {

    &.dx-enter.dx-forward {
        z-index: 2;
        -webkit-transform: translate3d(100%, 0, 0);
        -moz-transform: translate3d(100%, 0, 0);
        -o-transform: translate3d(100%, 0, 0);
        transform: translate3d(100%, 0, 0);
    }

    &.dx-enter.dx-enter-active.dx-forward {
        z-index: 2;
        -webkit-transform: translate3d(0, 0, 0);
        -moz-transform: translate3d(0, 0, 0);
        -o-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }

    &.dx-enter.dx-backward {
        -webkit-transform: translate3d(-20%, 0, 0);
        -moz-transform: translate3d(-20%, 0, 0);
        -o-transform: translate3d(-20%, 0, 0);
        transform: translate3d(-20%, 0, 0);
        z-index: 1;
    }

    &.dx-enter.dx-enter-active.dx-backward {
        -webkit-transform: translate3d(0, 0, 0);
        -moz-transform: translate3d(0, 0, 0);
        -o-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
        z-index: 1;
    }

    &.dx-leave.dx-forward {
        z-index: 1;
        -webkit-transform: translate3d(0, 0, 0);
        -moz-transform: translate3d(0, 0, 0);
        -o-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }

    &.dx-leave.dx-leave-active.dx-forward {
        -webkit-transform: translate3d(-20%, 0, 0);
        -moz-transform: translate3d(-20%, 0, 0);
        -o-transform: translate3d(-20%, 0, 0);
        transform: translate3d(-20%, 0, 0);
        z-index: 1;
    }

    &.dx-leave.dx-backward {
        z-index: 2;
    }

    &.dx-leave.dx-leave-active.dx-backward {
        -webkit-transform: translate3d(100%, 0, 0);
        -moz-transform: translate3d(100%, 0, 0);
        -o-transform: translate3d(100%, 0, 0);
        transform: translate3d(100%, 0, 0);
        z-index: 2;
    }
}

.dx-ios7-toolbar-animation {

    &.dx-enter.dx-forward {
        -webkit-transform: translate3d(40%, 0, 0);
        -moz-transform: translate3d(40%, 0, 0);
        -o-transform: translate3d(40%, 0, 0);
        transform: translate3d(40%, 0, 0);
        opacity: 0;
        z-index: 2;
    }

    &.dx-enter.dx-enter-active.dx-forward {
        -webkit-transform: translate3d(0, 0, 0);
        -moz-transform: translate3d(0, 0, 0);
        -o-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
        opacity: 1;
        z-index: 2;
    }

    &.dx-enter.dx-backward {
        -webkit-transform: translate3d(-40%, 0, 0);
        -moz-transform: translate3d(-40%, 0, 0);
        -o-transform: translate3d(-40%, 0, 0);
        transform: translate3d(-40%, 0, 0);
        opacity: 0;
        z-index: 1;
    }

    &.dx-enter.dx-enter-active.dx-backward {
        -webkit-transform: translate3d(0, 0, 0);
        -moz-transform: translate3d(0, 0, 0);
        -o-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
        opacity: 1;
        z-index: 1;
    }

    &.dx-leave.dx-forward {
        -webkit-transform: translate3d(0, 0, 0);
        -moz-transform: translate3d(0, 0, 0);
        -o-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
        opacity: 1;
        z-index: 1;
    }

    &.dx-leave.dx-leave-active.dx-forward {
        -webkit-transform: translate3d(-40%, 0, 0);
        -moz-transform: translate3d(-40%, 0, 0);
        -o-transform: translate3d(-40%, 0, 0);
        transform: translate3d(-40%, 0, 0);
        opacity: 0;
        z-index: 1;
    }

    &.dx-leave.dx-backward {
        -webkit-transform: translate3d(0, 0, 0);
        -moz-transform: translate3d(0, 0, 0);
        -o-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
        opacity: 1;
        z-index: 2;
    }

    &.dx-leave.dx-leave-active.dx-backward {
        -webkit-transform: translate3d(40%, 0, 0);
        -moz-transform: translate3d(40%, 0, 0);
        -o-transform: translate3d(40%, 0, 0);
        transform: translate3d(40%, 0, 0);
        opacity: 0;
        z-index: 2;
    }
}

.dx-drop-animation {
    &.dx-enter,
    &.dx-leave.dx-leave-active {
        -moz-transform: translate3d(0, -120%, 0);
        -o-transform: translate3d(0, -120%, 0);
        -webkit-transform: translate3d(0, -120%, 0);
        transform: translate3d(0, -120%, 0);
    }

    &.dx-leave,
    &.dx-enter.dx-enter-active {
        -moz-transform: translate3d(0, 0, 0);
        -o-transform: translate3d(0, 0, 0);
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
}

.dx-3d-drop-animation {
    &.dx-enter,
    &.dx-leave.dx-leave-active {
        -moz-transform: rotate3d(1, 0, 0, 10deg) translate3d(0, -10px, 0) scale3d(1.1, 1.1, 1.1);
        -o-transform: rotate3d(1, 0, 0, 10deg) translate3d(0, -10px, 0) scale3d(1.1, 1.1, 1.1);
        -webkit-transform: rotate3d(1, 0, 0, 10deg) translate3d(0, -10px, 0) scale3d(1.1, 1.1, 1.1);
        transform: rotate3d(1, 0, 0, 10deg) translate3d(0, -10px, 0) scale3d(1.1, 1.1, 1.1);
        opacity: 0;
    }

    &.dx-leave,
    &.dx-enter.dx-enter-active {
        -moz-transform: rotate3d(1, 0, 0, 0) translate3d(0, 0, 0) scale3d(1, 1, 1);
        -o-transform: rotate3d(1, 0, 0, 0) translate3d(0, 0, 0) scale3d(1, 1, 1);
        -webkit-transform: rotate3d(1, 0, 0, 0) translate3d(0, 0, 0) scale3d(1, 1, 1);
        transform: rotate3d(1, 0, 0, 0) translate3d(0, 0, 0) scale3d(1, 1, 1);
        opacity: 1;
    }
}

.dx-fade-drop-animation {
    &.dx-enter,
    &.dx-leave.dx-leave-active {
        -moz-transform: translate3d(0, -10px, 0) scale3d(1.1, 1.1, 1.1);
        -o-transform: translate3d(0, -10px, 0) scale3d(1.1, 1.1, 1.1);
        -webkit-transform: translate3d(0, -10px, 0) scale3d(1.1, 1.1, 1.1);
        transform: translate3d(0, -10px, 0) scale3d(1.1, 1.1, 1.1);
        opacity: 0;
    }

    &.dx-leave,
    &.dx-enter.dx-enter-active {
        -moz-transform: translate3d(0, 0, 0) scale3d(1, 1, 1);
        -o-transform: translate3d(0, 0, 0) scale3d(1, 1, 1);
        -webkit-transform: translate3d(0, 0, 0) scale3d(1, 1, 1);
        transform: translate3d(0, 0, 0) scale3d(1, 1, 1);
        opacity: 1;
    }
}

.dx-fade-rise-animation {
    &.dx-enter,
    &.dx-leave.dx-leave-active {
        -moz-transform: translate3d(0, 10px, 0) scale3d(1.1, 1.1, 1.1);
        -o-transform: translate3d(0, 10px, 0) scale3d(1.1, 1.1, 1.1);
        -webkit-transform: translate3d(0, 10px, 0) scale3d(1.1, 1.1, 1.1);
        transform: translate3d(0, 10px, 0) scale3d(1.1, 1.1, 1.1);
        opacity: 0;
    }

    &.dx-leave,
    &.dx-enter.dx-enter-active {
        -moz-transform: translate3d(0, 0, 0) scale3d(1, 1, 1);
        -o-transform: translate3d(0, 0, 0) scale3d(1, 1, 1);
        -webkit-transform: translate3d(0, 0, 0) scale3d(1, 1, 1);
        transform: translate3d(0, 0, 0) scale3d(1, 1, 1);
        opacity: 1;
    }
}

.dx-fade-slide-animation {
    &.dx-enter,
    &.dx-leave.dx-leave-active {
        -moz-transform: translate3d(40%, 0, 0);
        -o-transform: translate3d(40%, 0, 0);
        -webkit-transform: translate3d(40%, 0, 0);
        transform: translate3d(40%, 0, 0);
        opacity: 0;
    }

    &.dx-leave,
    &.dx-enter.dx-enter-active {
        -moz-transform: translate3d(0, 0, 0);
        -o-transform: translate3d(0, 0, 0);
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
        opacity: 1;
    }
}

.dx-fade-zoom-animation {
    &.dx-enter,
    &.dx-leave.dx-leave-active {
        -moz-transform: scale3d(0.3, 0.3, 0.3);
        -o-transform: scale3d(0.3, 0.3, 0.3);
        -webkit-transform: scale3d(0.3, 0.3, 0.3);
        transform: scale3d(0.3, 0.3, 0.3);
        opacity: 0;
    }

    &.dx-leave,
    &.dx-enter.dx-enter-active {
        -moz-transform: scale3d(1, 1, 1);
        -o-transform: scale3d(1, 1, 1);
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
        opacity: 1;
    }
}

/* end animations */