Merge pull request #7 from weui/master

merge from upstream

README.md

@@ -268,6 +268,27 @@ toast用于临时显示某些信息，并且会在数秒后自动消失。这些
     </section>
 </article>
 ```
+## ActionSheet
+`ActionSheet`用于显示包含一系列可交互的动作集合，包括说明、跳转等。由底部弹出，一般用于响应用户对页面的点击。
+
+![](./dist/example/snapshot/actionSheet.png)
+
+```html
+<div id="actionSheet_wrap">
+    <div class="weui_mask_transition" id="mask"></div>
+    <div class="weui_actionsheet" id="weui_actionsheet">
+        <div class="weui_actionsheet_menu">
+            <div class="weui_actionsheet_cell">示例菜单</div>
+            <div class="weui_actionsheet_cell">示例菜单</div>
+            <div class="weui_actionsheet_cell">示例菜单</div>
+            <div class="weui_actionsheet_cell">示例菜单</div>
+        </div>
+        <div class="weui_actionsheet_action">
+            <div class="weui_actionsheet_cell" id="actionsheet_cancel">取消</div>
+        </div>
+    </div>
+</div>
+```
 
 ## Icon
 

dist/example/example.css

@@ -1 +1 @@
-.container,.page{position:absolute;top:0;right:0;bottom:0;left:0}.global_navs .cell:before,.global_navs:after,.global_navs:before{border-color:#D9DBDA}body,html{height:100%;-webkit-tap-highlight-color:transparent}.page,body{background-color:#FBF9FE}.container{overflow:hidden}.page{overflow-y:auto;-webkit-overflow-scrolling:touch}.hd{padding:2em 0}.page_desc{text-align:center;color:#888;font-size:14px}.bd.spacing{padding:0 15px}.page_title{text-align:center;font-size:34px;color:#3CC51F;font-weight:400;margin:0 15%}.page.button .page_title,.page.cell .page_title{color:#225FBA}.global_navs{background-color:transparent}.page.article,.page.dialog,.page.icons,.page.msg,.page.toast{background-color:#FFF}.global_navs .cell{padding-top:.5em;padding-bottom:.5em}.global_navs .icon_nav{width:28px;height:28px;display:block;margin-right:.7em}.page.button .bd{padding:0 15px}.page.button .button_sp_area{padding:10px 0;width:60%;margin:0 auto;text-align:justify;text-justify:distribute-all-lines;font-size:0}.page.button .button_sp_area:after{display:inline-block;width:100%;height:0;font-size:0;margin:0;padding:0;overflow:hidden;content:"."}.page.cell .bd{padding-bottom:30px}.page.dialog .bd,.page.toast .bd{padding:120px 15px 0}.page.msg .weui_msg{padding-top:30px}.page.article .page_title{color:#DE7C23}.page.icons{text-align:center}.page.icons .page_title{color:#3E24BD}.page.icons .bd{padding:30px 0;text-align:center}.page.icons .icon_sp_area{padding:10px 20px;text-align:left}.page.icons i{margin:0 5px 10px}@-webkit-keyframes slideIn{from{-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}to{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}}@keyframes slideIn{from{-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}to{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}}@-webkit-keyframes slideOut{from{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}to{-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}}@keyframes slideOut{from{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}to{-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}}.page.slideIn{-webkit-animation:slideIn .2s forwards;animation:slideIn .2s forwards}.page.slideOut{-webkit-animation:slideOut .2s forwards;animation:slideOut .2s forwards}
+.container,.page{position:absolute;top:0;right:0;bottom:0;left:0}.global_navs .cell:before,.global_navs:after,.global_navs:before{border-color:#D9DBDA}body,html{height:100%;-webkit-tap-highlight-color:transparent}.page,body{background-color:#FBF9FE}.container{overflow:hidden}.page{overflow-y:auto;-webkit-overflow-scrolling:touch}.hd{padding:2em 0}.page_desc{text-align:center;color:#888;font-size:14px}.bd.spacing{padding:0 15px}.page_title{text-align:center;font-size:34px;color:#3CC51F;font-weight:400;margin:0 15%}.page.button .page_title,.page.cell .page_title{color:#225FBA}.global_navs{background-color:transparent}.page.article,.page.dialog,.page.icons,.page.msg,.page.toast{background-color:#FFF}.global_navs .cell{padding-top:.5em;padding-bottom:.5em}.global_navs .icon_nav{width:28px;height:28px;display:block;margin-right:.7em}.page.button .bd{padding:0 15px}.page.button .button_sp_area{padding:10px 0;width:60%;margin:0 auto;text-align:justify;text-justify:distribute-all-lines;font-size:0}.page.button .button_sp_area:after{display:inline-block;width:100%;height:0;font-size:0;margin:0;padding:0;overflow:hidden;content:"."}.page.cell .bd{padding-bottom:30px}.page.dialog .bd,.page.toast .bd{padding:120px 15px 0}.page.article .page_title{color:#DE7C23}.page.icons{text-align:center}.page.icons .page_title{color:#3E24BD}.page.icons .bd{padding:30px 0;text-align:center}.page.icons .icon_sp_area{padding:10px 20px;text-align:left}.page.icons i{margin:0 5px 10px}@-webkit-keyframes slideIn{from{-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}to{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}}@keyframes slideIn{from{-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}to{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}}@-webkit-keyframes slideOut{from{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}to{-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}}@keyframes slideOut{from{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}to{-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}}.page.slideIn{-webkit-animation:slideIn .2s forwards;animation:slideIn .2s forwards}.page.slideOut{-webkit-animation:slideOut .2s forwards;animation:slideOut .2s forwards}

dist/example/index.html

@@ -73,9 +73,9 @@
                         </div>
                     </a>
                     <a class="weui_cell js_cell" href="javascript:;" data-id="actionSheet">
-                        <span class="weui_cell_hd"><img src="./images/icon_nav_toast.png" class="icon_nav" alt=""></span>
+                        <span class="weui_cell_hd"><img src="./images/icon_nav_actionSheet.png" class="icon_nav" alt=""></span>
                         <div class="weui_cell_bd weui_cell_primary">
-                            <p>Action Sheet</p>
+                            <p>ActionSheet</p>
                         </div>
                         <div class="weui_cell_ft">
                         </div>
@@ -261,7 +261,7 @@
 
                 <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 @@
                         <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 @@
                         <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>
@@ -502,25 +503,20 @@
     </script>
     <script type="text/html" id="tpl_msg">
         <div class="page">
-            <div class="hd">
-                <h1 class="page_title">Msg</h1>
-            </div>
-            <div class="bd">
-                <div class="weui_msg">
-                    <div class="weui_icon_area"><i class="weui_icon_success weui_icon_msg"></i></div>
-                    <div class="weui_text_area">
-                        <h2 class="weui_msg_title">操作成功</h2>
-                        <p class="weui_msg_desc">内容详情，可根据实际需要安排</p>
-                    </div>
-                    <div class="weui_opr_area">
-                        <p class="weui_btn_area">
-                            <a href="javascript:;" class="weui_btn weui_btn_primary">确定</a>
-                            <a href="javascript:;" class="weui_btn weui_btn_default">取消</a>
-                        </p>
-                    </div>
-                    <div class="weui_extra_area">
-                        <a href="">查看详情</a>
-                    </div>
+            <div class="weui_msg">
+                <div class="weui_icon_area"><i class="weui_icon_success weui_icon_msg"></i></div>
+                <div class="weui_text_area">
+                    <h2 class="weui_msg_title">操作成功</h2>
+                    <p class="weui_msg_desc">内容详情，可根据实际需要安排</p>
+                </div>
+                <div class="weui_opr_area">
+                    <p class="weui_btn_area">
+                        <a href="javascript:;" class="weui_btn weui_btn_primary">确定</a>
+                        <a href="javascript:;" class="weui_btn weui_btn_default">取消</a>
+                    </p>
+                </div>
+                <div class="weui_extra_area">
+                    <a href="">查看详情</a>
                 </div>
             </div>
         </div>
@@ -585,14 +581,14 @@
     <script type="text/html" id="tpl_actionSheet">
         <div class="page" style="overflow: hidden">
             <div class="hd">
-                <h1 class="page_title">action sheet</h1>
+                <h1 class="page_title">ActionSheet</h1>
             </div>
             <div class="bd spacing">
-                <a href="javascript:;" class="weui_btn weui_btn_primary" id="showActionSheet">点击上拉actionSheet</a>
+                <a href="javascript:;" class="weui_btn weui_btn_primary" id="showActionSheet">点击上拉ActionSheet</a>
             </div>
             <!--BEGIN actionSheet-->
             <div id="actionSheet_wrap">
-                <div class="weui_mask_transition" id="mask" style="display: none"></div>
+                <div class="weui_mask_transition" id="mask"></div>
                 <div class="weui_actionsheet" id="weui_actionsheet">
                     <div class="weui_actionsheet_menu">
                         <div class="weui_actionsheet_cell">示例菜单</div>

src/example/example.less

@@ -141,9 +141,6 @@ body, .page {
 .page {
     &.msg {
         background-color: #FFFFFF;
-        .weui_msg {
-            padding-top: 30px;
-        }
     }
 }
 

src/example/index.html

@@ -73,9 +73,9 @@
                         </div>
                     </a>
                     <a class="weui_cell js_cell" href="javascript:;" data-id="actionSheet">
-                        <span class="weui_cell_hd"><img src="./images/icon_nav_toast.png" class="icon_nav" alt=""></span>
+                        <span class="weui_cell_hd"><img src="./images/icon_nav_actionSheet.png" class="icon_nav" alt=""></span>
                         <div class="weui_cell_bd weui_cell_primary">
-                            <p>Action Sheet</p>
+                            <p>ActionSheet</p>
                         </div>
                         <div class="weui_cell_ft">
                         </div>
@@ -261,7 +261,7 @@
 
                 <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 @@
                         <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 @@
                         <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>
@@ -502,25 +503,20 @@
     </script>
     <script type="text/html" id="tpl_msg">
         <div class="page">
-            <div class="hd">
-                <h1 class="page_title">Msg</h1>
-            </div>
-            <div class="bd">
-                <div class="weui_msg">
-                    <div class="weui_icon_area"><i class="weui_icon_success weui_icon_msg"></i></div>
-                    <div class="weui_text_area">
-                        <h2 class="weui_msg_title">操作成功</h2>
-                        <p class="weui_msg_desc">内容详情，可根据实际需要安排</p>
-                    </div>
-                    <div class="weui_opr_area">
-                        <p class="weui_btn_area">
-                            <a href="javascript:;" class="weui_btn weui_btn_primary">确定</a>
-                            <a href="javascript:;" class="weui_btn weui_btn_default">取消</a>
-                        </p>
-                    </div>
-                    <div class="weui_extra_area">
-                        <a href="">查看详情</a>
-                    </div>
+            <div class="weui_msg">
+                <div class="weui_icon_area"><i class="weui_icon_success weui_icon_msg"></i></div>
+                <div class="weui_text_area">
+                    <h2 class="weui_msg_title">操作成功</h2>
+                    <p class="weui_msg_desc">内容详情，可根据实际需要安排</p>
+                </div>
+                <div class="weui_opr_area">
+                    <p class="weui_btn_area">
+                        <a href="javascript:;" class="weui_btn weui_btn_primary">确定</a>
+                        <a href="javascript:;" class="weui_btn weui_btn_default">取消</a>
+                    </p>
+                </div>
+                <div class="weui_extra_area">
+                    <a href="">查看详情</a>
                 </div>
             </div>
         </div>
@@ -585,14 +581,14 @@
     <script type="text/html" id="tpl_actionSheet">
         <div class="page" style="overflow: hidden">
             <div class="hd">
-                <h1 class="page_title">action sheet</h1>
+                <h1 class="page_title">ActionSheet</h1>
             </div>
             <div class="bd spacing">
-                <a href="javascript:;" class="weui_btn weui_btn_primary" id="showActionSheet">点击上拉actionSheet</a>
+                <a href="javascript:;" class="weui_btn weui_btn_primary" id="showActionSheet">点击上拉ActionSheet</a>
             </div>
             <!--BEGIN actionSheet-->
             <div id="actionSheet_wrap">
-                <div class="weui_mask_transition" id="mask" style="display: none"></div>
+                <div class="weui_mask_transition" id="mask"></div>
                 <div class="weui_actionsheet" id="weui_actionsheet">
                     <div class="weui_actionsheet_menu">
                         <div class="weui_actionsheet_cell">示例菜单</div>

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);

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;

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;
     }
 }
 

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;

src/style/widget/weui_cell/weui_form/weui_form_common.less

@@ -5,11 +5,12 @@
     width: 100%;
     border: 0;
     outline: 0;
-    height: 1.42em;
     -webkit-appearance: none;
     background-color: transparent;
     font-size: inherit;
     color: inherit;
+    height: unit(@weuiCellLineHeight, em);
+    line-height: @weuiCellLineHeight;
 
     // hides the spin-button
     &::-webkit-outer-spin-button, &::-webkit-inner-spin-button{
@@ -48,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{

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;
         }
     }
 }

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);

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,7 +11,7 @@
 
     .weui_text_area {
         margin-bottom: @weuiMsgTextGap;
-        padding:0 15px;
+        padding:0 20px;
     }
     .weui_msg_title {
         margin-bottom: @weuiMsgTitleGap;
@@ -19,7 +19,8 @@
         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;}
     }
 }
 

src/style/widget/weui_tips/weui_actionsheet.less

@@ -1,7 +1,7 @@
 @import "../../base/fn";
 @bgColor:#ECECEC;
 .weui_actionsheet {
-    position: absolute;
+    position: fixed;
     left: 0;
     bottom: 0;
     transform: translate(0, 100%);

src/style/widget/weui_tips/weui_mask.less

@@ -20,6 +20,7 @@
 }
 
 .weui_mask_transition{
+    display: none;
     position: fixed;
     z-index: 1;
     width: 100%;