_actions-switcher.less

// /**
//  * Copyright © Magento, Inc. All rights reserved.
//  * See COPYING.txt for license details.
//  */

//
//  Yes/no switcher
//  _____________________________________________

//
//  Variables
//  _____________________________________________

@actions-switcher-speed: .2s;

@actions-switcher__background-color: @color-gray89;
@actions-switcher__border-radius: 12px;
@actions-switcher__border: 1px solid @color-gray65-lighten;
@actions-switcher__height: 22px;
@actions-switcher__width: 37px;

@actions-switcher-control__background-color: @color-white;

@actions-switcher-handler__background-color: @color-white;
@actions-switcher-handler__height: @actions-switcher__height;
@actions-switcher-handler__width: @actions-switcher__height;

//

.admin__actions-switch {
    display: inline-block;
    position: relative;
    vertical-align: middle;

    .admin__field-control & {
        line-height: @action__height;
    }

    + .admin__field-service {
        min-width: @field-size__m;
    }
}

.admin__actions-switch-checkbox {
    &:extend(.abs-visually-hidden all);

    ._disabled &,
    &.disabled {
        + .admin__actions-switch-label {
            cursor: not-allowed;
            opacity: @disabled__opacity;
            pointer-events: none;
        }
    }

    &:checked {
        + .admin__actions-switch-label {
            &:before {
                left: (@actions-switcher__width - @actions-switcher-handler__width);
            }

            &:after {
                background: @color-green-apple;
            }

            .admin__actions-switch-text {
                &:before {
                    content: attr(data-text-on);
                }
            }
        }
    }

    &:focus {
        + .admin__actions-switch-label {
            &:before,
            &:after {
                border-color: @field-control__focus__border-color;
            }
        }
    }

    ._error & {
        + .admin__actions-switch-label {
            &:before,
            &:after {
                border-color: @field-error-control__border-color;
            }
        }
    }
}

.admin__actions-switch-label {
    -moz-user-select: none;
    -ms-user-select: none;
    -webkit-user-select: none;
    cursor: pointer;
    display: inline-block;
    height: @actions-switcher__height;
    line-height: @actions-switcher__height;
    position: relative;
    user-select: none;
    vertical-align: middle;

    &:before,
    &:after {
        left: 0;
        position: absolute;
        right: auto;
        top: 0;
    }

    &:before {
        background: @actions-switcher-handler__background-color;
        border: @actions-switcher__border;
        border-radius: 100%;
        content: '';
        display: block;
        height: @actions-switcher-handler__height;
        transition: left @actions-switcher-speed ease-in 0s;
        width: @actions-switcher-handler__width;
        z-index: 1;
    }

    &:after {
        background: @actions-switcher__background-color;
        border: @actions-switcher__border;
        border-radius: @actions-switcher__border-radius;
        content: '';
        display: block;
        height: @actions-switcher__height;
        transition: background @actions-switcher-speed ease-in 0s;
        width: @actions-switcher__width;
        z-index: 0;
    }
}

.admin__actions-switch-text {
    &:before {
        content: attr(data-text-off);
        padding-left: (@actions-switcher__width + 10);
        white-space: nowrap;
    }
}