diff --git a/src/less/base/tree/ztree.less b/src/less/base/tree/ztree.less index 1eb5896a6..341ab05f5 100644 --- a/src/less/base/tree/ztree.less +++ b/src/less/base/tree/ztree.less @@ -1,5 +1,10 @@ @import "../../index.less"; +.use-scale(@property, @pix) { + @{property} : @pix; //不支持css变量的浏览器 + @{property} : calc(var(--css-scale, 1) * @pix); +} + .ztree * { padding: 0; margin: 0; @@ -27,7 +32,7 @@ .ztree.solid li ul { margin: 0; - padding: 0 0 0 24px + .use-scale(padding-left, 24px); } // 此处不用2倍图,改用css画虚线 @@ -50,7 +55,7 @@ &:before { border-left: 1px solid @border-color-dark-gray-line; height: 100%; - left: 14px; + .use-scale(left, 14px); margin-top: 0; } } @@ -113,35 +118,8 @@ } .ztree.solid li a { - height: 30px; -} - -.ztree li a.curSelectedNode { -} - -.ztree li a.curSelectedNode_Edit { - padding-top: 0px; - background-color: #FFE6B0; - color: black; - height: 16px; - border: 1px #FFB951 solid; - opacity: 0.8; -} - -.ztree li a.tmpTargetNode_inner { - padding-top: 0px; - background-color: #316AC5; - color: white; - height: 16px; - border: 1px #316AC5 solid; - opacity: 0.8; - filter: alpha(opacity=80) -} - -.ztree li a.tmpTargetNode_prev { -} - -.ztree li a.tmpTargetNode_next { + //height: 30px; + .use-scale(height, 30px); } .ztree li a input.rename { @@ -163,7 +141,8 @@ } .ztree.solid li span { - line-height: 30px; + //line-height: 30px; + .use-scale(line-height, 30px); } .ztree li span.icon { @@ -183,10 +162,6 @@ vertical-align: middle; border: 0 none; cursor: pointer; - outline: none; - background-color: transparent; - background-repeat: no-repeat; - background-attachment: scroll; } .ztree li span.button.chk { @@ -218,56 +193,12 @@ .ztree li span.button.chk { position: relative; - width: 14px; - height: 14px; + .use-scale(width, 14px); + .use-scale(height, 14px); margin: 0 3px 0 0; cursor: auto } -.ztree li span.button.chk.checkbox_false_disable { - background-position: 0 -56px -} - -.ztree li span.button.chk.checkbox_true_disable { - background-position: -14px -56px -} - -.ztree li span.button.chk.radio_false_full { - background-position: -28px 0 -} - -.ztree li span.button.chk.radio_false_full_focus { - background-position: -28px -14px -} - -.ztree li span.button.chk.radio_false_part { - background-position: -28px -28px -} - -.ztree li span.button.chk.radio_false_part_focus { - background-position: -28px -42px -} - -.ztree li span.button.chk.radio_false_disable { - background-position: -28px -56px -} - -.ztree li span.button.chk.radio_true_full { - background-position: -42px 0 -} - -.ztree li span.button.chk.radio_true_full_focus { - background-position: -42px -14px; -} - -.ztree li span.button.chk.radio_true_part { - background-position: -42px -28px -} - -.ztree li span.button.chk.radio_true_part_focus { - background-position: -42px -42px -} - .ztree li span.button.chk.checkbox_true_full { & + a { color: @color-bi-text-highlight; @@ -292,73 +223,16 @@ } } -.ztree li span.button.chk.radio_true_disable { - background-position: -42px -56px -} - .ztree li span.button.switch { width: 24px; height: 24px } .ztree.solid li span.button.switch { - width: 30px; - height: 30px -} - -.ztree li span.button.switch.noline_open { - width: 0; -} - -.ztree li span.button.switch.noline_close { - width: 0; -} - -.ztree li span.button.noline_open { - background-position: -92px -72px -} - -.ztree li span.button.noline_close { - background-position: -74px -72px -} - -.ztree li span.button.root_docu { - background: none; -} - -.ztree li span.button.noline_docu { - background: none; - width: 0; -} - -.ztree li span.button.ico_open { - margin-right: 2px; - background-position: -110px -16px; - vertical-align: top; -} - -.ztree li span.button.ico_close { - margin-right: 2px; - background-position: -110px 0; - vertical-align: top; -} - -.ztree li span.button.ico_docu { - margin-right: 2px; - background-position: -110px -32px; - vertical-align: top; -} - -.ztree li span.button.edit { - margin-right: 2px; - background-position: -110px -48px; - vertical-align: top; -} - -.ztree li span.button.remove { - margin-right: 2px; - background-position: -110px -64px; - vertical-align: top; + .use-scale(width, 30px); + .use-scale(height, 30px); + //width: 30px; + //height: 30px; } .ztree li span.button.ico_loading { @@ -366,53 +240,3 @@ margin-right: 2px; vertical-align: top; } - -ul.tmpTargetzTree { - background-color: #FFE6B0; - opacity: 0.8; - filter: alpha(opacity=80) -} - -span.tmpzTreeMove_arrow { - width: 16px; - height: 16px; - display: inline-block; - padding: 0; - margin: 2px 0 0 1px; - border: 0 none; - position: absolute; - background-color: transparent; - background-repeat: no-repeat; - background-attachment: scroll; - background-position: -110px -80px; -} - -ul.ztree.zTreeDragUL { - margin: 0; - padding: 0; - position: absolute; - width: auto; - height: auto; - overflow: hidden; - background-color: #cfcfcf; - border: 1px #00B83F dotted; - opacity: 0.8; - filter: alpha(opacity=80) -} - -.zTreeMask { - z-index: 10000; - background-color: #cfcfcf; - opacity: 0.0; - filter: alpha(opacity=0); - position: absolute -} - -/* level style*/ -/*.ztree li span.button.level0 { - display:none; -} -.ztree li ul.level0 { - padding:0; - background:none; -}*/