@cw-devops/bk-magic-vue/lib/ui/resize-layout.min.css.map

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

{"version":3,"sources":["resize-layout.css"],"names":[],"mappings":"AAMA,kBACI,mBAAa,CAAb,mBAAa,CAAb,YAgNJ,CA/MI,yBACI,wBACJ,CAGQ,oFACI,eACJ,CACA,+EACI,oBAAqB,CACrB,gCAAyB,CAAzB,wBACJ,CAIR,uBACI,6BAAmB,CAAnB,4BAAmB,CAAnB,sBAAmB,CAAnB,kBAyBJ,CAvBI,+CACI,8BAqBJ,CApBI,qDACI,SAAU,CACV,OAAQ,CACR,uCAAkC,CAAlC,+BACJ,CACA,kEACI,KAAM,CACN,SAAU,CACV,SAAU,CACV,WAAY,CACZ,iBAIJ,CAHI,wEApCZ,oHAsCY,CAEJ,mEACI,SAAU,CACV,OAAQ,CACR,kCAA2B,CAA3B,0BACJ,CAIR,wBACI,6BAA2B,CAA3B,6BAA2B,CAA3B,8BAA2B,CAA3B,0BA0BJ,CAxBI,gDACI,6BAsBJ,CArBI,sDACI,QAAS,CACT,OAAQ,CACR,uCAAkC,CAAlC,+BACJ,CACA,mEACI,KAAM,CACN,UAAW,CACX,SAAU,CACV,WAAY,CACZ,iBAKJ,CAHI,yEAjEZ,mHAmEY,CAEJ,oEACI,UAAW,CACX,OAAQ,CACR,iDAA0C,CAA1C,yCACJ,CAIR,sBACI,2BAAsB,CAAtB,4BAAsB,CAAtB,yBAAsB,CAAtB,qBA2BJ,CAzBI,8CACI,+BAuBJ,CAtBI,oDACI,UAAW,CACX,QAAS,CACT,qDAAgD,CAAhD,6CACJ,CACA,iEACI,MAAO,CACP,QAAS,CACT,UAAW,CACX,UAAW,CACX,iBAKJ,CAHI,uEA9FZ,kHAgGY,CAEJ,kEACI,QAAS,CACT,QAAS,CACT,cAAe,CACf,wDAAmD,CAAnD,gDACJ,CAIR,yBACI,2BAA8B,CAA9B,6BAA8B,CAA9B,iCAA8B,CAA9B,6BA2BJ,CAzBI,iDACI,4BAuBJ,CAtBI,uDACI,OAAQ,CACR,QAAS,CACT,qDAAgD,CAAhD,6CACJ,CACA,oEACI,MAAO,CACP,WAAY,CACZ,UAAW,CACX,UAAW,CACX,iBAKJ,CAHI,0EA5HZ,oHA8HY,CAEJ,qEACI,WAAY,CACZ,QAAS,CACT,iBAAkB,CAClB,uDAAkD,CAAlD,+CACJ,CAIR,0CACI,iBA0DJ,CAzDI,gDACI,UAAW,CACX,iBAAkB,CAClB,SAAU,CACV,UAAW,CACX,aAAc,CACd,uBAAwB,CACxB,gHAA4G,CAA5G,wGACJ,CACA,0EACI,UAAW,CACX,WAAY,CACZ,eACJ,CACA,6DACI,iBAAkB,CAClB,4BAA6B,CAC7B,SACJ,CAEA,2DACI,iBAAkB,CAClB,iBAAkB,CAClB,mBAAoB,CACpB,YAeJ,CAbI,iIAEI,KAAM,CACN,WAAY,CACZ,8BACJ,CAEA,iIAEI,MAAO,CACP,UAAW,CACX,6BACJ,CAEJ,8DACI,iBAAkB,CAClB,UAAW,CACX,WAAY,CACZ,gBAAiB,CACjB,2BAAgC,CAChC,kBAAmB,CACnB,iBAAkB,CAClB,cAAe,CACf,UAAW,CACX,cAAe,CACf,gBAAiB,CACjB,SAIJ,CAHI,oEACI,kBACJ,CAIR,yCACI,kBAAO,CAAP,UAAO,CAAP,MAAO,CACP,eACJ,CAEA,kCACI,YAAa,CACb,cAAe,CACf,MAAO,CACP,OAAQ,CACR,KAAM,CACN,QAAS,CACT,YACJ","file":"resize-layout.min.css","sourcesContent":["@import './variable.css';\n\n@define-mixin linear-gradient $direction {\n    background-image: linear-gradient(to $direction, transparent, transparent 2px, $newMainColor 2px, $newMainColor 3px, transparent 3px, transparent);\n}\n\n.bk-resize-layout {\n    display: flex;\n    &-border {\n        border: 1px solid $newGreyColor1;\n    }\n    &-collapsed {\n        & > .bk-resize-layout-aside {\n            .bk-resize-layout-aside-content {\n                overflow: hidden;\n            }\n            .bk-resize-collapse:before {\n                display: inline-block;\n                transform: rotate(180deg);\n            }\n        }\n    }\n\n    &-left {\n        flex-direction: row;\n\n        & > .bk-resize-layout-aside {\n            border-right: 1px solid $newGreyColor1;\n            &:after {\n                right: 1px;\n                top: 50%;\n                transform: translate3d(0, -50%, 0);\n            }\n            .bk-resize-trigger {\n                top: 0;\n                left: 100%;\n                width: 5px;\n                height: 100%;\n                cursor: col-resize;\n                &:hover {\n                    @mixin linear-gradient left;\n                }\n            }\n            .bk-resize-collapse {\n                left: 100%;\n                top: 50%;\n                transform: translateY(-50%);\n            }\n        }\n    }\n\n    &-right {\n        flex-direction: row-reverse;\n\n        & > .bk-resize-layout-aside {\n            border-left: 1px solid $newGreyColor1;\n            &:after {\n                left: 1px;\n                top: 50%;\n                transform: translate3d(0, -50%, 0);\n            }\n            .bk-resize-trigger {\n                top: 0;\n                right: 100%;\n                width: 5px;\n                height: 100%;\n                cursor: col-resize;\n\n                &:hover {\n                    @mixin linear-gradient right;\n                }\n            }\n            .bk-resize-collapse {\n                right: 100%;\n                top: 50%;\n                transform: translateY(-50%) rotate(180deg);\n            }\n        }\n    }\n\n    &-top {\n        flex-direction: column;\n\n        & > .bk-resize-layout-aside {\n            border-bottom: 1px solid $newGreyColor1;\n            &:after {\n                bottom: 1px;\n                left: 50%;\n                transform: translate3d(-50%, 0, 0) rotate(90deg);\n            }\n            .bk-resize-trigger {\n                left: 0;\n                top: 100%;\n                width: 100%;\n                height: 5px;\n                cursor: row-resize;\n\n                &:hover {\n                    @mixin linear-gradient top;\n                }\n            }\n            .bk-resize-collapse {\n                top: 100%;\n                left: 50%;\n                margin-top: 8px;\n                transform: translate3d(-50%, -50%, 0) rotate(90deg);\n            }\n        }\n    }\n\n    &-bottom {\n        flex-direction: column-reverse;\n\n        & > .bk-resize-layout-aside {\n            border-top: 1px solid $newGreyColor1;\n            &:after {\n                top: 1px;\n                left: 50%;\n                transform: translate3d(-50%, 0, 0) rotate(90deg);\n            }\n            .bk-resize-trigger {\n                left: 0;\n                bottom: 100%;\n                width: 100%;\n                height: 5px;\n                cursor: row-resize;\n\n                &:hover {\n                    @mixin linear-gradient bottom;\n                }\n            }\n            .bk-resize-collapse {\n                bottom: 100%;\n                left: 50%;\n                margin-bottom: 8px;\n                transform: translate3d(50%, 50%, 0) rotate(-90deg);\n            }\n        }\n    }\n\n    & > .bk-resize-layout-aside {\n        position: relative;\n        &:after {\n            content: '';\n            position: absolute;\n            width: 2px;\n            height: 2px;\n            color: #c4c6cc;\n            background: currentColor;\n            box-shadow: 0 4px 0 0 currentColor, 0 8px 0 0 currentColor, 0 -4px 0 0 currentColor, 0 -8px 0 0 currentColor;\n        }\n        .bk-resize-layout-aside-content {\n            width: 100%;\n            height: 100%;\n            overflow: hidden;\n        }\n        .bk-resize-trigger {\n            position: absolute;\n            background-color: transparent;\n            z-index: 3;\n        }\n\n        .bk-resize-proxy {\n            visibility: hidden;\n            position: absolute;\n            pointer-events: none;\n            z-index: 9999;\n\n            &.left,\n            &.right {\n                top: 0;\n                height: 100%;\n                border-left: 1px dashed $newMainColor;\n            }\n\n            &.top,\n            &.bottom {\n                left: 0;\n                width: 100%;\n                border-top: 1px dashed $newMainColor;\n            }\n        }\n        .bk-resize-collapse {\n            position: absolute;\n            width: 16px;\n            height: 50px;\n            line-height: 50px;\n            border-radius: 0px 12px 12px 0px;\n            background: #dcdee5;\n            text-align: center;\n            font-size: 20px;\n            color: #fff;\n            cursor: pointer;\n            text-indent: -2px;\n            z-index: 2;\n            &:hover {\n                background: $newMainColor;\n            }\n        }\n    }\n\n    & > .bk-resize-layout-main {\n        flex: 1;\n        overflow: hidden;\n    }\n\n    .bk-resize-mask {\n        display: none;\n        position: fixed;\n        left: 0;\n        right: 0;\n        top: 0;\n        bottom: 0;\n        z-index: 9999;\n    }\n}\n"]}