fix: 优化半屏弹窗的头部图标，使背景透明化，weui-icon-btn_close更名为weui-icon-close-thin，we…

…ui-icon-btn_more更名为weui-icon-more，weui-icon-btn_goback更名为weui-icon-back-arrow-thin
Tencent · Jan 16, 2020 · 0c2c0c1 · 0c2c0c1
1 parent ae86a50
commit 0c2c0c1
Show file tree

Hide file tree

Showing 6 changed files with 39 additions and 48 deletions.
diff --git a/dist/example/index.html b/dist/example/index.html
@@ -943,7 +943,7 @@ <h2 class="weui-form__title">验证码</h2>
           <div id="js_half_screen_dialog" class="weui-half-screen-dialog">
               <div class="weui-half-screen-dialog__hd">
                 <div class="weui-half-screen-dialog__hd__side">
-                  <button id="dialogClose" class="weui-icon-btn weui-icon-btn_close">关闭</button>
+                    <button id="dialogClose" class="weui-icon-btn">关闭<i class="weui-icon-close-thin"></i></button>
                 </div>
                 <div class="weui-half-screen-dialog__hd__main">
                   <strong class="weui-half-screen-dialog__title">标题</strong>
@@ -1613,7 +1613,7 @@ <h1 class="page__title">Half-screen Dialog</h1>
             <div id="js_dialog_1" class="weui-half-screen-dialog">
                 <div class="weui-half-screen-dialog__hd">
                   <div class="weui-half-screen-dialog__hd__side">
-                    <button class="weui-icon-btn weui-icon-btn_close">关闭</button>
+                    <button class="weui-icon-btn">关闭<i class="weui-icon-close-thin"></i></button>
                   </div>
                   <div class="weui-half-screen-dialog__hd__main">
                     <strong class="weui-half-screen-dialog__title">标题</strong>
@@ -1637,15 +1637,15 @@ <h1 class="page__title">Half-screen Dialog</h1>
             <div id="js_dialog_2" class="weui-half-screen-dialog">
                 <div class="weui-half-screen-dialog__hd">
                   <div class="weui-half-screen-dialog__hd__side">
-                    <button style="display:none;" class="weui-icon-btn weui-icon-btn_goback">返回</button>
-                    <button class="weui-icon-btn weui-icon-btn_close">关闭</button>
+                    <button style="display:none;" class="weui-icon-btn">返回<i class="weui-icon-back-arrow-thin"></i></button>
+                    <button class="weui-icon-btn">关闭<i class="weui-icon-close-thin"></i></button>
                   </div>
                   <div class="weui-half-screen-dialog__hd__main">
                     <strong class="weui-half-screen-dialog__title">标题</strong>
                     <span class="weui-half-screen-dialog__subtitle">标题</span>
                   </div>
                   <div class="weui-half-screen-dialog__hd__side">
-                    <button class="weui-icon-btn weui-icon-btn_more">更多</button>
+                    <button class="weui-icon-btn">更多<i class="weui-icon-more"></i></button>
                   </div>
                 </div>
                 <div class="weui-half-screen-dialog__bd">

diff --git a/dist/style/weui.css b/dist/style/weui.css
diff --git a/dist/style/weui.min.css b/dist/style/weui.min.css
diff --git a/src/example/fragment/form_vcode.html b/src/example/fragment/form_vcode.html
@@ -55,7 +55,7 @@ <h2 class="weui-form__title">验证码</h2>
           <div id="js_half_screen_dialog" class="weui-half-screen-dialog">
               <div class="weui-half-screen-dialog__hd">
                 <div class="weui-half-screen-dialog__hd__side">
-                  <button id="dialogClose" class="weui-icon-btn weui-icon-btn_close">关闭</button>
+                    <button id="dialogClose" class="weui-icon-btn">关闭<i class="weui-icon-close-thin"></i></button>
                 </div>
                 <div class="weui-half-screen-dialog__hd__main">
                   <strong class="weui-half-screen-dialog__title">标题</strong>

diff --git a/src/example/fragment/half-screen-dialog.html b/src/example/fragment/half-screen-dialog.html
@@ -18,7 +18,7 @@ <h1 class="page__title">Half-screen Dialog</h1>
             <div id="js_dialog_1" class="weui-half-screen-dialog">
                 <div class="weui-half-screen-dialog__hd">
                   <div class="weui-half-screen-dialog__hd__side">
-                    <button class="weui-icon-btn weui-icon-btn_close">关闭</button>
+                    <button class="weui-icon-btn">关闭<i class="weui-icon-close-thin"></i></button>
                   </div>
                   <div class="weui-half-screen-dialog__hd__main">
                     <strong class="weui-half-screen-dialog__title">标题</strong>
@@ -42,15 +42,15 @@ <h1 class="page__title">Half-screen Dialog</h1>
             <div id="js_dialog_2" class="weui-half-screen-dialog">
                 <div class="weui-half-screen-dialog__hd">
                   <div class="weui-half-screen-dialog__hd__side">
