@cw-devops/bk-magic-vue/lib/ui/big-tree.min.css.map

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

{"version":3,"sources":["big-tree.css","mixins/scroller.css"],"names":[],"mappings":"AAUA,aACI,aAqBJ,CCtBI,gCACI,SAAU,CACV,UACJ,CACA,sCACI,eAAgB,CAChB,iBAAkB,CAClB,wBACJ,CDJI,oDACI,iBAAkB,CAClB,KAAM,CACN,MAAO,CACP,UAAW,CACX,WACJ,CAEJ,gCACI,iBAAkB,CAClB,cAAe,CACf,aACJ,CAEI,oDACI,cACJ,CAYR,kBACI,iBAAkB,CAClB,WAAY,CACZ,8CAAiD,CACjD,gBAAiB,CACjB,WAAY,CACZ,cAqIJ,CAnII,gCACI,cAAe,CACf,6CA+BJ,CA9BI,qDACI,UAAW,CACX,iBAAkB,CAClB,gCAAiC,CACjC,QAAS,CACT,gCAAiC,CACjC,gCAA8C,CAC9C,QAAS,CACT,SAAU,CACV,mBACJ,CACA,sCACI,iBAAkB,CAClB,QAAS,CACT,SAA6B,CAC7B,OAAQ,CACR,kCAAqC,CACrC,8BAA+B,CAC/B,UAAW,CACX,mBAAoB,CACpB,SACJ,CACA,wCACI,gBAAiB,CACjB,oDAKJ,CAJI,+CACI,gCAAqD,CACrD,gCACJ,CAGR,wBACI,wBACJ,CACA,8BACI,wBAQJ,CAPI,yCACI,UAAW,CACX,wBACJ,CACA,4CACI,aACJ,CAEJ,0BACI,qDACJ,CACA,8BACI,kBACJ,CACA,gCACI,WAwEJ,CAvEI,8CAlGJ,oBAAqB,CACrB,qBAAsB,CAmGd,UAAoB,CACpB,WAAsB,CACtB,gBAAiC,CACjC,wCAA6C,CAC7C,yBACJ,CACA,kDA1GJ,oBAAqB,CACrB,qBAAsB,CA2Gd,iBAAkB,CAClB,UAAoB,CACpB,WAAsB,CACtB,gBAAiC,CACjC,gBAA2B,CAC3B,iBAAkB,CAClB,cAAe,CACf,aAAc,CACd,SAIJ,CAHI,wDACI,aACJ,CAEJ,+CAzHJ,oBAAqB,CACrB,qBAAsB,CA0Hd,iBAAkB,CAClB,UAAW,CACX,WAAY,CACZ,gBAAkC,CAClC,wBAAyB,CACzB,iBAmCJ,CAlCI,0DACI,oBAAqB,CACrB,wBAAyB,CACzB,0BAiBJ,CAhBI,gEACI,UAAW,CACX,iBAAkB,CAClB,OAAQ,CACR,QAAS,CACT,SAAU,CACV,UAAW,CACX,qBAAsB,CACtB,aAAc,CACd,YAAa,CACb,+BAAwB,CAAxB,uBAAwB,CACxB,yCAAkC,CAAlC,iCACJ,CACA,sEACI,wBACJ,CAEJ,2DACI,oBAAqB,CACrB,kBACJ,CACA,gEACI,oBAAqB,CACrB,oBAAqB,CACrB,qBAAsB,CACtB,2BAIJ,CAHI,sEACI,iBACJ,CAGR,2CApKJ,oBAAqB,CACrB,qBAAsB,CAqKd,gBAAkC,CAClC,cACJ,CAEJ,gCA/KA,eAAgB,CAChB,sBAAuB,CACvB,kBAAmB,CA+Kf,cACJ","file":"big-tree.min.css","sourcesContent":["@import './mixins/scroller.css';\n@define-mixin ellipsis {\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n}\n@define-mixin inlineBlock $align: middle {\n    display: inline-block;\n    vertical-align: $align;\n}\n.bk-big-tree {\n    overflow: auto;\n    @mixin scroller;\n    &.with-virtual-scroll {\n        .bk-big-tree-empty {\n            position: absolute;\n            top: 0;\n            left: 0;\n            width: 100%;\n            height: 100%;\n        }\n    }\n    .bk-big-tree-empty {\n        text-align: center;\n        font-size: 14px;\n        color: #63656e;\n    }\n    &--small {\n        .bk-big-tree-node .node-content {\n            font-size: 12px;\n        }\n    }\n}\n\n/* 树伸缩触发器 icon */\n$triggerWidth: 20px;\n$triggerHeight: 20px;\n$triggerMarginRight: 2px;\n\n/* 节点 icon/checkbox */\n$nodeIconMarginRight: 8px;\n\n.bk-big-tree-node {\n    position: relative;\n    height: 32px;\n    padding-left: calc(var(--level) * var(--padding));\n    line-height: 32px;\n    font-size: 0;\n    cursor: pointer;\n\n    &.has-link-line {\n        padding-left: 0;\n        margin-left: calc(var(--level) * var(--padding));\n        &:not(.is-root):before {\n            content: \"\";\n            position: absolute;\n            width: calc(var(--padding) - 8px);\n            height: 0;\n            border-bottom: 1px dashed #c3cdd7;\n            left: calc(($triggerWidth/2) - var(--padding));\n            top: 20px;\n            z-index: 1;\n            pointer-events: none;\n        }\n        &:after {\n            position: absolute;\n            top: 28px;\n            left: calc($triggerWidth / 2);\n            width: 0;\n            height: calc(var(--line) * 1px - 8px);\n            border-left: 1px dashed #c3cdd7;\n            content: \"\";\n            pointer-events: none;\n            z-index: 1;\n        }\n        &.is-leaf {\n            padding-left: 8px;\n            margin-left: calc(var(--level) * var(--padding) + ($triggerWidth - 4px));\n            &:before {\n                width: calc(var(--padding) + ($triggerWidth/2 - 4px));\n                left: calc(0px - var(--padding) - ($triggerWidth/2 - 4px));\n            }\n        }\n    }\n    &:hover {\n        background-color: #f1f7ff;\n    }\n    &.is-selected {\n        background-color: #e1ecff;\n        .node-icon {\n            color: #fff;\n            background-color: #3a84ff;\n        }\n        .node-content {\n            color: #3a84ff;\n        }\n    }\n    &.is-leaf {\n        padding-left: calc(var(--level) * var(--padding) + $triggerWidth + $triggerMarginRight);\n    }\n    &.is-disabled {\n        cursor: not-allowed;\n    }\n    .node-options {\n        height: 100%;\n        .node-loading {\n            @mixin inlineBlock;\n            width: $triggerWidth;\n            height: $triggerHeight;\n            margin: 0 $triggerMarginRight 0 0;\n            background-image: url(\"./images/spinner.svg\");\n            background-size: 100% 100%;\n        }\n        .node-folder-icon {\n            @mixin inlineBlock;\n            position: relative;\n            width: $triggerWidth;\n            height: $triggerHeight;\n            margin: 0 $triggerMarginRight 0 0;\n            line-height: $triggerHeight;\n            text-align: center;\n            font-size: 12px;\n            color: #979ba5;\n            z-index: 2;\n            &:hover {\n                color: #63656e;\n            }\n        }\n        .node-checkbox {\n            @mixin inlineBlock;\n            position: relative;\n            width: 16px;\n            height: 16px;\n            margin: 0 $nodeIconMarginRight 0 0;\n            border: 1px solid #979ba5;\n            border-radius: 2px;\n            &.is-checked {\n                border-color: #3a84ff;\n                background-color: #3a84ff;\n                background-clip: border-box;\n                &:after {\n                    content: \"\";\n                    position: absolute;\n                    top: 1px;\n                    left: 4px;\n                    width: 4px;\n                    height: 8px;\n                    border: 2px solid #fff;\n                    border-left: 0;\n                    border-top: 0;\n                    transform-origin: center;\n                    transform: rotate(45deg) scaleY(1);\n                }\n                &.is-disabled {\n                    background-color: #dcdee5;\n                }\n            }\n            &.is-disabled {\n                border-color: #dcdee5;\n                cursor: not-allowed;\n            }\n            &.is-indeterminate {\n                border-width: 7px 4px;\n                border-color: #3a84ff;\n                background-color: #fff;\n                background-clip: content-box;\n                &:after {\n                    visibility: hidden;\n                }\n            }\n        }\n        .node-icon {\n            @mixin inlineBlock;\n            margin: 0 $nodeIconMarginRight 0 0;\n            font-size: 18px;\n        }\n    }\n    .node-content {\n        @mixin ellipsis;\n        font-size: 14px;\n    }\n}\n","/**\n * @file scroller mixin\n *\n * usage:\n *      @mixin scroller;\n *      @mixin scroller red;\n *      @mixin scroller green, 2px;\n */\n\n@define-mixin scroller $backgroundColor: #dcdee5, $width: 6px {\n    &::-webkit-scrollbar {\n        width: 6px;\n        height: 6px;\n    }\n    &::-webkit-scrollbar-thumb {\n        min-height: 24px;\n        border-radius: 3px;\n        background-color: $backgroundColor;\n    }\n}\n"]}