mirror of
https://github.com/Tencent/weui.git
synced 2026-03-13 08:02:03 +08:00
feat: v2.5.16
This commit is contained in:
11
CHANGELOG.md
11
CHANGELOG.md
@@ -1,3 +1,14 @@
|
||||
### v2.5.16 (2023-01-16)
|
||||
|
||||
#### Features
|
||||
* feat: 升级picker样式
|
||||
* feat: 升级loading样式
|
||||
|
||||
#### Bugfixes
|
||||
* fix: 统一“正在加载”文案
|
||||
|
||||
|
||||
|
||||
### v2.5.15 (2022-12-26)
|
||||
|
||||
#### Features
|
||||
|
||||
2
dist/example/example.css
vendored
2
dist/example/example.css
vendored
File diff suppressed because one or more lines are too long
36
dist/example/index.html
vendored
36
dist/example/index.html
vendored
@@ -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
129
dist/style/weui.css
vendored
File diff suppressed because one or more lines are too long
6
dist/style/weui.min.css
vendored
6
dist/style/weui.min.css
vendored
File diff suppressed because one or more lines are too long
@@ -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",
|
||||
|
||||
@@ -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>
|
||||
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
|
||||
@@ -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">
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -34,7 +34,8 @@
|
||||
onConfirm: function (result) {
|
||||
console.log(result);
|
||||
},
|
||||
title: '单列选择器'
|
||||
title: '单列选择器',
|
||||
showClose: false
|
||||
});
|
||||
});
|
||||
$('#showDatePicker').on('click', function () {
|
||||
|
||||
@@ -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>
|
||||
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -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);
|
||||
|
||||
@@ -16,6 +16,9 @@
|
||||
|
||||
@import "../../base/fn";
|
||||
|
||||
|
||||
// css画的圆圈loading
|
||||
|
||||
// 默认色
|
||||
.weui-primary-loading {
|
||||
font-size: 16px;
|
||||
|
||||
@@ -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 {
|
||||
|
||||
@@ -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 {
|
||||
|
||||
@@ -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;
|
||||
|
||||
Reference in New Issue
Block a user