META-INF.resources.butterfaces-less.butterfaces-checkbox.less Maven / Gradle / Ivy

Go to download

Show more of this group Show more artifacts with this name
Show all versions of components Show documentation

The newest version!

.butter-component-checkbox.switch {
    .butter-input-component {
        display: none;
    }

    .butter-component-checkbox-description {
        margin-left: 28px;
    }

    .butter-component-value-readonly .butter-component-checkbox-description {
        margin-left: 8px;
    }

    .slider {
        float: left;
        margin-top: -3px;
        width: 40px;
        height: 26px;
        background-color: #ccc;
        bottom: 0;
        cursor: pointer;
        left: 0;
        position: absolute;
        right: 0;
        top: 0;
        transition: .4s;
    }

    .slider:before {
        background-color: #fff;
        bottom: 4px;
        content: "";
        height: 18px;
        left: 4px;
        position: absolute;
        transition: .4s;
        width: 18px;
    }

    .butter-component-value-readonly-wrapper {
        .slider {
            cursor: not-allowed;
            position: relative;
        }
    }

    .butter-component-value-readonly-wrapper.checked .slider,
    input:checked + .slider {
        background-color: #66bb6a;
    }

    .butter-component-value-readonly-wrapper.checked .slider:before,
    input:checked + .slider:before {
        transform: translateX(14px);
    }

    .slider.round {
        border-radius: 34px;
    }

    .slider.round:before {
        border-radius: 50%;
    }
}