样式优化

1. 删除 weui_vimg_wrp扩展类，用weui_cells_form做父类可达到同样效果 2. 增加 weui_btn_area增加margin-top: 20px 3. 增加 weui_btn_area增加margin-bottom 4. 删除 weui_btn_area_inline为WinPhone7写的hack 5. 增加 weui_cells_tips 6. 修改 weui_cell的border-color 7.修改 weui_cells_form的weui_cell_hd的padding-right改为0.3em 8. 修改 weui_cells的font-size改为17px 9. 修改 weui_cells_title的margin 10. 增加 weui_cell_switch来控制weui_switch那个cell的高度，让其保持44px 11. 修改 weui_msg的间距
Tencent · Nov 5, 2015 · b62c24a · b62c24a
1 parent f0cbbaf
commit b62c24a
Show file tree

Hide file tree

Showing 12 changed files with 91 additions and 101 deletions.
diff --git a/dist/example/index.html b/dist/example/index.html
@@ -261,7 +261,7 @@ <h1 class="page_title">Cell</h1>
 
                 <div class="weui_cells_title">开关</div>
                 <div class="weui_cells weui_cells_form">
-                    <div class="weui_cell">
+                    <div class="weui_cell weui_cell_switch">
                         <div class="weui_cell_hd weui_cell_primary">标题文字</div>
                         <div class="weui_cell_ft">
                             <input class="weui_switch" type="checkbox"/>
@@ -282,7 +282,7 @@ <h1 class="page_title">Cell</h1>
                         <div class="weui_cell_bd weui_cell_primary">
                             <input class="weui_input" type="number" placeholder="请输入验证码"/>
                         </div>
-                        <div class="weui_cell_ft weui_vimg_wrp">
+                        <div class="weui_cell_ft">
                             <img src="./images/vcode.jpg" />
                         </div>
                     </div>
@@ -297,12 +297,13 @@ <h1 class="page_title">Cell</h1>
                         <div class="weui_cell_bd weui_cell_primary">
                             <input class="weui_input" type="number" placeholder="请输入验证码"/>
                         </div>
-                        <div class="weui_cell_ft weui_vimg_wrp">
+                        <div class="weui_cell_ft">
                             <i class="weui_icon_warn"></i>
                             <img src="./images/vcode.jpg" />
                         </div>
                     </div>
                 </div>
+                <div class="weui_cells_tips">底部说明文字底部说明文字</div>
                 <div class="weui_btn_area">
                     <a class="weui_btn weui_btn_primary" href="javascript:">确定</a>
                 </div>

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/index.html b/src/example/index.html
@@ -261,7 +261,7 @@ <h1 class="page_title">Cell</h1>
 
                 <div class="weui_cells_title">开关</div>
                 <div class="weui_cells weui_cells_form">
-                    <div class="weui_cell">
+                    <div class="weui_cell weui_cell_switch">
                         <div class="weui_cell_hd weui_cell_primary">标题文字</div>
                         <div class="weui_cell_ft">
                             <input class="weui_switch" type="checkbox"/>
@@ -282,7 +282,7 @@ <h1 class="page_title">Cell</h1>
                         <div class="weui_cell_bd weui_cell_primary">
                             <input class="weui_input" type="number" placeholder="请输入验证码"/>
                         </div>
-                        <div class="weui_cell_ft weui_vimg_wrp">
+                        <div class="weui_cell_ft">
                             <img src="./images/vcode.jpg" />
                         </div>
                     </div>
@@ -297,12 +297,13 @@ <h1 class="page_title">Cell</h1>
                         <div class="weui_cell_bd weui_cell_primary">
                             <input class="weui_input" type="number" placeholder="请输入验证码"/>
                         </div>
-                        <div class="weui_cell_ft weui_vimg_wrp">
+                        <div class="weui_cell_ft">
                             <i class="weui_icon_warn"></i>
                             <img src="./images/vcode.jpg" />
                         </div>
                     </div>
                 </div>
+                <div class="weui_cells_tips">底部说明文字底部说明文字</div>
                 <div class="weui_btn_area">
                     <a class="weui_btn weui_btn_primary" href="javascript:">确定</a>
                 </div>

