@gofynd/nitrozen-vue/src/components/NToggleBtn/NToggleBtn.less

Fynd Design Library for Vue

@import './../../base/base.less';

.nitrozen-toggle-container {
    display: flex;
    align-items: center;
    .nitrozen-switch {
        position: relative;
        display: inline-block;
        height: 14px;	
        width: 34px;
        margin: 0px 10px;
        .nitrozen-disabled {
            cursor: not-allowed !important;
        }
        input {
            opacity: 0;
            width: 0;
            height: 0;
        }
        .nitrozen-slider {
            position: absolute;
            cursor: pointer;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: @TypographySecondaryColor;
            -webkit-transition: 0.4s;
            transition: 0.4s;
        }
        .nitrozen-slider:before {
            position: absolute;
            content: '';
            height: 20px;
            width: 20px;        
            right: 15px;
            bottom: -2px;
            // left: 0px;
            left: -2px;
            background-color: @WhiteColor;
            box-shadow: 0 0 1px 0 rgba(0,0,0,0.12), 0 1px 1px 0 rgba(0,0,0,0.24);
            -webkit-transition: 0.4s;
            transition: 0.4s;
        }
        input:checked + .nitrozen-slider {
            background-color: #A9B1EA;
        }
        input:focus + .nitrozen-slider {
            box-shadow: 0 0 1px @SecondaryColor;
        }
        input:checked + .nitrozen-slider:before {
            -webkit-transform: translateX(35px);
            -ms-transform: translateX(35px);
            transform: translateX(35px);
            background-color: @SecondaryColor;
            left: -20px;            
        }
    }
}
.nitrozen-slider.nitrozen-round {
    border-radius: 30px;
}
.nitrozen-slider.nitrozen-round:before {
    border-radius: 50%;
}