feat: v2.5.16

This commit is contained in:
xushengni
2023-01-16 15:15:17 +08:00
parent 992f9c8830
commit 0c596318a8
19 changed files with 181 additions and 135 deletions

View File

@@ -1,3 +1,14 @@
### v2.5.16 (2023-01-16)
#### Features
* feat: 升级picker样式
* feat: 升级loading样式
#### Bugfixes
* fix: 统一“正在加载”文案
### v2.5.15 (2022-12-26)
#### Features

View File

File diff suppressed because one or more lines are too long

View File

@@ -467,13 +467,14 @@
<div class="button-sp-area">
<a href="javascript:" role="button" class="weui-btn weui-btn_primary">主要操作</a>
<a href="javascript:" role="button" title="等待中" class="weui-btn weui-btn_primary weui-btn_loading"><span class="weui-primary-loading weui-primary-loading_transparent"><i class="weui-primary-loading__dot"></i></span>主要操作</a>
<a href="javascript:" role="button" title="正在操作" class="weui-btn weui-btn_primary weui-btn_loading"><i class="weui-mask-loading"></i>主要操作</a>
<a href="javascript:" role="button" title="正在操作" class="weui-btn weui-btn_primary weui-btn_loading"><i class="weui-mask-loading"></i></span>主要操作</a>
<a href="javascript:" role="button" aria-disabled="true" disabled class="weui-btn weui-btn_disabled weui-btn_primary">主要操作</a>
<a href="javascript:" role="button" class="weui-btn weui-btn_default">次要操作</a>
<a href="javascript:" role="button" title="等待中" class="weui-btn weui-btn_default weui-btn_loading"><span class="weui-primary-loading"><i class="weui-primary-loading__dot"></i></span>次要操作</a>
<a href="javascript:" role="button" title="正在操作" class="weui-btn weui-btn_default weui-btn_loading"><i class="weui-mask-loading"></i>次要操作</a>
<a href="javascript:" role="button" aria-disabled="true" disabled class="weui-btn weui-btn_disabled weui-btn_default">次要操作</a>
<a href="javascript:" role="button" class="weui-btn weui-btn_warn">警示操作</a>
<a href="javascript:" role="button" title="等待中" class="weui-btn weui-btn_warn weui-btn_loading"><span class="weui-primary-loading"><i class="weui-primary-loading__dot"></i></span>警示操作</a>
<a href="javascript:" role="button" title="正在操作" class="weui-btn weui-btn_warn weui-btn_loading"><i class="weui-mask-loading"></i>警示操作</a>
<a href="javascript:" role="button" aria-disabled="true" disabled class="weui-btn weui-btn_disabled weui-btn_warn">警示操作</a>
</div>
@@ -2009,7 +2010,7 @@
<a href="javascript:" role="button" class="weui-btn weui-btn_default" id="showToast">成功提示</a>
<a href="javascript:" role="button" class="weui-btn weui-btn_default" id="showWarnToast">失败提示</a>
<a href="javascript:" role="button" class="weui-btn weui-btn_default" id="showTextMoreToast">长文案提示</a>
<a href="javascript:" role="button" class="weui-btn weui-btn_default" id="showLoadingToast">加载中提示</a>
<a href="javascript:" role="button" class="weui-btn weui-btn_default" id="showLoadingToast">正在加载提示</a>
<a href="javascript:" role="button" class="weui-btn weui-btn_default" id="showTextToast">文字提示</a>
</div>
@@ -2047,7 +2048,7 @@
<span class="weui-primary-loading weui-icon_toast">
<span class="weui-primary-loading__dot"></span>
</span>
<p class="weui-toast__content">加载中</p>
<p class="weui-toast__content">正在加载</p>
</div>
</div>
@@ -3736,7 +3737,8 @@
onConfirm: function (result) {
console.log(result);
},
title: '单列选择器'
title: '单列选择器',
showClose: false
});
});
$('#showDatePicker').on('click', function () {
@@ -3860,20 +3862,16 @@
<div class="page">
<div class="page__hd">
<h1 class="page__title">Loading</h1>
<p class="page__desc">加载中</p>
<p class="page__desc">正在加载</p>
</div>
<div class="page__bd">
<div class="loading_demo">
<i role="img" aria-label="加载中" class="weui-loading"></i>
<span role="img" aria-label="加载中" class="weui-primary-loading">
<span class="weui-primary-loading__dot"></span>
</span>
<span role="img" aria-label="加载中" class="weui-primary-loading weui-primary-loading_brand">
<span class="weui-primary-loading__dot"></span>
</span>
<span role="img" aria-label="加载中" class="weui-primary-loading weui-primary-loading_transparent">
<span class="weui-primary-loading__dot"></span>
</span>
<div class="loading_demo_inner">
<i role="img" aria-label="正在加载" class="weui-loading"></i>
<i role="img" aria-label="正在加载" class="weui-mask-loading"></i>
<i role="img" aria-label="正在加载" class="weui-mask-loading" style="color:var(--weui-BRAND);"></i>
<i role="img" aria-label="正在加载" class="weui-mask-loading" style="color:#EDEDED"></i>
</div>
</div>
</div>
</div>
@@ -3887,7 +3885,7 @@
</div>
<div class="page__bd">
<div role="alert" class="weui-loadmore">
<span aria-hidden="true" role="img" aria-label="加载中" class="weui-primary-loading">
<span aria-hidden="true" role="img" aria-label="正在加载" class="weui-primary-loading">
<i class="weui-primary-loading__dot"></i>
</span>
<span class="weui-loadmore__tips">正在加载</span>
@@ -4294,7 +4292,7 @@
</script>
<script src="./zepto.min.js"></script>
<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
<script src="https://res.wx.qq.com/t/wx_fed/cdn_libs/res/weui/1.2.8/weui.min.js"></script>
<script src="https://res.wx.qq.com/t/wx_fed/weui.js/res/1.2.17/weui.min.js"></script>
<script src="./example.js"></script>
<script src="./wah.js"></script>
<script type="text/javascript">

129
dist/style/weui.css vendored
View File

File diff suppressed because one or more lines are too long

View File

File diff suppressed because one or more lines are too long

View File

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

View File

@@ -7,13 +7,14 @@
<div class="button-sp-area">
<a href="javascript:" role="button" class="weui-btn weui-btn_primary">主要操作</a>
<a href="javascript:" role="button" title="等待中" class="weui-btn weui-btn_primary weui-btn_loading"><span class="weui-primary-loading weui-primary-loading_transparent"><i class="weui-primary-loading__dot"></i></span>主要操作</a>
<a href="javascript:" role="button" title="正在操作" class="weui-btn weui-btn_primary weui-btn_loading"><i class="weui-mask-loading"></i>主要操作</a>
<a href="javascript:" role="button" title="正在操作" class="weui-btn weui-btn_primary weui-btn_loading"><i class="weui-mask-loading"></i></span>主要操作</a>
<a href="javascript:" role="button" aria-disabled="true" disabled class="weui-btn weui-btn_disabled weui-btn_primary">主要操作</a>
<a href="javascript:" role="button" class="weui-btn weui-btn_default">次要操作</a>
<a href="javascript:" role="button" title="等待中" class="weui-btn weui-btn_default weui-btn_loading"><span class="weui-primary-loading"><i class="weui-primary-loading__dot"></i></span>次要操作</a>
<a href="javascript:" role="button" title="正在操作" class="weui-btn weui-btn_default weui-btn_loading"><i class="weui-mask-loading"></i>次要操作</a>
<a href="javascript:" role="button" aria-disabled="true" disabled class="weui-btn weui-btn_disabled weui-btn_default">次要操作</a>
<a href="javascript:" role="button" class="weui-btn weui-btn_warn">警示操作</a>
<a href="javascript:" role="button" title="等待中" class="weui-btn weui-btn_warn weui-btn_loading"><span class="weui-primary-loading"><i class="weui-primary-loading__dot"></i></span>警示操作</a>
<a href="javascript:" role="button" title="正在操作" class="weui-btn weui-btn_warn weui-btn_loading"><i class="weui-mask-loading"></i>警示操作</a>
<a href="javascript:" role="button" aria-disabled="true" disabled class="weui-btn weui-btn_disabled weui-btn_warn">警示操作</a>
</div>

View File

@@ -593,7 +593,9 @@ body,
display: flex;
align-items: center;
justify-content: center;
margin:10px 40px;
.weui-loading,
.weui-mask-loading,
.weui-primary-loading {
margin: 0 5px;
}

View File

@@ -97,7 +97,7 @@
</script>
<script src="./zepto.min.js"></script>
<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
<script src="https://res.wx.qq.com/t/wx_fed/cdn_libs/res/weui/1.2.8/weui.min.js"></script>
<script src="https://res.wx.qq.com/t/wx_fed/weui.js/res/1.2.17/weui.min.js"></script>
<script src="./example.js"></script>
<script src="./wah.js"></script>
<script type="text/javascript">

View File

@@ -1,20 +1,16 @@
<div class="page">
<div class="page__hd">
<h1 class="page__title">Loading</h1>
<p class="page__desc">加载中</p>
<p class="page__desc">正在加载</p>
</div>
<div class="page__bd">
<div class="loading_demo">
<i role="img" aria-label="加载中" class="weui-loading"></i>
<span role="img" aria-label="加载中" class="weui-primary-loading">
<span class="weui-primary-loading__dot"></span>
</span>
<span role="img" aria-label="加载中" class="weui-primary-loading weui-primary-loading_brand">
<span class="weui-primary-loading__dot"></span>
</span>
<span role="img" aria-label="加载中" class="weui-primary-loading weui-primary-loading_transparent">
<span class="weui-primary-loading__dot"></span>
</span>
<div class="loading_demo_inner">
<i role="img" aria-label="正在加载" class="weui-loading"></i>
<i role="img" aria-label="正在加载" class="weui-mask-loading"></i>
<i role="img" aria-label="正在加载" class="weui-mask-loading" style="color:var(--weui-BRAND);"></i>
<i role="img" aria-label="正在加载" class="weui-mask-loading" style="color:#EDEDED"></i>
</div>
</div>
</div>
</div>

View File

@@ -5,7 +5,7 @@
</div>
<div class="page__bd">
<div role="alert" class="weui-loadmore">
<span aria-hidden="true" role="img" aria-label="加载中" class="weui-primary-loading">
<span aria-hidden="true" role="img" aria-label="正在加载" class="weui-primary-loading">
<i class="weui-primary-loading__dot"></i>
</span>
<span class="weui-loadmore__tips">正在加载</span>

View File

@@ -34,7 +34,8 @@
onConfirm: function (result) {
console.log(result);
},
title: '单列选择器'
title: '单列选择器',
showClose: false
});
});
$('#showDatePicker').on('click', function () {

View File

@@ -7,7 +7,7 @@
<a href="javascript:" role="button" class="weui-btn weui-btn_default" id="showToast">成功提示</a>
<a href="javascript:" role="button" class="weui-btn weui-btn_default" id="showWarnToast">失败提示</a>
<a href="javascript:" role="button" class="weui-btn weui-btn_default" id="showTextMoreToast">长文案提示</a>
<a href="javascript:" role="button" class="weui-btn weui-btn_default" id="showLoadingToast">加载中提示</a>
<a href="javascript:" role="button" class="weui-btn weui-btn_default" id="showLoadingToast">正在加载提示</a>
<a href="javascript:" role="button" class="weui-btn weui-btn_default" id="showTextToast">文字提示</a>
</div>
@@ -45,7 +45,7 @@
<span class="weui-primary-loading weui-icon_toast">
<span class="weui-primary-loading__dot"></span>
</span>
<p class="weui-toast__content">加载中</p>
<p class="weui-toast__content">正在加载</p>
</div>
</div>

View File

@@ -18,7 +18,11 @@
.weui-btn_loading {
.weui-loading {
margin: -0.2em 0.34em 0 0;
margin: -0.2em 8px 0 0;
}
.weui-mask-loading {
margin: -0.2em 8px 0 0;
color: currentColor;
}
.weui-primary-loading {
margin: -0.2em 8px 0 0;

View File

@@ -18,21 +18,33 @@
@import "./weui-primary-loading";
.weui-loading {
font-size: 10px;
width: 2em;
height: 2em;
font-size: 16px;
width: 1em;
height: 1em;
display: inline-block;
vertical-align: middle;
animation: weuiLoading 1s steps(12, end) infinite;
background: transparent url("data:image/svg+xml;charset=utf8, %3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 100 100'%3E%3Cpath fill='none' d='M0 0h100v100H0z'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='%23E9E9E9' rx='5' ry='5' transform='translate(0 -30)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='%23989697' rx='5' ry='5' transform='rotate(30 105.98 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='%239B999A' rx='5' ry='5' transform='rotate(60 75.98 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='%23A3A1A2' rx='5' ry='5' transform='rotate(90 65 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='%23ABA9AA' rx='5' ry='5' transform='rotate(120 58.66 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='%23B2B2B2' rx='5' ry='5' transform='rotate(150 54.02 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='%23BAB8B9' rx='5' ry='5' transform='rotate(180 50 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='%23C2C0C1' rx='5' ry='5' transform='rotate(-150 45.98 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='%23CBCBCB' rx='5' ry='5' transform='rotate(-120 41.34 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='%23D2D2D2' rx='5' ry='5' transform='rotate(-90 35 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='%23DADADA' rx='5' ry='5' transform='rotate(-60 24.02 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='%23E2E2E2' rx='5' ry='5' transform='rotate(-30 -5.98 65)'/%3E%3C/svg%3E") no-repeat;
background: transparent url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg width='80px' height='80px' viewBox='0 0 80 80' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Ctitle%3Eloading%3C/title%3E%3Cdefs%3E%3ClinearGradient x1='94.0869141%25' y1='0%25' x2='94.0869141%25' y2='90.559082%25' id='linearGradient-1'%3E%3Cstop stop-color='%23606060' stop-opacity='0' offset='0%25'%3E%3C/stop%3E%3Cstop stop-color='%23606060' stop-opacity='0.3' offset='100%25'%3E%3C/stop%3E%3C/linearGradient%3E%3ClinearGradient x1='100%25' y1='8.67370605%25' x2='100%25' y2='90.6286621%25' id='linearGradient-2'%3E%3Cstop stop-color='%23606060' offset='0%25'%3E%3C/stop%3E%3Cstop stop-color='%23606060' stop-opacity='0.3' offset='100%25'%3E%3C/stop%3E%3C/linearGradient%3E%3C/defs%3E%3Cg stroke='none' stroke-width='1' fill='none' fill-rule='evenodd' opacity='0.9'%3E%3Cg%3E%3Cpath d='M40,0 C62.09139,0 80,17.90861 80,40 C80,62.09139 62.09139,80 40,80 L40,73 C58.2253967,73 73,58.2253967 73,40 C73,21.7746033 58.2253967,7 40,7 L40,0 Z' fill='url(%23linearGradient-1)'%3E%3C/path%3E%3Cpath d='M40,0 L40,7 C21.7746033,7 7,21.7746033 7,40 C7,58.2253967 21.7746033,73 40,73 L40,80 C17.90861,80 0,62.09139 0,40 C0,17.90861 17.90861,0 40,0 Z' fill='url(%23linearGradient-2)'%3E%3C/path%3E%3Ccircle id='Oval' fill='%23606060' cx='40.5' cy='3.5' r='3.5'%3E%3C/circle%3E%3C/g%3E%3CanimateTransform attributeName='transform' begin='0s' dur='1s' type='rotate' values='0 40 40;360 40 40' repeatCount='indefinite'/%3E%3C/g%3E%3C/svg%3E%0A") no-repeat;
background-size: 100%;
&.weui-loading_transparent,
&.weui-icon_toast,
.weui-btn_loading.weui-btn_primary & {
background-image: url("data:image/svg+xml;charset=utf8, %3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 100 100'%3E%3Cpath fill='none' d='M0 0h100v100H0z'/%3E%3Crect xmlns='http://www.w3.org/2000/svg' width='7' height='20' x='46.5' y='40' fill='rgba(255,255,255,.56)' rx='5' ry='5' transform='translate(0 -30)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='rgba(255,255,255,.5)' rx='5' ry='5' transform='rotate(30 105.98 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='rgba(255,255,255,.43)' rx='5' ry='5' transform='rotate(60 75.98 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='rgba(255,255,255,.38)' rx='5' ry='5' transform='rotate(90 65 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='rgba(255,255,255,.32)' rx='5' ry='5' transform='rotate(120 58.66 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='rgba(255,255,255,.28)' rx='5' ry='5' transform='rotate(150 54.02 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='rgba(255,255,255,.25)' rx='5' ry='5' transform='rotate(180 50 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='rgba(255,255,255,.2)' rx='5' ry='5' transform='rotate(-150 45.98 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='rgba(255,255,255,.17)' rx='5' ry='5' transform='rotate(-120 41.34 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='rgba(255,255,255,.14)' rx='5' ry='5' transform='rotate(-90 35 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='rgba(255,255,255,.1)' rx='5' ry='5' transform='rotate(-60 24.02 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='rgba(255,255,255,.03)' rx='5' ry='5' transform='rotate(-30 -5.98 65)'/%3E%3C/svg%3E");
background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg width='80px' height='80px' viewBox='0 0 80 80' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Ctitle%3Eloading%3C/title%3E%3Cdefs%3E%3ClinearGradient x1='94.0869141%25' y1='0%25' x2='94.0869141%25' y2='90.559082%25' id='linearGradient-1'%3E%3Cstop stop-color='%23ededed' stop-opacity='0' offset='0%25'%3E%3C/stop%3E%3Cstop stop-color='%23ededed' stop-opacity='0.3' offset='100%25'%3E%3C/stop%3E%3C/linearGradient%3E%3ClinearGradient x1='100%25' y1='8.67370605%25' x2='100%25' y2='90.6286621%25' id='linearGradient-2'%3E%3Cstop stop-color='%23ededed' offset='0%25'%3E%3C/stop%3E%3Cstop stop-color='%23ededed' stop-opacity='0.3' offset='100%25'%3E%3C/stop%3E%3C/linearGradient%3E%3C/defs%3E%3Cg stroke='none' stroke-width='1' fill='none' fill-rule='evenodd' opacity='0.9'%3E%3Cg%3E%3Cpath d='M40,0 C62.09139,0 80,17.90861 80,40 C80,62.09139 62.09139,80 40,80 L40,73 C58.2253967,73 73,58.2253967 73,40 C73,21.7746033 58.2253967,7 40,7 L40,0 Z' fill='url(%23linearGradient-1)'%3E%3C/path%3E%3Cpath d='M40,0 L40,7 C21.7746033,7 7,21.7746033 7,40 C7,58.2253967 21.7746033,73 40,73 L40,80 C17.90861,80 0,62.09139 0,40 C0,17.90861 17.90861,0 40,0 Z' fill='url(%23linearGradient-2)'%3E%3C/path%3E%3Ccircle id='Oval' fill='%23ededed' cx='40.5' cy='3.5' r='3.5'%3E%3C/circle%3E%3C/g%3E%3CanimateTransform attributeName='transform' begin='0s' dur='1s' type='rotate' values='0 40 40;360 40 40' repeatCount='indefinite'/%3E%3C/g%3E%3C/svg%3E%0A");
}
}
.weui-mask-loading{
display: inline-block;
vertical-align: middle;
font-size:16px;
width:1em;
height:1em;
mask:url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg width='80px' height='80px' viewBox='0 0 80 80' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Ctitle%3Eloading%3C/title%3E%3Cdefs%3E%3ClinearGradient x1='94.0869141%25' y1='0%25' x2='94.0869141%25' y2='90.559082%25' id='linearGradient-1'%3E%3Cstop stop-color='%23606060' stop-opacity='0' offset='0%25'%3E%3C/stop%3E%3Cstop stop-color='%23606060' stop-opacity='0.3' offset='100%25'%3E%3C/stop%3E%3C/linearGradient%3E%3ClinearGradient x1='100%25' y1='8.67370605%25' x2='100%25' y2='90.6286621%25' id='linearGradient-2'%3E%3Cstop stop-color='%23606060' offset='0%25'%3E%3C/stop%3E%3Cstop stop-color='%23606060' stop-opacity='0.3' offset='100%25'%3E%3C/stop%3E%3C/linearGradient%3E%3C/defs%3E%3Cg stroke='none' stroke-width='1' fill='none' fill-rule='evenodd' opacity='0.9'%3E%3Cg%3E%3Cpath d='M40,0 C62.09139,0 80,17.90861 80,40 C80,62.09139 62.09139,80 40,80 L40,73 C58.2253967,73 73,58.2253967 73,40 C73,21.7746033 58.2253967,7 40,7 L40,0 Z' fill='url(%23linearGradient-1)'%3E%3C/path%3E%3Cpath d='M40,0 L40,7 C21.7746033,7 7,21.7746033 7,40 C7,58.2253967 21.7746033,73 40,73 L40,80 C17.90861,80 0,62.09139 0,40 C0,17.90861 17.90861,0 40,0 Z' fill='url(%23linearGradient-2)'%3E%3C/path%3E%3Ccircle id='Oval' fill='%23606060' cx='40.5' cy='3.5' r='3.5'%3E%3C/circle%3E%3C/g%3E%3CanimateTransform attributeName='transform' begin='0s' dur='1s' type='rotate' values='0 40 40;360 40 40' repeatCount='indefinite'/%3E%3C/g%3E%3C/svg%3E%0A") 0 0 no-repeat;
mask-size:cover;
background-color: currentColor;
color:#606060;
}
@-webkit-keyframes weuiLoading {
0% {
transform: rotate3d(0, 0, 1, 0deg);

View File

@@ -16,6 +16,9 @@
@import "../../base/fn";
// css画的圆圈loading
// 默认色
.weui-primary-loading {
font-size: 16px;

View File

@@ -16,7 +16,7 @@
@import "../../base/fn";
@pickerItemHeight: 48px;
@pickerItemHeight: 56px;
.weui-picker {
position: fixed;
width: 100%;
@@ -25,13 +25,25 @@
bottom: 0;
z-index: 5000;
background-color: var(--weui-BG-2);
padding-bottom: constant(safe-area-inset-bottom);
padding-bottom: env(safe-area-inset-bottom);
padding-left:0;
padding-left: constant(safe-area-inset-left);
padding-left: env(safe-area-inset-left);
padding-right:0;
padding-right: constant(safe-area-inset-right);
padding-right: env(safe-area-inset-right);
backface-visibility: hidden;
transform: translate(0, 100%);
//slide up animation
transition: transform 0.3s;
outline:0;
.weui-half-screen-dialog__hd{
padding-left:24px;
padding-right:24px;
}
.weui-half-screen-dialog__bd{
overflow:visible;
}
}
.weui-picker__hd {
@@ -60,16 +72,19 @@
flex: 1;
position: relative;
height: 100%;
font-size:17px;
&:first-child {
.weui-picker__item {
padding-left: constant(safe-area-inset-left);
padding-left: env(safe-area-inset-left);
.weui-picker__indicator{
left:8px;
border-top-left-radius:8px;
border-bottom-left-radius:8px;
}
}
&:last-child {
.weui-picker__item {
padding-right: constant(safe-area-inset-right);
padding-right: env(safe-area-inset-right);
.weui-picker__indicator{
right:8px;
border-top-right-radius:8px;
border-bottom-right-radius:8px;
}
}
}
@@ -88,24 +103,19 @@
});
background-position: top, bottom;
background-size: 100% 92px;
background-size: 100% (2 * @pickerItemHeight);
background-repeat: no-repeat;
transform: translateZ(0);
}
.weui-picker__indicator {
width: 100%;
height: 56px;
height: @pickerItemHeight;
position: absolute;
top: 112px;
left: 0;
top: 92px;
z-index: 3;
&:before {
.setTopLine(@weuiLineColorLight);
}
&:after {
.setBottomLine(@weuiLineColorLight);
}
right: 0;
z-index: 1;
background:var(--weui-BG-3);
}
.weui-picker__content {
@@ -113,6 +123,7 @@
top: 0;
left: 0;
width: 100%;
z-index:2;
}
.weui-picker__item {

View File

@@ -26,6 +26,7 @@
z-index: 5000;
line-height: 1.4;
background-color: var(--weui-BG-2);
color:var(--weui-FG-0);
border-top-left-radius: 12px;
border-top-right-radius: 12px;
overflow: hidden;
@@ -78,7 +79,7 @@
.weui-half-screen-dialog__title {
display: block;
color: var(--weui-FG-0);
font-weight: 700;
font-weight: 500;
font-size: 15px;
}
.weui-half-screen-dialog__subtitle {

View File

@@ -64,8 +64,9 @@
color: rgba(255, 255, 255, 0.9);
}
&.weui-loading {
width: 3.6em;
height: 3.6em;
width:1em;
height:1em;
font-size:40px;
}
&.weui-primary-loading {
display:flex;