-                    <button style="display:none;" class="weui-icon-btn weui-icon-btn_goback">返回</button>
-                    <button class="weui-icon-btn weui-icon-btn_close">关闭</button>
+                    <button style="display:none;" class="weui-icon-btn">返回<i class="weui-icon-back-arrow-thin"></i></button>
+                    <button class="weui-icon-btn">关闭<i class="weui-icon-close-thin"></i></button>
                   </div>
                   <div class="weui-half-screen-dialog__hd__main">
                     <strong class="weui-half-screen-dialog__title">标题</strong>
                     <span class="weui-half-screen-dialog__subtitle">标题</span>
                   </div>
                   <div class="weui-half-screen-dialog__hd__side">
-                    <button class="weui-icon-btn weui-icon-btn_more">更多</button>
+                    <button class="weui-icon-btn">更多<i class="weui-icon-more"></i></button>
                   </div>
                 </div>
                 <div class="weui-half-screen-dialog__bd">

diff --git a/src/style/widget/weui-tips/weui-half-screen-dialog.less b/src/style/widget/weui-tips/weui-half-screen-dialog.less
@@ -111,26 +111,21 @@
 }
 
 .weui-icon-btn{
-  background-color:transparent;
-  background-repeat:no-repeat;
-  background-position:50% 50%;
-  background-size: 100%;
-  border:0;
-  outline:0;
+  outline: 0;
+  -webkit-appearance: none;
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+  border-width: 0;
+  background-color: transparent;
+  color:rgba(0, 0, 0, 0.9);
   font-size:0;
 }
-.weui-icon-btn_goback{
-  width:12px;
-  height:24px;
-  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='24' viewBox='0 0 12 24'%3E  %3Cg fill='none' fill-rule='evenodd' transform='translate(-16 -20)'%3E    %3Cpath fill='%23FFF' d='M0 12C0 5.373 5.367 0 12 0h390c6.628 0 12 5.374 12 12v52H0V12z'/%3E    %3Cpath fill='%23000' fill-opacity='.9' d='M26 39.438L24.955 40.5l-7.666-7.79a1.02 1.02 0 0 1 0-1.42l7.666-7.79L26 24.563 18.682 32 26 39.438z'/%3E  %3C/g%3E%3C/svg%3E");
-}
-.weui-icon-btn_close{
-  width:24px;
-  height:24px;
-  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='24' height='24' viewBox='0 0 24 24'%3E  %3Cdefs%3E    %3Cpath id='33cf2e7b-22e9-42d7-9c56-a9f4a4e03565-a' d='M8 6.943L1.807.75.75 1.807 6.943 8 .75 14.193l1.057 1.057L8 9.057l6.193 6.193 1.057-1.057L9.057 8l6.193-6.193L14.193.75z'/%3E  %3C/defs%3E  %3Cg fill='none' fill-rule='evenodd' transform='translate(-16 -20)'%3E    %3Cpath fill='%23FFF' d='M0 12C0 5.373 5.367 0 12 0h390c6.628 0 12 5.374 12 12v52H0V12z'/%3E    %3Cuse fill='%23000' fill-opacity='.9' transform='translate(20 24)' xlink:href='%2333cf2e7b-22e9-42d7-9c56-a9f4a4e03565-a'/%3E  %3C/g%3E%3C/svg%3E");
-}
-.weui-icon-btn_more{
-  width:24px;
+.weui-icon-more{
+  display: inline-block;
+  vertical-align: middle;
+  width: 24px;
   height: 24px;
-  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E  %3Cg fill='none' fill-rule='evenodd' transform='translate(-374 -20)'%3E    %3Cpath fill='%23FFF' d='M0 12C0 5.373 5.367 0 12 0h390c6.628 0 12 5.374 12 12v52H0V12z'/%3E    %3Cpath fill='%23000' fill-opacity='.9' d='M380.75 32a1.75 1.75 0 1 1-3.5 0 1.75 1.75 0 0 1 3.5 0zm5.25-1.75a1.75 1.75 0 1 1 0 3.5 1.75 1.75 0 0 1 0-3.5zm7 0a1.75 1.75 0 1 1 0 3.5 1.75 1.75 0 0 1 0-3.5z'/%3E  %3C/g%3E%3C/svg%3E");
+  mask: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E  %3Cpath fill-opacity='.9' fill-rule='evenodd' d='M5 10.25a1.75 1.75 0 1 1 0 3.5 1.75 1.75 0 0 1 0-3.5zm7 0a1.75 1.75 0 1 1 0 3.5 1.75 1.75 0 0 1 0-3.5zm7 0a1.75 1.75 0 1 1 0 3.5 1.75 1.75 0 0 1 0-3.5z'/%3E%3C/svg%3E") no-repeat 50% 50%;
+  -webkit-mask-size: cover;
+  mask-size: cover;
+  background-color: currentColor;
 }