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

一个为运维业务场景而生，好看易用的Vue2原创组件库，由T-inside Design进行托管社区化运作

{"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';\r\n.bk-switcher {\r\n    /* 默认尺寸 */\r\n    width: 36px;\r\n    height: 20px;\r\n    line-height: 20px;\r\n    position: relative;\r\n    border-radius: 50px;\r\n    display: inline-block;\r\n    vertical-align: middle;\r\n    transition: all .4s ease;\r\n    background-color: $newGreyColor;\r\n    text-align: left;\r\n    &:focus {\r\n        box-shadow:0px 0px 6px $newGreyColor;\r\n    }\r\n    &:after {\r\n        left: 2px;\r\n        top: 2px;\r\n        content: \"\";\r\n        height: 24px;\r\n        width: 24px;\r\n        border-radius: 100px;\r\n        display: block;\r\n        transition: all .3s ease;\r\n        position: absolute;\r\n        cursor: pointer;\r\n        background: $defaultColor;\r\n        box-shadow: 0 0 3px rgba(0, 0, 0, .2)\r\n    }\r\n    &:not(.show-label):after {\r\n        height: 16px;\r\n        width: 16px;\r\n    }\r\n    &:not(.show-label).is-checked {\r\n        &:after {\r\n            margin-left: -18px;\r\n        }\r\n    }\r\n    &.is-loading {\r\n        cursor: defalt;\r\n        input[type=checkbox] {\r\n            cursor: default;\r\n        }\r\n    }\r\n\r\n    .bk-switcher-loading {\r\n        width: 18px;\r\n        position: absolute;\r\n        z-index: 10;\r\n        top: 50%;\r\n        left: 1px;\r\n        transform: translateY(-50%);\r\n    }\r\n\r\n    .switcher-label {\r\n        width: 30px;\r\n        height: 28px;\r\n        font-size: 12px;\r\n        color: $defaultColor;\r\n        transition: all ease 0.3s;\r\n        font-weight: normal;\r\n        display: none;\r\n        margin: 0 0 0 26px;\r\n        text-align: center;\r\n        vertical-align: top;\r\n        .on-text {\r\n            display: none;\r\n        }\r\n        .off-text {\r\n            display: inline-block\r\n        }\r\n    }\r\n\r\n    /* 显示文本时固定尺寸 */\r\n    &.show-label {\r\n        width: 60px;\r\n        height: 28px;\r\n        line-height: 28px;\r\n        .switcher-label {\r\n            display: inline-block;\r\n        }\r\n\r\n        .bk-switcher-loading {\r\n            width: 26px;\r\n        }\r\n    }\r\n\r\n    &.is-disabled {\r\n        cursor: default;\r\n        /* background-color: #eee !important; */\r\n        opacity: 0.3;\r\n        input[type=checkbox] {\r\n            cursor: not-allowed;\r\n        }\r\n    }\r\n    &.is-checked {\r\n        background: $newGreenColor;\r\n        &:focus {\r\n            box-shadow:0px 0px 6px $newGreenColor;\r\n        }\r\n        &.primary {\r\n            background: $newMainColor;\r\n            &:focus {\r\n                box-shadow:0px 0px 6px $newMainColor;\r\n            }\r\n        }\r\n        &:after {\r\n            left: 100%;\r\n            top: 2px;\r\n            margin-left: -26px;\r\n        }\r\n        .switcher-label {\r\n            margin-left: 4px;\r\n            .on-text {\r\n                display: inline-block;\r\n            }\r\n            .off-text {\r\n                display: none;\r\n            }\r\n        }\r\n        .bk-switcher-loading {\r\n            left: auto;\r\n            right: 1px;\r\n        }\r\n    }\r\n    &.bk-switcher-outline {\r\n        background: $defaultColor;\r\n        border: 1px solid $newGreyColor;\r\n        &:after {\r\n            width: 22px;\r\n            height: 22px;\r\n            box-shadow: none;\r\n            background-color: $newGreyColor;\r\n        }\r\n        .switcher-label {\r\n            height: 26px;\r\n            color: $newGreyColor;\r\n            margin-left: 24px;\r\n        }\r\n        &.is-checked {\r\n            border: 1px solid $newGreenColor;\r\n            &:after {\r\n                margin-left: -24px;\r\n                background-color: $newGreenColor;\r\n            }\r\n            .switcher-label {\r\n                color: $newGreenColor;\r\n                margin-left: 4px;\r\n            }\r\n        }\r\n        &.is-disabled {\r\n            background-color: $defaultColor !important;\r\n            border-color: #eee !important;\r\n            .switcher-label {\r\n                color: #eee;\r\n            }\r\n            &:after {\r\n                background-color: #eee;\r\n            }\r\n        }\r\n        &.bk-switcher-large {\r\n            &:after {\r\n                width: 18px;\r\n                height: 18px;\r\n            }\r\n            &.is-checked {\r\n                &:after {\r\n                    margin-left: -20px;\r\n                }\r\n            }\r\n        }\r\n    }\r\n    &.bk-switcher-square {\r\n        border-radius: 2px;\r\n        &:after {\r\n            border-radius: 2px;\r\n        }\r\n        .switcher-label {\r\n            width: 35px;\r\n        }\r\n    }\r\n    &.bk-switcher-large {\r\n        width: 42px;\r\n        height: 24px;\r\n        line-height: 22px;\r\n        border-radius: 12px;\r\n        &:after {\r\n            width: 20px;\r\n            height: 20px;\r\n        }\r\n        &.is-checked {\r\n            &:after {\r\n                left: 100%;\r\n                top: 2px;\r\n                margin-left: -22px;\r\n            }\r\n        }\r\n        .bk-switcher-loading {\r\n            width: 22px;\r\n        }\r\n    }\r\n    &.bk-switcher-small {\r\n        width: 26px;\r\n        height: 16px;\r\n        line-height: 22px;\r\n        &:after {\r\n            width: 12px;\r\n            height: 12px;\r\n        }\r\n        &.is-checked {\r\n            &:after {\r\n                left: 100%;\r\n                top: 2px;\r\n                margin-left: -14px;\r\n            }\r\n        }\r\n        .bk-switcher-loading {\r\n            width: 14px;\r\n        }\r\n    }\r\n    input[type=checkbox],\r\n    input[type=radio] {\r\n        opacity: 0;\r\n        width: 100%;\r\n        height: 100%;\r\n        position: absolute;\r\n        z-index: 1;\r\n        cursor: pointer;\r\n        left: 0;\r\n        top: 0;\r\n        margin: 0;\r\n    }\r\n}\r\n"]}