javascript/weui
1
0
Fork 0
mirror of https://github.com/Tencent/weui.git synced 2026-03-13 08:02:03 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat: v2.5.6

Browse Source
This commit is contained in:
xushengni
2022-04-07 11:57:11 +08:00
parent 3da865a182
commit 6eacf2b20a
21 changed files with 480 additions and 145 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
CHANGELOG.md
View File

@@ -1,3 +1,17 @@
### v2.5.6 (2022-04-06)
#### Features
* feat: 新增单选框、复选框、开关组件的置灰态
#### Bugfixes
* fix: 优化半屏弹窗按钮布局，保证向前兼容
* fix: 修复steps组件缺少初始化状态问题、新增icon-prev状态
* fix: 优化底部悬浮按钮间距实现方式
* fix: 去掉无用的weui-cell_access背景颜色点击态实现
* fix: 优化example体验
### v2.5.5 (2022-03-03)
#### Features

2
dist/example/example.css vendored
View File

File diff suppressed because one or more lines are too long

143
dist/example/index.html vendored
View File

@@ -160,7 +160,7 @@
</a>
<a class="weui-cell weui-cell_active weui-cell_access js_item" role="menuitem" data-id="steps" href="javascript:">
<div class="weui-cell__bd">
<p>steps</p>
<p>Steps</p>
</div>
<div class="weui-cell__ft"></div>
</a>
@@ -268,9 +268,20 @@
</div>
<script type="text/javascript">
$(function(){
function setFoot(){
var $foot = $('.page__ft');
if ($foot.length > 0) {
$foot.removeClass('j_bottom');
var winH = $(window).height();
if ($foot.offsetTop + $foot.offsetHeight < winH) {
$foot.addClass('j_bottom');
}
}
}
var winH = $(window).height();
var categorySpace = 10;
function expandMenu(){
setFoot();
var $this = $(this),
$inner = $this.next('.js_categoryInner'),
$page = $this.parents('.page'),
@@ -1511,6 +1522,15 @@
<p>standard is dealicient for u.</p>
</div>
</label>
<label class="weui-cell weui-cell_active weui-check__label weui-cell_disabled" for="s13">
<div class="weui-cell__hd">
<input type="checkbox" name="checkbox1" class="weui-check" checked disabled id="s13"/>
<i class="weui-icon-checked"></i>
</div>
<div class="weui-cell__bd">
<p>standard is dealicient for u.</p>
</div>
</label>
<a href="javascript:" class="weui-cell weui-cell_active weui-cell_link">
<div class="weui-cell__bd">添加更多</div>
</a>
@@ -1522,7 +1542,7 @@
</div>
<div class="weui-form__tips-area">
<p class="weui-form__tips">
点击下一步即表示<a class="weui-wa-hotarea" href="javascript:">同意用户协议</a>
点击下一步即表示<a class="weui-link weui-wa-hotarea" href="javascript:">同意用户协议</a>
</p>
</div>
</div>
@@ -1639,6 +1659,12 @@
<input aria-labelledby="cb_txt" id="cb" class="weui-switch" type="checkbox"/>
</div>
</label>
<label for="cb1" class="weui-cell weui-cell_active weui-cell_disabled weui-cell_switch">
<div class="weui-cell__bd" id="cb1_txt" aria-hidden="true">标题文字</div>
<div class="weui-cell__ft">
<input aria-labelledby="cb1_txt" id="cb1" disabled class="weui-switch" checked type="checkbox"/>
</div>
</label>
<label for="switchCP" class="weui-cell weui-cell_active weui-cell_switch">
<div class="weui-cell__bd" id="cp_txt" aria-hidden="true">兼容IE Edge的版本</div>
<div class="weui-cell__ft">
@@ -2557,13 +2583,13 @@
<script type="text/html" id="tpl_steps_vertical">
<div class="page">
<ul class="weui-steps weui-steps_vertical">
<li class="weui-steps__item weui-steps__item_success">
<li class="weui-steps__item">
<div class="weui-steps__item__inner">
<strong class="weui-steps__item__title">标题</strong>
<span class="weui-steps__item__desc">描述内容详情</span>
</div>
</li>
<li class="weui-steps__item weui-steps__item_success">
<li class="weui-steps__item">
<div class="weui-steps__item__inner">
<strong class="weui-steps__item__title">标题</strong>
<span class="weui-steps__item__desc">描述内容详情</span>
@@ -2589,12 +2615,38 @@
<span class="weui-steps__item__desc">描述内容详情</span>
</div>
</li>
<li class="weui-steps__item">
<div class="weui-steps__item__inner">
<strong class="weui-steps__item__title">标题</strong>
<span class="weui-steps__item__desc">描述内容详情</span>
</div>
</li>
<li class="weui-steps__item">
<div class="weui-steps__item__inner">
<strong class="weui-steps__item__title">标题</strong>
<span class="weui-steps__item__desc">描述内容详情</span>
</div>
</li>
<li class="weui-steps__item">
<div class="weui-steps__item__inner">
<strong class="weui-steps__item__title">标题</strong>
<span class="weui-steps__item__desc">描述内容详情</span>
</div>
</li>
</ul>
<ul class="weui-steps weui-steps_vertical">
<li class="weui-steps__item weui-steps__item_success">
<div class="weui-steps__item__inner">
<strong class="weui-steps__item__title">标题</strong>
<span class="weui-steps__item__desc">描述内容详情</span>
</div>
</li>
<li class="weui-steps__item weui-steps__item_success weui-steps__item_icon-prev">
<div class="weui-steps__item__inner">
<strong class="weui-steps__item__title">标题</strong>
<span class="weui-steps__item__desc">描述内容详情</span>
</div>
</li>
<li class="weui-steps__item weui-steps__item_icon">
<div class="weui-steps__item__inner">
<strong class="weui-steps__item__title">标题</strong>
@@ -2622,13 +2674,13 @@
<span class="weui-steps__item__desc">描述内容详情</span>
</div>
</li>
<li class="weui-steps__item weui-steps__item_success">
<li class="weui-steps__item weui-steps__item_icon-prev weui-steps__item_success">
<div class="weui-steps__item__inner">
<strong class="weui-steps__item__title">标题</strong>
<span class="weui-steps__item__desc">描述内容详情</span>
</div>
</li>
<li class="weui-steps__item weui-steps__item_icon">
<li class="weui-steps__item weui-steps__item_icon weui-steps__item_success">
<div class="weui-steps__item__inner">
<strong class="weui-steps__item__title">标题</strong>
<span class="weui-steps__item__desc">描述内容详情</span>
@@ -2641,6 +2693,58 @@
</script>
<script type="text/html" id="tpl_steps_horizonal">
<div class="page">
<ul class="weui-steps weui-steps_horizonal">
<li class="weui-steps__item">
<div class="weui-steps__item__inner" style="display:none">
<strong class="weui-steps__item__title">标题</strong>
<span class="weui-steps__item__desc">描述内容详情</span>
</div>
</li>
<li class="weui-steps__item">
<div class="weui-steps__item__inner" style="display:none">
<strong class="weui-steps__item__title">标题</strong>
<span class="weui-steps__item__desc">描述内容详情</span>
</div>
</li>
<li class="weui-steps__item">
<div class="weui-steps__item__inner" style="display:none">
<strong class="weui-steps__item__title">标题</strong>
<span class="weui-steps__item__desc">描述内容详情</span>
</div>
</li>
<li class="weui-steps__item">
<div class="weui-steps__item__inner" style="display:none">
<strong class="weui-steps__item__title">标题</strong>
<span class="weui-steps__item__desc">描述内容详情</span>
</div>
</li>
</ul>
<ul class="weui-steps weui-steps_horizonal">
<li class="weui-steps__item weui-steps__item_success">
<div class="weui-steps__item__inner" style="display:none">
<strong class="weui-steps__item__title">标题</strong>
<span class="weui-steps__item__desc">描述内容详情</span>
</div>
</li>
<li class="weui-steps__item">
<div class="weui-steps__item__inner" style="display:none">
<strong class="weui-steps__item__title">标题</strong>
<span class="weui-steps__item__desc">描述内容详情</span>
</div>
</li>
<li class="weui-steps__item">
<div class="weui-steps__item__inner" style="display:none">
<strong class="weui-steps__item__title">标题</strong>
<span class="weui-steps__item__desc">描述内容详情</span>
</div>
</li>
<li class="weui-steps__item">
<div class="weui-steps__item__inner" style="display:none">
<strong class="weui-steps__item__title">标题</strong>
<span class="weui-steps__item__desc">描述内容详情</span>
</div>
</li>
</ul>
<ul class="weui-steps weui-steps_horizonal">
<li class="weui-steps__item weui-steps__item_success">
<div class="weui-steps__item__inner" style="display:none">
@@ -2667,6 +2771,33 @@
</div>
</li>
</ul>
<ul class="weui-steps weui-steps_horizonal">
<li class="weui-steps__item weui-steps__item_success">
<div class="weui-steps__item__inner" style="display:none">
<strong class="weui-steps__item__title">标题</strong>
<span class="weui-steps__item__desc">描述内容详情</span>
</div>
</li>
<li class="weui-steps__item weui-steps__item_success">
<div class="weui-steps__item__inner" style="display:none">
<strong class="weui-steps__item__title">标题</strong>
<span class="weui-steps__item__desc">描述内容详情</span>
</div>
</li>
<li class="weui-steps__item weui-steps__item_success">
<div class="weui-steps__item__inner" style="display:none">
<strong class="weui-steps__item__title">标题</strong>
<span class="weui-steps__item__desc">描述内容详情</span>
</div>
</li>
<li class="weui-steps__item weui-steps__item_success">
<div class="weui-steps__item__inner" style="display:none">
<strong class="weui-steps__item__title">标题</strong>
<span class="weui-steps__item__desc">描述内容详情</span>
</div>
</li>
</ul>
<ul class="weui-steps weui-steps_horizonal" style="display:none;">
<li class="weui-steps__item weui-steps__item_success">
<div class="weui-steps__item__inner">

162
dist/style/weui.css vendored
View File

File diff suppressed because one or more lines are too long

4
dist/style/weui.min.css vendored
View File

File diff suppressed because one or more lines are too long

2
package.json
View File

@@ -1,6 +1,6 @@
{
"name": "weui",
"version": "2.5.5",
"version": "2.5.6",
"description": "A UI library by WeChat official design team, includes the most useful widgets/modules in mobile web applications.",
"keywords": [
"weui",

2
src/example/example.less
View File

@@ -281,7 +281,7 @@ body,
}
}
.page.form_page {
.weui-label { width: 4.1em; }
.weui-label { width: 4.2em; }
}
.page.form_primary,
.page.form_select,

11
src/example/form/form_checkbox.html
View File

@@ -24,6 +24,15 @@
<p>standard is dealicient for u.</p>
</div>
</label>
<label class="weui-cell weui-cell_active weui-check__label weui-cell_disabled" for="s13">
<div class="weui-cell__hd">
<input type="checkbox" name="checkbox1" class="weui-check" checked disabled id="s13"/>
<i class="weui-icon-checked"></i>
</div>
<div class="weui-cell__bd">
<p>standard is dealicient for u.</p>
</div>
</label>
<a href="javascript:" class="weui-cell weui-cell_active weui-cell_link">
<div class="weui-cell__bd">添加更多</div>
</a>
@@ -35,7 +44,7 @@
</div>
<div class="weui-form__tips-area">
<p class="weui-form__tips">
点击下一步即表示<a class="weui-wa-hotarea" href="javascript:">同意用户协议</a>
点击下一步即表示<a class="weui-link weui-wa-hotarea" href="javascript:">同意用户协议</a>
</p>
</div>
</div>

6
src/example/form/form_switch.html
View File

@@ -12,6 +12,12 @@
<input aria-labelledby="cb_txt" id="cb" class="weui-switch" type="checkbox"/>
</div>
</label>
<label for="cb1" class="weui-cell weui-cell_active weui-cell_disabled weui-cell_switch">
<div class="weui-cell__bd" id="cb1_txt" aria-hidden="true">标题文字</div>
<div class="weui-cell__ft">
<input aria-labelledby="cb1_txt" id="cb1" disabled class="weui-switch" checked type="checkbox"/>
</div>
</label>
<label for="switchCP" class="weui-cell weui-cell_active weui-cell_switch">
<div class="weui-cell__bd" id="cp_txt" aria-hidden="true">兼容IE Edge的版本</div>
<div class="weui-cell__ft">

13
src/example/home.html
View File

@@ -136,7 +136,7 @@
</a>
<a class="weui-cell weui-cell_active weui-cell_access js_item" role="menuitem" data-id="steps" href="javascript:">
<div class="weui-cell__bd">
<p>steps</p>
<p>Steps</p>
</div>
<div class="weui-cell__ft"></div>
</a>
@@ -244,9 +244,20 @@
</div>
<script type="text/javascript">
$(function(){
function setFoot(){
var $foot = $('.page__ft');
if ($foot.length > 0) {
$foot.removeClass('j_bottom');
var winH = $(window).height();
if ($foot.offsetTop + $foot.offsetHeight < winH) {
$foot.addClass('j_bottom');
}
}
}
var winH = $(window).height();
var categorySpace = 10;
function expandMenu(){
setFoot();
var $this = $(this),
$inner = $this.next('.js_categoryInner'),
$page = $this.parents('.page'),

79
src/example/steps/steps_horizonal.html
View File

@@ -1,4 +1,56 @@
<div class="page">
<ul class="weui-steps weui-steps_horizonal">
<li class="weui-steps__item">
<div class="weui-steps__item__inner" style="display:none">
<strong class="weui-steps__item__title">标题</strong>
<span class="weui-steps__item__desc">描述内容详情</span>
</div>
</li>
<li class="weui-steps__item">
<div class="weui-steps__item__inner" style="display:none">
<strong class="weui-steps__item__title">标题</strong>
<span class="weui-steps__item__desc">描述内容详情</span>
</div>
</li>
<li class="weui-steps__item">
<div class="weui-steps__item__inner" style="display:none">
<strong class="weui-steps__item__title">标题</strong>
<span class="weui-steps__item__desc">描述内容详情</span>
</div>
</li>
<li class="weui-steps__item">
<div class="weui-steps__item__inner" style="display:none">
<strong class="weui-steps__item__title">标题</strong>
<span class="weui-steps__item__desc">描述内容详情</span>
</div>
</li>
</ul>
<ul class="weui-steps weui-steps_horizonal">
<li class="weui-steps__item weui-steps__item_success">
<div class="weui-steps__item__inner" style="display:none">
<strong class="weui-steps__item__title">标题</strong>
<span class="weui-steps__item__desc">描述内容详情</span>
</div>
</li>
<li class="weui-steps__item">
<div class="weui-steps__item__inner" style="display:none">
<strong class="weui-steps__item__title">标题</strong>
<span class="weui-steps__item__desc">描述内容详情</span>
</div>
</li>
<li class="weui-steps__item">
<div class="weui-steps__item__inner" style="display:none">
<strong class="weui-steps__item__title">标题</strong>
<span class="weui-steps__item__desc">描述内容详情</span>
</div>
</li>
<li class="weui-steps__item">
<div class="weui-steps__item__inner" style="display:none">
<strong class="weui-steps__item__title">标题</strong>
<span class="weui-steps__item__desc">描述内容详情</span>
</div>
</li>
</ul>
<ul class="weui-steps weui-steps_horizonal">
<li class="weui-steps__item weui-steps__item_success">
<div class="weui-steps__item__inner" style="display:none">
@@ -25,6 +77,33 @@
</div>
</li>
</ul>
<ul class="weui-steps weui-steps_horizonal">
<li class="weui-steps__item weui-steps__item_success">
<div class="weui-steps__item__inner" style="display:none">
<strong class="weui-steps__item__title">标题</strong>
<span class="weui-steps__item__desc">描述内容详情</span>
</div>
</li>
<li class="weui-steps__item weui-steps__item_success">
<div class="weui-steps__item__inner" style="display:none">
<strong class="weui-steps__item__title">标题</strong>
<span class="weui-steps__item__desc">描述内容详情</span>
</div>
</li>
<li class="weui-steps__item weui-steps__item_success">
<div class="weui-steps__item__inner" style="display:none">
<strong class="weui-steps__item__title">标题</strong>
<span class="weui-steps__item__desc">描述内容详情</span>
</div>
</li>
<li class="weui-steps__item weui-steps__item_success">
<div class="weui-steps__item__inner" style="display:none">
<strong class="weui-steps__item__title">标题</strong>
<span class="weui-steps__item__desc">描述内容详情</span>
</div>
</li>
</ul>
<ul class="weui-steps weui-steps_horizonal" style="display:none;">
<li class="weui-steps__item weui-steps__item_success">
<div class="weui-steps__item__inner">

34
src/example/steps/steps_vertical.html
View File

@@ -1,12 +1,12 @@
<div class="page">
<ul class="weui-steps weui-steps_vertical">
<li class="weui-steps__item weui-steps__item_success">
<li class="weui-steps__item">
<div class="weui-steps__item__inner">
<strong class="weui-steps__item__title">标题</strong>
<span class="weui-steps__item__desc">描述内容详情</span>
</div>
</li>
<li class="weui-steps__item weui-steps__item_success">
<li class="weui-steps__item">
<div class="weui-steps__item__inner">
<strong class="weui-steps__item__title">标题</strong>
<span class="weui-steps__item__desc">描述内容详情</span>
@@ -32,12 +32,38 @@
<span class="weui-steps__item__desc">描述内容详情</span>
</div>
</li>
<li class="weui-steps__item">
<div class="weui-steps__item__inner">
<strong class="weui-steps__item__title">标题</strong>
<span class="weui-steps__item__desc">描述内容详情</span>
</div>
</li>
<li class="weui-steps__item">
<div class="weui-steps__item__inner">
<strong class="weui-steps__item__title">标题</strong>
<span class="weui-steps__item__desc">描述内容详情</span>
</div>
</li>
<li class="weui-steps__item">
<div class="weui-steps__item__inner">
<strong class="weui-steps__item__title">标题</strong>
<span class="weui-steps__item__desc">描述内容详情</span>
</div>
</li>
</ul>
<ul class="weui-steps weui-steps_vertical">
<li class="weui-steps__item weui-steps__item_success">
<div class="weui-steps__item__inner">
<strong class="weui-steps__item__title">标题</strong>
<span class="weui-steps__item__desc">描述内容详情</span>
</div>
</li>
<li class="weui-steps__item weui-steps__item_success weui-steps__item_icon-prev">
<div class="weui-steps__item__inner">
<strong class="weui-steps__item__title">标题</strong>
<span class="weui-steps__item__desc">描述内容详情</span>
</div>
</li>
<li class="weui-steps__item weui-steps__item_icon">
<div class="weui-steps__item__inner">
<strong class="weui-steps__item__title">标题</strong>
@@ -65,13 +91,13 @@
<span class="weui-steps__item__desc">描述内容详情</span>
</div>
</li>
<li class="weui-steps__item weui-steps__item_success">
<li class="weui-steps__item weui-steps__item_icon-prev weui-steps__item_success">
<div class="weui-steps__item__inner">
<strong class="weui-steps__item__title">标题</strong>
<span class="weui-steps__item__desc">描述内容详情</span>
</div>
</li>
<li class="weui-steps__item weui-steps__item_icon">
<li class="weui-steps__item weui-steps__item_icon weui-steps__item_success">
<div class="weui-steps__item__inner">
<strong class="weui-steps__item__title">标题</strong>
<span class="weui-steps__item__desc">描述内容详情</span>

21
src/style/widget/weui-button/weui-btn_bottom-fixed.less
View File

@@ -80,25 +80,24 @@
padding: 0 calc(24px ~"+ env(safe-area-inset-right)") 0 calc(24px ~"+ env(safe-area-inset-left)");
}
.weui-half-screen-dialog__bd {
padding-bottom: 64px;
padding-bottom: 0;
}
.weui-half-screen-dialog__ft {
padding: 0 24px 64px;
padding: 0 calc(24px ~"+ constant(safe-area-inset-right)") 64px calc(24px ~"+ constant(safe-area-inset-left)");
padding: 0 calc(24px ~"+ env(safe-area-inset-right)") 64px calc(24px ~"+ env(safe-area-inset-left)");
padding: 0; // 底部悬浮按钮的半屏不需要ft，但防止开发者封装组件时强制包含ft要把padding设为0
}
.weui-bottom-fixed-opr-page {
flex: 1;
min-height: 0;
}
.weui-bottom-fixed-opr-page__content {
padding: 0 24px;
padding: 0 calc(24px ~"+ constant(safe-area-inset-right)") 0 calc(24px ~"+ constant(safe-area-inset-left)");
padding: 0 calc(24px ~"+ env(safe-area-inset-right)") 0 calc(24px ~"+ env(safe-area-inset-left)");
}
.weui-bottom-fixed-opr-page {
flex: 1;
min-height: 0;
.weui-bottom-fixed-opr {
padding: 16px 0 0;
}
.weui-bottom-fixed-opr {
padding: 16px 0 64px;
padding: 16px 0 ~"calc(64px + constant(safe-area-inset-bottom))";
padding: 16px 0 ~"calc(64px + env(safe-area-inset-bottom))";
}
}
}

1
src/style/widget/weui-cell/weui-access.less
View File

@@ -54,7 +54,6 @@
}
.weui-cell_link {
color: @weuiLinkColorDefault;
font-size: 17px;
// 由于weui-cell:first-child的:before为隐藏，所以这里要重新显示出来
&:first-child {

5
src/style/widget/weui-cell/weui-cell_global.less
View File

@@ -26,8 +26,6 @@ z-index:
.weui-cells {
margin-top: @weuiCellsMarginTop;
background-color: @weuiCellBg;
line-height: @weuiCellLineHeight;
font-size: @weuiCellFontSize; //cell中间有效高度23px，跟客户端默认图标尺寸一致
overflow: hidden; //因为每个cell的border使用before元素left搞的，ie下伪元素的containing block估计跟标准不同，在cell上用oh不生效
// onepx
@@ -79,6 +77,9 @@ z-index:
position: relative; //这个是为了兼容cells容器onepx方案被before挡住而做的
display: flex;
align-items: center;
line-height: @weuiCellLineHeight;
font-size: @weuiCellFontSize; //cell中间有效高度23px，跟客户端默认图标尺寸一致
color: @weuiTextColorTitle;
&:before {
.setTopLine(@weuiCellBorderColor);

8
src/style/widget/weui-cell/weui-cells__group.less
View File

@@ -48,9 +48,6 @@ body{
left: var(--weui-cellPaddingLR);
right: var(--weui-cellPaddingLR);
}
&:not(.weui-cell_link) {
color: @weuiTextColorTitle;
}
}
.weui-cell__hd {
padding-right: 16px;
@@ -103,11 +100,6 @@ body{
}
}
}
.weui-cell_access{
&:active{
background-color:transparent;
}
}
// 报错

7
src/style/widget/weui-cell/weui-check/weui-check_common.less
View File

@@ -18,6 +18,10 @@
.weui-check__label {
.setTapColor();
&.weui-cell_readonly,
&.weui-cell_disabled {
color:var(--weui-FG-3);
}
}
.weui-check {
@@ -26,4 +30,7 @@
width: 0;
height: 0;
overflow: hidden;
&[disabled] + .weui-icon-checked{
opacity:.1;
}
}

9
src/style/widget/weui-cell/weui-switch.less
View File

@@ -19,6 +19,10 @@
.weui-cell_switch {
padding-top: (@weuiCellHeight - @weuiSwitchHeight) / 2;
padding-bottom: (@weuiCellHeight - @weuiSwitchHeight) / 2;
&.weui-cell_readonly,
&.weui-cell_disabled {
color:var(--weui-FG-3);
}
}
.weui-switch {
appearance: none;
@@ -58,6 +62,11 @@
transform: translateX(20px);
}
}
.weui-switch[disabled],
.weui-switch-cp__input[disabled] + .weui-switch-cp__box,
.weui-switch-cp__input[aria-disabled="true"] + .weui-switch-cp__box {
opacity:.1;
}
// 兼容小程序/IE Edge的版本

5
src/style/widget/weui-panel/weui-panel.less
View File

@@ -32,6 +32,11 @@
&:after {
.setBottomLine(@weuiLineColorLight);
}
.weui-cells{
&:after {
display:none;
}
}
}
.weui-panel__hd {

83
src/style/widget/weui-steps/weui-steps.less
View File

@@ -25,10 +25,13 @@
body,page{
--weui-STEPS-DEFAULT-COLOR:var(--weui-FG-3);
--weui-STEPS-HIGHLIGHT-COLOR:var(--weui-BRAND);
--weui-STEPS-DOT-SIZE:~"calc(8 / var(--weui-STEPS-FONT-SIZE) * 1em)";
--weui-STEPS-ICON-SIZE:40;
--weui-STEPS-FONT-SIZE:17;
--weui-STEPS-LINEHEIGHT:1.4;
--weui-STEPS-DOT-SIZE:~"calc(8 / var(--weui-STEPS-FONT-SIZE) * 1em)";
--weui-STEPS-ICON-SIZE:40;
--weui-STEPS-VERTICAL-DOT-GAP:~"calc((1em - var(--weui-STEPS-DOT-SIZE)) / 2)";
--weui-STEPS-HORIZONAL-DOT-GAP:4px;
}
@@ -60,6 +63,15 @@ body,page{
top:~"calc((var(--weui-STEPS-LINEHEIGHT) - (var(--weui-STEPS-LINEHEIGHT) - 1) / 2) * 1em)"; // 线的顶部跟文字区域底部对齐
bottom:~"calc((var(--weui-STEPS-LINEHEIGHT) - 1) / 2 * -1em)"; // 线的底部跟下个步骤的文字区域顶部对齐
}
&:first-child{
&:not(.weui-steps__item_success){
.weui-steps__item__inner{
&:before{
background-color:var(--weui-STEPS-HIGHLIGHT-COLOR);
}
}
}
}
&:last-child{
&:before{
display:none;
@@ -86,6 +98,33 @@ body,page{
transform:translate(-50%, -50%); // 和步骤文本第一行垂直居中
}
}
.weui-steps__icon{
font-size:~"calc(1px * var(--weui-STEPS-FONT-SIZE))";
width:~"calc(var(--weui-STEPS-ICON-SIZE) / var(--weui-STEPS-FONT-SIZE) * 1em)";
height:~"calc(var(--weui-STEPS-ICON-SIZE) / var(--weui-STEPS-FONT-SIZE) * 1em)";
position:absolute;
z-index:1;
left:0;
top:~"calc(var(--weui-STEPS-LINEHEIGHT) / 2 * 1em)";
transform:translate(-50%, -50%);
margin-top:~"calc((var(--weui-STEPS-ICON-SIZE) / var(--weui-STEPS-FONT-SIZE) * 1em - 1em) / 2 - .28em)"; // 和文本第一行顶对齐，不能直接top0，因为上下都需要盖住线，最后的0.28em是图标的空白区域多余出来
}
.weui-steps__item_icon{
&:before{
top:~"calc(var(--weui-STEPS-VERTICAL-DOT-GAP) + var(--weui-STEPS-ICON-SIZE) / var(--weui-STEPS-FONT-SIZE) * 1em - .14em)"; // 最后的0.14em是因为图标的空白区域需要计算进去
}
.weui-steps__item__inner{
&:before{
display:none;
}
}
}
.weui-steps__item_icon-prev{
&:before{
bottom:~"calc(var(--weui-STEPS-VERTICAL-DOT-GAP) - (var(--weui-STEPS-LINEHEIGHT) - 1) / 2 * 1em + .14em)"; // 最后0.14em是因为图标的空白区域需要计算进去
}
}
.weui-steps__item_success{
&:before{
border-color:var(--weui-STEPS-HIGHLIGHT-COLOR);
@@ -103,39 +142,6 @@ body,page{
}
}
}
.weui-steps__item_icon{
.weui-steps__item__inner{
&:before{
display:none;
}
// 由于图标大小不确定性，可能与线重叠，所以需要一个背景色块盖住
&:after {
content:"";
width:~"calc(var(--weui-STEPS-ICON-SIZE) / var(--weui-STEPS-FONT-SIZE) * 1em + (.5em - var(--weui-STEPS-DOT-SIZE) / 2))";
height:~"calc(var(--weui-STEPS-ICON-SIZE) / var(--weui-STEPS-FONT-SIZE) * 1em + (.5em - var(--weui-STEPS-DOT-SIZE) / 2))";
background-color:var(--weui-BG-2);
position:absolute;
left:0;
top:~"calc(var(--weui-STEPS-LINEHEIGHT) / 2 * 1em)";
transform:translate(-50%, -50%);
margin-top:~"calc((var(--weui-STEPS-ICON-SIZE) / var(--weui-STEPS-FONT-SIZE) * 1em - 1em) / 2 - .28em)"; // 和文本第一行顶对齐，不能直接top0，因为上下都需要盖住线，最后减去0.28em是图标的空白区域
}
}
}
.weui-steps__icon{
font-size:~"1px * var(--weui-STEPS-FONT-SIZE)";
width:~"calc(var(--weui-STEPS-ICON-SIZE) / var(--weui-STEPS-FONT-SIZE) * 1em)";
height:~"calc(var(--weui-STEPS-ICON-SIZE) / var(--weui-STEPS-FONT-SIZE) * 1em)";
position:absolute;
z-index:1;
left:0;
top:~"calc(var(--weui-STEPS-LINEHEIGHT) / 2 * 1em)";
transform:translate(-50%, -50%);
margin-top:~"calc((var(--weui-STEPS-ICON-SIZE) / var(--weui-STEPS-FONT-SIZE) * 1em - 1em) / 2 - .28em)"; // 和文本第一行顶对齐，不能直接top0，因为上下都需要盖住线，最后减去0.28em是图标的空白区域
}
}
.weui-steps_horizonal{
@@ -167,6 +173,13 @@ body,page{
display:none;
}
}
&:first-child{
&:not(.weui-steps__item_success){
&:before{
background:var(--weui-STEPS-HIGHLIGHT-COLOR);
}
}
}
}
.weui-steps__item__inner{
margin-left:8px;

14
src/style/widget/weui-tips/weui-half-screen-dialog.less
View File

@@ -36,8 +36,8 @@
display: flex;
flex-direction: column;
@media only screen and (max-height: 558px) {
max-height: none;
@media only screen and (max-device-height: 558px) {
max-height: ~"calc(100% - 16px)";
}
}
.weui-half-screen-dialog__hd {
@@ -115,6 +115,16 @@
.weui-half-screen-dialog__ft {
padding: 0 0 64px;
text-align: center;
// 兼容旧版没有.weui-half-screen-dialog__btn-area的场景
.weui-btn:nth-last-child(n+2),
.weui-btn:nth-last-child(n+2) + .weui-btn {
display: inline-block;
vertical-align: top;
margin:0 8px;
width: 120px;
}
}
.weui-half-screen-dialog__btn-area {
.weuiBtnWrapLayoutDefault();