v3-json-canvas/dist/css/json-edit/style.css

UI Components built on Vue3, Generating HTML 5 pages through JSON

.json-root{box-sizing:border-box}.json-root .ani-opacity,.json-root .ani-opacity:visited{opacity:1;transition:opacity .15s ease}.json-root .ani-opacity1:active,.json-root .ani-opacity1:focus{opacity:.1}.json-root .ani-opacity2:active,.json-root .ani-opacity2:focus{opacity:.2}.json-root .ani-opacity3:active,.json-root .ani-opacity3:focus{opacity:.3}.json-root .ani-opacity4:active,.json-root .ani-opacity4:focus{opacity:.4}.json-root .ani-opacity5:active,.json-root .ani-opacity5:focus{opacity:.5}.json-root .ani-opacity6:active,.json-root .ani-opacity6:focus{opacity:.6}.json-root .ani-opacity7:active,.json-root .ani-opacity7:focus{opacity:.7}.json-root .ani-opacity8:active,.json-root .ani-opacity8:focus{opacity:.8}.json-root .ani-opacity9:active,.json-root .ani-opacity9:focus{opacity:.9}.json-root .ani-scale{transform:scale(1);transition:transform .15s ease}.json-root .ani-scale10:active,.json-root .ani-scale10:focus{transform:scale(.1)}.json-root .ani-scale20:active,.json-root .ani-scale20:focus{transform:scale(.2)}.json-root .ani-scale30:active,.json-root .ani-scale30:focus{transform:scale(.3)}.json-root .ani-scale40:active,.json-root .ani-scale40:focus{transform:scale(.4)}.json-root .ani-scale50:active,.json-root .ani-scale50:focus{transform:scale(.5)}.json-root .ani-scale60:active,.json-root .ani-scale60:focus{transform:scale(.6)}.json-root .ani-scale70:active,.json-root .ani-scale70:focus{transform:scale(.7)}.json-root .ani-scale80:active,.json-root .ani-scale80:focus{transform:scale(.8)}.json-root .ani-scale90:active,.json-root .ani-scale90:focus{transform:scale(.9)}.json-root .ani-scale91:active,.json-root .ani-scale91:focus{transform:scale(.91)}.json-root .ani-scale92:active,.json-root .ani-scale92:focus{transform:scale(.92)}.json-root .ani-scale93:active,.json-root .ani-scale93:focus{transform:scale(.93)}.json-root .ani-scale94:active,.json-root .ani-scale94:focus{transform:scale(.94)}.json-root .ani-scale95:active,.json-root .ani-scale95:focus{transform:scale(.95)}.json-root .ani-scale96:active,.json-root .ani-scale96:focus{transform:scale(.96)}.json-root .ani-scale97:active,.json-root .ani-scale97:focus{transform:scale(.97)}.json-root .ani-scale98:active,.json-root .ani-scale98:focus{transform:scale(.98)}.json-root .ani-scale99:active,.json-root .ani-scale99:focus{transform:scale(.99)}.json-root .ani-up{transform:translateY(0);transition:transform .15s ease}.json-root .ani-up1:active,.json-root .ani-up1:focus{transform:translateY(-1%)}.json-root .ani-up2:active,.json-root .ani-up2:focus{transform:translateY(-2%)}.json-root .ani-up3:active,.json-root .ani-up3:focus{transform:translateY(-3%)}.json-root .ani-up4:active,.json-root .ani-up4:focus{transform:translateY(-4%)}.json-root .ani-up5:active,.json-root .ani-up5:focus{transform:translateY(-5%)}.json-root .ani-up6:active,.json-root .ani-up6:focus{transform:translateY(-6%)}.json-root .ani-up7:active,.json-root .ani-up7:focus{transform:translateY(-7%)}.json-root .ani-up8:active,.json-root .ani-up8:focus{transform:translateY(-8%)}.json-root .ani-up9:active,.json-root .ani-up9:focus{transform:translateY(-9%)}.json-root .ani-up10:active,.json-root .ani-up10:focus{transform:translateY(-10%)}.json-root .ani-up20:active,.json-root .ani-up20:focus{transform:translateY(-20%)}.json-root .ani-up30:active,.json-root .ani-up30:focus{transform:translateY(-30%)}.json-root .ani-up40:active,.json-root .ani-up40:focus{transform:translateY(-40%)}.json-root .ani-up50:active,.json-root .ani-up50:focus{transform:translateY(-50%)}.json-root .ani-up60:active,.json-root .ani-up60:focus{transform:translateY(-60%)}.json-root .ani-up70:active,.json-root .ani-up70:focus{transform:translateY(-70%)}.json-root .ani-up80:active,.json-root .ani-up80:focus{transform:translateY(-80%)}.json-root .ani-up90:active,.json-root .ani-up90:focus{transform:translateY(-90%)}.json-root .ani-down{transform:translateY(0);transition:transform .15s ease}.json-root .ani-down1:active,.json-root .ani-down1:focus{transform:translateY(1%)}.json-root .ani-down2:active,.json-root .ani-down2:focus{transform:translateY(2%)}.json-root .ani-down3:active,.json-root .ani-down3:focus{transform:translateY(3%)}.json-root .ani-down4:active,.json-root .ani-down4:focus{transform:translateY(4%)}.json-root .ani-down5:active,.json-root .ani-down5:focus{transform:translateY(5%)}.json-root .ani-down6:active,.json-root .ani-down6:focus{transform:translateY(6%)}.json-root .ani-down7:active,.json-root .ani-down7:focus{transform:translateY(7%)}.json-root .ani-down8:active,.json-root .ani-down8:focus{transform:translateY(8%)}.json-root .ani-down9:active,.json-root .ani-down9:focus{transform:translateY(9%)}.json-root .ani-down10:active,.json-root .ani-down10:focus{transform:translateY(10%)}.json-root .ani-down20:active,.json-root .ani-down20:focus{transform:translateY(20%)}.json-root .ani-down30:active,.json-root .ani-down30:focus{transform:translateY(30%)}.json-root .ani-down40:active,.json-root .ani-down40:focus{transform:translateY(40%)}.json-root .ani-down50:active,.json-root .ani-down50:focus{transform:translateY(50%)}.json-root .ani-down60:active,.json-root .ani-down60:focus{transform:translateY(60%)}.json-root .ani-down70:active,.json-root .ani-down70:focus{transform:translateY(70%)}.json-root .ani-down80:active,.json-root .ani-down80:focus{transform:translateY(80%)}.json-root .ani-down90:active,.json-root .ani-down90:focus{transform:translateY(90%)}.json-root .ani-left{transform:translateX(0);transition:transform .15s ease}.json-root .ani-left1:active,.json-root .ani-left1:focus{transform:translateX(-1%)}.json-root .ani-left2:active,.json-root .ani-left2:focus{transform:translateX(-2%)}.json-root .ani-left3:active,.json-root .ani-left3:focus{transform:translateX(-3%)}.json-root .ani-left4:active,.json-root .ani-left4:focus{transform:translateX(-4%)}.json-root .ani-left5:active,.json-root .ani-left5:focus{transform:translateX(-5%)}.json-root .ani-left6:active,.json-root .ani-left6:focus{transform:translateX(-6%)}.json-root .ani-left7:active,.json-root .ani-left7:focus{transform:translateX(-7%)}.json-root .ani-left8:active,.json-root .ani-left8:focus{transform:translateX(-8%)}.json-root .ani-left9:active,.json-root .ani-left9:focus{transform:translateX(-9%)}.json-root .ani-left10:active,.json-root .ani-left10:focus{transform:translateX(-10%)}.json-root .ani-left20:active,.json-root .ani-left20:focus{transform:translateX(-20%)}.json-root .ani-left30:active,.json-root .ani-left30:focus{transform:translateX(-30%)}.json-root .ani-left40:active,.json-root .ani-left40:focus{transform:translateX(-40%)}.json-root .ani-left50:active,.json-root .ani-left50:focus{transform:translateX(-50%)}.json-root .ani-left60:active,.json-root .ani-left60:focus{transform:translateX(-60%)}.json-root .ani-left70:active,.json-root .ani-left70:focus{transform:translateX(-70%)}.json-root .ani-left80:active,.json-root .ani-left80:focus{transform:translateX(-80%)}.json-root .ani-left90:active,.json-root .ani-left90:focus{transform:translateX(-90%)}.json-root .ani-right{transform:translateX(0);transition:transform .15s ease}.json-root .ani-right1:active,.json-root .ani-right1:focus{transform:translateX(1%)}.json-root .ani-right2:active,.json-root .ani-right2:focus{transform:translateX(2%)}.json-root .ani-right3:active,.json-root .ani-right3:focus{transform:translateX(3%)}.json-root .ani-right4:active,.json-root .ani-right4:focus{transform:translateX(4%)}.json-root .ani-right5:active,.json-root .ani-right5:focus{transform:translateX(5%)}.json-root .ani-right6:active,.json-root .ani-right6:focus{transform:translateX(6%)}.json-root .ani-right7:active,.json-root .ani-right7:focus{transform:translateX(7%)}.json-root .ani-right8:active,.json-root .ani-right8:focus{transform:translateX(8%)}.json-root .ani-right9:active,.json-root .ani-right9:focus{transform:translateX(9%)}.json-root .ani-right10:active,.json-root .ani-right10:focus{transform:translateX(10%)}.json-root .ani-right20:active,.json-root .ani-right20:focus{transform:translateX(20%)}.json-root .ani-right30:active,.json-root .ani-right30:focus{transform:translateX(30%)}.json-root .ani-right40:active,.json-root .ani-right40:focus{transform:translateX(40%)}.json-root .ani-right50:active,.json-root .ani-right50:focus{transform:translateX(50%)}.json-root .ani-right60:active,.json-root .ani-right60:focus{transform:translateX(60%)}.json-root .ani-right70:active,.json-root .ani-right70:focus{transform:translateX(70%)}.json-root .ani-right80:active,.json-root .ani-right80:focus{transform:translateX(80%)}.json-root .ani-right90:active,.json-root .ani-right90:focus{transform:translateX(90%)}.json-root .ani-gray{background:transparent;transition:all .15s ease}.json-root .ani-gray:active,.json-root .ani-gray:focus{background:#eee!important}.ant-input{box-sizing:border-box;margin:0;padding:0;font-variant:tabular-nums;list-style:none;font-feature-settings:"tnum";position:relative;display:inline-block;width:100%;height:32px;padding:4px 11px;color:rgba(0,0,0,.65);font-size:14px;line-height:1.5;background-color:#fff;background-image:none;border:1px solid #d9d9d9;border-radius:4px}.ant-input::-moz-placeholder{color:#bfbfbf;opacity:1}.ant-input:-ms-input-placeholder{color:#bfbfbf}.ant-input::-webkit-input-placeholder{color:#bfbfbf}.ant-input:-moz-placeholder-shown{text-overflow:ellipsis}.ant-input:-ms-input-placeholder{text-overflow:ellipsis}.ant-input:placeholder-shown{text-overflow:ellipsis}.ant-input:focus,.ant-input:hover{border-color:#40a9ff;border-right-width:1px!important}.ant-input:focus{outline:0;box-shadow:0 0 0 2px rgba(24,144,255,.2)}.ant-input-disabled{color:rgba(0,0,0,.25);background-color:#f5f5f5;cursor:not-allowed;opacity:1}.ant-input-disabled:hover{border-color:#d9d9d9;border-right-width:1px!important}.ant-input[disabled]{color:rgba(0,0,0,.25);background-color:#f5f5f5;cursor:not-allowed;opacity:1}.ant-input[disabled]:hover{border-color:#d9d9d9;border-right-width:1px!important}textarea.ant-input{max-width:100%;height:auto;min-height:32px;line-height:1.5;vertical-align:bottom;transition:all .3s,height 0s}.ant-select-dropdown{margin:0;padding:0;color:rgba(0,0,0,.65);font-variant:tabular-nums;line-height:1.5;list-style:none;font-feature-settings:"tnum";position:absolute;top:-9999px;left:-9999px;z-index:1050;box-sizing:border-box;font-size:14px;font-variant:normal;background-color:#fff;border-radius:4px;outline:none;box-shadow:0 2px 8px rgba(0,0,0,.15)}.dropdown-service{position:fixed;z-index:2000;box-shadow:0 2px 5px 1px #ddd;background-color:#fff;opacity:0;pointer-events:none;transition:opacity .2s linear;display:flex;max-width:90px;flex-wrap:wrap}.dropdown-service.dropdown-service-show{opacity:1;pointer-events:auto}.dropdown-service .dropdown-option{padding:8px 8px;font-size:14px;text-align:center;cursor:pointer}.dropdown-service .dropdown-option>i{font-size:14px}.dropdown-service .dropdown-option:hover{background-color:#ccc;cursor:pointer}.dropdown-service .dropdown-option span{display:inline-block}.global-modal{position:fixed;top:0;left:0;right:0;bottom:0;opacity:0;z-index:-1;display:flex;justify-content:center;align-items:center}.global-modal.global-modal-show{z-index:3001;opacity:1}.global-modal .global-modal-bg{position:absolute;left:0;top:0;width:100%;height:100%;background:rgba(0,0,0,.4);z-index:-1}.global-modal .global-modal-con{width:70vw;height:auto;position:absolute;background-color:#fff;border-radius:10px}.global-modal .modal-header{height:60px;line-height:60px;padding:0 0 0 20px;display:flex;justify-content:space-between;border-bottom:1px solid #eee}.global-modal .modal-title{font-size:16px;color:#333}.global-modal .modal-close{font-size:24px;color:#333;text-align:center;width:60px;cursor:pointer}.global-modal .modal-body{padding:20px}.global-modal .modal-footer{padding:20px;border-top:1px solid #eee;display:flex;justify-content:flex-end}.scale-rect-dot{position:absolute;width:6px;height:6px;background-color:#00f;z-index:1999}.scale-rect-dot.dot-top-left{cursor:nw-resize}.scale-rect-dot.dot-bottom-right{cursor:se-resize}.scale-rect-dot.dot-top-right{cursor:ne-resize}.scale-rect-dot.dot-bottom-left{cursor:sw-resize}.scale-rect-dot.dot-center-left,.scale-rect-dot.dot-center-right{cursor:w-resize}.scale-rect-dot.dot-center-bottom,.scale-rect-dot.dot-center-top{cursor:ns-resize}.help-line-item{position:absolute;z-index:1999}.help-line-x{height:0;width:100%;left:0;border-top:1px dashed red}.help-line-y{width:0;height:100%;top:0;border-right:1px dashed red}.scale-rect-line{position:absolute;z-index:1998}.scale-rect-line-x{height:0;border-top:1px dashed #00f}.scale-rect-line-y{width:0;border-left:1px dashed #00f}.comp-menu .comp-menu-drag{margin:0 auto;border-bottom:1px solid rgba(0,0,0,.1);border-left:5px solid #40a9ff;cursor:pointer;position:relative;width:100%;height:50px;margin:5px 0;background:#fff;box-sizing:border-box}.comp-menu .comp-menu-drag:hover{background-color:#f4f4f4}.comp-menu .comp-menu-drag-cover{position:absolute;top:0;left:0;width:100%;height:100%;z-index:1}.comp-menu .comp-menu-cover-text{position:absolute;bottom:0;left:0;width:100%;height:50px;line-height:50px;color:#40a9ff;text-indent:10px;font-size:14px;font-weight:600}.comp-menu .comp-menu-drag-con{height:65px;display:flex;justify-content:center;align-items:center;padding:0 20px}.comp-option{padding-bottom:50px;color:#333;text-align:left}.comp-option .comp-option-section{padding:5px 10px}.comp-option .section-item-divid-text{line-height:17px;color:#40a9ff;font-size:14px;padding:0 0}.comp-option .section-item{display:flex;padding:3px 0;flex-direction:column;justify-content:space-evenly;align-items:flex-start}.comp-option .section-item .section-item-title{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;text-align:left;font-size:12px}.comp-option .section-item .section-item-con{flex:1;width:100%}.comp-option .section-item .section-item-con .ant-input{font-size:12px}.comp-option .section-item-divid-tell{font-size:12px;line-height:15px;color:#999;margin-bottom:10px;text-indent:25px}.comp-canves{background:#fff}.comp-canves-wrap [iscontainer]{position:relative}.comp-canves-wrap .drop-container-active-inner{background-color:#dfebf6!important}.comp-canves-wrap .drop-container-active-prev{border-top:2px dashed #1890ff!important}.comp-canves-wrap .drop-container-active-next{border-bottom:2px dashed #1890ff!important}.comp-canves-wrap .drop-element-is-moving:after{display:inline-block;content:"";position:absolute;left:-2px;top:-2px;bottom:-2px;right:-2px;z-index:1;cursor:move}.comp-canves-wrap .drop-element-is-moving[isroot]:after{cursor:auto}.top-bar{display:flex;justify-content:center;align-items:center}.top-bar .top-bar-item{height:30px;line-height:30px;padding:0 5px;text-align:center;background:#40a9ff;margin:0 1px;display:flex;align-items:center;cursor:-webkit-grabbing;cursor:grabbing;box-sizing:border-box;font-size:14px;color:#fff}.top-bar .top-bar-item:hover{background:#64b9ff}.json-test-box{position:fixed;top:0;left:0;z-index:1000;background-color:#fff}.json-test-box .comp-menu-wrap{left:0}.json-test-box .comp-menu-wrap,.json-test-box .comp-option-wrap{position:fixed;top:0;width:200px;height:100vh;z-index:2000;overflow-y:scroll;background:#f9f9f9}.json-test-box .comp-option-wrap{right:0;border-left:1px solid rgba(0,0,0,.1);transition:width .15s linear}.json-test-box .comp-option-wrap .comp-option-operate{position:absolute;top:10px;right:10px;font-size:12px;padding:5px;background:#6495ed;color:#fff;cursor:pointer}.json-test-box .comp-canves-wrap{margin:0 200px 0 200px;overflow-y:auto;overflow-x:auto;padding:6vh 0 4vh;height:90vh;width:calc(100vw - 400px);background:#e2e2e2;display:flex;justify-content:left;-moz-user-select:none;-webkit-user-select:none;-ms-user-select:none;user-select:none}.json-test-box .top-bar-wrap{position:absolute;top:10px;left:50%;transform:translateX(-50%);z-index:1199}.json-test-box .comp-tree{position:fixed;top:0;left:0;width:200px;background:#fff;color:#333;height:100vh;z-index:2001;overflow-y:auto;overflow-x:auto}.json-test-box .comp-tree .comp-tree-item-text{cursor:pointer;line-height:25px;padding-left:5px;font-size:14px}.json-test-box .comp-tree .comp-tree-item-text:hover{background:#f4f4f4;color:#00f;font-weight:700}.json-test-box .comp-tree .comp-tree-item{margin-left:35px;border-left:1px dashed #40a9ff;width:100%}.json-test-box .comp-tree>.comp-tree-item{margin-left:0;border:none}
/*# sourceMappingURL=style.css.map */