diff --git a/package.json b/package.json index 0f143848b..23f06ed89 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "fineui", - "version": "2.0.20221024170442", + "version": "2.0.20221025152411", "description": "fineui", "main": "dist/fineui_without_conflict.min.js", "types": "dist/lib/index.d.ts", diff --git a/src/less/base/single/button/button.half.less b/src/less/base/single/button/button.half.less index b652328fb..13bb7f996 100644 --- a/src/less/base/single/button/button.half.less +++ b/src/less/base/single/button/button.half.less @@ -6,10 +6,11 @@ &:after { position: absolute; - left: 2px; - top: 2px; - width: 8px; - height: 8px; + left: 50%; + top: 50%; + width: 50%; + height: 50%; + .transform(translate(-50%, -50%)); background-color: @color-bi-background-half-button-content; content: ''; } diff --git a/src/less/base/single/input/radio.less b/src/less/base/single/input/radio.less index 0a3345e42..a1aaa4071 100644 --- a/src/less/base/single/input/radio.less +++ b/src/less/base/single/input/radio.less @@ -2,13 +2,15 @@ .bi-radio { & .radio-content, &.radio-content { - .border-radius(8px); + .border-radius(50%); border: 1px solid @color-bi-border-radio; .box-sizing(border-box); .transition(all .1s); + &:after { content: ""; } + &.hover, &:hover { border-color: @color-bi-border-hover-active-radio; } @@ -18,16 +20,15 @@ border-color: @color-bi-border-hover-active-radio; background-color: @color-bi-background-active-radio; &:after { - width: 8px; - height: 8px; - display: table; + width: 50%; + height: 50%; position: absolute; top: 50%; left: 50%; - .border-radius(4px); + .border-radius(50%); background-color: @color-bi-background-active-radio-content; .transform(translate(-50%, -50%)); - @transition: all .1s cubic-bezier(.71,-.46,.88,.6),opacity .1s; + @transition: all .1s cubic-bezier(.71, -.46, .88, .6), opacity .1s; .transition(@transition); } } 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; -}*/