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

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

{"version":3,"sources":["switcher.css"],"names":[],"mappings":"AACA,aAEI,UAAW,CACX,WAAY,CACZ,gBAAiB,CACjB,iBAAkB,CAClB,kBAAmB,CACnB,oBAAqB,CACrB,qBAAsB,CACtB,+BAAwB,CAAxB,uBAAwB,CACxB,wBAA+B,CAC/B,eA6NJ,CA5NI,mBACI,kCAAoC,CAApC,0BACJ,CACA,mBACI,QAAS,CACT,OAAQ,CACR,UAAW,CACX,WAAY,CACZ,UAAW,CACX,mBAAoB,CACpB,aAAc,CACd,+BAAwB,CAAxB,uBAAwB,CACxB,iBAAkB,CAClB,cAAe,CACf,eAAyB,CACzB,yCAAoC,CAApC,iCACJ,CACA,oCACI,WAAY,CACZ,UACJ,CAEI,+CACI,iBACJ,CAEJ,wBACI,aAIJ,CAHI,6CACI,cACJ,CAGJ,kCACI,UAAW,CACX,iBAAkB,CAClB,UAAW,CACX,OAAQ,CACR,QAAS,CACT,kCAA2B,CAA3B,0BACJ,CAEA,6BACI,UAAW,CACX,WAAY,CACZ,cAAe,CACf,UAAoB,CACpB,+BAAyB,CAAzB,uBAAyB,CACzB,eAAmB,CACnB,YAAa,CACb,iBAAkB,CAClB,iBAAkB,CAClB,kBAOJ,CANI,sCACI,YACJ,CACA,uCACI,oBACJ,CAIJ,wBACI,UAAW,CACX,WAAY,CACZ,gBAQJ,CAPI,wCACI,oBACJ,CAEA,6CACI,UACJ,CAGJ,yBACI,cAAe,CAEf,UAIJ,CAHI,8CACI,kBACJ,CAEJ,wBACI,kBA4BJ,CA3BI,8BACI,kCAAqC,CAArC,0BACJ,CACA,gCACI,kBAIJ,CAHI,sCACI,kCAAoC,CAApC,0BACJ,CAEJ,8BACI,SAAU,CACV,OAAQ,CACR,iBACJ,CACA,wCACI,eAOJ,CANI,iDACI,oBACJ,CACA,kDACI,YACJ,CAEJ,6CACI,SAAU,CACV,SACJ,CAEJ,iCACI,eAAyB,CACzB,wBA4CJ,CA3CI,uCACI,UAAW,CACX,WAAY,CACZ,uBAAgB,CAAhB,eAAgB,CAChB,wBACJ,CACA,iDACI,WAAY,CACZ,aAAoB,CACpB,gBACJ,CACA,4CACI,wBASJ,CARI,kDACI,iBAAkB,CAClB,wBACJ,CACA,4DACI,aAAqB,CACrB,eACJ,CAEJ,6CACI,+BAA0C,CAC1C,2BAOJ,CANI,6DACI,UACJ,CACA,mDACI,qBACJ,CAGA,yDACI,UAAW,CACX,WACJ,CAEI,oEACI,iBACJ,CAIZ,gCACI,iBAOJ,CANI,sCACI,iBACJ,CACA,gDACI,UACJ,CAEJ,+BACI,UAAW,CACX,WAAY,CACZ,gBAAiB,CACjB,kBAeJ,CAdI,qCACI,UAAW,CACX,WACJ,CAEI,gDACI,SAAU,CACV,OAAQ,CACR,iBACJ,CAEJ,oDACI,UACJ,CAEJ,+BACI,UAAW,CACX,WAAY,CACZ,gBAeJ,CAdI,qCACI,UAAW,CACX,WACJ,CAEI,gDACI,SAAU,CACV,OAAQ,CACR,iBACJ,CAEJ,oDACI,UACJ,CAEJ,iEAEI,SAAU,CACV,UAAW,CACX,WAAY,CACZ,iBAAkB,CAClB,SAAU,CACV,cAAe,CACf,MAAO,CACP,KAAM,CACN,QACJ","file":"switcher.min.css","sourcesContent":["@import './variable.css';\n.bk-switcher {\n    /* 默认尺寸 */\n    width: 36px;\n    height: 20px;\n    line-height: 20px;\n    position: relative;\n    border-radius: 50px;\n    display: inline-block;\n    vertical-align: middle;\n    transition: all .4s ease;\n    background-color: $newGreyColor;\n    text-align: left;\n    &:focus {\n        box-shadow:0px 0px 6px $newGreyColor;\n    }\n    &:after {\n        left: 2px;\n        top: 2px;\n        content: \"\";\n        height: 24px;\n        width: 24px;\n        border-radius: 100px;\n        display: block;\n        transition: all .3s ease;\n        position: absolute;\n        cursor: pointer;\n        background: $defaultColor;\n        box-shadow: 0 0 3px rgba(0, 0, 0, .2)\n    }\n    &:not(.show-label):after {\n        height: 16px;\n        width: 16px;\n    }\n    &:not(.show-label).is-checked {\n        &:after {\n            margin-left: -18px;\n        }\n    }\n    &.is-loading {\n        cursor: defalt;\n        input[type=checkbox] {\n            cursor: default;\n        }\n    }\n\n    .bk-switcher-loading {\n        width: 18px;\n        position: absolute;\n        z-index: 10;\n        top: 50%;\n        left: 1px;\n        transform: translateY(-50%);\n    }\n\n    .switcher-label {\n        width: 30px;\n        height: 28px;\n        font-size: 12px;\n        color: $defaultColor;\n        transition: all ease 0.3s;\n        font-weight: normal;\n        display: none;\n        margin: 0 0 0 26px;\n        text-align: center;\n        vertical-align: top;\n        .on-text {\n            display: none;\n        }\n        .off-text {\n            display: inline-block\n        }\n    }\n\n    /* 显示文本时固定尺寸 */\n    &.show-label {\n        width: 60px;\n        height: 28px;\n        line-height: 28px;\n        .switcher-label {\n            display: inline-block;\n        }\n\n        .bk-switcher-loading {\n            width: 26px;\n        }\n    }\n\n    &.is-disabled {\n        cursor: default;\n        /* background-color: #eee !important; */\n        opacity: 0.3;\n        input[type=checkbox] {\n            cursor: not-allowed;\n        }\n    }\n    &.is-checked {\n        background: $newGreenColor;\n        &:focus {\n            box-shadow:0px 0px 6px $newGreenColor;\n        }\n        &.primary {\n            background: $newMainColor;\n            &:focus {\n                box-shadow:0px 0px 6px $newMainColor;\n            }\n        }\n        &:after {\n            left: 100%;\n            top: 2px;\n            margin-left: -26px;\n        }\n        .switcher-label {\n            margin-left: 4px;\n            .on-text {\n                display: inline-block;\n            }\n            .off-text {\n                display: none;\n            }\n        }\n        .bk-switcher-loading {\n            left: auto;\n            right: 1px;\n        }\n    }\n    &.bk-switcher-outline {\n        background: $defaultColor;\n        border: 1px solid $newGreyColor;\n        &:after {\n            width: 22px;\n            height: 22px;\n            box-shadow: none;\n            background-color: $newGreyColor;\n        }\n        .switcher-label {\n            height: 26px;\n            color: $newGreyColor;\n            margin-left: 24px;\n        }\n        &.is-checked {\n            border: 1px solid $newGreenColor;\n            &:after {\n                margin-left: -24px;\n                background-color: $newGreenColor;\n            }\n            .switcher-label {\n                color: $newGreenColor;\n                margin-left: 4px;\n            }\n        }\n        &.is-disabled {\n            background-color: $defaultColor !important;\n            border-color: #eee !important;\n            .switcher-label {\n                color: #eee;\n            }\n            &:after {\n                background-color: #eee;\n            }\n        }\n        &.bk-switcher-large {\n            &:after {\n                width: 18px;\n                height: 18px;\n            }\n            &.is-checked {\n                &:after {\n                    margin-left: -20px;\n                }\n            }\n        }\n    }\n    &.bk-switcher-square {\n        border-radius: 2px;\n        &:after {\n            border-radius: 2px;\n        }\n        .switcher-label {\n            width: 35px;\n        }\n    }\n    &.bk-switcher-large {\n        width: 42px;\n        height: 24px;\n        line-height: 22px;\n        border-radius: 12px;\n        &:after {\n            width: 20px;\n            height: 20px;\n        }\n        &.is-checked {\n            &:after {\n                left: 100%;\n                top: 2px;\n                margin-left: -22px;\n            }\n        }\n        .bk-switcher-loading {\n            width: 22px;\n        }\n    }\n    &.bk-switcher-small {\n        width: 26px;\n        height: 16px;\n        line-height: 22px;\n        &:after {\n            width: 12px;\n            height: 12px;\n        }\n        &.is-checked {\n            &:after {\n                left: 100%;\n                top: 2px;\n                margin-left: -14px;\n            }\n        }\n        .bk-switcher-loading {\n            width: 14px;\n        }\n    }\n    input[type=checkbox],\n    input[type=radio] {\n        opacity: 0;\n        width: 100%;\n        height: 100%;\n        position: absolute;\n        z-index: 1;\n        cursor: pointer;\n        left: 0;\n        top: 0;\n        margin: 0;\n    }\n}\n"]}