diff --git a/src/style/base/variable/weui_cell.less b/src/style/base/variable/weui_cell.less
@@ -1,7 +1,11 @@
 @weuiCellBg:#FFFFFF;
-@weuiCellBorderColor:#ECECEC;
+@weuiCellBorderColor:#D9D9D9;
 @weuiCellGapV:10px;
 @weuiCellGapH:15px;
 @weuiCellInnerGapH:.35em;
+@weuiCellHeight: 44px;
+@weuiCellFontSize:17px;
+@weuiCellTipsFontSize:14px;
 
-@weuiCellsMarginTop:.8em;
+@weuiCellLineHeight: unit((@weuiCellHeight - 2 * @weuiCellGapV) / @weuiCellFontSize); // 高度为44px，减去上下padding的行高
+@weuiCellsMarginTop:unit(20 / @weuiCellFontSize, em);
diff --git a/src/style/base/variable/weui_msg.less b/src/style/base/variable/weui_msg.less
@@ -1,8 +1,7 @@
-@weuiMsgPadding:75px 0 0;
-@weuiMsgSmallPadding: 45px 0 0;
-@weuiMsgIconGap:19px;
+@weuiMsgPaddingTop:36px;
+@weuiMsgIconGap:30px;
+@weuiMsgTitleGap:5px;
 @weuiMsgTextGap:25px;
-@weuiMsgTitleGap:12px;
 @weuiMsgOprGap:25px;
-@weuiMsgExtraAreaGap:20px;
-@weuiMsgExtraAreaOfMinHeight:416px;
+@weuiMsgExtraAreaGap:15px;
+@weuiMsgExtraAreaOfMinHeight:438px;
diff --git a/src/style/widget/weui_button/weui_button.less b/src/style/widget/weui_button/weui_button.less
@@ -37,8 +37,7 @@ button, input {
 }
 
 .weui_btn_area {
-    margin-left: @weuiBtnDefaultGap;
-    margin-right: @weuiBtnDefaultGap;
+    margin: @weuiCellsMarginTop @weuiBtnDefaultGap .3em;
     &.weui_btn_area_inline {
         -webkit-display: flex;
         display: flex;
@@ -52,18 +51,6 @@ button, input {
                 margin-right: 0;
             }
         }
-
-        // hack for WinPhone7
-        letter-spacing: -1em ~"\9";
-        .weui_btn{
-            display: inline-block ~"\9";
-            width: 48.5% ~"\9";
-            margin-right: 3% ~"\9";
-            letter-spacing: 0 ~"\9";
-        }
-    }
-    .weui_cells_form + & {
-        margin-top: @weuiCellsMarginTop;
     }
 }
 

diff --git a/src/style/widget/weui_cell/weui_cell_global.less b/src/style/widget/weui_cell/weui_cell_global.less
@@ -16,8 +16,8 @@
 .weui_cells {
     margin-top: @weuiCellsMarginTop;
     background-color: @weuiCellBg;
-    line-height: 1.45;
-    font-size: 16px; //cell中间有效高度23px，跟客户端默认图标尺寸一致
+    line-height: @weuiCellLineHeight;
+    font-size: @weuiCellFontSize; //cell中间有效高度23px，跟客户端默认图标尺寸一致
 
     overflow: hidden; //因为每个cell的border使用before元素left搞的，ie下伪元素的containing block估计跟标准不同，在cell上用oh不生效
 
@@ -33,16 +33,23 @@
 }
 
 .weui_cells_title {
-    margin-top: @weuiCellsMarginTop;
+    margin-top: .77em; // 15px - 行高
+    margin-bottom: .3em; // 8px - 行高
     padding-left: @weuiCellGapH;
     padding-right: @weuiCellGapH;
     color: @globalTextColor;
-    font-size: @globalFontSize;
+    font-size: @weuiCellTipsFontSize;
 
     &+.weui_cells{
         margin-top: 0;
     }
 }
