@import "../../index.less"; .use-scale(@property, @pix) { @{property} : @pix; //不支持css变量的浏览器 @{property} : calc(var(--css-scale, 1) * @pix); } .ztree * { padding: 0; margin: 0; } .ztree { margin: 0; padding: 5px; } .ztree li { padding: 0; margin: 0; list-style: none; line-height: 14px; text-align: left; white-space: pre; outline: 0; } .ztree li ul { margin: 0; padding: 0 0 0 18px } .ztree.solid li ul { margin: 0; .use-scale(padding-left, 24px); } // 此处不用2倍图,改用css画虚线 // z-tree的line是一整块子节点区域,所以不能使用background-size: contain // 使用1倍图太模糊,这边就使用css自己画了,calc属性支持IE9, IE8反正会走hack, 不影响 .ztree li ul.line { position: relative; &:before { position: absolute; content: ''; border-left: 1px dashed @border-color-dark-gray-line; height: calc(~"100% - 3px"); left: 11px; margin-top: 1px; } } .ztree.solid li ul.line { &:before { border-left: 1px solid @border-color-dark-gray-line; height: 100%; .use-scale(left, 14px); margin-top: 0; } } .bi-theme-dark { .ztree li ul.line { &:before { border-left: 1px dashed @border-color-dark-gray-line; } } .ztree.solid li ul.line { &:before { border-left: 1px solid @border-color-dark-gray-line-theme-dark; } } &.bi-checkbox { border: 1px solid @color-bi-border-checkbox-theme-dark; &.active { background-color: @color-bi-background-active-checkbox-theme-dark; border-color: @color-bi-border-hover-active-checkbox-theme-dark; } &.disabled { background-color: @color-bi-background-disabled-checkbox-theme-dark; &.active { border-color: @color-bi-border-disabled-checkbox-theme-dark; } } } .ztree li span.button.chk { &.bi-checkbox { border-color: @color-bi-border-dark-line-theme-dark; } } &.bi-half-button { border: 1px solid @color-bi-border-hover-active-checkbox-theme-dark; } } .ztree li a { padding: 0 3px 0 0; margin: 0; cursor: pointer; height: 24px; background-color: transparent; text-decoration: none; vertical-align: top; display: inline-block; &:not(.disabled) { &:hover { .background-color(@color-bi-background-highlight, 10%); } &:active { color: @color-bi-text-highlight; .background-color(@color-bi-background-highlight, 15%); } } } .ztree.solid li a { //height: 30px; .use-scale(height, 30px); } .ztree li a input.rename { height: 14px; width: 80px; padding: 0; margin: 0; font-size: 12px; border: 1px #7EC4CC solid; } .ztree li span { line-height: 24px; margin-right: 2px; // fix: 标红字符与正常字符存在间距 &.bi-keyword-red-mark { margin-right: 0px; } } .ztree.solid li span { //line-height: 30px; .use-scale(line-height, 30px); } .ztree li span.icon { display: inline-block; text-align: center; width: 16px; height: 16px; line-height: 16px; padding: 0 2px; vertical-align: middle; } .ztree li span.button { line-height: 0; margin: 0; display: inline-block; vertical-align: middle; border: 0 none; cursor: pointer; } .ztree li span.button.chk { &.bi-checkbox { border: 1px solid @color-bi-border-dark-line; box-sizing: border-box; &.active { background-color: @color-bi-background-highlight; border-color: @color-bi-border-highlight; } &.disabled { border: 1px solid @color-bi-border-disabled; background-color: @color-bi-background-disabled; &.active { border-color: @color-bi-border-disabled; } } } &.bi-half-button { border: 1px solid @color-bi-border-highlight; box-sizing: border-box; } } .ztree.solid li span.button.roots_docu { background: none; position: relative; &:before { position: absolute; bottom: 0; left: -1px; width: 50%; height: 50%; border-right: 1px solid @border-color-dark-gray-line; content: ''; } &:after { position: absolute; top: 0; right: 0; height: 50%; width: 50%; border-bottom: 1px solid @border-color-dark-gray-line; content: ''; } } .ztree.solid li span.button.center_docu { background: none; position: relative; &:before { position: absolute; top: 0; left: -1px; width: 50%; height: 100%; border-right: 1px solid @border-color-dark-gray-line; content: ''; } &:after { position: absolute; top: 0; right: 0; height: 50%; width: 50%; border-bottom: 1px solid @border-color-dark-gray-line; content: ''; } } .ztree.solid li span.button.bottom_docu { background: none; position: relative; &:before { position: absolute; top: 0; left: -1px; width: 50%; height: 50%; border-right: 1px solid @border-color-dark-gray-line; content: ''; } &:after { position: absolute; top: 0; right: 1px; height: 50%; width: 50%; border-bottom: 1px solid @border-color-dark-gray-line; content: ''; } } .bi-theme-dark { .ztree.solid li span.button.center_docu, .ztree.solid li span.button.bottom_docu { &:before { border-right: 1px solid @border-color-dark-gray-line-theme-dark; } &:after { border-bottom: 1px solid @border-color-dark-gray-line-theme-dark; } } } .ztree li span.button.chk { position: relative; .use-scale(width, 14px); .use-scale(height, 14px); margin: 0 3px 0 0; cursor: auto } .ztree li span.button.chk.checkbox_true_full { & + a { color: @color-bi-text-highlight; } } .ztree li span.button.chk.checkbox_true_full_focus { & + a { color: @color-bi-text-highlight; } } .ztree li span.button.chk.checkbox_true_part { & + a { color: @color-bi-text-highlight; } } .ztree li span.button.chk.checkbox_true_part_focus { & + a { color: @color-bi-text-highlight; } } .ztree li span.button.switch { width: 24px; height: 24px } .ztree.solid li span.button.switch { .use-scale(width, 30px); .use-scale(height, 30px); //width: 30px; //height: 30px; } .ztree li span.button.ico_loading { width: 0px; margin-right: 2px; vertical-align: top; }