bk-magic-vue/lib/ui/switcher.css

基于蓝鲸 Magicbox 和 Vue 的前端组件库

.bk-switcher{
    width:36px;
    height:20px;
    line-height:20px;
    position:relative;
    border-radius:50px;
    display:inline-block;
    vertical-align:middle;
    -webkit-transition:all .4s ease;
    transition:all .4s ease;
    background-color:#c4c6cc;
    text-align:left
}

.bk-switcher:focus{
        -webkit-box-shadow:0px 0px 6px #c4c6cc;
                box-shadow:0px 0px 6px #c4c6cc;
    }

.bk-switcher:after{
        left:2px;
        top:2px;
        content:"";
        height:24px;
        width:24px;
        border-radius:100px;
        display:block;
        -webkit-transition:all .3s ease;
        transition:all .3s ease;
        position:absolute;
        cursor:pointer;
        background:#fff;
        -webkit-box-shadow:0 0 3px rgba(0, 0, 0, .2);
                box-shadow:0 0 3px rgba(0, 0, 0, .2)
    }

.bk-switcher:not(.show-label):after{
        height:16px;
        width:16px;
    }

.bk-switcher:not(.show-label).is-checked:after{
            margin-left:-18px;
        }

.bk-switcher.is-loading{
        cursor:defalt;
    }

.bk-switcher.is-loading input[type=checkbox]{
            cursor:default;
        }

.bk-switcher{
}

.bk-switcher .bk-switcher-loading{
        width:18px;
        position:absolute;
        z-index:10;
        top:50%;
        left:1px;
        -webkit-transform:translateY(-50%);
                transform:translateY(-50%);
    }

.bk-switcher .switcher-label{
        width:30px;
        height:28px;
        font-size:12px;
        color:#fff;
        -webkit-transition:all ease 0.3s;
        transition:all ease 0.3s;
        font-weight:normal;
        display:none;
        margin:0 0 0 26px;
        text-align:center;
        vertical-align:top;
    }

.bk-switcher .switcher-label .on-text{
            display:none;
        }

.bk-switcher .switcher-label .off-text{
            display:inline-block
        }

.bk-switcher.show-label{
        width:60px;
        height:28px;
        line-height:28px;
    }

.bk-switcher.show-label .switcher-label{
            display:inline-block;
        }

.bk-switcher.show-label .bk-switcher-loading{
            width:26px;
        }

.bk-switcher.is-disabled{
        cursor:default;
        opacity:0.3;
    }

.bk-switcher.is-disabled input[type=checkbox]{
            cursor:not-allowed;
        }

.bk-switcher.is-checked{
        background:#2dcb56
    }

.bk-switcher.is-checked:focus{
            -webkit-box-shadow:0px 0px 6px #2dcb56;
                    box-shadow:0px 0px 6px #2dcb56;
        }

.bk-switcher.is-checked.primary{
            background:#3a84ff
        }

.bk-switcher.is-checked.primary:focus{
                -webkit-box-shadow:0px 0px 6px #3a84ff;
                        box-shadow:0px 0px 6px #3a84ff;
            }

.bk-switcher.is-checked:after{
            left:100%;
            top:2px;
            margin-left:-26px;
        }

.bk-switcher.is-checked .switcher-label{
            margin-left:4px;
        }

.bk-switcher.is-checked .switcher-label .on-text{
                display:inline-block;
            }

.bk-switcher.is-checked .switcher-label .off-text{
                display:none;
            }

.bk-switcher.is-checked .bk-switcher-loading{
            left:auto;
            right:1px;
        }

.bk-switcher.bk-switcher-outline{
        background:#fff;
        border:1px solid #c4c6cc
    }

.bk-switcher.bk-switcher-outline:after{
            width:22px;
            height:22px;
            -webkit-box-shadow:none;
                    box-shadow:none;
            background-color:#c4c6cc;
        }

.bk-switcher.bk-switcher-outline .switcher-label{
            height:26px;
            color:#c4c6cc;
            margin-left:24px;
        }

.bk-switcher.bk-switcher-outline.is-checked{
            border:1px solid #2dcb56
        }

.bk-switcher.bk-switcher-outline.is-checked:after{
                margin-left:-24px;
                background-color:#2dcb56;
            }

.bk-switcher.bk-switcher-outline.is-checked .switcher-label{
                color:#2dcb56;
                margin-left:4px;
            }

.bk-switcher.bk-switcher-outline.is-disabled{
            background-color:#fff !important;
            border-color:#eee !important;
        }

.bk-switcher.bk-switcher-outline.is-disabled .switcher-label{
                color:#eee;
            }

.bk-switcher.bk-switcher-outline.is-disabled:after{
                background-color:#eee;
            }

.bk-switcher.bk-switcher-outline.bk-switcher-large:after{
                width:18px;
                height:18px;
            }

.bk-switcher.bk-switcher-outline.bk-switcher-large.is-checked:after{
                    margin-left:-20px;
                }

.bk-switcher.bk-switcher-square{
        border-radius:2px
    }

.bk-switcher.bk-switcher-square:after{
            border-radius:2px;
        }

.bk-switcher.bk-switcher-square .switcher-label{
            width:35px;
        }

.bk-switcher.bk-switcher-large{
        width:42px;
        height:24px;
        line-height:22px;
        border-radius:12px
    }

.bk-switcher.bk-switcher-large:after{
            width:20px;
            height:20px;
        }

.bk-switcher.bk-switcher-large.is-checked:after{
                left:100%;
                top:2px;
                margin-left:-22px;
            }

.bk-switcher.bk-switcher-large .bk-switcher-loading{
            width:22px;
        }

.bk-switcher.bk-switcher-small{
        width:26px;
        height:16px;
        line-height:22px
    }

.bk-switcher.bk-switcher-small:after{
            width:12px;
            height:12px;
        }

.bk-switcher.bk-switcher-small.is-checked:after{
                left:100%;
                top:2px;
                margin-left:-14px;
            }

.bk-switcher.bk-switcher-small .bk-switcher-loading{
            width:14px;
        }

.bk-switcher input[type=checkbox],
    .bk-switcher input[type=radio]{
        opacity:0;
        width:100%;
        height:100%;
        position:absolute;
        z-index:1;
        cursor:pointer;
        left:0;
        top:0;
        margin:0;
    }