+.weui_cells_tips{
+    margin-top: .3em; // 8px - 行高
+    color: @globalTextColor;
+    text-align: center;
+    font-size: @weuiCellTipsFontSize;
+}
 
 .weui_cell {
     padding: @weuiCellGapV @weuiCellGapH;

diff --git a/src/style/widget/weui_cell/weui_form/weui_form_common.less b/src/style/widget/weui_cell/weui_form/weui_form_common.less
@@ -9,8 +9,8 @@
     background-color: transparent;
     font-size: inherit;
     color: inherit;
-    height: 1.44em;
-    line-height: 1.44em;//显式设置line-height值  23（默认高度）/16（默认字号）
+    height: unit(@weuiCellLineHeight, em);
+    line-height: @weuiCellLineHeight;
 
     // hides the spin-button
     &::-webkit-outer-spin-button, &::-webkit-inner-spin-button{
@@ -49,7 +49,7 @@
         .weui_icon_warn{display:inline-block;}
     }
     .weui_cell_hd {
-        padding-right: 1em;
+        padding-right: .3em;
     }
     .weui_cell_ft{font-size:0;}
     .weui_icon_warn{

diff --git a/src/style/widget/weui_cell/weui_form/weui_vcode.less b/src/style/widget/weui_cell/weui_form/weui_vcode.less
@@ -4,10 +4,11 @@
     padding-top: 0;
     padding-right: 0;
     padding-bottom: 0;
-    .weui_vimg_wrp {
-        font-size: 0; // 去掉img下的一些空白
+    .weui_cell_ft {
         img {
-            height: 43px;vertical-align:middle;margin-left:5px;
+            margin-left: 5px;
+            height: @weuiCellHeight;
+            vertical-align: middle;
         }
     }
 }
diff --git a/src/style/widget/weui_cell/weui_switch.less b/src/style/widget/weui_cell/weui_switch.less
@@ -1,10 +1,14 @@
 @import "../../base/fn";
-
+@weuiSwitchHeight: 32px;
+.weui_cell_switch{
+    padding-top: (@weuiCellHeight - @weuiSwitchHeight) / 2;
+    padding-bottom: (@weuiCellHeight - @weuiSwitchHeight) / 2;
+}
 .weui_switch{
     appearance: none;
     position: relative;
     width: 52px;
-    height: 32px;
+    height: @weuiSwitchHeight;
     border: 1px solid #DFDFDF;
     outline: 0;
     border-radius: 16px;
@@ -16,7 +20,7 @@
         top: 0;
         left: 0;
         width: 50px;
-        height: 30px;
+        height: @weuiSwitchHeight - 2;
         border-radius: 15px;
         background-color: #FDFDFD;
         transition:transform .3s;
@@ -26,8 +30,8 @@
         position: absolute;
         top: 0;
         left: 0;
-        width: 30px;
-        height: 30px;
+        width: @weuiSwitchHeight - 2;
+        height: @weuiSwitchHeight - 2;
         border-radius: 15px;
         background-color: #FFFFFF;
         box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);

diff --git a/src/style/widget/weui_page/weui_msg.less b/src/style/widget/weui_page/weui_msg.less
@@ -2,7 +2,7 @@
 @import "../weui_button/weui_button";
 
 .weui_msg {
-    padding: @weuiMsgPadding;
+    padding-top: @weuiMsgPaddingTop;
     text-align: center;
 
     .weui_icon_area {
@@ -11,15 +11,16 @@
 
     .weui_text_area {
         margin-bottom: @weuiMsgTextGap;
-        padding:0 15px;
+        padding:0 20px;
     }
     .weui_msg_title {
         margin-bottom: @weuiMsgTitleGap;
         font-weight: 400;
         font-size: 20px;
     }
     .weui_msg_desc {
-        color: @globalDescColor;
+        font-size: 14px;
+        color: @globalTextColor;
     }
 
     .weui_opr_area {
@@ -28,17 +29,9 @@
 
     .weui_extra_area {
         margin-bottom: @weuiMsgExtraAreaGap;
-        font-size:14px;
-        color:@globalTextColor;
-        a{color:@globalLinkColor;}
-    }
-}
-
-
-
-@media screen and (max-height: 416px) {
-    .weui_msg {
-        padding: @weuiMsgSmallPadding;
+        font-size: 14px;
+        color: @globalTextColor;
+        a{color: @globalLinkColor;}
     }
 }