devextreme/less/sources/widgets/ios7/switch.ios7.less

HTML5 JavaScript Component Suite for Responsive Web Development

/**
* DevExtreme (widgets/ios7/switch.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/
*/
@import (once) "./validation.ios7.less";

@IOS7_SWITCH_HEIGHT: 31px;
@IOS7_SWITCH_WIDTH: 51px;
@IOS7_SWITCH_RADIUS: 16px;
@IOS7_SWITCH_BORDER_WIDTH: 2px;
@IOS7_SWITCH_HANDLE_SIZE: @IOS7_SWITCH_HEIGHT - 2 * @IOS7_SWITCH_BORDER_WIDTH;
@IOS7_SWITCH_ACTIVE_HANDLE_SIZE: 35px;

.dx-switch {
    &.dx-state-disabled {
        opacity: @IOS7_SWITCH_DISABLED_OPACITY;
    }
}

.dx-switch-on,
.dx-switch-off {
    display: none;
}

.dx-switch-inner {
    width: 200%;
    height: 100%;
    display: flex;
}

.dx-switch-container {
    position: relative;
    overflow: visible;
    min-width: @IOS7_SWITCH_WIDTH;
    width: 100%;
    height: @IOS7_SWITCH_HEIGHT;
    border-radius: @IOS7_SWITCH_RADIUS;
    background: @IOS7_SWITCH_OFF_BACKGROUND;
    transition: all 0.24s ease;

    &:before {
        position: absolute;
        display: block;
        top: @IOS7_SWITCH_BORDER_WIDTH;
        right: @IOS7_SWITCH_BORDER_WIDTH;
        bottom: @IOS7_SWITCH_BORDER_WIDTH;
        left: @IOS7_SWITCH_BORDER_WIDTH;
        content: " ";
        border-radius: @IOS7_SWITCH_RADIUS;
        background: @IOS7_SWITCH_OFF_INNER_BACKGROUND;
        transition: all 0.24s ease;
    }
}

.dx-switch-handle {
    flex-basis: @IOS7_SWITCH_HANDLE_SIZE;
    flex-shrink: 0;
    width: @IOS7_SWITCH_HANDLE_SIZE;
    height: @IOS7_SWITCH_HANDLE_SIZE;
    position: absolute;
    top: @IOS7_SWITCH_BORDER_WIDTH;
    left: 50%;
    margin-left: @IOS7_SWITCH_BORDER_WIDTH;
    bottom: @IOS7_SWITCH_BORDER_WIDTH;
    border-radius: @IOS7_SWITCH_RADIUS;
    background: @IOS7_SWITCH_HANDLE_BACKGROUND;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 4px 5px rgba(0, 0, 0, 0.2);
    transition: margin-left 0.24s ease 0s, left 0.24s ease 0s, width 0.14s ease 0.1s, transform 0.14s ease 0.1s;

    .dx-state-active & {
        width: @IOS7_SWITCH_ACTIVE_HANDLE_SIZE;
    }
}

.dx-switch-on-value {
    .dx-switch-container {
        background: @IOS7_SWITCH_ON_BACKGROUND;

        &:before {
            top: 50%;
            right: 50%;
            bottom: 50%;
            left: 50%;
            transition: all 0.06s ease;
        }
    }

    .dx-switch-handle {
        margin-left: 0 - @IOS7_SWITCH_BORDER_WIDTH;

        .dx-state-active& {
            transform: translate(@IOS7_SWITCH_HANDLE_SIZE - @IOS7_SWITCH_ACTIVE_HANDLE_SIZE, 0);
        }
    }
}

.dx-rtl {
    .dx-switch-handle {
        left: auto;
        right: 50%;
        margin-right: -@IOS7_SWITCH_HANDLE_SIZE;
        transition: margin-right 0.24s ease 0s, right 0.24s ease 0s, width 0.14s ease 0.1s, transform 0.14s ease 0.1s;

        .dx-state-active& {
            transform: translate(0, 0);
        }
    }

    .dx-switch-on-value& {
        .dx-switch-handle {
            margin-left: 0;
            margin-right: 0 - @IOS7_SWITCH_BORDER_WIDTH - @IOS7_SWITCH_HANDLE_SIZE;

            .dx-state-active& {
                transform: translate(@IOS7_SWITCH_ACTIVE_HANDLE_SIZE - @IOS7_SWITCH_HANDLE_SIZE, 0);
            }
        }
    }
}