bk-vue-cec
Version:
一个为运维业务场景而生，好看易用的Vue2原创组件库，由T-inside Design进行托管社区化运作
1 lines • 6.14 kB
Source Map (JSON)
{"version":3,"sources":["slider.css"],"names":[],"mappings":"AAEA,WACI,mBAAa,CAAb,mBAAa,CAAb,YAAa,CACb,6BAAmB,CAAnB,4BAAmB,CAAnB,sBAAmB,CAAnB,kBAAmB,CACnB,wBAAmB,CAAnB,qBAAmB,CAAnB,kBAuFJ,CAtFI,6BACI,UAAW,CACX,UAAW,CACX,kBAAmB,CACnB,iBAAkB,CAClB,cAAe,CACf,qBAAsB,CACtB,SAAU,CACV,iBAsDJ,CArDI,4CACI,UAAW,CACX,0BAA2B,CAC3B,6BAA8B,CAC9B,iBAAkB,CAClB,kBAOJ,CANI,qDACI,SACJ,CACA,uDACI,UACJ,CAEJ,sCACI,kBACJ,CACA,+CACI,iBAmCJ,CAlCI,wDACI,SAAU,CACV,WAAY,CACZ,UAAW,CAEX,2BAAsB,CAAtB,yBAAsB,CAAtB,qBAEJ,CACA,kHAJI,mBAAa,CAAb,mBAAa,CAAb,YAAa,CACb,4BAAsB,CACtB,wBAA8B,CAA9B,qBAA8B,CAA9B,6BASJ,CAPA,0DACI,QAAS,CACT,UAAW,CACX,WAAY,CAEZ,6BAAmB,CAAnB,sBAAmB,CAAnB,kBAEJ,CACA,gEACI,iBAAkB,CAClB,UAAW,CACX,WAAY,CACZ,iBAAkB,CAClB,mBAAa,CAAb,mBAAa,CAAb,YAAa,CACb,wBAAmB,CAAnB,qBAAmB,CAAnB,kBAAmB,CACnB,uBAAuB,CAAvB,oBAAuB,CAAvB,sBAAuB,CACvB,kBASJ,CARI,yEACI,SAAU,CACV,iCAA0B,CAA1B,yBACJ,CACA,2EACI,QAAS,CACT,kCAA2B,CAA3B,0BACJ,CAIZ,+BACI,iBAAkB,CAClB,UAAW,CACX,SAAU,CACV,kBAAmB,CACnB,qBAAsB,CACtB,kCAA2B,CAA3B,0BAIJ,CAHI,wCACI,QACJ,CAEJ,iBACI,iBAAkB,CAClB,mBAAa,CAAb,mBAAa,CAAb,YAAa,CACb,6BAAmB,CAAnB,4BAAmB,CAAnB,sBAAmB,CAAnB,kBAAmB,CACnB,wBAAmB,CAAnB,qBAAmB,CAAnB,kBAOJ,CANI,6BACI,UACJ,CACA,+BACI,YACJ,CAGR,kBACI,WAAY,CACZ,UAAW,CACX,iBAAkB,CAClB,YAAa,CACb,4BAA6B,CAC7B,iBAAkB,CAClB,wBAAiB,CAAjB,qBAAiB,CAAjB,oBAAiB,CAAjB,gBAAiB,CACjB,kBAAmB,CACnB,mBAAa,CAAb,mBAAa,CAAb,YAAa,CACb,uBAAuB,CAAvB,oBAAuB,CAAvB,sBAAuB,CACvB,wBAAmB,CAAnB,qBAAmB,CAAnB,kBA8CJ,CA7CI,wBACI,mBAAY,CAAZ,WACJ,CACA,2BACI,uBAAgB,CAAhB,eACJ,CACA,2BACI,UAAW,CACX,iCAA0B,CAA1B,yBACJ,CACA,6BACI,SAAU,CACV,kCAA2B,CAA3B,0BACJ,CACA,iCACI,UAAW,CACX,WAAY,CACZ,wBAA+B,CAC/B,iBAAkB,CAClB,qBAAsB,CACtB,sBAAe,CAAf,cAAe,CACf,wBAAiB,CAAjB,qBAAiB,CAAjB,oBAAiB,CAAjB,gBAUJ,CATI,yCACI,wBACJ,CACA,uCACI,gDAAoD,CAApD,wCACJ,CACA,uCACI,iDAAoD,CAApD,yCACJ,CAEJ,uCACI,iBAAkB,CAClB,iBAAkB,CAClB,mBAAa,CAAb,mBAAa,CAAb,YAAa,CACb,wBAAmB,CAAnB,qBAAmB,CAAnB,kBAAmB,CACnB,uBAAuB,CAAvB,oBAAuB,CAAvB,sBAOJ,CANI,gDACI,SACJ,CACA,kDACI,QACJ","file":"slider.min.css","sourcesContent":["@import './variable.css';\r\n\r\n.bk-slider {\r\n display: flex;\r\n flex-direction: row;\r\n align-items: center;\r\n .bk-slider-runway {\r\n width: 100%;\r\n height: 4px;\r\n background: #dcdee5;\r\n position: relative;\r\n cursor: pointer;\r\n vertical-align: middle;\r\n opacity: 1;\r\n border-radius: 2px;\r\n .bk-slider-bar {\r\n height: 4px;\r\n border-top-left-radius: 3px;\r\n border-bottom-left-radius: 3px;\r\n position: absolute;\r\n background: #006DFF;\r\n &.vertical {\r\n width: 4px;\r\n }\r\n &.horizontal {\r\n height: 4px;\r\n }\r\n }\r\n .disable {\r\n background: #979ba5;\r\n }\r\n .bk-slider-labels {\r\n position: relative;\r\n &.vertical {\r\n left: 18px;\r\n height: 100%;\r\n width: 10px;\r\n display: flex;\r\n flex-direction: column;\r\n justify-content: space-between;\r\n }\r\n &.horizontal {\r\n top: 10px;\r\n width: 100%;\r\n height: 10px;\r\n display: flex;\r\n flex-direction: row;\r\n justify-content: space-between;\r\n }\r\n .bk-slider-label {\r\n position: absolute;\r\n width: 10px;\r\n height: 10px;\r\n text-align: center;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n white-space: nowrap;\r\n &.vertical {\r\n left: 10px;\r\n transform: translateY(50%);\r\n }\r\n &.horizontal {\r\n top: 10px;\r\n transform: translateX(-50%);\r\n }\r\n }\r\n }\r\n }\r\n .bk-slider-interval {\r\n position: absolute;\r\n height: 4px;\r\n width: 4px;\r\n border-radius: 100%;\r\n background-color: #fff;\r\n transform: translateX(-50%);\r\n &.vertical {\r\n left: 2px;\r\n }\r\n }\r\n &-input {\r\n margin: 0 0 0 28px;\r\n display: flex;\r\n flex-direction: row;\r\n align-items: center;\r\n .input-item {\r\n width: 56px;\r\n }\r\n .input-center {\r\n margin: 0 7px;\r\n }\r\n }\r\n}\r\n.bk-slider-button {\r\n height: 24px;\r\n width: 24px;\r\n position: absolute;\r\n z-index: 1001;\r\n background-color: transparent;\r\n text-align: center;\r\n user-select: none;\r\n line-height: normal;\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n &:hover {\r\n cursor: grab;\r\n }\r\n &.grabbing {\r\n cursor: grabbing;\r\n }\r\n &.vertical {\r\n left: -10px;\r\n transform: translateY(50%);\r\n }\r\n &.horizontal {\r\n top: -10px;\r\n transform: translateX(-50%);\r\n }\r\n .slider-button {\r\n width: 12px;\r\n height: 12px;\r\n border: 2px solid $newMainColor;\r\n border-radius: 50%;\r\n background-color: #fff;\r\n transition: .2s;\r\n user-select: none;\r\n &-disable {\r\n border: 2px solid #979ba5;\r\n }\r\n &:hover {\r\n box-shadow: 0px 0px 0px 4px rgba(58, 132, 255, 0.30);\r\n }\r\n &:focus {\r\n box-shadow: 0px 0px 10px 0px rgba(58, 132, 255, 0.9);\r\n }\r\n }\r\n .slider-button-label {\r\n position: absolute;\r\n text-align: center;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n &.vertical {\r\n left: 28px;\r\n }\r\n &.horizontal {\r\n top: 20px;\r\n }\r\n }\r\n}\r\n"]}