标题
diff --git a/src/style/base/a11y.less b/src/style/base/a11y.less
index f8312721..c0f4df26 100644
--- a/src/style/base/a11y.less
+++ b/src/style/base/a11y.less
@@ -17,66 +17,66 @@
@import "fn";
.weui-hidden_abs {
- opacity: 0;
- position: absolute;
- width: 1px;//1px是为了兼容ios15
- height: 1px;
- overflow: hidden;
+ opacity: 0;
+ position: absolute;
+ width: 1px;//1px是为了兼容ios15
+ height: 1px;
+ overflow: hidden;
}
-.weui-a11y_ref{
- display:none;
+.weui-a11y_ref {
+ display: none;
}
.weui-hidden-space:empty {
- &:before {
- content: "\00A0";
- position: absolute;
- width: 1px;
- height: 1px;
- overflow: hidden;
- }
+ &::before {
+ content: "\00A0";
+ position: absolute;
+ width: 1px;
+ height: 1px;
+ overflow: hidden;
+ }
}
.weui-a11y-combo {
- position: relative;
+ position: relative;
}
.weui-a11y-combo__helper {
- opacity: 0;
- position: absolute;
- width: 100%;
- height: 100%;
- overflow: hidden;
+ opacity: 0;
+ position: absolute;
+ width: 100%;
+ height: 100%;
+ overflow: hidden;
}
.weui-a11y-combo__content {
- position: relative;
- z-index: 1;
+ position: relative;
+ z-index: 1;
}
.weui-wa-hotarea-el {
- position: absolute;
- top: 50%;
- left: 50%;
- transform: translate(-50%, -50%);
- min-width: 44px;
- min-height: 44px;
- width: 100%;
- height: 100%;
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+ min-width: 44px;
+ min-height: 44px;
+ width: 100%;
+ height: 100%;
}
.weui-wa-hotarea-el__wrp,
.weui-wa-hotarea,
.weui-wa-hotarea_before {
- position: relative;
+ position: relative;
- // 如果是合法的点击嵌套，例如label[for]里的出现链接，需要把层级提高
- a ,
- button,
- navigator {
- position: relative;
- z-index: 1;
- }
+ // 如果是合法的点击嵌套，例如label[for]里的出现链接，需要把层级提高
+ a,
+ button,
+ navigator {
+ position: relative;
+ z-index: 1;
+ }
}
-.weui-wa-hotarea_before:before,
-.weui-wa-hotarea:after {
- content: "";
- pointer-events:auto;
- .weui-wa-hotarea-el;
+.weui-wa-hotarea_before::before,
+.weui-wa-hotarea::after {
+ content: "";
+ pointer-events: auto;
+ .weui-wa-hotarea-el;
}
diff --git a/src/style/base/mixin/btnWrapLayout.less b/src/style/base/mixin/btnWrapLayout.less
index 76b7fb19..f7139fbe 100644
--- a/src/style/base/mixin/btnWrapLayout.less
+++ b/src/style/base/mixin/btnWrapLayout.less
@@ -14,7 +14,7 @@
* limitations under the License.
*/
-.weuiBtnWrapLayoutDefault(){
+.weuiBtnWrapLayoutDefault() {
display: flex;
align-items: center;
justify-content: center;
@@ -35,9 +35,8 @@
margin-right: 0;
}
}
-
}
-.weuiBtnWrapLayoutWrap(){
+.weuiBtnWrapLayoutWrap() {
flex-direction: column;
.weui-btn:nth-last-child(n+2),
.weui-btn:nth-last-child(n+2) + .weui-btn {
diff --git a/src/style/base/mixin/mobile.less b/src/style/base/mixin/mobile.less
index bf6e7904..cf33cd85 100644
--- a/src/style/base/mixin/mobile.less
+++ b/src/style/base/mixin/mobile.less
@@ -15,7 +15,7 @@
*/
.setTapColor(@c:rgba(0,0,0,0)) {
- -webkit-tap-highlight-color: @c;
+ -webkit-tap-highlight-color: @c;
}
diff --git a/src/style/base/mixin/setArrow.less b/src/style/base/mixin/setArrow.less
index 6a3ca930..e03447a5 100644
--- a/src/style/base/mixin/setArrow.less
+++ b/src/style/base/mixin/setArrow.less
@@ -15,40 +15,40 @@
*/
._setArrow(@arrowsize, @borderColor, @borderWidth) {
- display: inline-block;
- height: @arrowsize;
- width: @arrowsize;
- border-width: @borderWidth @borderWidth 0 0;
- border-color: @borderColor;
- border-style: solid;
+ display: inline-block;
+ height: @arrowsize;
+ width: @arrowsize;
+ border-width: @borderWidth @borderWidth 0 0;
+ border-color: @borderColor;
+ border-style: solid;
}
.setArrow(@direction, @arrowsize, @borderColor, @borderWidth) when (@direction = top) {
- ._setArrow(@arrowsize, @borderColor, @borderWidth);
+ ._setArrow(@arrowsize, @borderColor, @borderWidth);
- transform: matrix(0.71, -0.71, 0.71, 0.71, 0, 0); // rotate(-45deg)
+ transform: matrix(0.71, -0.71, 0.71, 0.71, 0, 0); // rotate(-45deg)
}
.setArrow(@direction, @arrowsize, @borderColor,@borderWidth) when (@direction = right) {
- ._setArrow(@arrowsize, @borderColor, @borderWidth);
+ ._setArrow(@arrowsize, @borderColor, @borderWidth);
- transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0); // rotate(45deg);
- position: relative;
- top: -2px;
+ transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0); // rotate(45deg);
+ position: relative;
+ top: -2px;
}
.setArrow(@direction, @arrowsize, @borderColor,@borderWidth) when (@direction = down) {
- ._setArrow(@arrowsize, @borderColor, @borderWidth);
+ ._setArrow(@arrowsize, @borderColor, @borderWidth);
- transform: matrix(-0.71, 0.71, -0.71, -0.71, 0, 0); // rotate(135deg);
- position: relative;
- top: -3px;
+ transform: matrix(-0.71, 0.71, -0.71, -0.71, 0, 0); // rotate(135deg);
+ position: relative;
+ top: -3px;
}
.setArrow(@direction, @arrowsize, @borderColor,@borderWidth) when (@direction = left) {
- ._setArrow(@arrowsize, @borderColor, @borderWidth);
+ ._setArrow(@arrowsize, @borderColor, @borderWidth);
- transform: matrix(-0.71, -0.71, 0.71, -0.71, 0, 0); // rotate(-135deg);
- position: relative;
- top: -2px;
+ transform: matrix(-0.71, -0.71, 0.71, -0.71, 0, 0); // rotate(-135deg);
+ position: relative;
+ top: -2px;
}
diff --git a/src/style/base/mixin/setLoading.less b/src/style/base/mixin/setLoading.less
index cf4a9d84..c3f1ab38 100644
--- a/src/style/base/mixin/setLoading.less
+++ b/src/style/base/mixin/setLoading.less
@@ -15,56 +15,56 @@
*/
.setCircleLoading(@color:currentColor,@size:80px,@wide:7px) {
- display: inline-flex;
- position: relative;
- width: @size;
+ display: inline-flex;
+ position: relative;
+ width: @size;
+ height: @size;
+ vertical-align: middle;
+ color: @color;
+ animation: circleLoading 1s steps(60, end) infinite;
+
+ &::before,
+ &::after {
+ content: "";
+ display: block;
+ width: @size/2;
height: @size;
- vertical-align: middle;
- color: @color;
- animation: circleLoading 1s steps(60, end) infinite;
+ box-sizing: border-box;
+ border: @wide solid;
+ border-color: currentColor;
+ }
- &:before,
- &:after {
- content: "";
- display: block;
- width: @size/2;
- height: @size;
- box-sizing: border-box;
- border: @wide solid;
- border-color: currentColor;
- }
+ &::before {
+ border-right-width: 0;
+ border-top-left-radius: @size;
+ border-bottom-left-radius: @size;
+ -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, 1) 8%, rgba(0, 0, 0, 0.3) 95%);
+ }
+ &::after {
+ border-left-width: 0;
+ border-top-right-radius: @size;
+ border-bottom-right-radius: @size;
+ -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0) 8%, rgba(0, 0, 0, 0.3) 95%);
+ }
+ &__dot {
+ position: absolute;
+ top: 0;
+ left: 50%;
+ margin-left: -@wide/2;
+ width: @wide;
+ height: @wide;
+ border-top-right-radius: 100%;
+ border-bottom-right-radius: 100%;
+ background: currentColor;
+ }
- &:before {
- border-right-width: 0;
- border-top-left-radius: @size;
- border-bottom-left-radius: @size;
- -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, 1) 8%, rgba(0, 0, 0, 0.3) 95%);
- }
- &:after {
- border-left-width: 0;
- border-top-right-radius: @size;
- border-bottom-right-radius: @size;
- -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0) 8%, rgba(0, 0, 0, 0.3) 95%);
+ @keyframes circleLoading {
+ 0% {
+ transform: rotate3d(0, 0, 1, 0deg);
}
- &__dot {
- position: absolute;
- top: 0;
- left: 50%;
- margin-left: -@wide/2;
- width: @wide;
- height: @wide;
- border-top-right-radius: 100%;
- border-bottom-right-radius: 100%;
- background: currentColor;
- }
-
- @keyframes circleLoading {
- 0% {
- transform: rotate3d(0, 0, 1, 0deg);
- }
- 100% {
- transform: rotate3d(0, 0, 1, 360deg);
- }
+ 100% {
+ transform: rotate3d(0, 0, 1, 360deg);
}
+ }
}
diff --git a/src/style/base/mixin/setOnepx.less b/src/style/base/mixin/setOnepx.less
index 42339bcc..01ca0f17 100644
--- a/src/style/base/mixin/setOnepx.less
+++ b/src/style/base/mixin/setOnepx.less
@@ -17,53 +17,53 @@
@import "../variable/color";
.setTopLine(@c: @weuiLineColorLight) {
- content: " ";
- position: absolute;
- left: 0;
- top: 0;
- right: 0;
- height: 1px;
- border-top: 1px solid @c;
- color: @c;
- transform-origin: 0 0;
- transform: scaleY(0.5);
+ content: " ";
+ position: absolute;
+ left: 0;
+ top: 0;
+ right: 0;
+ height: 1px;
+ border-top: 1px solid @c;
+ color: @c;
+ transform-origin: 0 0;
+ transform: scaleY(0.5);
}
.setBottomLine(@c: @weuiLineColorLight) {
- content: " ";
- position: absolute;
- left: 0;
- bottom: 0;
- right: 0;
- height: 1px;
- border-bottom: 1px solid @c;
- color: @c;
- transform-origin: 0 100%;
- transform: scaleY(0.5);
+ content: " ";
+ position: absolute;
+ left: 0;
+ bottom: 0;
+ right: 0;
+ height: 1px;
+ border-bottom: 1px solid @c;
+ color: @c;
+ transform-origin: 0 100%;
+ transform: scaleY(0.5);
}
.setLeftLine(@c: @weuiLineColorLight) {
- content: " ";
- position: absolute;
- left: 0;
- top: 0;
- width: 1px;
- bottom: 0;
- border-left: 1px solid @c;
- color: @c;
- transform-origin: 0 0;
- transform: scaleX(0.5);
+ content: " ";
+ position: absolute;
+ left: 0;
+ top: 0;
+ width: 1px;
+ bottom: 0;
+ border-left: 1px solid @c;
+ color: @c;
+ transform-origin: 0 0;
+ transform: scaleX(0.5);
}
.setRightLine(@c: @weuiLineColorLight) {
- content: " ";
- position: absolute;
- right: 0;
- top: 0;
- width: 1px;
- bottom: 0;
- border-right: 1px solid @c;
- color: @c;
- transform-origin: 100% 0;
- transform: scaleX(0.5);
+ content: " ";
+ position: absolute;
+ right: 0;
+ top: 0;
+ width: 1px;
+ bottom: 0;
+ border-right: 1px solid @c;
+ color: @c;
+ transform-origin: 100% 0;
+ transform: scaleX(0.5);
}
diff --git a/src/style/base/mixin/text.less b/src/style/base/mixin/text.less
index 58c91a46..b0b43373 100644
--- a/src/style/base/mixin/text.less
+++ b/src/style/base/mixin/text.less
@@ -15,26 +15,26 @@
*/
.ellipsis(@w:auto) {
- width: @w;
- overflow: hidden;
- text-overflow: ellipsis;
- white-space: nowrap;
- word-wrap: normal;
+ width: @w;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ word-wrap: normal;
}
.ellipsisLn(@line) {
- overflow: hidden;
- text-overflow: ellipsis;
- display: -webkit-box;
- -webkit-box-orient: vertical;
- -webkit-line-clamp: @line;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ display: -webkit-box;
+ -webkit-box-orient: vertical;
+ -webkit-line-clamp: @line;
}
.text_wrap() {
- word-wrap: break-word;
- word-break: break-all;
+ word-wrap: break-word;
+ word-break: break-all;
}
.hyphens() {
- word-wrap: break-word;
- -webkit-hyphens: auto;
- hyphens: auto;
+ word-wrap: break-word;
+ -webkit-hyphens: auto;
+ hyphens: auto;
}
diff --git a/src/style/base/reset.less b/src/style/base/reset.less
index e7c94920..1b9358ca 100644
--- a/src/style/base/reset.less
+++ b/src/style/base/reset.less
@@ -17,33 +17,33 @@
@import "fn";
html {
- -ms-text-size-adjust: 100%;
- -webkit-text-size-adjust: 100%;
+ -ms-text-size-adjust: 100%;
+ -webkit-text-size-adjust: 100%;
}
body {
- line-height: 1.6;
- font-family: @weuiFontDefault;
+ line-height: 1.6;
+ font-family: @weuiFontDefault;
}
* {
- margin: 0;
- padding: 0;
- outline: 0;
+ margin: 0;
+ padding: 0;
+ outline: 0;
}
a img {
- border: 0;
+ border: 0;
}
a {
- text-decoration: none;
- .setTapColor();
+ text-decoration: none;
+ .setTapColor();
}
input,
textarea {
- caret-color: @weuiColorPrimary;
+ caret-color: @weuiColorPrimary;
}
::placeholder, {
- color: var(--weui-FG-2);
+ color: var(--weui-FG-2);
}
diff --git a/src/style/base/theme/fn.less b/src/style/base/theme/fn.less
index 9f9c387d..4e3cf2d6 100644
--- a/src/style/base/theme/fn.less
+++ b/src/style/base/theme/fn.less
@@ -8,105 +8,105 @@
@import 'vars/care-dark';
.dark(@rule) {
- .wx-root[data-weui-theme='dark'] & ,
- body[data-weui-theme='dark'] & {
- @rule();
- }
+ .wx-root[data-weui-theme='dark'] &,
+ body[data-weui-theme='dark'] & {
+ @rule();
+ }
- @media (prefers-color-scheme: dark) {
- .wx-root:not([data-weui-theme='light']) & ,
- body:not([data-weui-theme='light']) & {
- @rule();
- }
+ @media (prefers-color-scheme: dark) {
+ .wx-root:not([data-weui-theme='light']) &,
+ body:not([data-weui-theme='light']) & {
+ @rule();
}
+ }
}
.setColor(@var, @color) {
- .setColor(@var, @color, @color);
+ .setColor(@var, @color, @color);
}
.setColor(@var, @light, @dark) {
- ._setColor({
- @{var}: @light;
- }, {
- @{var}: @dark;
- });
+ ._setColor({
+ @{var}: @light;
+ }, {
+ @{var}: @dark;
+ });
}
._setColor(@lightRule, @darkRule) {
- .wx-root ,
- body {
- @lightRule();
- }
- .wx-root[data-weui-theme='dark'] ,
- body[data-weui-theme='dark'] {
- @darkRule();
- }
+ .wx-root,
+ body {
+ @lightRule();
+ }
+ .wx-root[data-weui-theme='dark'],
+ body[data-weui-theme='dark'] {
+ @darkRule();
+ }
- @media (prefers-color-scheme: dark) {
- .wx-root:not([data-weui-theme='light']) ,
- body:not([data-weui-theme='light']) {
- @darkRule();
- }
+ @media (prefers-color-scheme: dark) {
+ .wx-root:not([data-weui-theme='light']),
+ body:not([data-weui-theme='light']) {
+ @darkRule();
}
+ }
}
.care(@rule) {
- .wx-root[data-weui-mode='care'] & ,
- body[data-weui-mode='care'] & {
- @rule();
- }
+ .wx-root[data-weui-mode='care'] &,
+ body[data-weui-mode='care'] & {
+ @rule();
+ }
}
.setCareColor(@var, @color) {
- .setCareColor(@var, @color, @color);
+ .setCareColor(@var, @color, @color);
}
.setCareColor(@var, @light, @dark) {
- ._setCareColor({
- @{var}: @light;
- }, {
- @{var}: @dark;
- });
+ ._setCareColor({
+ @{var}: @light;
+ }, {
+ @{var}: @dark;
+ });
}
._setCareColor(@lightRule, @darkRule) {
- .wx-root[data-weui-mode='care'] ,
- body[data-weui-mode='care'] {
- @lightRule();
- }
- .wx-root[data-weui-mode='care'][data-weui-theme='dark'] ,
- body[data-weui-mode='care'][data-weui-theme='dark'] {
- @darkRule();
- }
+ .wx-root[data-weui-mode='care'],
+ body[data-weui-mode='care'] {
+ @lightRule();
+ }
+ .wx-root[data-weui-mode='care'][data-weui-theme='dark'],
+ body[data-weui-mode='care'][data-weui-theme='dark'] {
+ @darkRule();
+ }
- @media (prefers-color-scheme: dark) {
- .wx-root[data-weui-mode='care']:not([data-weui-theme='light']) ,
- body[data-weui-mode='care']:not([data-weui-theme='light']) {
- @darkRule();
- }
+ @media (prefers-color-scheme: dark) {
+ .wx-root[data-weui-mode='care']:not([data-weui-theme='light']),
+ body[data-weui-mode='care']:not([data-weui-theme='light']) {
+ @darkRule();
}
+ }
}
// 定义局部作用域的颜色变量
.setThisColor(@var, @color) {
- .setColor(@var, @color, @color);
+ .setColor(@var, @color, @color);
}
.setThisColor(@var, @light, @dark) {
- ._setThisColor({
- @{var}: @light;
- }, {
- @{var}: @dark;
- });
+ ._setThisColor({
+ @{var}: @light;
+ }, {
+ @{var}: @dark;
+ });
}
._setThisColor(@lightRule, @darkRule) {
- & {
- @lightRule();
- }
- .wx-root[data-weui-theme='dark'] &,
- body[data-weui-theme='dark'] &{
- @darkRule();
- }
+ & {
+ @lightRule();
+ }
+ .wx-root[data-weui-theme='dark'] &,
+ body[data-weui-theme='dark'] & {
+ @darkRule();
+ }
- @media (prefers-color-scheme: dark) {
- .wx-root:not([data-weui-theme='light']) &,
- body:not([data-weui-theme='light']) &{
- @darkRule();
- }
+ @media (prefers-color-scheme: dark) {
+ .wx-root:not([data-weui-theme='light']) &,
+ body:not([data-weui-theme='light']) & {
+ @darkRule();
}
+ }
}
diff --git a/src/style/base/theme/index.less b/src/style/base/theme/index.less
index 0d5667ef..4dfdc97e 100644
--- a/src/style/base/theme/index.less
+++ b/src/style/base/theme/index.less
@@ -1,33 +1,34 @@
@import 'fn';
-body,.wx-root {
- .varsLight();
+body,
+.wx-root {
+ .varsLight();
}
@media (prefers-color-scheme: dark) {
- .wx-root:not([data-weui-theme='light']) ,
- body:not([data-weui-theme='light']) {
- .varsDark();
- }
+ .wx-root:not([data-weui-theme='light']),
+ body:not([data-weui-theme='light']) {
+ .varsDark();
+ }
}
-.wx-root[data-weui-theme='dark'] ,
+.wx-root[data-weui-theme='dark'],
body[data-weui-theme='dark'] {
- .varsDark();
+ .varsDark();
}
-.wx-root[data-weui-mode='care'] ,
+.wx-root[data-weui-mode='care'],
body[data-weui-mode='care'] {
- .varsCareLight();
+ .varsCareLight();
}
@media (prefers-color-scheme: dark) {
- .wx-root[data-weui-mode='care']:not([data-weui-theme='light']) ,
- body[data-weui-mode='care']:not([data-weui-theme='light']) {
- .varsCareDark();
- }
+ .wx-root[data-weui-mode='care']:not([data-weui-theme='light']),
+ body[data-weui-mode='care']:not([data-weui-theme='light']) {
+ .varsCareDark();
+ }
}
-.wx-root[data-weui-mode='care'][data-weui-theme='dark'] ,
+.wx-root[data-weui-mode='care'][data-weui-theme='dark'],
body[data-weui-mode='care'][data-weui-theme='dark'] {
- .varsCareDark();
+ .varsCareDark();
}
diff --git a/src/style/base/theme/less-vars/care-light.less b/src/style/base/theme/less-vars/care-light.less
index 97a0cf90..0f97a58c 100644
--- a/src/style/base/theme/less-vars/care-light.less
+++ b/src/style/base/theme/less-vars/care-light.less
@@ -12,7 +12,7 @@
@CARE_LIGHT_FG_4: rgba(0, 0, 0, 0.15);
@CARE_LIGHT_FG_5: rgba(0, 0, 0, 0.05);
@CARE_LIGHT_RED: #DC3636;
-@CARE_LIGHT_REDORANGE: #ff6146;
+@CARE_LIGHT_REDORANGE: #D14730;
@CARE_LIGHT_ORANGE: #E17719;
@CARE_LIGHT_YELLOW: #BB8E00;
@CARE_LIGHT_GREEN: #4F8400;
diff --git a/src/style/base/theme/less-vars/light.less b/src/style/base/theme/less-vars/light.less
index de750349..df9b2bc2 100644
--- a/src/style/base/theme/less-vars/light.less
+++ b/src/style/base/theme/less-vars/light.less
@@ -6,7 +6,7 @@
@LIGHT_BG_5: #ffffff;
@LIGHT_FG_0: rgba(0, 0, 0, 0.9);
@LIGHT_FG_HALF: rgba(0, 0, 0, 0.9);
-@LIGHT_FG_1: rgba(0, 0, 0, 0.5);
+@LIGHT_FG_1: rgba(0, 0, 0, 0.55);
@LIGHT_FG_2: rgba(0, 0, 0, 0.3);
@LIGHT_FG_3: rgba(0, 0, 0, 0.1);
@LIGHT_FG_4: rgba(0, 0, 0, 0.15);
diff --git a/src/style/base/theme/vars/care-dark.less b/src/style/base/theme/vars/care-dark.less
index d0eb928e..fca357f4 100644
--- a/src/style/base/theme/vars/care-dark.less
+++ b/src/style/base/theme/vars/care-dark.less
@@ -1,40 +1,41 @@
.varsCareDark() {
- --weui-BG-0: #111;
- --weui-BG-1: #1e1e1e;
- --weui-BG-2: #191919;
- --weui-BG-3: #202020;
- --weui-BG-4: #404040;
- --weui-BG-5: #2c2c2c;
- --weui-FG-0: rgba(255, 255, 255, 0.85);
- --weui-FG-HALF: rgba(255, 255, 255, 0.65);
- --weui-FG-1: rgba(255, 255, 255, 0.55);
- --weui-FG-2: rgba(255, 255, 255, 0.35);
- --weui-FG-3: rgba(255, 255, 255, 0.1);
- --weui-FG-4: rgba(255, 255, 255, 0.15);
- --weui-FG-5: rgba(255, 255, 255, 0.1);
- --weui-RED: #fa5151;
- --weui-REDORANGE: #ff6146;
- --weui-ORANGE: #c87d2f;
- --weui-YELLOW: #cc9c00;
- --weui-GREEN: #74a800;
- --weui-LIGHTGREEN: #3eb575;
- --weui-BRAND: #07c160;
- --weui-BLUE: #10aeff;
- --weui-INDIGO: #1196ff;
- --weui-PURPLE: #8183ff;
- --weui-WHITE: rgba(255, 255, 255, 0.8);
- --weui-LINK: #7d90a9;
- --weui-TEXTGREEN: #259c5c;
- --weui-FG: #fff;
- --weui-BG: #000;
- --weui-TAG-TEXT-RED: rgba(250, 81, 81, 0.6);
- --weui-TAG-BACKGROUND-RED: rgba(250, 81, 81, 0.1);
- --weui-TAG-TEXT-ORANGE: rgba(250, 157, 59, 0.6);
- --weui-TAG-BACKGROUND-ORANGE: rgba(250, 157, 59, 0.1);
- --weui-TAG-TEXT-GREEN: rgba(6, 174, 86, 0.6);
- --weui-TAG-BACKGROUND-GREEN: rgba(6, 174, 86, 0.1);
- --weui-TAG-TEXT-BLUE: rgba(16, 174, 255, 0.6);
- --weui-TAG-BACKGROUND-BLUE: rgba(16, 174, 255, 0.1);
- --weui-TAG-TEXT-BLACK: rgba(255, 255, 255, 0.5);
- --weui-TAG-BACKGROUND-BLACK: rgba(255, 255, 255, 0.05);
+ --weui-BG-0: #111;
+ --weui-BG-1: #1e1e1e;
+ --weui-BG-2: #191919;
+ --weui-BG-3: #202020;
+ --weui-BG-4: #404040;
+ --weui-BG-5: #2c2c2c;
+ --weui-FG-0: rgba(255, 255, 255, 0.85);
+ --weui-FG-HALF: rgba(255, 255, 255, 0.65);
+ --weui-FG-1: rgba(255, 255, 255, 0.55);
+ --weui-FG-2: rgba(255, 255, 255, 0.35);
+ --weui-FG-3: rgba(255, 255, 255, 0.1);
+ --weui-FG-4: rgba(255, 255, 255, 0.15);
+ --weui-FG-5: rgba(255, 255, 255, 0.1);
+ --weui-RED: #fa5151;
+ --weui-ORANGERED: #ff6146;
+ --weui-ORANGE: #c87d2f;
+ --weui-YELLOW: #cc9c00;
+ --weui-GREEN: #74a800;
+ --weui-LIGHTGREEN: #3eb575;
+ --weui-BRAND: #07c160;
+ --weui-BLUE: #10aeff;
+ --weui-INDIGO: #1196ff;
+ --weui-PURPLE: #8183ff;
+ --weui-WHITE: rgba(255, 255, 255, 0.8);
+ --weui-LINK: #7d90a9;
+ --weui-TEXTGREEN: #259c5c;
+ --weui-FG: #fff;
+ --weui-BG: #000;
+ --weui-TAG-TEXT-RED: rgba(250, 81, 81, 0.6);
+ --weui-TAG-BACKGROUND-RED: rgba(250, 81, 81, 0.1);
+ --weui-TAG-TEXT-ORANGE: rgba(250, 157, 59, 0.6);
+ --weui-TAG-BACKGROUND-ORANGE: rgba(250, 157, 59, 0.1);
+ --weui-TAG-TEXT-GREEN: rgba(6, 174, 86, 0.6);
+ --weui-TAG-BACKGROUND-GREEN: rgba(6, 174, 86, 0.1);
+ --weui-TAG-TEXT-BLUE: rgba(16, 174, 255, 0.6);
+ --weui-TAG-BACKGROUND-BLUE: rgba(16, 174, 255, 0.1);
+ --weui-TAG-TEXT-BLACK: rgba(255, 255, 255, 0.5);
+ --weui-TAG-BACKGROUND-BLACK: rgba(255, 255, 255, 0.05);
+ --weui-REDORANGE: #ff6146;
};
diff --git a/src/style/base/theme/vars/care-light.less b/src/style/base/theme/vars/care-light.less
index 0cb4189b..bf8a9bbc 100644
--- a/src/style/base/theme/vars/care-light.less
+++ b/src/style/base/theme/vars/care-light.less
@@ -1,40 +1,41 @@
.varsCareLight() {
- --weui-BG-0: #ededed;
- --weui-BG-1: #f7f7f7;
- --weui-BG-2: #fff;
- --weui-BG-3: #f7f7f7;
- --weui-BG-4: #4c4c4c;
- --weui-BG-5: #fff;
- --weui-FG-0: #000;
- --weui-FG-HALF: #000;
- --weui-FG-1: rgba(0, 0, 0, 0.6);
- --weui-FG-2: rgba(0, 0, 0, 0.42);
- --weui-FG-3: rgba(0, 0, 0, 0.1);
- --weui-FG-4: rgba(0, 0, 0, 0.15);
- --weui-FG-5: rgba(0, 0, 0, 0.05);
- --weui-RED: #dc3636;
- --weui-REDORANGE: #ff6146;
- --weui-ORANGE: #e17719;
- --weui-YELLOW: #bb8e00;
- --weui-GREEN: #4f8400;
- --weui-LIGHTGREEN: #2e8800;
- --weui-BRAND: #018942;
- --weui-BLUE: #007dbb;
- --weui-INDIGO: #0075e2;
- --weui-PURPLE: #6265f1;
- --weui-WHITE: #fff;
- --weui-LINK: #576b95;
- --weui-TEXTGREEN: #06ae56;
- --weui-FG: #000;
- --weui-BG: #fff;
- --weui-TAG-TEXT-RED: rgba(250, 81, 81, 0.6);
- --weui-TAG-BACKGROUND-RED: rgba(250, 81, 81, 0.1);
- --weui-TAG-TEXT-ORANGE: #e17719;
- --weui-TAG-BACKGROUND-ORANGE: rgba(225, 119, 25, 0.1);
- --weui-TAG-TEXT-GREEN: #06ae56;
- --weui-TAG-BACKGROUND-GREEN: rgba(6, 174, 86, 0.1);
- --weui-TAG-TEXT-BLUE: #007dbb;
- --weui-TAG-BACKGROUND-BLUE: rgba(0, 125, 187, 0.1);
- --weui-TAG-TEXT-BLACK: rgba(0, 0, 0, 0.5);
- --weui-TAG-BACKGROUND-BLACK: rgba(0, 0, 0, 0.05);
+ --weui-BG-0: #ededed;
+ --weui-BG-1: #f7f7f7;
+ --weui-BG-2: #fff;
+ --weui-BG-3: #f7f7f7;
+ --weui-BG-4: #4c4c4c;
+ --weui-BG-5: #fff;
+ --weui-FG-0: rgba(0, 0, 0, 1);
+ --weui-FG-HALF: rgba(0, 0, 0, 1);
+ --weui-FG-1: rgba(0, 0, 0, 0.6);
+ --weui-FG-2: rgba(0, 0, 0, 0.42);
+ --weui-FG-3: rgba(0, 0, 0, 0.1);
+ --weui-FG-4: rgba(0, 0, 0, 0.15);
+ --weui-FG-5: rgba(0, 0, 0, 0.05);
+ --weui-RED: #dc3636;
+ --weui-ORANGERED: #d14730;
+ --weui-ORANGE: #e17719;
+ --weui-YELLOW: #bb8e00;
+ --weui-GREEN: #4f8400;
+ --weui-LIGHTGREEN: #2e8800;
+ --weui-BRAND: #018942;
+ --weui-BLUE: #007dbb;
+ --weui-INDIGO: #0075e2;
+ --weui-PURPLE: #6265f1;
+ --weui-WHITE: #fff;
+ --weui-LINK: #576b95;
+ --weui-TEXTGREEN: #06ae56;
+ --weui-FG: #000;
+ --weui-BG: #fff;
+ --weui-TAG-TEXT-RED: rgba(250, 81, 81, 0.6);
+ --weui-TAG-BACKGROUND-RED: rgba(250, 81, 81, 0.1);
+ --weui-TAG-TEXT-ORANGE: #e17719;
+ --weui-TAG-BACKGROUND-ORANGE: rgba(225, 119, 25, 0.1);
+ --weui-TAG-TEXT-GREEN: #06ae56;
+ --weui-TAG-BACKGROUND-GREEN: rgba(6, 174, 86, 0.1);
+ --weui-TAG-TEXT-BLUE: #007dbb;
+ --weui-TAG-BACKGROUND-BLUE: rgba(0, 125, 187, 0.1);
+ --weui-TAG-TEXT-BLACK: rgba(0, 0, 0, 0.5);
+ --weui-TAG-BACKGROUND-BLACK: rgba(0, 0, 0, 0.05);
+ --weui-REDORANGE: #d14730;
}
diff --git a/src/style/base/theme/vars/dark.less b/src/style/base/theme/vars/dark.less
index cb905ba9..8d81d339 100644
--- a/src/style/base/theme/vars/dark.less
+++ b/src/style/base/theme/vars/dark.less
@@ -1,40 +1,41 @@
.varsDark() {
- --weui-BG-0: #111;
- --weui-BG-1: #1e1e1e;
- --weui-BG-2: #191919;
- --weui-BG-3: #202020;
- --weui-BG-4: #404040;
- --weui-BG-5: #2c2c2c;
- --weui-FG-0: rgba(255, 255, 255, 0.8);
- --weui-FG-HALF: rgba(255, 255, 255, 0.6);
- --weui-FG-1: rgba(255, 255, 255, 0.5);
- --weui-FG-2: rgba(255, 255, 255, 0.3);
- --weui-FG-3: rgba(255, 255, 255, 0.1);
- --weui-FG-4: rgba(255, 255, 255, 0.15);
- --weui-FG-5: rgba(255, 255, 255, 0.1);
- --weui-RED: #fa5151;
- --weui-REDORANGE: #ff6146;
- --weui-ORANGE: #c87d2f;
- --weui-YELLOW: #cc9c00;
- --weui-GREEN: #74a800;
- --weui-LIGHTGREEN: #3eb575;
- --weui-BRAND: #07c160;
- --weui-BLUE: #10aeff;
- --weui-INDIGO: #1196ff;
- --weui-PURPLE: #8183ff;
- --weui-WHITE: rgba(255, 255, 255, 0.8);
- --weui-LINK: #7d90a9;
- --weui-TEXTGREEN: #259c5c;
- --weui-FG: #fff;
- --weui-BG: #000;
- --weui-TAG-TEXT-RED: rgba(250, 81, 81, 0.6);
- --weui-TAG-BACKGROUND-RED: rgba(250, 81, 81, 0.1);
- --weui-TAG-TEXT-ORANGE: rgba(250, 157, 59, 0.6);
- --weui-TAG-BACKGROUND-ORANGE: rgba(250, 157, 59, 0.1);
- --weui-TAG-TEXT-GREEN: rgba(6, 174, 86, 0.6);
- --weui-TAG-BACKGROUND-GREEN: rgba(6, 174, 86, 0.1);
- --weui-TAG-TEXT-BLUE: rgba(16, 174, 255, 0.6);
- --weui-TAG-BACKGROUND-BLUE: rgba(16, 174, 255, 0.1);
- --weui-TAG-TEXT-BLACK: rgba(255, 255, 255, 0.5);
- --weui-TAG-BACKGROUND-BLACK: rgba(255, 255, 255, 0.05);
+ --weui-BG-0: #111;
+ --weui-BG-1: #1e1e1e;
+ --weui-BG-2: #191919;
+ --weui-BG-3: #202020;
+ --weui-BG-4: #404040;
+ --weui-BG-5: #2c2c2c;
+ --weui-FG-0: rgba(255, 255, 255, 0.8);
+ --weui-FG-HALF: rgba(255, 255, 255, 0.6);
+ --weui-FG-1: rgba(255, 255, 255, 0.5);
+ --weui-FG-2: rgba(255, 255, 255, 0.3);
+ --weui-FG-3: rgba(255, 255, 255, 0.1);
+ --weui-FG-4: rgba(255, 255, 255, 0.15);
+ --weui-FG-5: rgba(255, 255, 255, 0.1);
+ --weui-RED: #fa5151;
+ --weui-ORANGERED: #ff6146;
+ --weui-ORANGE: #c87d2f;
+ --weui-YELLOW: #cc9c00;
+ --weui-GREEN: #74a800;
+ --weui-LIGHTGREEN: #3eb575;
+ --weui-BRAND: #07c160;
+ --weui-BLUE: #10aeff;
+ --weui-INDIGO: #1196ff;
+ --weui-PURPLE: #8183ff;
+ --weui-WHITE: rgba(255, 255, 255, 0.8);
+ --weui-LINK: #7d90a9;
+ --weui-TEXTGREEN: #259c5c;
+ --weui-FG: #fff;
+ --weui-BG: #000;
+ --weui-TAG-TEXT-RED: rgba(250, 81, 81, 0.6);
+ --weui-TAG-BACKGROUND-RED: rgba(250, 81, 81, 0.1);
+ --weui-TAG-TEXT-ORANGE: rgba(250, 157, 59, 0.6);
+ --weui-TAG-BACKGROUND-ORANGE: rgba(250, 157, 59, 0.1);
+ --weui-TAG-TEXT-GREEN: rgba(6, 174, 86, 0.6);
+ --weui-TAG-BACKGROUND-GREEN: rgba(6, 174, 86, 0.1);
+ --weui-TAG-TEXT-BLUE: rgba(16, 174, 255, 0.6);
+ --weui-TAG-BACKGROUND-BLUE: rgba(16, 174, 255, 0.1);
+ --weui-TAG-TEXT-BLACK: rgba(255, 255, 255, 0.5);
+ --weui-TAG-BACKGROUND-BLACK: rgba(255, 255, 255, 0.05);
+ --weui-REDORANGE: #ff6146;
};
diff --git a/src/style/base/theme/vars/light.less b/src/style/base/theme/vars/light.less
index c424dd77..cc295c2a 100644
--- a/src/style/base/theme/vars/light.less
+++ b/src/style/base/theme/vars/light.less
@@ -1,40 +1,41 @@
.varsLight() {
- --weui-BG-0: #ededed;
- --weui-BG-1: #f7f7f7;
- --weui-BG-2: #fff;
- --weui-BG-3: #f7f7f7;
- --weui-BG-4: #4c4c4c;
- --weui-BG-5: #fff;
- --weui-FG-0: rgba(0, 0, 0, 0.9);
- --weui-FG-HALF: rgba(0, 0, 0, 0.9);
- --weui-FG-1: rgba(0, 0, 0, 0.5);
- --weui-FG-2: rgba(0, 0, 0, 0.3);
- --weui-FG-3: rgba(0, 0, 0, 0.1);
- --weui-FG-4: rgba(0, 0, 0, 0.15);
- --weui-FG-5: rgba(0, 0, 0, 0.05);
- --weui-RED: #fa5151;
- --weui-REDORANGE: #ff6146;
- --weui-ORANGE: #fa9d3b;
- --weui-YELLOW: #ffc300;
- --weui-GREEN: #91d300;
- --weui-LIGHTGREEN: #95ec69;
- --weui-BRAND: #07c160;
- --weui-BLUE: #10aeff;
- --weui-INDIGO: #1485ee;
- --weui-PURPLE: #6467f0;
- --weui-WHITE: #fff;
- --weui-LINK: #576b95;
- --weui-TEXTGREEN: #06ae56;
- --weui-FG: #000;
- --weui-BG: #fff;
- --weui-TAG-TEXT-RED: rgba(250, 81, 81, 0.6);
- --weui-TAG-BACKGROUND-RED: rgba(250, 81, 81, 0.1);
- --weui-TAG-TEXT-ORANGE: #fa9d3b;
- --weui-TAG-BACKGROUND-ORANGE: rgba(250, 157, 59, 0.1);
- --weui-TAG-TEXT-GREEN: #06ae56;
- --weui-TAG-BACKGROUND-GREEN: rgba(6, 174, 86, 0.1);
- --weui-TAG-TEXT-BLUE: #10aeff;
- --weui-TAG-BACKGROUND-BLUE: rgba(16, 174, 255, 0.1);
- --weui-TAG-TEXT-BLACK: rgba(0, 0, 0, 0.5);
- --weui-TAG-BACKGROUND-BLACK: rgba(0, 0, 0, 0.05);
+ --weui-BG-0: #ededed;
+ --weui-BG-1: #f7f7f7;
+ --weui-BG-2: #fff;
+ --weui-BG-3: #f7f7f7;
+ --weui-BG-4: #4c4c4c;
+ --weui-BG-5: #fff;
+ --weui-FG-0: rgba(0, 0, 0, 0.9);
+ --weui-FG-HALF: rgba(0, 0, 0, 0.9);
+ --weui-FG-1: rgba(0, 0, 0, 0.55);
+ --weui-FG-2: rgba(0, 0, 0, 0.3);
+ --weui-FG-3: rgba(0, 0, 0, 0.1);
+ --weui-FG-4: rgba(0, 0, 0, 0.15);
+ --weui-FG-5: rgba(0, 0, 0, 0.05);
+ --weui-RED: #fa5151;
+ --weui-ORANGERED: #ff6146;
+ --weui-ORANGE: #fa9d3b;
+ --weui-YELLOW: #ffc300;
+ --weui-GREEN: #91d300;
+ --weui-LIGHTGREEN: #95ec69;
+ --weui-BRAND: #07c160;
+ --weui-BLUE: #10aeff;
+ --weui-INDIGO: #1485ee;
+ --weui-PURPLE: #6467f0;
+ --weui-WHITE: #fff;
+ --weui-LINK: #576b95;
+ --weui-TEXTGREEN: #06ae56;
+ --weui-FG: #000;
+ --weui-BG: #fff;
+ --weui-TAG-TEXT-RED: rgba(250, 81, 81, 0.6);
+ --weui-TAG-BACKGROUND-RED: rgba(250, 81, 81, 0.1);
+ --weui-TAG-TEXT-ORANGE: #fa9d3b;
+ --weui-TAG-BACKGROUND-ORANGE: rgba(250, 157, 59, 0.1);
+ --weui-TAG-TEXT-GREEN: #06ae56;
+ --weui-TAG-BACKGROUND-GREEN: rgba(6, 174, 86, 0.1);
+ --weui-TAG-TEXT-BLUE: #10aeff;
+ --weui-TAG-BACKGROUND-BLUE: rgba(16, 174, 255, 0.1);
+ --weui-TAG-TEXT-BLACK: rgba(0, 0, 0, 0.5);
+ --weui-TAG-BACKGROUND-BLACK: rgba(0, 0, 0, 0.05);
+ --weui-REDORANGE: #ff6146;
}
diff --git a/src/style/base/variable/weui-button.less b/src/style/base/variable/weui-button.less
index 86e3baf0..627c9452 100644
--- a/src/style/base/variable/weui-button.less
+++ b/src/style/base/variable/weui-button.less
@@ -17,13 +17,14 @@
@import "../../base/fn";
-body, .wx-root,
-page{
- --weui-BTN-HEIGHT:48;
- --weui-BTN-HEIGHT-MEDIUM:40;
- --weui-BTN-HEIGHT-SMALL:32;
+body,
+.wx-root,
+page {
+ --weui-BTN-HEIGHT: 48;
+ --weui-BTN-HEIGHT-MEDIUM: 40;
+ --weui-BTN-HEIGHT-SMALL: 32;
}
-.setColor(--weui-BTN-ACTIVE-MASK, rgba(0,0,0,.1), rgba(255,255,255,.1));
+.setColor(--weui-BTN-ACTIVE-MASK, rgba(0,0,0,0.1), rgba(255,255,255,0.1));
diff --git a/src/style/icon/weui-icon.less b/src/style/icon/weui-icon.less
index 8b1c7b47..91101197 100644
--- a/src/style/icon/weui-icon.less
+++ b/src/style/icon/weui-icon.less
@@ -20,201 +20,201 @@
[class^="weui-icon-"],
[class*=" weui-icon-"] {
- && {
- display: inline-block;
- vertical-align: middle;
- font-size: 10px;
- width: 2.4em;
- height: 2.4em;
- mask-position: 50% 50%;
- mask-repeat: no-repeat;
- mask-size: 100%;
- background-color: currentColor;
- }
+ && {
+ display: inline-block;
+ vertical-align: middle;
+ font-size: 10px;
+ width: 2.4em;
+ height: 2.4em;
+ mask-position: 50% 50%;
+ mask-repeat: no-repeat;
+ mask-size: 100%;
+ background-color: currentColor;
+ }
}
// icon map
.weui-icon-circle {
- mask-image: url(data:image/svg+xml,%3Csvg%20width%3D%221000%22%20height%3D%221000%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M500%20916.667C269.881%20916.667%2083.333%20730.119%2083.333%20500%2083.333%20269.881%20269.881%2083.333%20500%2083.333c230.119%200%20416.667%20186.548%20416.667%20416.667%200%20230.119-186.548%20416.667-416.667%20416.667zm0-50c202.504%200%20366.667-164.163%20366.667-366.667%200-202.504-164.163-366.667-366.667-366.667-202.504%200-366.667%20164.163-366.667%20366.667%200%20202.504%20164.163%20366.667%20366.667%20366.667z%22%20fill-rule%3D%22evenodd%22%20fill-opacity%3D%22.9%22%2F%3E%3C%2Fsvg%3E);
+ mask-image: url(data:image/svg+xml,%3Csvg%20width%3D%221000%22%20height%3D%221000%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M500%20916.667C269.881%20916.667%2083.333%20730.119%2083.333%20500%2083.333%20269.881%20269.881%2083.333%20500%2083.333c230.119%200%20416.667%20186.548%20416.667%20416.667%200%20230.119-186.548%20416.667-416.667%20416.667zm0-50c202.504%200%20366.667-164.163%20366.667-366.667%200-202.504-164.163-366.667-366.667-366.667-202.504%200-366.667%20164.163-366.667%20366.667%200%20202.504%20164.163%20366.667%20366.667%20366.667z%22%20fill-rule%3D%22evenodd%22%20fill-opacity%3D%22.9%22%2F%3E%3C%2Fsvg%3E);
}
.weui-icon-download {
- mask-image: url(data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M11.25%2012.04l-1.72-1.72-1.06%201.06%202.828%202.83a1%201%200%20001.414-.001l2.828-2.828-1.06-1.061-1.73%201.73V7h-1.5v5.04zm0-5.04V2h1.5v5h6.251c.55%200%20.999.446.999.996v13.008a.998.998%200%2001-.996.996H4.996A.998.998%200%20014%2021.004V7.996A1%201%200%20014.999%207h6.251z%22%2F%3E%3C%2Fsvg%3E);
+ mask-image: url(data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M11.25%2012.04l-1.72-1.72-1.06%201.06%202.828%202.83a1%201%200%20001.414-.001l2.828-2.828-1.06-1.061-1.73%201.73V7h-1.5v5.04zm0-5.04V2h1.5v5h6.251c.55%200%20.999.446.999.996v13.008a.998.998%200%2001-.996.996H4.996A.998.998%200%20014%2021.004V7.996A1%201%200%20014.999%207h6.251z%22%2F%3E%3C%2Fsvg%3E);
}
.weui-icon-info {
- mask-image: url(data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M12%2022C6.477%2022%202%2017.523%202%2012S6.477%202%2012%202s10%204.477%2010%2010-4.477%2010-10%2010zm-.75-12v7h1.5v-7h-1.5zM12%209a1%201%200%20100-2%201%201%200%20000%202z%22%2F%3E%3C%2Fsvg%3E);
+ mask-image: url(data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M12%2022C6.477%2022%202%2017.523%202%2012S6.477%202%2012%202s10%204.477%2010%2010-4.477%2010-10%2010zm-.75-12v7h1.5v-7h-1.5zM12%209a1%201%200%20100-2%201%201%200%20000%202z%22%2F%3E%3C%2Fsvg%3E);
}
.weui-icon-safe-success {
- mask-image: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%201000%201000%22%3E%3Cpath%20d%3D%22M500.9%204.6C315.5%2046.7%20180.4%2093.1%2057.6%20132c0%20129.3.2%20231.7.2%20339.7%200%20304.2%20248.3%20471.6%20443.1%20523.7C695.7%20943.3%20944%20775.9%20944%20471.7c0-108%20.2-210.4.2-339.7C821.4%2093.1%20686.3%2046.7%20500.9%204.6zm248.3%20349.1l-299.7%20295c-2.1%202-5.3%202-7.4-.1L304.4%20506.1c-2-2.1-2.3-5.7-.6-8l18.3-24.9c1.7-2.3%205-2.8%207.2-1l112.2%2086c2.3%201.8%206%201.7%208.1-.1l274.7-228.9c2.2-1.8%205.7-1.7%207.7.3l17%2016.8c2.2%202.1%202.2%205.3.2%207.4z%22%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20fill%3D%22%23070202%22%2F%3E%3C%2Fsvg%3E);
+ mask-image: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%201000%201000%22%3E%3Cpath%20d%3D%22M500.9%204.6C315.5%2046.7%20180.4%2093.1%2057.6%20132c0%20129.3.2%20231.7.2%20339.7%200%20304.2%20248.3%20471.6%20443.1%20523.7C695.7%20943.3%20944%20775.9%20944%20471.7c0-108%20.2-210.4.2-339.7C821.4%2093.1%20686.3%2046.7%20500.9%204.6zm248.3%20349.1l-299.7%20295c-2.1%202-5.3%202-7.4-.1L304.4%20506.1c-2-2.1-2.3-5.7-.6-8l18.3-24.9c1.7-2.3%205-2.8%207.2-1l112.2%2086c2.3%201.8%206%201.7%208.1-.1l274.7-228.9c2.2-1.8%205.7-1.7%207.7.3l17%2016.8c2.2%202.1%202.2%205.3.2%207.4z%22%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20fill%3D%22%23070202%22%2F%3E%3C%2Fsvg%3E);
}
.weui-icon-safe-warn {
- mask-image: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%201000%201000%22%3E%3Cpath%20d%3D%22M500.9%204.5c-185.4%2042-320.4%2088.4-443.2%20127.3%200%20129.3.2%20231.7.2%20339.6%200%20304.1%20248.2%20471.4%20443%20523.6%20194.7-52.2%20443-219.5%20443-523.6%200-107.9.2-210.3.2-339.6C821.3%2092.9%20686.2%2046.5%20500.9%204.5zm-26.1%20271.1h52.1c5.8%200%2010.3%204.7%2010.1%2010.4l-11.6%20313.8c-.1%202.8-2.5%205.2-5.4%205.2h-38.2c-2.9%200-5.3-2.3-5.4-5.2L464.8%20286c-.2-5.8%204.3-10.4%2010-10.4zm26.1%20448.3c-20.2%200-36.5-16.3-36.5-36.5s16.3-36.5%2036.5-36.5%2036.5%2016.3%2036.5%2036.5-16.4%2036.5-36.5%2036.5z%22%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20fill%3D%22%23020202%22%2F%3E%3C%2Fsvg%3E);
+ mask-image: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%201000%201000%22%3E%3Cpath%20d%3D%22M500.9%204.5c-185.4%2042-320.4%2088.4-443.2%20127.3%200%20129.3.2%20231.7.2%20339.6%200%20304.1%20248.2%20471.4%20443%20523.6%20194.7-52.2%20443-219.5%20443-523.6%200-107.9.2-210.3.2-339.6C821.3%2092.9%20686.2%2046.5%20500.9%204.5zm-26.1%20271.1h52.1c5.8%200%2010.3%204.7%2010.1%2010.4l-11.6%20313.8c-.1%202.8-2.5%205.2-5.4%205.2h-38.2c-2.9%200-5.3-2.3-5.4-5.2L464.8%20286c-.2-5.8%204.3-10.4%2010-10.4zm26.1%20448.3c-20.2%200-36.5-16.3-36.5-36.5s16.3-36.5%2036.5-36.5%2036.5%2016.3%2036.5%2036.5-16.4%2036.5-36.5%2036.5z%22%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20fill%3D%22%23020202%22%2F%3E%3C%2Fsvg%3E);
}
.weui-icon-success {
- mask-image: url(data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M12%2022C6.477%2022%202%2017.523%202%2012S6.477%202%2012%202s10%204.477%2010%2010-4.477%2010-10%2010zm-1.177-7.86l-2.765-2.767L7%2012.431l3.119%203.121a1%201%200%20001.414%200l5.952-5.95-1.062-1.062-5.6%205.6z%22%2F%3E%3C%2Fsvg%3E);
+ mask-image: url(data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M12%2022C6.477%2022%202%2017.523%202%2012S6.477%202%2012%202s10%204.477%2010%2010-4.477%2010-10%2010zm-1.177-7.86l-2.765-2.767L7%2012.431l3.119%203.121a1%201%200%20001.414%200l5.952-5.95-1.062-1.062-5.6%205.6z%22%2F%3E%3C%2Fsvg%3E);
}
.weui-icon-success-circle {
- mask-image: url(data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M12%2022C6.477%2022%202%2017.523%202%2012S6.477%202%2012%202s10%204.477%2010%2010-4.477%2010-10%2010zm0-1.2a8.8%208.8%200%20100-17.6%208.8%208.8%200%20000%2017.6zm-1.172-6.242l5.809-5.808.848.849-5.95%205.95a1%201%200%2001-1.414%200L7%2012.426l.849-.849%202.98%202.98z%22%2F%3E%3C%2Fsvg%3E);
+ mask-image: url(data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M12%2022C6.477%2022%202%2017.523%202%2012S6.477%202%2012%202s10%204.477%2010%2010-4.477%2010-10%2010zm0-1.2a8.8%208.8%200%20100-17.6%208.8%208.8%200%20000%2017.6zm-1.172-6.242l5.809-5.808.848.849-5.95%205.95a1%201%200%2001-1.414%200L7%2012.426l.849-.849%202.98%202.98z%22%2F%3E%3C%2Fsvg%3E);
}
.weui-icon-success-no-circle {
- mask-image: url(data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M8.657%2018.435L3%2012.778l1.414-1.414%204.95%204.95L20.678%205l1.414%201.414-12.02%2012.021a1%201%200%2001-1.415%200z%22%20fill-rule%3D%22evenodd%22%2F%3E%3C%2Fsvg%3E);
+ mask-image: url(data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M8.657%2018.435L3%2012.778l1.414-1.414%204.95%204.95L20.678%205l1.414%201.414-12.02%2012.021a1%201%200%2001-1.415%200z%22%20fill-rule%3D%22evenodd%22%2F%3E%3C%2Fsvg%3E);
}
.weui-icon-waiting {
- mask-image: url(data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M12.75%2011.38V6h-1.5v6l4.243%204.243%201.06-1.06-3.803-3.804zM12%2022C6.477%2022%202%2017.523%202%2012S6.477%202%2012%202s10%204.477%2010%2010-4.477%2010-10%2010z%22%20fill-rule%3D%22evenodd%22%2F%3E%3C%2Fsvg%3E);
+ mask-image: url(data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M12.75%2011.38V6h-1.5v6l4.243%204.243%201.06-1.06-3.803-3.804zM12%2022C6.477%2022%202%2017.523%202%2012S6.477%202%2012%202s10%204.477%2010%2010-4.477%2010-10%2010z%22%20fill-rule%3D%22evenodd%22%2F%3E%3C%2Fsvg%3E);
}
.weui-icon-waiting-circle {
- mask-image: url(data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M12.6%2011.503l3.891%203.891-.848.849L11.4%2012V6h1.2v5.503zM12%2022C6.477%2022%202%2017.523%202%2012S6.477%202%2012%202s10%204.477%2010%2010-4.477%2010-10%2010zm0-1.2a8.8%208.8%200%20100-17.6%208.8%208.8%200%20000%2017.6z%22%2F%3E%3C%2Fsvg%3E);
+ mask-image: url(data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M12.6%2011.503l3.891%203.891-.848.849L11.4%2012V6h1.2v5.503zM12%2022C6.477%2022%202%2017.523%202%2012S6.477%202%2012%202s10%204.477%2010%2010-4.477%2010-10%2010zm0-1.2a8.8%208.8%200%20100-17.6%208.8%208.8%200%20000%2017.6z%22%2F%3E%3C%2Fsvg%3E);
}
.weui-icon-warn {
- mask-image: url(data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M12%2022C6.477%2022%202%2017.523%202%2012S6.477%202%2012%202s10%204.477%2010%2010-4.477%2010-10%2010zm-.763-15.864l.11%207.596h1.305l.11-7.596h-1.525zm.759%2010.967c.512%200%20.902-.383.902-.882%200-.5-.39-.882-.902-.882a.878.878%200%2000-.896.882c0%20.499.396.882.896.882z%22%2F%3E%3C%2Fsvg%3E);
+ mask-image: url(data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M12%2022C6.477%2022%202%2017.523%202%2012S6.477%202%2012%202s10%204.477%2010%2010-4.477%2010-10%2010zm-.763-15.864l.11%207.596h1.305l.11-7.596h-1.525zm.759%2010.967c.512%200%20.902-.383.902-.882%200-.5-.39-.882-.902-.882a.878.878%200%2000-.896.882c0%20.499.396.882.896.882z%22%2F%3E%3C%2Fsvg%3E);
}
.weui-icon-outlined-warn {
mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M2 12C2 17.5228 6.47715 22 12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12ZM20.8 12C20.8 16.8601 16.8601 20.8 12 20.8C7.13989 20.8 3.2 16.8601 3.2 12C3.2 7.13989 7.13989 3.2 12 3.2C16.8601 3.2 20.8 7.13989 20.8 12ZM12.6592 6.43115L12.5713 13.4917H11.4287L11.3408 6.43115H12.6592ZM11.165 16.2383C11.165 16.707 11.5312 17.0732 12 17.0732C12.4761 17.0732 12.835 16.707 12.835 16.2383C12.835 15.7622 12.4761 15.4033 12 15.4033C11.5312 15.4033 11.165 15.7622 11.165 16.2383Z' fill='black' /%3E%3C/svg%3E%0A");
}
.weui-icon-info-circle {
- mask-image: url(data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M12%2022C6.477%2022%202%2017.523%202%2012S6.477%202%2012%202s10%204.477%2010%2010-4.477%2010-10%2010zm0-1.2a8.8%208.8%200%20100-17.6%208.8%208.8%200%20000%2017.6zM11.4%2010h1.2v7h-1.2v-7zm.6-1a1%201%200%20110-2%201%201%200%20010%202z%22%2F%3E%3C%2Fsvg%3E);
+ mask-image: url(data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M12%2022C6.477%2022%202%2017.523%202%2012S6.477%202%2012%202s10%204.477%2010%2010-4.477%2010-10%2010zm0-1.2a8.8%208.8%200%20100-17.6%208.8%208.8%200%20000%2017.6zM11.4%2010h1.2v7h-1.2v-7zm.6-1a1%201%200%20110-2%201%201%200%20010%202z%22%2F%3E%3C%2Fsvg%3E);
}
.weui-icon-cancel {
- mask-image: url(data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cg%20fill-rule%3D%22evenodd%22%3E%3Cpath%20d%3D%22M12%2022C6.477%2022%202%2017.523%202%2012S6.477%202%2012%202s10%204.477%2010%2010-4.477%2010-10%2010zm0-1.2a8.8%208.8%200%20100-17.6%208.8%208.8%200%20000%2017.6z%22%20fill-rule%3D%22nonzero%22%2F%3E%3Cpath%20d%3D%22M12.849%2012l3.11%203.111-.848.849L12%2012.849l-3.111%203.11-.849-.848L11.151%2012l-3.11-3.111.848-.849L12%2011.151l3.111-3.11.849.848L12.849%2012z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E);
+ mask-image: url(data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cg%20fill-rule%3D%22evenodd%22%3E%3Cpath%20d%3D%22M12%2022C6.477%2022%202%2017.523%202%2012S6.477%202%2012%202s10%204.477%2010%2010-4.477%2010-10%2010zm0-1.2a8.8%208.8%200%20100-17.6%208.8%208.8%200%20000%2017.6z%22%20fill-rule%3D%22nonzero%22%2F%3E%3Cpath%20d%3D%22M12.849%2012l3.11%203.111-.848.849L12%2012.849l-3.111%203.11-.849-.848L11.151%2012l-3.11-3.111.848-.849L12%2011.151l3.111-3.11.849.848L12.849%2012z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E);
}
.weui-icon-search {
- mask-image: url(data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M16.31%2015.561l4.114%204.115-.848.848-4.123-4.123a7%207%200%2011.857-.84zM16.8%2011a5.8%205.8%200%2010-11.6%200%205.8%205.8%200%200011.6%200z%22%20fill-rule%3D%22evenodd%22%2F%3E%3C%2Fsvg%3E);
+ mask-image: url(data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M16.31%2015.561l4.114%204.115-.848.848-4.123-4.123a7%207%200%2011.857-.84zM16.8%2011a5.8%205.8%200%2010-11.6%200%205.8%205.8%200%200011.6%200z%22%20fill-rule%3D%22evenodd%22%2F%3E%3C%2Fsvg%3E);
}
.weui-icon-clear {
- mask-image: url(data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M13.06%2012l3.006-3.005-1.06-1.06L12%2010.938%208.995%207.934l-1.06%201.06L10.938%2012l-3.005%203.005%201.06%201.06L12%2013.062l3.005%203.005%201.06-1.06L13.062%2012zM12%2022C6.477%2022%202%2017.523%202%2012S6.477%202%2012%202s10%204.477%2010%2010-4.477%2010-10%2010z%22%2F%3E%3C%2Fsvg%3E);
+ mask-image: url(data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M13.06%2012l3.006-3.005-1.06-1.06L12%2010.938%208.995%207.934l-1.06%201.06L10.938%2012l-3.005%203.005%201.06%201.06L12%2013.062l3.005%203.005%201.06-1.06L13.062%2012zM12%2022C6.477%2022%202%2017.523%202%2012S6.477%202%2012%202s10%204.477%2010%2010-4.477%2010-10%2010z%22%2F%3E%3C%2Fsvg%3E);
}
.weui-icon-back {
- mask-image: url(data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M12%2022C6.477%2022%202%2017.523%202%2012S6.477%202%2012%202s10%204.477%2010%2010-4.477%2010-10%2010zm1.999-6.563L10.68%2012%2014%208.562%2012.953%207.5%209.29%2011.277a1.045%201.045%200%20000%201.446l3.663%203.777L14%2015.437z%22%20fill-rule%3D%22evenodd%22%2F%3E%3C%2Fsvg%3E);
+ mask-image: url(data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M12%2022C6.477%2022%202%2017.523%202%2012S6.477%202%2012%202s10%204.477%2010%2010-4.477%2010-10%2010zm1.999-6.563L10.68%2012%2014%208.562%2012.953%207.5%209.29%2011.277a1.045%201.045%200%20000%201.446l3.663%203.777L14%2015.437z%22%20fill-rule%3D%22evenodd%22%2F%3E%3C%2Fsvg%3E);
}
.weui-icon-delete {
- mask-image: url(data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M6.774%206.4l.812%2013.648a.8.8%200%2000.798.752h7.232a.8.8%200%2000.798-.752L17.226%206.4H6.774zm11.655%200l-.817%2013.719A2%202%200%200115.616%2022H8.384a2%202%200%2001-1.996-1.881L5.571%206.4H3.5v-.7a.5.5%200%2001.5-.5h16a.5.5%200%2001.5.5v.7h-2.071zM14%203a.5.5%200%2001.5.5v.7h-5v-.7A.5.5%200%200110%203h4zM9.5%209h1.2l.5%209H10l-.5-9zm3.8%200h1.2l-.5%209h-1.2l.5-9z%22%2F%3E%3C%2Fsvg%3E);
+ mask-image: url(data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M6.774%206.4l.812%2013.648a.8.8%200%2000.798.752h7.232a.8.8%200%2000.798-.752L17.226%206.4H6.774zm11.655%200l-.817%2013.719A2%202%200%200115.616%2022H8.384a2%202%200%2001-1.996-1.881L5.571%206.4H3.5v-.7a.5.5%200%2001.5-.5h16a.5.5%200%2001.5.5v.7h-2.071zM14%203a.5.5%200%2001.5.5v.7h-5v-.7A.5.5%200%200110%203h4zM9.5%209h1.2l.5%209H10l-.5-9zm3.8%200h1.2l-.5%209h-1.2l.5-9z%22%2F%3E%3C%2Fsvg%3E);
}
.weui-icon-success-no-circle-thin {
- mask-image: url(data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M8.864%2016.617l-5.303-5.303-1.061%201.06%205.657%205.657a1%201%200%20001.414%200L21.238%206.364l-1.06-1.06L8.864%2016.616z%22%20fill-rule%3D%22evenodd%22%2F%3E%3C%2Fsvg%3E);
+ mask-image: url(data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M8.864%2016.617l-5.303-5.303-1.061%201.06%205.657%205.657a1%201%200%20001.414%200L21.238%206.364l-1.06-1.06L8.864%2016.616z%22%20fill-rule%3D%22evenodd%22%2F%3E%3C%2Fsvg%3E);
}
.weui-icon-arrow {
- mask-image: url(data:image/svg+xml,%3Csvg%20width%3D%2212%22%20height%3D%2224%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M2.454%206.58l1.06-1.06%205.78%205.779a.996.996%200%20010%201.413l-5.78%205.779-1.06-1.061%205.425-5.425-5.425-5.424z%22%20fill%3D%22%23B2B2B2%22%20fill-rule%3D%22evenodd%22%2F%3E%3C%2Fsvg%3E);
+ mask-image: url(data:image/svg+xml,%3Csvg%20width%3D%2212%22%20height%3D%2224%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M2.454%206.58l1.06-1.06%205.78%205.779a.996.996%200%20010%201.413l-5.78%205.779-1.06-1.061%205.425-5.425-5.425-5.424z%22%20fill%3D%22%23B2B2B2%22%20fill-rule%3D%22evenodd%22%2F%3E%3C%2Fsvg%3E);
}
.weui-icon-arrow-bold {
- mask-image: url(data:image/svg+xml,%3Csvg%20height%3D%2224%22%20width%3D%2212%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M10.157%2012.711L4.5%2018.368l-1.414-1.414%204.95-4.95-4.95-4.95L4.5%205.64l5.657%205.657a1%201%200%20010%201.414z%22%20fill-rule%3D%22evenodd%22%2F%3E%3C%2Fsvg%3E);
+ mask-image: url(data:image/svg+xml,%3Csvg%20height%3D%2224%22%20width%3D%2212%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M10.157%2012.711L4.5%2018.368l-1.414-1.414%204.95-4.95-4.95-4.95L4.5%205.64l5.657%205.657a1%201%200%20010%201.414z%22%20fill-rule%3D%22evenodd%22%2F%3E%3C%2Fsvg%3E);
}
.weui-icon-back-arrow {
- mask-image: url(data:image/svg+xml,%3Csvg%20width%3D%2212%22%20height%3D%2224%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M3.343%2012l7.071%207.071L9%2020.485l-7.778-7.778a1%201%200%20010-1.414L9%203.515l1.414%201.414L3.344%2012z%22%20fill-rule%3D%22evenodd%22%2F%3E%3C%2Fsvg%3E);
+ mask-image: url(data:image/svg+xml,%3Csvg%20width%3D%2212%22%20height%3D%2224%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M3.343%2012l7.071%207.071L9%2020.485l-7.778-7.778a1%201%200%20010-1.414L9%203.515l1.414%201.414L3.344%2012z%22%20fill-rule%3D%22evenodd%22%2F%3E%3C%2Fsvg%3E);
}
.weui-icon-back-arrow-thin {
- mask-image: url(data:image/svg+xml,%3Csvg%20width%3D%2212%22%20height%3D%2224%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M10%2019.438L8.955%2020.5l-7.666-7.79a1.02%201.02%200%20010-1.42L8.955%203.5%2010%204.563%202.682%2012%2010%2019.438z%22%20fill-rule%3D%22evenodd%22%2F%3E%3C%2Fsvg%3E);
+ mask-image: url(data:image/svg+xml,%3Csvg%20width%3D%2212%22%20height%3D%2224%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M10%2019.438L8.955%2020.5l-7.666-7.79a1.02%201.02%200%20010-1.42L8.955%203.5%2010%204.563%202.682%2012%2010%2019.438z%22%20fill-rule%3D%22evenodd%22%2F%3E%3C%2Fsvg%3E);
}
.weui-icon-close {
- mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M12.25 10.6932L6.05682 4.5L5 5.55682L11.1932 11.75L5 17.9432L6.05682 19L12.25 12.8068L18.4432 19L19.5 17.9432L13.3068 11.75L19.5 5.55682L18.4432 4.5L12.25 10.6932Z' fill='black' /%3E%3C/svg%3E%0A");
+ mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M12.25 10.6932L6.05682 4.5L5 5.55682L11.1932 11.75L5 17.9432L6.05682 19L12.25 12.8068L18.4432 19L19.5 17.9432L13.3068 11.75L19.5 5.55682L18.4432 4.5L12.25 10.6932Z' fill='black' /%3E%3C/svg%3E%0A");
}
.weui-icon-close-thin {
- mask-image: url(data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M12.25%2010.693L6.057%204.5%205%205.557l6.193%206.193L5%2017.943%206.057%2019l6.193-6.193L18.443%2019l1.057-1.057-6.193-6.193L19.5%205.557%2018.443%204.5z%22%20fill-rule%3D%22evenodd%22%2F%3E%3C%2Fsvg%3E);
+ mask-image: url(data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M12.25%2010.693L6.057%204.5%205%205.557l6.193%206.193L5%2017.943%206.057%2019l6.193-6.193L18.443%2019l1.057-1.057-6.193-6.193L19.5%205.557%2018.443%204.5z%22%20fill-rule%3D%22evenodd%22%2F%3E%3C%2Fsvg%3E);
}
.weui-icon-back-circle {
- mask-image: url(data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M12%2022C6.477%2022%202%2017.523%202%2012S6.477%202%2012%202s10%204.477%2010%2010-4.477%2010-10%2010zm0-1.2a8.8%208.8%200%20100-17.6%208.8%208.8%200%20000%2017.6zm1.999-5.363L12.953%2016.5%209.29%2012.723a1.045%201.045%200%20010-1.446L12.953%207.5%2014%208.563%2010.68%2012%2014%2015.438z%22%2F%3E%3C%2Fsvg%3E);
+ mask-image: url(data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M12%2022C6.477%2022%202%2017.523%202%2012S6.477%202%2012%202s10%204.477%2010%2010-4.477%2010-10%2010zm0-1.2a8.8%208.8%200%20100-17.6%208.8%208.8%200%20000%2017.6zm1.999-5.363L12.953%2016.5%209.29%2012.723a1.045%201.045%200%20010-1.446L12.953%207.5%2014%208.563%2010.68%2012%2014%2015.438z%22%2F%3E%3C%2Fsvg%3E);
}
// icon setting
.weui-icon-success {
- color: @weuiColorPrimary;
+ color: @weuiColorPrimary;
}
.weui-icon-waiting {
- color: var(--weui-BLUE);
+ color: var(--weui-BLUE);
}
.weui-icon-warn {
- color: @weuiColorWarn;
+ color: @weuiColorWarn;
}
.weui-icon-info {
- color: var(--weui-BLUE);
+ color: var(--weui-BLUE);
}
.weui-icon-success-circle {
- color: @weuiColorPrimary;
+ color: @weuiColorPrimary;
}
.weui-icon-success-no-circle,
.weui-icon-success-no-circle-thin {
- color: @weuiColorPrimary;
+ color: @weuiColorPrimary;
}
.weui-icon-waiting-circle {
- color: var(--weui-BLUE);
+ color: var(--weui-BLUE);
}
.weui-icon-circle {
- color: @weuiTextColorTips;
+ color: @weuiTextColorTips;
}
.weui-icon-download {
- color: @weuiColorPrimary;
+ color: @weuiColorPrimary;
}
.weui-icon-info-circle {
- color: @weuiTextColorTips;
+ color: @weuiTextColorTips;
}
.weui-icon-safe-success {
- color: @weuiColorPrimary;
+ color: @weuiColorPrimary;
}
.weui-icon-safe-warn {
- color: var(--weui-YELLOW);
+ color: var(--weui-YELLOW);
}
.weui-icon-cancel {
- color: @weuiColorWarn;
+ color: @weuiColorWarn;
}
.weui-icon-search {
- color: @weuiTextColorDesc;
+ color: @weuiTextColorDesc;
}
.weui-icon-clear {
- color: @weuiTextColorTips;
- &:active {
- color: @weuiTextColorDesc;
- }
+ color: @weuiTextColorTips;
+ &:active {
+ color: @weuiTextColorDesc;
+ }
}
.weui-icon-delete {
- &.weui-icon_gallery-delete {
- color: var(--weui-WHITE);
- }
+ &.weui-icon_gallery-delete {
+ color: var(--weui-WHITE);
+ }
}
.weui-icon-arrow,
.weui-icon-arrow-bold,
.weui-icon-back-arrow,
.weui-icon-back-arrow-thin {
- &&{
+ && {
width: 1.2em;
}
}
.weui-icon-arrow,
.weui-icon-arrow-bold {
- color: @weuiTextColorTips;
+ color: @weuiTextColorTips;
}
.weui-icon-back-arrow,
.weui-icon-back-arrow-thin {
- color: @weuiTextColorTitle;
+ color: @weuiTextColorTitle;
}
.weui-icon-back,
.weui-icon-back-circle {
- color: @weuiTextColorTitle;
+ color: @weuiTextColorTitle;
}
.weui-icon_msg {
- &&{
+ && {
width: 6.4em;
height: 6.4em;
&.weui-icon-warn {
- color: @weuiColorWarn;
+ color: @weuiColorWarn;
}
&.weui-icon-info-circle {
- color: var(--weui-BLUE);
+ color: var(--weui-BLUE);
}
}
}
.weui-icon_msg-primary {
- &&{
+ && {
width: 6.4em;
height: 6.4em;
&.weui-icon-warn {
- color: var(--weui-YELLOW);
+ color: var(--weui-YELLOW);
}
}
}
diff --git a/src/style/widget/weui-agree/weui-agree.less b/src/style/widget/weui-agree/weui-agree.less
index 323d7e8d..5b8b19f6 100644
--- a/src/style/widget/weui-agree/weui-agree.less
+++ b/src/style/widget/weui-agree/weui-agree.less
@@ -18,11 +18,12 @@
.weui-agree {
display: flex;
- text-align:justify;
+ text-align: justify;
justify-content: center;
- align-items:center;
+ align-items: center;
.hyphens;
- line-height:1.6;
+
+ line-height: 1.6;
font-size: 14px;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
@@ -35,78 +36,78 @@
}
}
.weui-agree__text {
- color: @weuiTextColorDesc;
- margin-left: 2px;
- min-width:0;
+ color: @weuiTextColorDesc;
+ margin-left: 2px;
+ min-width: 0;
}
.weui-agree__checkbox {
- appearance: none;
- display: inline-block;
- border: 0;
- outline: 0;
- vertical-align: middle;
- background-color: currentColor;
- mask-position: 0 0;
- mask-repeat: no-repeat;
- mask-size: 100%;
- mask-image: url(data:image/svg+xml,%3Csvg%20width%3D%221000%22%20height%3D%221000%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M500%20916.667C269.881%20916.667%2083.333%20730.119%2083.333%20500%2083.333%20269.881%20269.881%2083.333%20500%2083.333c230.119%200%20416.667%20186.548%20416.667%20416.667%200%20230.119-186.548%20416.667-416.667%20416.667zm0-50c202.504%200%20366.667-164.163%20366.667-366.667%200-202.504-164.163-366.667-366.667-366.667-202.504%200-366.667%20164.163-366.667%20366.667%200%20202.504%20164.163%20366.667%20366.667%20366.667z%22%20fill-rule%3D%22evenodd%22%20fill-opacity%3D%22.9%22%2F%3E%3C%2Fsvg%3E);
- color: @weuiLineColorDark;
- width: 1em;
- height: 1em;
- font-size: 17px;
- flex-shrink: 0;
- margin-top: 0;
+ appearance: none;
+ display: inline-block;
+ border: 0;
+ outline: 0;
+ vertical-align: middle;
+ background-color: currentColor;
+ mask-position: 0 0;
+ mask-repeat: no-repeat;
+ mask-size: 100%;
+ mask-image: url(data:image/svg+xml,%3Csvg%20width%3D%221000%22%20height%3D%221000%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M500%20916.667C269.881%20916.667%2083.333%20730.119%2083.333%20500%2083.333%20269.881%20269.881%2083.333%20500%2083.333c230.119%200%20416.667%20186.548%20416.667%20416.667%200%20230.119-186.548%20416.667-416.667%20416.667zm0-50c202.504%200%20366.667-164.163%20366.667-366.667%200-202.504-164.163-366.667-366.667-366.667-202.504%200-366.667%20164.163-366.667%20366.667%200%20202.504%20164.163%20366.667%20366.667%20366.667z%22%20fill-rule%3D%22evenodd%22%20fill-opacity%3D%22.9%22%2F%3E%3C%2Fsvg%3E);
+ color: @weuiLineColorDark;
+ width: 1em;
+ height: 1em;
+ font-size: 17px;
+ flex-shrink: 0;
+ margin-top: 0;
}
.weui-agree__checkbox-check { // 兼容小程序
- opacity: 0;
- position: absolute;
- width: 1px;
- height: 1px;
- overflow: hidden;
+ opacity: 0;
+ position: absolute;
+ width: 1px;
+ height: 1px;
+ overflow: hidden;
}
.weui-agree__checkbox:checked,
.weui-agree__checkbox-check[aria-checked="true"] + .weui-agree__checkbox {
- mask-image: url(data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M12%2022C6.477%2022%202%2017.523%202%2012S6.477%202%2012%202s10%204.477%2010%2010-4.477%2010-10%2010zm-1.177-7.86l-2.765-2.767L7%2012.431l3.119%203.121a1%201%200%20001.414%200l5.952-5.95-1.062-1.062-5.6%205.6z%22%2F%3E%3C%2Fsvg%3E);
- color: @weuiColorPrimary;
+ mask-image: url(data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M12%2022C6.477%2022%202%2017.523%202%2012S6.477%202%2012%202s10%204.477%2010%2010-4.477%2010-10%2010zm-1.177-7.86l-2.765-2.767L7%2012.431l3.119%203.121a1%201%200%20001.414%200l5.952-5.95-1.062-1.062-5.6%205.6z%22%2F%3E%3C%2Fsvg%3E);
+ color: @weuiColorPrimary;
}
.weui-agree_animate {
- animation: weuiAgree 0.3s 1;
+ animation: weuiAgree 0.3s 1;
}
@keyframes weuiAgree {
- 0% {
- transform: translateX(0);
- }
+ 0% {
+ transform: translateX(0);
+ }
- 16% {
- transform: translateX(-8px);
- }
+ 16% {
+ transform: translateX(-8px);
+ }
- 28% {
- transform: translateX(-16px);
- }
+ 28% {
+ transform: translateX(-16px);
+ }
- 44% {
- transform: translateX(0);
- }
+ 44% {
+ transform: translateX(0);
+ }
- 59% {
- transform: translateX(-16px);
- }
+ 59% {
+ transform: translateX(-16px);
+ }
- 73% {
- transform: translateX(0);
- }
+ 73% {
+ transform: translateX(0);
+ }
- 82% {
- transform: translateX(16px);
- }
+ 82% {
+ transform: translateX(16px);
+ }
- 94% {
- transform: translateX(8px);
- }
+ 94% {
+ transform: translateX(8px);
+ }
- 100% {
- transform: translateX(0);
- }
+ 100% {
+ transform: translateX(0);
+ }
}
diff --git a/src/style/widget/weui-animate/weui-animate.less b/src/style/widget/weui-animate/weui-animate.less
index 7e331c18..c5a82247 100644
--- a/src/style/widget/weui-animate/weui-animate.less
+++ b/src/style/widget/weui-animate/weui-animate.less
@@ -17,84 +17,84 @@
@import "../../base/fn";
@keyframes weuiSlideUp {
- from {
- transform: translate3d(0, 100%, 0);
- }
+ from {
+ transform: translate3d(0, 100%, 0);
+ }
- to {
- transform: translate3d(0, 0, 0);
- }
+ to {
+ transform: translate3d(0, 0, 0);
+ }
}
-.weui-animate_slide-up ,
+.weui-animate_slide-up,
.weui-animate-slide-up {
- animation: weuiSlideUp ease 0.3s forwards;
+ animation: weuiSlideUp ease 0.3s forwards;
}
@keyframes weuiSlideDown {
- from {
- transform: translate3d(0, 0, 0);
- }
+ from {
+ transform: translate3d(0, 0, 0);
+ }
- to {
- transform: translate3d(0, 100%, 0);
- }
+ to {
+ transform: translate3d(0, 100%, 0);
+ }
}
-.weui-animate_slide-down ,
+.weui-animate_slide-down,
.weui-animate-slide-down {
- animation: weuiSlideDown ease 0.3s forwards;
+ animation: weuiSlideDown ease 0.3s forwards;
}
@keyframes weuiFadeIn {
- from {
- opacity: 0;
- }
- to {
- opacity: 1;
- }
+ from {
+ opacity: 0;
+ }
+ to {
+ opacity: 1;
+ }
}
-.weui-animate_fade-in ,
+.weui-animate_fade-in,
.weui-animate-fade-in {
- animation: weuiFadeIn ease 0.3s forwards;
+ animation: weuiFadeIn ease 0.3s forwards;
}
@keyframes weuiFadeOut {
- from {
- opacity: 1;
- }
- to {
- opacity: 0;
- }
+ from {
+ opacity: 1;
+ }
+ to {
+ opacity: 0;
+ }
}
-.weui-animate_fade-out ,
+.weui-animate_fade-out,
.weui-animate-fade-out {
- animation: weuiFadeOut ease 0.3s forwards;
+ animation: weuiFadeOut ease 0.3s forwards;
}
// transition
//模态弹窗/提示组件通用显示
-.weui-transition{
- &.weui-mask{
- transition:opacity .3s, visibility .3s;
- opacity:0;
- visibility:hidden;
+.weui-transition {
+ &.weui-mask {
+ transition: opacity 0.3s, visibility 0.3s;
+ opacity: 0;
+ visibility: hidden;
}
- &.weui-half-screen-dialog{
- transition:transform .3s;
- transform:translateY(100%);
+ &.weui-half-screen-dialog {
+ transition: transform 0.3s;
+ transform: translateY(100%);
}
}
-.weui-transition_show{
- &.weui-mask{
- opacity:1;
- visibility:visible;
+.weui-transition_show {
+ &.weui-mask {
+ opacity: 1;
+ visibility: visible;
}
- &.weui-half-screen-dialog{
- transform:translateY(0);
+ &.weui-half-screen-dialog {
+ transform: translateY(0);
}
}
diff --git a/src/style/widget/weui-button/weui-btn_bottom-fixed.less b/src/style/widget/weui-button/weui-btn_bottom-fixed.less
index 1700a368..39cc7cab 100644
--- a/src/style/widget/weui-button/weui-btn_bottom-fixed.less
+++ b/src/style/widget/weui-button/weui-btn_bottom-fixed.less
@@ -19,47 +19,47 @@
@weuiBottomFixedOprMaskHeight:80px;
.weui-bottom-fixed-opr-page {
- height: 100%;
- display: flex;
- flex-direction: column;
+ height: 100%;
+ display: flex;
+ flex-direction: column;
}
.weui-bottom-fixed-opr-page__content {
- min-height: 0;
- flex: 1;
- padding-bottom: @weuiBottomFixedOprMaskHeight;
- box-sizing: border-box;
- overflow-y: auto;
- -webkit-overflow-scrolling: touch;
+ min-height: 0;
+ flex: 1;
+ padding-bottom: @weuiBottomFixedOprMaskHeight;
+ box-sizing: border-box;
+ overflow-y: auto;
+ -webkit-overflow-scrolling: touch;
}
-.weui-bottom-fixed-opr-page__tool{
- padding: 16px 32px 24px;
- padding: 16px calc(32px ~"+ constant(safe-area-inset-right)") calc(24px ~"+ constant(safe-area-inset-bottom)") calc(32px ~"+ constant(safe-area-inset-left)");
- padding: 16px calc(32px ~"+ env(safe-area-inset-right)") calc(24px ~"+ env(safe-area-inset-bottom)") calc(32px ~"+ env(safe-area-inset-left)");
- background: rgba(255, 255, 255, 1);
- position: relative;
- z-index:50;
- &:before {
- content: "";
- height: @weuiBottomFixedOprMaskHeight;
- background: linear-gradient(to top, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0));
- position: absolute;
- bottom: ~"calc(100% - 1px)";
- left: 0;
- right: 0;
- transform: translate3d(0, 0, 0);
- pointer-events:none;
- }
+.weui-bottom-fixed-opr-page__tool {
+ padding: 16px 32px 24px;
+ padding: 16px calc(32px ~"+ constant(safe-area-inset-right)") calc(24px ~"+ constant(safe-area-inset-bottom)") calc(32px ~"+ constant(safe-area-inset-left)");
+ padding: 16px calc(32px ~"+ env(safe-area-inset-right)") calc(24px ~"+ env(safe-area-inset-bottom)") calc(32px ~"+ env(safe-area-inset-left)");
+ background: rgba(255, 255, 255, 1);
+ position: relative;
+ z-index: 50;
+ &::before {
+ content: "";
+ height: @weuiBottomFixedOprMaskHeight;
+ background: linear-gradient(to top, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0));
+ position: absolute;
+ bottom: ~"calc(100% - 1px)";
+ left: 0;
+ right: 0;
+ transform: translate3d(0, 0, 0);
+ pointer-events: none;
+ }
}
.weui-bottom-fixed-opr-page__tool {
+ .dark({
+ background:rgba(25,25,25,1);
+ });
+ &::before {
.dark({
- background:rgba(25,25,25,1);
+ background: linear-gradient(to top, rgba(25,25,25,1), rgba(25,25,25,0));
});
- &:before {
- .dark({
- background: linear-gradient(to top, rgba(25,25,25,1), rgba(25,25,25,0));
- });
- }
+ }
}
.weui-bottom-fixed-opr-page__tips {
margin-bottom: 24px;
@@ -70,9 +70,9 @@
// 按钮组水平布局与垂直布局切换
.weui-bottom-fixed-opr-page {
- .weui-bottom-fixed-opr {
- .weuiBtnWrapLayoutDefault();
- }
+ .weui-bottom-fixed-opr {
+ .weuiBtnWrapLayoutDefault();
+ }
}
.weui-bottom-fixed-opr-page_btn-wrap {
.weui-bottom-fixed-opr {
@@ -82,43 +82,43 @@
// 新版底部悬浮，支持表单和半屏
-.weui-bottom-fixed-opr-page{
+.weui-bottom-fixed-opr-page {
&.weui-form {
- padding-top:0;
+ padding-top: 0;
.weui-form__bd {
- padding-top:56px;
- padding-top:calc(56px ~"+ constant(safe-area-inset-top)");
- padding-top:calc(56px ~"+ env(safe-area-inset-top)");
+ padding-top: 56px;
+ padding-top: calc(56px ~"+ constant(safe-area-inset-top)");
+ padding-top: calc(56px ~"+ env(safe-area-inset-top)");
}
- .weui-form__ft{
- padding-bottom:0;
+ .weui-form__ft {
+ padding-bottom: 0;
}
- .weui-form__control-area{
- margin-bottom:0;
+ .weui-form__control-area {
+ margin-bottom: 0;
}
}
&.weui-half-screen-dialog {
- padding:0;
+ padding: 0;
.weui-half-screen-dialog__hd,
.weui-half-screen-dialog__bd,
- .weui-half-screen-dialog__ft{
- padding-left:24px;
- padding-left:calc(24px ~"+ constant(safe-area-inset-left)");
- padding-left:calc(24px ~"+ env(safe-area-inset-left)");
- padding-right:24px;
- padding-right:calc(24px ~"+ constant(safe-area-inset-right)");
- padding-right:calc(24px ~"+ env(safe-area-inset-right)");
+ .weui-half-screen-dialog__ft {
+ padding-left: 24px;
+ padding-left: calc(24px ~"+ constant(safe-area-inset-left)");
+ padding-left: calc(24px ~"+ env(safe-area-inset-left)");
+ padding-right: 24px;
+ padding-right: calc(24px ~"+ constant(safe-area-inset-right)");
+ padding-right: calc(24px ~"+ env(safe-area-inset-right)");
}
- .weui-half-screen-dialog__bd{
- padding-bottom:80px;
+ .weui-half-screen-dialog__bd {
+ padding-bottom: 80px;
}
- .weui-half-screen-dialog__ft{
- padding-bottom:64px;
- padding-bottom:~"calc(64px + constant(safe-area-inset-bottom))";
- padding-bottom:~"calc(64px + env(safe-area-inset-bottom))";
+ .weui-half-screen-dialog__ft {
+ padding-bottom: 64px;
+ padding-bottom: ~"calc(64px + constant(safe-area-inset-bottom))";
+ padding-bottom: ~"calc(64px + env(safe-area-inset-bottom))";
}
}
}
diff --git a/src/style/widget/weui-button/weui-btn_cell.less b/src/style/widget/weui-button/weui-btn_cell.less
index 7e12af74..b08e2622 100644
--- a/src/style/widget/weui-button/weui-btn_cell.less
+++ b/src/style/widget/weui-button/weui-btn_cell.less
@@ -17,43 +17,43 @@
@import "../../base/fn";
.weui-btn_cell {
- position: relative;
- display: block;
- margin-left: auto;
- margin-right: auto;
- box-sizing: border-box;
- font-size: @weuiBtnFontSize;
- text-align: center;
- text-decoration: none;
- color: @weuiBtnFontColor;
- line-height: @weuiBtnCellLineHeight;
- padding: @weuiBtnCellGap;
- .setTapColor();
+ position: relative;
+ display: block;
+ margin-left: auto;
+ margin-right: auto;
+ box-sizing: border-box;
+ font-size: @weuiBtnFontSize;
+ text-align: center;
+ text-decoration: none;
+ color: @weuiBtnFontColor;
+ line-height: @weuiBtnCellLineHeight;
+ padding: @weuiBtnCellGap;
+ .setTapColor();
- overflow: hidden;
- background-color: var(--weui-BG-5);
- & + & {
- margin-top: @weuiBtnDefaultGap;
- }
- &:active {
- background-color: @weuiBgColorActive;
- }
+ overflow: hidden;
+ background-color: var(--weui-BG-5);
+ & + & {
+ margin-top: @weuiBtnDefaultGap;
+ }
+ &:active {
+ background-color: @weuiBgColorActive;
+ }
}
.weui-btn_cell__icon {
- display: inline-block;
- vertical-align: middle;
- width: 24px;
- height: 24px;
- margin: -0.2em 0.34em 0 0;
+ display: inline-block;
+ vertical-align: middle;
+ width: 24px;
+ height: 24px;
+ margin: -0.2em 0.34em 0 0;
}
.weui-btn_cell-default {
- color: var(--weui-FG-0);
+ color: var(--weui-FG-0);
}
.weui-btn_cell-primary {
- color: @weuiLinkColorDefault;
+ color: @weuiLinkColorDefault;
}
.weui-btn_cell-warn {
- color: @weuiColorWarn;
+ color: @weuiColorWarn;
}
diff --git a/src/style/widget/weui-button/weui-btn_default.less b/src/style/widget/weui-button/weui-btn_default.less
index ffb120e4..52bbd6ad 100644
--- a/src/style/widget/weui-button/weui-btn_default.less
+++ b/src/style/widget/weui-button/weui-btn_default.less
@@ -17,9 +17,9 @@
@import "../../base/fn";
.weui-btn_default {
+ color: @weuiBtnDefaultFontColor;
+ background-color: @weuiBtnDefaultBg;
+ &:not(.weui-btn_disabled):visited {
color: @weuiBtnDefaultFontColor;
- background-color: @weuiBtnDefaultBg;
- &:not(.weui-btn_disabled):visited {
- color: @weuiBtnDefaultFontColor;
- }
+ }
}
diff --git a/src/style/widget/weui-button/weui-btn_disabled.less b/src/style/widget/weui-button/weui-btn_disabled.less
index a355fff4..9bfc78e0 100644
--- a/src/style/widget/weui-button/weui-btn_disabled.less
+++ b/src/style/widget/weui-button/weui-btn_disabled.less
@@ -18,6 +18,6 @@
.weui-btn_disabled,
.weui-btn[disabled] {
- color: var(--weui-FG-4);
- background-color: var(--weui-BG-1);
+ color: var(--weui-FG-4);
+ background-color: var(--weui-BG-1);
}
diff --git a/src/style/widget/weui-button/weui-btn_global.less b/src/style/widget/weui-button/weui-btn_global.less
index 53a695b6..6dd81803 100644
--- a/src/style/widget/weui-button/weui-btn_global.less
+++ b/src/style/widget/weui-button/weui-btn_global.less
@@ -17,47 +17,48 @@
@import "../../base/fn";
.weui-btn {
- position: relative;
- display: block;
- width: @weuiBtnWidth;
- margin-left: auto;
- margin-right: auto;
- padding: 12px 24px;
- box-sizing: border-box;
- font-weight: 500;
- font-size: @weuiBtnFontSize;
- text-align: center;
- text-decoration: none;
- color: @weuiBtnFontColor;
- line-height: unit(((@weuiBtnHeight - 24) / @weuiBtnFontSize));
- border-radius: @weuiBtnBorderRadius;
- .setTapColor();
- user-select:none;
+ position: relative;
+ display: block;
+ width: @weuiBtnWidth;
+ margin-left: auto;
+ margin-right: auto;
+ padding: 12px 24px;
+ box-sizing: border-box;
+ font-weight: 500;
+ font-size: @weuiBtnFontSize;
+ text-align: center;
+ text-decoration: none;
+ color: @weuiBtnFontColor;
+ line-height: unit(((@weuiBtnHeight - 24) / @weuiBtnFontSize));
+ border-radius: @weuiBtnBorderRadius;
+ .setTapColor();
- &:active{
- &:before {
- content:"";
- position: absolute;
- top: 0;
- left: 0;
- width: 100%;
- height: 100%;
- background-color: var(--weui-BTN-ACTIVE-MASK);
- border-radius: @weuiBtnBorderRadius;
- }
+ user-select: none;
+
+ &:active {
+ &::before {
+ content: "";
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ background-color: var(--weui-BTN-ACTIVE-MASK);
+ border-radius: @weuiBtnBorderRadius;
+ }
- &.weui-btn_loading,
- &.weui-btn_disabled,
- &[disabled]{
- &:before{
- display:none;
- }
+ &.weui-btn_loading,
+ &.weui-btn_disabled,
+ &[disabled] {
+ &::before {
+ display: none;
}
}
+ }
}
.weui-btn_block {
- width: auto;
+ width: auto;
}
.weui-btn_inline {
- display: inline-block;
+ display: inline-block;
}
diff --git a/src/style/widget/weui-button/weui-btn_loading.less b/src/style/widget/weui-button/weui-btn_loading.less
index afbb9f25..b8ea99ea 100644
--- a/src/style/widget/weui-button/weui-btn_loading.less
+++ b/src/style/widget/weui-button/weui-btn_loading.less
@@ -17,22 +17,22 @@
@import "../../base/fn";
.weui-btn_loading {
- .weui-loading {
- 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;
- vertical-align: middle;
- color: currentColor;
- &:before {
- content: "";
- }
- }
- &.weui-btn_primary {
- color: var(--weui-WHITE);
+ .weui-loading {
+ 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;
+ vertical-align: middle;
+ color: currentColor;
+ &::before {
+ content: "";
}
+ }
+ &.weui-btn_primary {
+ color: var(--weui-WHITE);
+ }
}
diff --git a/src/style/widget/weui-button/weui-btn_overlay.less b/src/style/widget/weui-button/weui-btn_overlay.less
index ee8479e7..7f53d5fd 100644
--- a/src/style/widget/weui-button/weui-btn_overlay.less
+++ b/src/style/widget/weui-button/weui-btn_overlay.less
@@ -17,9 +17,9 @@
@import "../../base/fn";
.weui-btn_overlay {
+ color: var(--weui-BRAND);
+ background-color: @LIGHT_BG_5;
+ &:not(.weui-btn_disabled):visited {
color: var(--weui-BRAND);
- background-color: @LIGHT_BG_5;
- &:not(.weui-btn_disabled):visited {
- color: var(--weui-BRAND);
- }
+ }
}
diff --git a/src/style/widget/weui-button/weui-btn_primary.less b/src/style/widget/weui-button/weui-btn_primary.less
index c67f9043..bddd10ab 100644
--- a/src/style/widget/weui-button/weui-btn_primary.less
+++ b/src/style/widget/weui-button/weui-btn_primary.less
@@ -17,8 +17,8 @@
@import "../../base/fn";
.weui-btn_primary {
- background-color: @weuiBtnPrimaryBg;
- &:not(.weui-btn_disabled):visited {
- color: @weuiBtnPrimaryFontColor;
- }
+ background-color: @weuiBtnPrimaryBg;
+ &:not(.weui-btn_disabled):visited {
+ color: @weuiBtnPrimaryFontColor;
+ }
}
diff --git a/src/style/widget/weui-button/weui-btn_warn.less b/src/style/widget/weui-button/weui-btn_warn.less
index 8a650d30..a6da9373 100644
--- a/src/style/widget/weui-button/weui-btn_warn.less
+++ b/src/style/widget/weui-button/weui-btn_warn.less
@@ -17,9 +17,9 @@
@import "../../base/fn";
.weui-btn_warn {
+ color: @weuiBtnWarnFontColor;
+ background-color: @weuiBtnWarnBg;
+ &:not(.weui-btn_disabled):visited {
color: @weuiBtnWarnFontColor;
- background-color: @weuiBtnWarnBg;
- &:not(.weui-btn_disabled):visited {
- color: @weuiBtnWarnFontColor;
- }
+ }
}
diff --git a/src/style/widget/weui-button/weui-button.less b/src/style/widget/weui-button/weui-button.less
index 7c3c7990..b85e29b8 100644
--- a/src/style/widget/weui-button/weui-button.less
+++ b/src/style/widget/weui-button/weui-button.less
@@ -27,96 +27,96 @@
button,
input {
- &.weui-btn {
- border-width: 0;
- outline: 0;
- -webkit-appearance: none;
- &:focus {
- outline: 0;
- }
- }
- &.weui-btn_inline,
- &.weui-btn_mini {
- width: auto;
+ &.weui-btn {
+ border-width: 0;
+ outline: 0;
+ -webkit-appearance: none;
+ &:focus {
+ outline: 0;
}
+ }
+ &.weui-btn_inline,
+ &.weui-btn_mini {
+ width: auto;
+ }
}
.weui-btn_medium {
- font-size:14px;
- padding:10px 24px;
- line-height:~"calc((var(--weui-BTN-HEIGHT-MEDIUM) - 20) / 14)";
+ font-size: 14px;
+ padding: 10px 24px;
+ line-height: ~"calc((var(--weui-BTN-HEIGHT-MEDIUM) - 20) / 14)";
}
.weui-btn_mini {
- display: inline-block;
- width: auto;
- line-height:~"calc((32 - 12) / 14)";
- padding:6px 12px;
- font-size: 14px;
- border-radius: 6px;
+ display: inline-block;
+ width: auto;
+ line-height: ~"calc((32 - 12) / 14)";
+ padding: 6px 12px;
+ font-size: 14px;
+ border-radius: 6px;
}
.weui-btn_xmini {
- display: inline-block;
- width: auto;
- padding: 4px 12px;
- line-height: ~"calc((28 - 8) / 14)";
- font-size: 14px;
- font-weight:500;
- border-radius: 4px;
+ display: inline-block;
+ width: auto;
+ padding: 4px 12px;
+ line-height: ~"calc((28 - 8) / 14)";
+ font-size: 14px;
+ font-weight: 500;
+ border-radius: 4px;
}
/* gap between btn */
.weui-btn {
- &+.weui-btn{
- margin-top:@weuiBtnDefaultGap;
+ & + .weui-btn {
+ margin-top: @weuiBtnDefaultGap;
}
- &.weui-btn_mini + .weui-btn.weui-btn_mini{
- margin-top:auto;
+ &.weui-btn_mini + .weui-btn.weui-btn_mini {
+ margin-top: auto;
}
- &.weui-btn_xmini + .weui-btn.weui-btn_xmini{
- margin-top:auto;
+ &.weui-btn_xmini + .weui-btn.weui-btn_xmini {
+ margin-top: auto;
}
}
.weui-btn.weui-btn_inline + .weui-btn.weui-btn_inline {
- margin-left: @weuiBtnDefaultGap;
+ margin-left: @weuiBtnDefaultGap;
}
.weui-btn-area {
- margin: 48px @weuiBtnDefaultGap 8px;
+ margin: 48px @weuiBtnDefaultGap 8px;
}
.weui-btn-area_inline {
- display: flex;
- .weui-btn {
- margin-top: auto;
- margin-right: @weuiBtnDefaultGap;
- width: 100%;
- flex: 1;
- &:last-child {
- margin-right: 0;
- }
+ display: flex;
+ .weui-btn {
+ margin-top: auto;
+ margin-right: @weuiBtnDefaultGap;
+ width: 100%;
+ flex: 1;
+ &:last-child {
+ margin-right: 0;
}
+ }
}
.weui-btn_reset {
- background: transparent;
- border: 0;
- padding: 0;
- outline: 0;
- font-size:inherit;
+ background: transparent;
+ border: 0;
+ padding: 0;
+ outline: 0;
+ font-size: inherit;
}
.weui-btn_icon {
- background: transparent;
- border: 0;
- padding: 0;
- outline: 0;
- font-size: 0;
- &:active {
- [class*="weui-icon-"] {
- color: var(--weui-FG-1);
- }
+ background: transparent;
+ border: 0;
+ padding: 0;
+ outline: 0;
+ font-size: 0;
+ &:active {
+ [class*="weui-icon-"] {
+ color: var(--weui-FG-1);
}
+ }
}
diff --git a/src/style/widget/weui-cell/weui-access.less b/src/style/widget/weui-cell/weui-access.less
index 1703ec9c..06c6683e 100644
--- a/src/style/widget/weui-cell/weui-access.less
+++ b/src/style/widget/weui-cell/weui-access.less
@@ -17,48 +17,48 @@
@import "../../base/fn";
.weui-cell_access {
- .setTapColor();
+ .setTapColor();
- color: inherit;
- &:active {
- &:after{
- content:"";
- position:absolute;
- left:0;
- right:0;
- top:0;
- bottom:0;
- background:var(--weui-FG-3);
- pointer-events:none;
- }
+ color: inherit;
+ &:active {
+ &::after {
+ content: "";
+ position: absolute;
+ left: 0;
+ right: 0;
+ top: 0;
+ bottom: 0;
+ background: var(--weui-FG-3);
+ pointer-events: none;
}
- .weui-cell__ft {
- padding-right: 24px;
- position: relative;
- &:after {
- content: " ";
- width: 12px;
- height: 24px;
- mask-position: 0 0;
- mask-repeat: no-repeat;
- mask-size: 100%;
- background-color: currentColor;
- color: @weuiTextColorTips;
- mask-image: url(data:image/svg+xml,%3Csvg%20width%3D%2212%22%20height%3D%2224%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M2.454%206.58l1.06-1.06%205.78%205.779a.996.996%200%20010%201.413l-5.78%205.779-1.06-1.061%205.425-5.425-5.425-5.424z%22%20fill%3D%22%23B2B2B2%22%20fill-rule%3D%22evenodd%22%2F%3E%3C%2Fsvg%3E);
- position: absolute;
- top: 50%;
- right: 0;
- margin-top: -12px;
- }
+ }
+ .weui-cell__ft {
+ padding-right: 24px;
+ position: relative;
+ &::after {
+ content: " ";
+ width: 12px;
+ height: 24px;
+ mask-position: 0 0;
+ mask-repeat: no-repeat;
+ mask-size: 100%;
+ background-color: currentColor;
+ color: @weuiTextColorTips;
+ mask-image: url(data:image/svg+xml,%3Csvg%20width%3D%2212%22%20height%3D%2224%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M2.454%206.58l1.06-1.06%205.78%205.779a.996.996%200%20010%201.413l-5.78%205.779-1.06-1.061%205.425-5.425-5.425-5.424z%22%20fill%3D%22%23B2B2B2%22%20fill-rule%3D%22evenodd%22%2F%3E%3C%2Fsvg%3E);
+ position: absolute;
+ top: 50%;
+ right: 0;
+ margin-top: -12px;
}
+ }
}
.weui-cell_link {
- color: @weuiLinkColorDefault;
+ color: @weuiLinkColorDefault;
- // 由于weui-cell:first-child的:before为隐藏，所以这里要重新显示出来
- &:first-child {
- &:before {
- display: block;
- }
+ // 由于weui-cell:first-child的:before为隐藏，所以这里要重新显示出来
+ &:first-child {
+ &::before {
+ display: block;
}
+ }
}
diff --git a/src/style/widget/weui-cell/weui-cell_global.less b/src/style/widget/weui-cell/weui-cell_global.less
index 3b0ee573..64a04cf7 100644
--- a/src/style/widget/weui-cell/weui-cell_global.less
+++ b/src/style/widget/weui-cell/weui-cell_global.less
@@ -24,119 +24,119 @@ z-index:
*/
.weui-cells {
- margin-top: @weuiCellsMarginTop;
- background-color: @weuiCellBg;
- overflow: hidden; //因为每个cell的border使用before元素left搞的，ie下伪元素的containing block估计跟标准不同，在cell上用oh不生效
+ margin-top: @weuiCellsMarginTop;
+ background-color: @weuiCellBg;
+ overflow: hidden; //因为每个cell的border使用before元素left搞的，ie下伪元素的containing block估计跟标准不同，在cell上用oh不生效
- // onepx
- position: relative;
- &:before {
- .setTopLine(@weuiCellBorderColor);
+ // onepx
+ position: relative;
+ &::before {
+ .setTopLine(@weuiCellBorderColor);
- z-index: 2;
- }
- &:after {
- .setBottomLine(@weuiCellBorderColor);
+ z-index: 2;
+ }
+ &::after {
+ .setBottomLine(@weuiCellBorderColor);
- z-index: 2;
- }
+ z-index: 2;
+ }
}
.weui-cells__title {
- margin-top: 16px;
- margin-bottom: 3px;
- padding-left: @weuiCellGapH;
- padding-right: @weuiCellGapH;
- color: @weuiTextColorDesc;
- font-size: @weuiCellTipsFontSize;
- line-height: 1.4;
+ margin-top: 16px;
+ margin-bottom: 3px;
+ padding-left: @weuiCellGapH;
+ padding-right: @weuiCellGapH;
+ color: @weuiTextColorDesc;
+ font-size: @weuiCellTipsFontSize;
+ line-height: 1.4;
- & + .weui-cells {
- margin-top: 0;
- }
+ & + .weui-cells {
+ margin-top: 0;
+ }
}
.weui-cells__tips {
- margin-top: 8px;
- color: @weuiTextColorDesc;
- padding-left: @weuiCellGapH;
- padding-right: @weuiCellGapH;
- font-size: @weuiCellTipsFontSize;
- line-height: 1.4;
- a,
- navigator {
- color: @weuiLinkColorDefault;
- }
- navigator {
- display: inline;
- }
+ margin-top: 8px;
+ color: @weuiTextColorDesc;
+ padding-left: @weuiCellGapH;
+ padding-right: @weuiCellGapH;
+ font-size: @weuiCellTipsFontSize;
+ line-height: 1.4;
+ a,
+ navigator {
+ color: @weuiLinkColorDefault;
+ }
+ navigator {
+ display: inline;
+ }
}
.weui-cell {
- padding: @weuiCellGapV;
- position: relative; //这个是为了兼容cells容器onepx方案被before挡住而做的
- display: flex;
- align-items: center;
- line-height: @weuiCellLineHeight;
- font-size: @weuiCellFontSize; //cell中间有效高度23px，跟客户端默认图标尺寸一致
- color: @weuiTextColorTitle;
- &:before {
- .setTopLine(@weuiCellBorderColor);
+ padding: @weuiCellGapV;
+ position: relative; //这个是为了兼容cells容器onepx方案被before挡住而做的
+ display: flex;
+ align-items: center;
+ line-height: @weuiCellLineHeight;
+ font-size: @weuiCellFontSize; //cell中间有效高度23px，跟客户端默认图标尺寸一致
+ color: @weuiTextColorTitle;
+ &::before {
+ .setTopLine(@weuiCellBorderColor);
- left: @weuiCellGapH;
- z-index: 2;
- }
- &:first-child {
- &:before {
- display: none;
- }
+ left: @weuiCellGapH;
+ z-index: 2;
+ }
+ &:first-child {
+ &::before {
+ display: none;
}
+ }
}
.weui-cell_active {
- &:active {
- &:after{
- content:"";
- position:absolute;
- left:0;
- right:0;
- top:0;
- bottom:0;
- background:var(--weui-FG-3);
- pointer-events:none;
- }
+ &:active {
+ &::after {
+ content: "";
+ position: absolute;
+ left: 0;
+ right: 0;
+ top: 0;
+ bottom: 0;
+ background: var(--weui-FG-3);
+ pointer-events: none;
}
+ }
}
.weui-cell_primary {
- align-items: flex-start;
+ align-items: flex-start;
}
.weui-cell_vertical {
- flex-direction:column;
- align-items:flex-start;
+ flex-direction: column;
+ align-items: flex-start;
- .weui-cell__hd{
- padding-right:0;
- margin-bottom:12px;
+ .weui-cell__hd {
+ padding-right: 0;
+ margin-bottom: 12px;
}
.weui-cell__hd,
- .weui-cell__bd{
- width:100%;
+ .weui-cell__bd {
+ width: 100%;
}
}
.weui-cell__bd {
- flex: 1;
- min-width:0;
+ flex: 1;
+ min-width: 0;
}
.weui-cell__ft {
- text-align: right;
- color: @weuiTextColorDesc;
- button{
- vertical-align:bottom;
- }
+ text-align: right;
+ color: @weuiTextColorDesc;
+ button {
+ vertical-align: bottom;
+ }
}
-.weui-cell__desc{
- font-size:12px;
- color:var(--weui-FG-2);
- line-height:1.4;
- padding-top:4px;
+.weui-cell__desc {
+ font-size: 12px;
+ color: var(--weui-FG-2);
+ line-height: 1.4;
+ padding-top: 4px;
}
diff --git a/src/style/widget/weui-cell/weui-cell_swiped.less b/src/style/widget/weui-cell/weui-cell_swiped.less
index 52d424bb..a6705703 100644
--- a/src/style/widget/weui-cell/weui-cell_swiped.less
+++ b/src/style/widget/weui-cell/weui-cell_swiped.less
@@ -17,32 +17,32 @@
@import "../../base/fn";
.weui-cell_swiped {
- display: block;
- padding: 0;
- > .weui-cell__bd {
- position: relative;
- z-index: 1;
- background-color: @weuiCellBg;
- }
- > .weui-cell__ft {
- position: absolute;
- right: 0;
- top: 0;
- bottom: 0;
- display: flex;
- color: #fff; // 固定色值
- }
+ display: block;
+ padding: 0;
+ > .weui-cell__bd {
+ position: relative;
+ z-index: 1;
+ background-color: @weuiCellBg;
+ }
+ > .weui-cell__ft {
+ position: absolute;
+ right: 0;
+ top: 0;
+ bottom: 0;
+ display: flex;
+ color: #fff; // 固定色值
+ }
}
.weui-swiped-btn {
- display: flex;
- align-items:center;
- padding: @weuiCellGapV 1em;
- line-height: @weuiCellLineHeight;
- color: inherit;
+ display: flex;
+ align-items: center;
+ padding: @weuiCellGapV 1em;
+ line-height: @weuiCellLineHeight;
+ color: inherit;
}
.weui-swiped-btn_default {
- background-color: @weuiBgColorDefault;
+ background-color: @weuiBgColorDefault;
}
.weui-swiped-btn_warn {
- background-color: @weuiColorWarn;
+ background-color: @weuiColorWarn;
}
diff --git a/src/style/widget/weui-cell/weui-cells__group.less b/src/style/widget/weui-cell/weui-cells__group.less
index 7c5d70d5..f5fafd00 100644
--- a/src/style/widget/weui-cell/weui-cells__group.less
+++ b/src/style/widget/weui-cell/weui-cells__group.less
@@ -17,221 +17,222 @@
@import "../../base/fn";
page,
-body{
- --weui-cellMarginLR:16px;
- --weui-cellPaddingLR:16px;
+body {
+ --weui-cellMarginLR: 16px;
+ --weui-cellPaddingLR: 16px;
}
.weui-cells__group {
- border: 0;
- &:first-child{margin-top:0;}
+ border: 0;
+ &:first-child { margin-top: 0; }
}
// 普通表单
.weui-cells__group_form {
- margin-top:24px;
-
- // 表单组
- .weui-cells {
- margin-left:var(--weui-cellMarginLR);
- margin-right:var(--weui-cellMarginLR);
- &:before,
- &:after{
- left: var(--weui-cellPaddingLR);
- right: var(--weui-cellPaddingLR);
- }
- }
- .weui-cell {
- padding: 16px var(--weui-cellPaddingLR);
- &:before {
- left: var(--weui-cellPaddingLR);
- right: var(--weui-cellPaddingLR);
- }
- &:not(.weui-cell_vertical){
- .weui-cell__hd {
- padding-right: 16px;
- }
- .weui-cell__ft {
- padding-left: 16px;
- }
- }
- }
-
-
- // 表单组标题
- .weui-cells__title {
- margin-top: 24px;
- margin-bottom: 8px;
- padding: 0 32px;
+ margin-top: 24px;
+
+ // 表单组
+ .weui-cells {
+ margin-left: var(--weui-cellMarginLR);
+ margin-right: var(--weui-cellMarginLR);
+ &::before,
+ &::after {
+ left: var(--weui-cellPaddingLR);
+ right: var(--weui-cellPaddingLR);
}
- &:first-child {
- .weui-cells__title {
- margin-top: 0;
- }
+ }
+ .weui-cell {
+ padding: 16px var(--weui-cellPaddingLR);
+ &::before {
+ left: var(--weui-cellPaddingLR);
+ right: var(--weui-cellPaddingLR);
+ }
+ &:not(.weui-cell_vertical) {
+ .weui-cell__hd {
+ padding-right: 16px;
+ }
+ .weui-cell__ft {
+ padding-left: 16px;
+ }
}
+ }
- // 表单组提示
- .weui-cells__tips {
- margin-top: 8px;
- padding: 0 ~"calc(var(--weui-cellMarginLR) + var(--weui-cellPaddingLR))";
- color: var(--weui-FG-2);
- a {
- font-weight: 700;
- }
- }
- .weui-cells__tips_warn {
- color: var(--weui-RED);
+ // 表单组标题
+ .weui-cells__title {
+ margin-top: 24px;
+ margin-bottom: 8px;
+ padding: 0 32px;
+ }
+ &:first-child {
+ .weui-cells__title {
+ margin-top: 0;
}
+ }
- // 表单标题
- .weui-label {
- max-width: 5em;
- margin-right: 8px;
+ // 表单组提示
+ .weui-cells__tips {
+ margin-top: 8px;
+ padding: 0 ~"calc(var(--weui-cellMarginLR) + var(--weui-cellPaddingLR))";
+ color: var(--weui-FG-2);
+ a {
+ font-weight: 700;
}
+ }
+ .weui-cells__tips_warn {
+ color: var(--weui-RED);
+ }
+
+
+ // 表单标题
+ .weui-label {
+ max-width: 5em;
+ margin-right: 8px;
+ }
- // 点击态
- .weui-cell_access,
- .weui-cell_active {
- &:active {
- &:after{
- border-radius:8px;
- }
+ // 点击态
+ .weui-cell_access,
+ .weui-cell_active {
+ &:active {
+ &::after {
+ border-radius: 8px;
}
}
+ }
- // 报错
- .weui-cell_warn {
- input {
- color: @weuiColorWarn;
- }
+ // 报错
+ .weui-cell_warn {
+ input {
+ color: @weuiColorWarn;
}
- .weui-icon-warn {
+ }
+ .weui-icon-warn {
+ display: none;
+ }
+
+
+ // 抹去点击态
+ .weui-cell_switch,
+ .weui-cell_vcode,
+ .weui-cell_readonly,
+ .weui-cell_disabled {
+ &:active {
+ &::after {
display: none;
+ }
+ }
+ }
+ input,
+ textarea,
+ label[for] {
+ .setTapColor();
+ }
+
+
+ // 适老化下表单项折行，适用高度不大于默认cell内容高度的元素并排
+ // 默认cell内容高度：cell默认高度56px，除去上下padding各16px，默认内容高度为行高1.4（24px）
+ .weui-cell_wrap {
+ align-items: initial;
+ padding-top: 8px;
+ padding-bottom: 8px;
+ .weui-cell__hd {
+ padding-right: 0;
+ }
+ .weui-label {
+ margin-top: 8px;
}
+ .weui-cell__bd {
+ display: flex;
+ flex-wrap: wrap;
+ align-items: center;
+ }
+ }
+ .weui-cell__control {
+ margin: 8px 0 8px 16px;
+ }
+ .weui-cell__control_flex {
+ flex: 1;
+ min-width: 30vw;
+ }
+
+ // 验证码
+ .weui-vcode-btn {
+ font-size: 16px;
+ padding: 0 12px;
+ height: auto;
+ width: auto;
+ line-height: 2;
+ border-radius: 6px;
+ color: @weuiBtnDefaultFontColor;
+ background-color: @weuiBtnDefaultBg;
+ &::before {
+ display: none;
+ }
+ }
- // 抹去点击态
- .weui-cell_switch,
- .weui-cell_vcode,
- .weui-cell_readonly,
- .weui-cell_disabled {
- &:active {
- &:after{
- display:none;
- }
- }
- }
- input,
- textarea,
- label[for] {
- .setTapColor();
- }
-
-
- // 适老化下表单项折行，适用高度不大于默认cell内容高度的元素并排
- // 默认cell内容高度：cell默认高度56px，除去上下padding各16px，默认内容高度为行高1.4（24px）
- .weui-cell_wrap {
- align-items: initial;
- padding-top: 8px;
- padding-bottom: 8px;
- .weui-cell__hd {
- padding-right: 0;
- }
- .weui-label {
- margin-top: 8px;
- }
- .weui-cell__bd {
- display: flex;
- flex-wrap: wrap;
- align-items: center;
- }
- }
- .weui-cell__control {
- margin: 8px 0 8px 16px;
- }
- .weui-cell__control_flex {
- flex: 1;
- min-width: 30vw;
- }
-
-
- // 验证码
- .weui-vcode-btn {
- font-size: 16px;
- padding: 0 12px;
- height: auto;
- width: auto;
- line-height: 2;
- border-radius:6px;
- color: @weuiBtnDefaultFontColor;
- background-color: @weuiBtnDefaultBg;
- &:before {
- display: none;
- }
- }
-
- // 验证码cell适老化：由于小按钮高度32px大于默认内容高度，所以需要把cell的padding改小以保持cell默认高度56px的规范
- .weui-cell_vcode {
- &.weui-cell_wrap {
- padding-top: 4px;
- padding-bottom: 4px;
- .weui-label {
- margin-top: 12px;
- }
- .weui-input {
- font-size: 17px;
- min-height: unit((32/17), em);
- }
- }
- }
-
-
- // 复选框
- .weui-cells_checkbox {
- .weui-check__label {
- &:before { left: ~"calc(40px + var(--weui-cellPaddingLR))"; }
- }
- }
-
-
- // 选择框
- .weui-cell_select {
- padding: 0;
- }
- .weui-cell_select-before{
- .weui-cell__hd{
- padding-right:0;
+ // 验证码cell适老化：由于小按钮高度32px大于默认内容高度，所以需要把cell的padding改小以保持cell默认高度56px的规范
+ .weui-cell_vcode {
+ &.weui-cell_wrap {
+ padding-top: 4px;
+ padding-bottom: 4px;
+ .weui-label {
+ margin-top: 12px;
+ }
+ .weui-input {
+ font-size: 17px;
+ min-height: unit((32/17), em);
}
}
+ }
+
+
+ // 复选框
+ .weui-cells_checkbox {
+ .weui-check__label {
+ &::before { left: ~"calc(40px + var(--weui-cellPaddingLR))"; }
+ }
+ }
+
- // 开关
- .weui-cell_switch {
- padding: 12px 16px;
+ // 选择框
+ .weui-cell_select {
+ padding: 0;
+ }
+ .weui-cell_select-before {
+ .weui-cell__hd {
+ padding-right: 0;
}
+ }
+
+ // 开关
+ .weui-cell_switch {
+ padding: 12px 16px;
+ }
}
// 反色表单
.weui-cells__group_form-primary {
- margin-top:32px;
- .weui-cells{
- background:var(--weui-BG-1);
- border-radius:8px;
- overflow:hidden;
- &:before,&:after{
- display:none;
+ margin-top: 32px;
+ .weui-cells {
+ background: var(--weui-BG-1);
+ border-radius: 8px;
+ overflow: hidden;
+ &::before,
+ &::after {
+ display: none;
}
}
.weui-cell_access,
- .weui-cell_active{
- &:active{
- &:after{
- border-radius:0;
+ .weui-cell_active {
+ &:active {
+ &::after {
+ border-radius: 0;
}
}
}
diff --git a/src/style/widget/weui-cell/weui-check/weui-check_common.less b/src/style/widget/weui-cell/weui-check/weui-check_common.less
index 930afab8..97bacc60 100644
--- a/src/style/widget/weui-cell/weui-check/weui-check_common.less
+++ b/src/style/widget/weui-cell/weui-check/weui-check_common.less
@@ -17,20 +17,20 @@
@import "../../../base/fn";
.weui-check__label {
- .setTapColor();
- &.weui-cell_readonly,
- &.weui-cell_disabled {
- color:var(--weui-FG-3);
- }
+ .setTapColor();
+ &.weui-cell_readonly,
+ &.weui-cell_disabled {
+ color: var(--weui-FG-3);
+ }
}
.weui-check {
- opacity: 0;
- position: absolute;
- width: 0;
- height: 0;
- overflow: hidden;
- &[disabled] + .weui-icon-checked{
- opacity:.1;
- }
+ opacity: 0;
+ position: absolute;
+ width: 0;
+ height: 0;
+ overflow: hidden;
+ &[disabled] + .weui-icon-checked {
+ opacity: 0.1;
+ }
}
diff --git a/src/style/widget/weui-cell/weui-check/weui-checkbox.less b/src/style/widget/weui-cell/weui-check/weui-checkbox.less
index e0e4f5ad..2100dd5b 100644
--- a/src/style/widget/weui-cell/weui-check/weui-checkbox.less
+++ b/src/style/widget/weui-cell/weui-check/weui-checkbox.less
@@ -17,29 +17,29 @@
@import "../../../base/fn";
.weui-cells_checkbox {
- .weui-check__label {
- &:before { left: 55px; }
- }
- .weui-cell__hd {
- padding-right: @weuiCellInnerGapH;
- font-size: 0;
- }
- .weui-icon-checked {
- color: @weuiTextColorTips;
- mask-image: url(data:image/svg+xml,%3Csvg%20width%3D%221000%22%20height%3D%221000%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M500%20916.667C269.881%20916.667%2083.333%20730.119%2083.333%20500%2083.333%20269.881%20269.881%2083.333%20500%2083.333c230.119%200%20416.667%20186.548%20416.667%20416.667%200%20230.119-186.548%20416.667-416.667%20416.667zm0-50c202.504%200%20366.667-164.163%20366.667-366.667%200-202.504-164.163-366.667-366.667-366.667-202.504%200-366.667%20164.163-366.667%20366.667%200%20202.504%20164.163%20366.667%20366.667%20366.667z%22%20fill-rule%3D%22evenodd%22%20fill-opacity%3D%22.9%22%2F%3E%3C%2Fsvg%3E);
- }
+ .weui-check__label {
+ &::before { left: 55px; }
+ }
+ .weui-cell__hd {
+ padding-right: @weuiCellInnerGapH;
+ font-size: 0;
+ }
+ .weui-icon-checked {
+ color: @weuiTextColorTips;
+ mask-image: url(data:image/svg+xml,%3Csvg%20width%3D%221000%22%20height%3D%221000%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M500%20916.667C269.881%20916.667%2083.333%20730.119%2083.333%20500%2083.333%20269.881%20269.881%2083.333%20500%2083.333c230.119%200%20416.667%20186.548%20416.667%20416.667%200%20230.119-186.548%20416.667-416.667%20416.667zm0-50c202.504%200%20366.667-164.163%20366.667-366.667%200-202.504-164.163-366.667-366.667-366.667-202.504%200-366.667%20164.163-366.667%20366.667%200%20202.504%20164.163%20366.667%20366.667%20366.667z%22%20fill-rule%3D%22evenodd%22%20fill-opacity%3D%22.9%22%2F%3E%3C%2Fsvg%3E);
+ }
}
// method2 accessbility
.weui-check {
- // checkbox
- .weui-cells_checkbox & {
- &:checked,
- &[aria-checked="true"] {
- & + .weui-icon-checked {
- color: @weuiColorPrimary;
- mask-image: url(data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M12%2022C6.477%2022%202%2017.523%202%2012S6.477%202%2012%202s10%204.477%2010%2010-4.477%2010-10%2010zm-1.177-7.86l-2.765-2.767L7%2012.431l3.119%203.121a1%201%200%20001.414%200l5.952-5.95-1.062-1.062-5.6%205.6z%22%2F%3E%3C%2Fsvg%3E);
- }
- }
+ // checkbox
+ .weui-cells_checkbox & {
+ &:checked,
+ &[aria-checked="true"] {
+ & + .weui-icon-checked {
+ color: @weuiColorPrimary;
+ mask-image: url(data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M12%2022C6.477%2022%202%2017.523%202%2012S6.477%202%2012%202s10%204.477%2010%2010-4.477%2010-10%2010zm-1.177-7.86l-2.765-2.767L7%2012.431l3.119%203.121a1%201%200%20001.414%200l5.952-5.95-1.062-1.062-5.6%205.6z%22%2F%3E%3C%2Fsvg%3E);
+ }
}
+ }
}
diff --git a/src/style/widget/weui-cell/weui-check/weui-radio.less b/src/style/widget/weui-cell/weui-check/weui-radio.less
index ea5c8d56..b62a8d9a 100644
--- a/src/style/widget/weui-cell/weui-check/weui-radio.less
+++ b/src/style/widget/weui-cell/weui-check/weui-radio.less
@@ -18,24 +18,24 @@
// method2 accessbility
.weui-cells_radio {
- .weui-cell__ft {
- padding-left: @weuiCellInnerGapH;
- font-size: 0;
- }
+ .weui-cell__ft {
+ padding-left: @weuiCellInnerGapH;
+ font-size: 0;
+ }
}
.weui-check {
- // radio
- .weui-cells_radio & {
- & + .weui-icon-checked {
- min-width: 16px;
- color: transparent;
- }
- &:checked,
- &[aria-checked="true"] {
- & + .weui-icon-checked {
- color: @weuiColorPrimary;
- mask-image: url(data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M8.657%2018.435L3%2012.778l1.414-1.414%204.95%204.95L20.678%205l1.414%201.414-12.02%2012.021a1%201%200%2001-1.415%200z%22%20fill-rule%3D%22evenodd%22%2F%3E%3C%2Fsvg%3E);
- }
- }
+ // radio
+ .weui-cells_radio & {
+ & + .weui-icon-checked {
+ min-width: 16px;
+ color: transparent;
+ }
+ &:checked,
+ &[aria-checked="true"] {
+ & + .weui-icon-checked {
+ color: @weuiColorPrimary;
+ mask-image: url(data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M8.657%2018.435L3%2012.778l1.414-1.414%204.95%204.95L20.678%205l1.414%201.414-12.02%2012.021a1%201%200%2001-1.415%200z%22%20fill-rule%3D%22evenodd%22%2F%3E%3C%2Fsvg%3E);
+ }
}
+ }
}
diff --git a/src/style/widget/weui-cell/weui-form/weui-form-preview.less b/src/style/widget/weui-cell/weui-form/weui-form-preview.less
index 9378dd5a..e0047fb0 100644
--- a/src/style/widget/weui-cell/weui-form/weui-form-preview.less
+++ b/src/style/widget/weui-cell/weui-form/weui-form-preview.less
@@ -17,122 +17,122 @@
@import "../../../base/fn";
.weui-form-preview {
- position: relative;
- background-color: var(--weui-BG-2);
- &:before {
- .setTopLine(@weuiCellBorderColor);
- }
- &:after {
- .setBottomLine(@weuiCellBorderColor);
- }
+ position: relative;
+ background-color: var(--weui-BG-2);
+ &::before {
+ .setTopLine(@weuiCellBorderColor);
+ }
+ &::after {
+ .setBottomLine(@weuiCellBorderColor);
+ }
}
.weui-form-preview__hd {
- position: relative;
- padding: @weuiCellGapV;
- text-align: right;
- line-height: 2.5em;
- &:after {
- .setBottomLine(@weuiCellBorderColor);
+ position: relative;
+ padding: @weuiCellGapV;
+ text-align: right;
+ line-height: 2.5em;
+ &::after {
+ .setBottomLine(@weuiCellBorderColor);
- left: @weuiCellGapH;
- }
- .weui-form-preview__value {
- font-style: normal;
- font-size: 1.6em;
- }
+ left: @weuiCellGapH;
+ }
+ .weui-form-preview__value {
+ font-style: normal;
+ font-size: 1.6em;
+ }
}
.weui-form-preview__bd {
- padding: @weuiCellGapV;
- font-size: 0.9em;
- text-align: right;
- color: @weuiTextColorDesc;
- line-height: 2;
+ padding: @weuiCellGapV;
+ font-size: 0.9em;
+ text-align: right;
+ color: @weuiTextColorDesc;
+ line-height: 2;
}
.weui-form-preview__ft {
- position: relative;
- line-height: 50px;
- display: flex;
- &:before {
- .setTopLine(@weuiDialogLineColor);
- }
+ position: relative;
+ line-height: 50px;
+ display: flex;
+ &::before {
+ .setTopLine(@weuiDialogLineColor);
+ }
}
.weui-form-preview__item {
- overflow: hidden;
+ overflow: hidden;
}
.weui-form-preview__label {
- float: left;
- margin-right: 1em;
- width: 4.2em;
- color: @weuiTextColorDesc;
- text-align: left;
+ float: left;
+ margin-right: 1em;
+ width: 4.2em;
+ color: @weuiTextColorDesc;
+ text-align: left;
}
.weui-form-preview__value {
- display: block;
- overflow: hidden;
- word-break: normal;
- word-wrap: break-word;
- color: var(--weui-FG-0);
+ display: block;
+ overflow: hidden;
+ word-break: normal;
+ word-wrap: break-word;
+ color: var(--weui-FG-0);
}
.weui-form-preview__btn {
- position: relative;
- display: block;
- flex: 1;
- color: @weuiDialogLinkColor;
- text-align: center;
- .setTapColor();
- button& {
- background-color: transparent;
- border: 0;
- outline: 0;
- line-height: inherit;
- font-size: inherit;
- }
- &:active {
- background-color: @weuiDialogLinkActiveBc;
- }
- &:after {
- .setLeftLine(@weuiDialogLineColor);
- }
- &:first-child {
- &:after {
- display: none;
- }
+ position: relative;
+ display: block;
+ flex: 1;
+ color: @weuiDialogLinkColor;
+ text-align: center;
+ .setTapColor();
+ button& {
+ background-color: transparent;
+ border: 0;
+ outline: 0;
+ line-height: inherit;
+ font-size: inherit;
+ }
+ &:active {
+ background-color: @weuiDialogLinkActiveBc;
+ }
+ &::after {
+ .setLeftLine(@weuiDialogLineColor);
+ }
+ &:first-child {
+ &::after {
+ display: none;
}
+ }
}
.weui-form-preview__btn_default {
- color: var(--weui-FG-HALF);
+ color: var(--weui-FG-HALF);
}
.weui-form-preview__btn_primary {
- color: @weuiLinkColorDefault;
+ color: @weuiLinkColorDefault;
}
// 列表块，一般放msg组件的自定义区域
.weui-form-preview__list {
- padding-top: 24px;
- padding-bottom: 24px;
- line-height: 1.4;
- font-size: 14px;
- position: relative;
- &:before {
- content: "";
- .setTopLine(var(--weui-FG-3));
- }
- &:last-child {
- padding-bottom: 0;
- }
- .weui-form-preview__label {
- text-align: left;
- width: 6em;
- }
- .weui-form-preview__value { hyphens: auto; }
- .weui-form-preview__item {
- margin-top: 12px;
- &:first-child { margin-top: 0; }
- }
- & > .weui-cells__title {
- &:first-child {
- margin-top: 0;
- }
+ padding-top: 24px;
+ padding-bottom: 24px;
+ line-height: 1.4;
+ font-size: 14px;
+ position: relative;
+ &::before {
+ content: "";
+ .setTopLine(var(--weui-FG-3));
+ }
+ &:last-child {
+ padding-bottom: 0;
+ }
+ .weui-form-preview__label {
+ text-align: left;
+ width: 6em;
+ }
+ .weui-form-preview__value { hyphens: auto; }
+ .weui-form-preview__item {
+ margin-top: 12px;
+ &:first-child { margin-top: 0; }
+ }
+ & > .weui-cells__title {
+ &:first-child {
+ margin-top: 0;
}
+ }
}
diff --git a/src/style/widget/weui-cell/weui-form/weui-form_common.less b/src/style/widget/weui-cell/weui-form/weui-form_common.less
index 0446f70f..19ffe91c 100644
--- a/src/style/widget/weui-cell/weui-form/weui-form_common.less
+++ b/src/style/widget/weui-cell/weui-form/weui-form_common.less
@@ -17,106 +17,106 @@
@import "../../../base/fn";
.weui-label {
- display: block;
- width: @weuiCellLabelWidth;
- .text_wrap();
+ display: block;
+ width: @weuiCellLabelWidth;
+ .text_wrap();
}
.weui-input {
- width: 100%;
- border: 0;
- outline: 0;
- -webkit-appearance: none;
- background-color: transparent;
- font-family:inherit;
- font-size: inherit;
- color: inherit;
- height: unit(@weuiCellLineHeight, em);
- line-height: @weuiCellLineHeight;
+ width: 100%;
+ border: 0;
+ outline: 0;
+ -webkit-appearance: none;
+ background-color: transparent;
+ font-family: inherit;
+ font-size: inherit;
+ color: inherit;
+ height: unit(@weuiCellLineHeight, em);
+ line-height: @weuiCellLineHeight;
- // hides the spin-button
- &::-webkit-outer-spin-button,
- &::-webkit-inner-spin-button {
- -webkit-appearance: none;
- margin: 0;
- }
- &:focus {
- &:not(:placeholder-shown) {
- & + .weui-btn_input-clear {
- display: inline;
- }
- }
+ // hides the spin-button
+ &::-webkit-outer-spin-button,
+ &::-webkit-inner-spin-button {
+ -webkit-appearance: none;
+ margin: 0;
+ }
+ &:focus {
+ &:not(:placeholder-shown) {
+ & + .weui-btn_input-clear {
+ display: inline;
+ }
}
+ }
}
.weui-textarea {
- display: block;
- border: 0;
- resize: none;
- background: transparent;
- width: 100%;
- color: inherit;
- font-size: 1em;
- font-family:inherit;
- line-height: inherit;
- height:80px;
- outline: 0;
+ display: block;
+ border: 0;
+ resize: none;
+ background: transparent;
+ width: 100%;
+ color: inherit;
+ font-size: 1em;
+ font-family: inherit;
+ line-height: inherit;
+ height: 80px;
+ outline: 0;
}
.weui-textarea-counter {
- color: @weuiTextColorTips;
- text-align: right;
- font-size: 14px;
- .weui-cell_warn & {
- color: @weuiTextColorWarn;
- }
+ color: @weuiTextColorTips;
+ text-align: right;
+ font-size: 14px;
+ .weui-cell_warn & {
+ color: @weuiTextColorWarn;
+ }
}
.weui-cell_warn {
- color: @weuiTextColorWarn;
- .weui-icon-warn { display: inline-block; }
+ color: @weuiTextColorWarn;
+ .weui-icon-warn { display: inline-block; }
}
.weui-cell_readonly,
.weui-cell_disabled {
- .weui-input,
- .weui-textarea {
- &:disabled {
- opacity: 1;
- -webkit-text-fill-color: @weuiTextColorDesc;
- }
- &[disabled],
- &[readonly] {
- color: @weuiTextColorDesc;
- }
+ .weui-input,
+ .weui-textarea {
+ &:disabled {
+ opacity: 1;
+ -webkit-text-fill-color: @weuiTextColorDesc;
+ }
+ &[disabled],
+ &[readonly] {
+ color: @weuiTextColorDesc;
}
+ }
}
.weui-btn_input-clear {
- display: none;
- padding-left: 8px;
- [class*="weui-icon-"] {
- width: 18px;
- }
+ display: none;
+ padding-left: 8px;
+ [class*="weui-icon-"] {
+ width: 18px;
+ }
}
// todo: 以下为兼容最开始版本的表单，新表单、反色表单均不需要
.weui-cells_form {
- .weui-cell_switch,
- .weui-cell_vcode,
- .weui-cell_readonly,
- .weui-cell_disabled {
- &:active {
- background-color: transparent;
- }
- }
- .weui-cell__ft {
- font-size: 0;
- }
- .weui-icon-warn {
- display: none;
- }
- input,
- textarea,
- label[for] {
- .setTapColor();
+ .weui-cell_switch,
+ .weui-cell_vcode,
+ .weui-cell_readonly,
+ .weui-cell_disabled {
+ &:active {
+ background-color: transparent;
}
+ }
+ .weui-cell__ft {
+ font-size: 0;
+ }
+ .weui-icon-warn {
+ display: none;
+ }
+ input,
+ textarea,
+ label[for] {
+ .setTapColor();
+ }
}
diff --git a/src/style/widget/weui-cell/weui-form/weui-select.less b/src/style/widget/weui-cell/weui-form/weui-select.less
index 68ed9b56..bf8f6f44 100644
--- a/src/style/widget/weui-cell/weui-form/weui-select.less
+++ b/src/style/widget/weui-cell/weui-form/weui-select.less
@@ -17,85 +17,85 @@
@import "../../../base/fn";
.weui-cell_select {
- padding: 0;
- .weui-cell__bd {
- &:after {
- content: " ";
- width: 12px;
- height: 24px;
- mask-position: 0 0;
- mask-repeat: no-repeat;
- mask-size: 100%;
- background-color: currentColor;
- color: @weuiTextColorTips;
- mask-image: url(data:image/svg+xml,%3Csvg%20width%3D%2212%22%20height%3D%2224%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M2.454%206.58l1.06-1.06%205.78%205.779a.996.996%200%20010%201.413l-5.78%205.779-1.06-1.061%205.425-5.425-5.425-5.424z%22%20fill%3D%22%23B2B2B2%22%20fill-rule%3D%22evenodd%22%2F%3E%3C%2Fsvg%3E);
- position: absolute;
- top: 50%;
- right: @weuiCellGapH;
- margin-top: -12px;
- }
+ padding: 0;
+ .weui-cell__bd {
+ &::after {
+ content: " ";
+ width: 12px;
+ height: 24px;
+ mask-position: 0 0;
+ mask-repeat: no-repeat;
+ mask-size: 100%;
+ background-color: currentColor;
+ color: @weuiTextColorTips;
+ mask-image: url(data:image/svg+xml,%3Csvg%20width%3D%2212%22%20height%3D%2224%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M2.454%206.58l1.06-1.06%205.78%205.779a.996.996%200%20010%201.413l-5.78%205.779-1.06-1.061%205.425-5.425-5.425-5.424z%22%20fill%3D%22%23B2B2B2%22%20fill-rule%3D%22evenodd%22%2F%3E%3C%2Fsvg%3E);
+ position: absolute;
+ top: 50%;
+ right: @weuiCellGapH;
+ margin-top: -12px;
}
+ }
}
.weui-select {
- -webkit-appearance: none;
- border: 0;
- outline: 0;
- background-color: transparent;
- width: 100%;
- font-size: inherit;
- min-height: @weuiCellHeight;
- line-height: @weuiCellHeight;
- position: relative;
- z-index: 1;
- padding-left: @weuiCellGapH;
- padding-right: @weuiCellGapH + 24px;
- color: var(--weui-FG-0);
- vertical-align:bottom;
- box-sizing:border-box;
+ -webkit-appearance: none;
+ border: 0;
+ outline: 0;
+ background-color: transparent;
+ width: 100%;
+ font-size: inherit;
+ min-height: @weuiCellHeight;
+ line-height: @weuiCellHeight;
+ position: relative;
+ z-index: 1;
+ padding-left: @weuiCellGapH;
+ padding-right: @weuiCellGapH + 24px;
+ color: var(--weui-FG-0);
+ vertical-align: bottom;
+ box-sizing: border-box;
}
.weui-cell_select-before {
- .weui-cell__hd {
- padding-left: 0;
- position: relative;
- &:after {
- .setRightLine(@weuiCellBorderColor);
- }
- &:before {
- content: " ";
- width: 12px;
- height: 24px;
- mask-position: 0 0;
- mask-repeat: no-repeat;
- mask-size: 100%;
- background-color: currentColor;
- color: @weuiTextColorTips;
- mask-image: url(data:image/svg+xml,%3Csvg%20width%3D%2212%22%20height%3D%2224%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M2.454%206.58l1.06-1.06%205.78%205.779a.996.996%200%20010%201.413l-5.78%205.779-1.06-1.061%205.425-5.425-5.425-5.424z%22%20fill%3D%22%23B2B2B2%22%20fill-rule%3D%22evenodd%22%2F%3E%3C%2Fsvg%3E);
- position: absolute;
- top: 50%;
- right: @weuiCellGapH;
- margin-top: -12px;
- }
+ .weui-cell__hd {
+ padding-left: 0;
+ position: relative;
+ &::after {
+ .setRightLine(@weuiCellBorderColor);
}
- .weui-cell__bd {
- padding-left: @weuiCellGapH;
- &:after {
- display: none;
- }
+ &::before {
+ content: " ";
+ width: 12px;
+ height: 24px;
+ mask-position: 0 0;
+ mask-repeat: no-repeat;
+ mask-size: 100%;
+ background-color: currentColor;
+ color: @weuiTextColorTips;
+ mask-image: url(data:image/svg+xml,%3Csvg%20width%3D%2212%22%20height%3D%2224%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M2.454%206.58l1.06-1.06%205.78%205.779a.996.996%200%20010%201.413l-5.78%205.779-1.06-1.061%205.425-5.425-5.425-5.424z%22%20fill%3D%22%23B2B2B2%22%20fill-rule%3D%22evenodd%22%2F%3E%3C%2Fsvg%3E);
+ position: absolute;
+ top: 50%;
+ right: @weuiCellGapH;
+ margin-top: -12px;
}
- .weui-select {
- max-width:5em;
- width: @weuiCellLabelWidth;
- box-sizing: content-box;
+ }
+ .weui-cell__bd {
+ padding-left: @weuiCellGapH;
+ &::after {
+ display: none;
}
+ }
+ .weui-select {
+ max-width: 5em;
+ width: @weuiCellLabelWidth;
+ box-sizing: content-box;
+ }
}
.weui-cell_select-after {
- .weui-cell__hd{
- padding-left:@weuiCellGapH;
- }
- .weui-select {
- padding-left: 0;
- }
+ .weui-cell__hd {
+ padding-left: @weuiCellGapH;
+ }
+ .weui-select {
+ padding-left: 0;
+ }
}
diff --git a/src/style/widget/weui-cell/weui-form/weui-vcode.less b/src/style/widget/weui-cell/weui-form/weui-vcode.less
index 84567e0a..28e3848b 100644
--- a/src/style/widget/weui-cell/weui-form/weui-vcode.less
+++ b/src/style/widget/weui-cell/weui-form/weui-vcode.less
@@ -17,35 +17,35 @@
@import "../../../base/fn";
.weui-cell_vcode {
- padding-top: 0;
- padding-right: 0;
- padding-bottom: 0;
+ padding-top: 0;
+ padding-right: 0;
+ padding-bottom: 0;
}
.weui-vcode-img {
- margin-left: 5px;
- height: @weuiCellHeight;
- vertical-align: middle;
+ margin-left: 5px;
+ height: @weuiCellHeight;
+ vertical-align: middle;
}
.weui-vcode-btn {
- display: inline-block;
- height: @weuiCellHeight;
- margin-left: 5px;
- padding: 0 0.6em 0 0.7em;
- line-height: @weuiCellHeight;
- vertical-align: middle;
- font-size: @weuiCellFontSize;
- color: @weuiDialogLinkColor;
- position: relative;
- &:before {
- .setLeftLine(@weuiLineColorLight);
- }
- button& {
- background-color: transparent;
- border: 0;
- outline: 0;
- }
- &:active {
- color: var(--weui-LINK-ACTIVE);
- }
+ display: inline-block;
+ height: @weuiCellHeight;
+ margin-left: 5px;
+ padding: 0 0.6em 0 0.7em;
+ line-height: @weuiCellHeight;
+ vertical-align: middle;
+ font-size: @weuiCellFontSize;
+ color: @weuiDialogLinkColor;
+ position: relative;
+ &::before {
+ .setLeftLine(@weuiLineColorLight);
+ }
+ button& {
+ background-color: transparent;
+ border: 0;
+ outline: 0;
+ }
+ &:active {
+ color: var(--weui-LINK-ACTIVE);
+ }
}
diff --git a/src/style/widget/weui-cell/weui-gallery.less b/src/style/widget/weui-cell/weui-gallery.less
index 33406f5a..ca501ed4 100644
--- a/src/style/widget/weui-cell/weui-gallery.less
+++ b/src/style/widget/weui-cell/weui-gallery.less
@@ -18,50 +18,50 @@
@weuiGalleryOprHeight: 60px;
.weui-gallery {
- display: none;
- position: fixed;
- top: 0;
- right: 0;
- bottom: 0;
- left: 0;
- background-color: #000; // 固定色值
- z-index: 1000;
+ display: none;
+ position: fixed;
+ top: 0;
+ right: 0;
+ bottom: 0;
+ left: 0;
+ background-color: #000; // 固定色值
+ z-index: 1000;
}
.weui-gallery__img,
.weui-gallery__opr {
- position: absolute;
- left: 0;
- left: constant(safe-area-inset-left);
- left: env(safe-area-inset-left);
- right: 0;
- right: constant(safe-area-inset-right);
- right: env(safe-area-inset-right);
+ position: absolute;
+ left: 0;
+ left: constant(safe-area-inset-left);
+ left: env(safe-area-inset-left);
+ right: 0;
+ right: constant(safe-area-inset-right);
+ right: env(safe-area-inset-right);
}
.weui-gallery__img {
- top: 0;
- top: constant(safe-area-inset-top);
- top: env(safe-area-inset-top);
- bottom: @weuiGalleryOprHeight;
- bottom: calc(@weuiGalleryOprHeight ~"+ constant(safe-area-inset-bottom)");
- bottom: calc(@weuiGalleryOprHeight ~"+ env(safe-area-inset-bottom)");
- width: 100%;
- background: center center no-repeat;
- background-size: contain;
+ top: 0;
+ top: constant(safe-area-inset-top);
+ top: env(safe-area-inset-top);
+ bottom: @weuiGalleryOprHeight;
+ bottom: calc(@weuiGalleryOprHeight ~"+ constant(safe-area-inset-bottom)");
+ bottom: calc(@weuiGalleryOprHeight ~"+ env(safe-area-inset-bottom)");
+ width: 100%;
+ background: center center no-repeat;
+ background-size: contain;
}
.weui-gallery__opr {
- position: absolute;
- bottom: 0;
- background-color: #0d0d0d; // 固定色值
- color: var(--weui-WHITE);
- line-height: @weuiGalleryOprHeight;
- text-align: center;
+ position: absolute;
+ bottom: 0;
+ background-color: #0d0d0d; // 固定色值
+ color: var(--weui-WHITE);
+ line-height: @weuiGalleryOprHeight;
+ text-align: center;
}
.weui-gallery__del {
- display: block;
- padding-bottom: 0;
- padding-bottom: constant(safe-area-inset-bottom);
- padding-bottom: env(safe-area-inset-bottom);
- &:active{
- opacity:.5;
- }
+ display: block;
+ padding-bottom: 0;
+ padding-bottom: constant(safe-area-inset-bottom);
+ padding-bottom: env(safe-area-inset-bottom);
+ &:active {
+ opacity: 0.5;
+ }
}
diff --git a/src/style/widget/weui-cell/weui-switch.less b/src/style/widget/weui-cell/weui-switch.less
index 8b2c83b6..e741f167 100644
--- a/src/style/widget/weui-cell/weui-switch.less
+++ b/src/style/widget/weui-cell/weui-switch.less
@@ -17,66 +17,66 @@
@import "../../base/fn";
.weui-cell_switch {
- padding-top: (@weuiCellHeight - @weuiSwitchHeight) / 2;
- padding-bottom: (@weuiCellHeight - @weuiSwitchHeight) / 2;
- &.weui-cell_readonly,
- &.weui-cell_disabled {
- color:var(--weui-FG-3);
- }
+ 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;
+ appearance: none;
}
.weui-switch,
.weui-switch-cp__box {
- vertical-align:bottom;
- position: relative;
- width: 52px;
- height: @weuiSwitchHeight;
- background-color: var(--weui-FG-3);
- border:0;
- padding:2px;
- outline: 0;
- border-radius: 16px;
- box-sizing: border-box;
- transition: background-color 0.1s, border 0.1s;
+ vertical-align: bottom;
+ position: relative;
+ width: 52px;
+ height: @weuiSwitchHeight;
+ background-color: var(--weui-FG-3);
+ border: 0;
+ padding: 2px;
+ outline: 0;
+ border-radius: 16px;
+ box-sizing: border-box;
+ transition: background-color 0.1s, border 0.1s;
- &:after {
- content: " ";
- position: absolute;
- top: 2px;
- left: 2px;
- width: @weuiSwitchHeight - 4;
- height: @weuiSwitchHeight - 4;
- border-radius: 15px;
- background-color: #fff; // 固定色值
- box-shadow: 0 2px 3px 0 rgba(0, 0, 0, .06);
- transition: transform 0.35s cubic-bezier(0.4, 0.4, 0.25, 1.35);
- }
+ &::after {
+ content: " ";
+ position: absolute;
+ top: 2px;
+ left: 2px;
+ width: @weuiSwitchHeight - 4;
+ height: @weuiSwitchHeight - 4;
+ border-radius: 15px;
+ background-color: #fff; // 固定色值
+ box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.06);
+ transition: transform 0.35s cubic-bezier(0.4, 0.4, 0.25, 1.35);
+ }
}
.weui-switch:checked,
.weui-switch-cp__input:checked + .weui-switch-cp__box,
.weui-switch-cp__input[aria-checked="true"] + .weui-switch-cp__box {
- background-color: @weuiColorPrimary;
- &:after {
- transform: translateX(20px);
- }
+ background-color: @weuiColorPrimary;
+ &::after {
+ 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;
+ opacity: 0.1;
}
// 兼容小程序/IE Edge的版本
.weui-switch-cp__input {
- position: absolute;
- width: 0;
- height: 0;
- opacity: 0;
- overflow: hidden;
+ position: absolute;
+ width: 0;
+ height: 0;
+ opacity: 0;
+ overflow: hidden;
}
.weui-switch-cp__box {
- display: block;
+ display: block;
}
diff --git a/src/style/widget/weui-cell/weui-uploader.less b/src/style/widget/weui-cell/weui-uploader.less
index 8c2aa036..7892c72f 100644
--- a/src/style/widget/weui-cell/weui-uploader.less
+++ b/src/style/widget/weui-cell/weui-uploader.less
@@ -17,112 +17,112 @@
@import "../../base/fn";
.weui-cell_uploader {
- padding-bottom: 24px;
+ padding-bottom: 24px;
}
.weui-uploader {
- flex: 1;
+ flex: 1;
}
.weui-uploader__hd {
- display: flex;
- padding-bottom: 12px;
- align-items: center;
+ display: flex;
+ padding-bottom: 12px;
+ align-items: center;
}
.weui-uploader__title {
- flex: 1;
+ flex: 1;
}
.weui-uploader__info {
- color: @weuiTextColorTips;
+ color: @weuiTextColorTips;
}
.weui-uploader__bd {
- margin-bottom: @weuiCellGapH - (@weuiCellGapV + @weuiUploaderFileSpacing);
- margin-right: -@weuiUploaderFileSpacing;
- overflow: hidden;
+ margin-bottom: @weuiCellGapH - (@weuiCellGapV + @weuiUploaderFileSpacing);
+ margin-right: -@weuiUploaderFileSpacing;
+ overflow: hidden;
}
.weui-uploader__files {
- list-style: none;
+ list-style: none;
}
.weui-uploader__file {
- float: left;
- margin-right: @weuiUploaderFileSpacing;
- margin-bottom: @weuiUploaderFileSpacing;
- width: @weuiUploaderSize;
- height: @weuiUploaderSize;
- background: no-repeat center center;
- background-size: cover;
+ float: left;
+ margin-right: @weuiUploaderFileSpacing;
+ margin-bottom: @weuiUploaderFileSpacing;
+ width: @weuiUploaderSize;
+ height: @weuiUploaderSize;
+ background: no-repeat center center;
+ background-size: cover;
}
.weui-uploader__file_status {
- position: relative;
- &:before {
- content: " ";
- position: absolute;
- top: 0;
- right: 0;
- bottom: 0;
- left: 0;
- background-color: rgba(0, 0, 0, 0.5); // 固定色值
- }
- .weui-uploader__file-content {
- display: block;
- }
+ position: relative;
+ &::before {
+ content: " ";
+ position: absolute;
+ top: 0;
+ right: 0;
+ bottom: 0;
+ left: 0;
+ background-color: rgba(0, 0, 0, 0.5); // 固定色值
+ }
+ .weui-uploader__file-content {
+ display: block;
+ }
}
.weui-uploader__file-content {
- display: none;
+ display: none;
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+ color: var(--weui-WHITE);
+ .weui-icon-warn {
+ display: inline-block;
+ }
+}
+.weui-uploader__input-box {
+ float: left;
+ position: relative;
+ margin-right: @weuiUploaderFileSpacing;
+ margin-bottom: @weuiUploaderFileSpacing;
+ width: @weuiUploaderSize;
+ height: @weuiUploaderSize;
+ box-sizing: border-box;
+ background-color: #ededed;
+ .dark({
+ background-color: #2e2e2e;
+ });
+ &::before,
+ &::after {
+ content: " ";
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
- color: var(--weui-WHITE);
- .weui-icon-warn {
- display: inline-block;
- }
-}
-.weui-uploader__input-box {
- float: left;
- position: relative;
- margin-right: @weuiUploaderFileSpacing;
- margin-bottom: @weuiUploaderFileSpacing;
- width: @weuiUploaderSize;
- height: @weuiUploaderSize;
- box-sizing: border-box;
- background-color: #ededed;
+ background-color: #a3a3a3;
.dark({
- background-color: #2e2e2e;
+ background-color: #6d6d6d;
});
- &:before,
- &:after {
- content: " ";
- position: absolute;
- top: 50%;
- left: 50%;
- transform: translate(-50%, -50%);
- background-color: #a3a3a3;
- .dark({
- background-color: #6d6d6d;
- });
- }
- &:before {
- width: @weuiUploaderBorderWidth + 1;
- height: 33.33%;
- }
- &:after {
- width: 33.33%;
- height: @weuiUploaderBorderWidth + 1;
- }
- &:active {
- &:before,
- &:after {
- opacity: 0.7;
- }
+ }
+ &::before {
+ width: @weuiUploaderBorderWidth + 1;
+ height: 33.33%;
+ }
+ &::after {
+ width: 33.33%;
+ height: @weuiUploaderBorderWidth + 1;
+ }
+ &:active {
+ &::before,
+ &::after {
+ opacity: 0.7;
}
+ }
}
.weui-uploader__input {
- position: absolute;
- z-index: 1;
- top: 0;
- left: 0;
- width: 100%;
- height: 100%;
- opacity: 0;
- .setTapColor();
+ position: absolute;
+ z-index: 1;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ opacity: 0;
+ .setTapColor();
}
diff --git a/src/style/widget/weui-flex/weui-flex.less b/src/style/widget/weui-flex/weui-flex.less
index 30e66a38..2fd7f594 100644
--- a/src/style/widget/weui-flex/weui-flex.less
+++ b/src/style/widget/weui-flex/weui-flex.less
@@ -17,9 +17,9 @@
@import "../../base/fn";
.weui-flex {
- display: flex;
+ display: flex;
}
.weui-flex__item {
- flex: 1;
- min-width:0;
+ flex: 1;
+ min-width: 0;
}
diff --git a/src/style/widget/weui-footer/weui-footer.less b/src/style/widget/weui-footer/weui-footer.less
index 5a9680ea..efda10b0 100644
--- a/src/style/widget/weui-footer/weui-footer.less
+++ b/src/style/widget/weui-footer/weui-footer.less
@@ -17,59 +17,59 @@
@import "../../base/fn";
.weui-footer {
- color: rgba(0,0,0,.2);
- .dark({
- color:rgba(255,255,255,.2);
- });
+ color: rgba(0, 0, 0, 0.2);
+ .dark({
+ color:rgba(255,255,255,0.2);
+ });
- font-size: 14px;
- line-height: 1.4;
- text-align: center;
- a,
- navigator {
- color: @weuiLinkColorDefault;
- }
- navigator {
- display: inline;
- }
+ font-size: 14px;
+ line-height: 1.4;
+ text-align: center;
+ a,
+ navigator {
+ color: @weuiLinkColorDefault;
+ }
+ navigator {
+ display: inline;
+ }
}
.weui-footer_fixed-bottom {
- position: fixed;
- bottom: 0;
- left: 0;
- right: 0;
- padding-top: 16px;
- padding-bottom: 16px;
- padding-bottom: calc(16px ~"+ constant(safe-area-inset-bottom)");
- padding-bottom: calc(16px ~"+ env(safe-area-inset-bottom)");
- left: constant(safe-area-inset-left);
- left: env(safe-area-inset-left);
- right: constant(safe-area-inset-right);
- right: env(safe-area-inset-right);
+ position: fixed;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ padding-top: 16px;
+ padding-bottom: 16px;
+ padding-bottom: calc(16px ~"+ constant(safe-area-inset-bottom)");
+ padding-bottom: calc(16px ~"+ env(safe-area-inset-bottom)");
+ left: constant(safe-area-inset-left);
+ left: env(safe-area-inset-left);
+ right: constant(safe-area-inset-right);
+ right: env(safe-area-inset-right);
}
.weui-footer__links {
- font-size: 0;
+ font-size: 0;
}
.weui-footer__link {
- display: inline-block;
- vertical-align: top;
- margin: 0 8px;
- position: relative;
- font-size: 14px;
- &:before {
- .setLeftLine();
+ display: inline-block;
+ vertical-align: top;
+ margin: 0 8px;
+ position: relative;
+ font-size: 14px;
+ &::before {
+ .setLeftLine();
- left: -8px;
- top: 0.36em;
- bottom: 0.36em;
- }
- &:first-child {
- &:before {
- display: none;
- }
+ left: -8px;
+ top: 0.36em;
+ bottom: 0.36em;
+ }
+ &:first-child {
+ &::before {
+ display: none;
}
+ }
}
.weui-footer__text {
- padding: 0 16px;
- font-size: 12px;
+ padding: 0 16px;
+ font-size: 12px;
}
diff --git a/src/style/widget/weui-grid/weui-grid.less b/src/style/widget/weui-grid/weui-grid.less
index 57a10ba8..e216d3a6 100644
--- a/src/style/widget/weui-grid/weui-grid.less
+++ b/src/style/widget/weui-grid/weui-grid.less
@@ -17,58 +17,58 @@
@import "../../base/fn";
.weui-grids {
- position: relative;
- overflow: hidden;
+ position: relative;
+ overflow: hidden;
- &:before {
- .setTopLine(@weuiGridBorderColor);
- }
- &:after {
- .setLeftLine(@weuiGridBorderColor);
- }
+ &::before {
+ .setTopLine(@weuiGridBorderColor);
+ }
+ &::after {
+ .setLeftLine(@weuiGridBorderColor);
+ }
}
.weui-grid {
- position: relative;
- float: left;
- padding: 20px 10px;
- width: 100% / @weuiGridColumnCount;
- box-sizing: border-box;
+ position: relative;
+ float: left;
+ padding: 20px 10px;
+ width: 100% / @weuiGridColumnCount;
+ box-sizing: border-box;
- &:before {
- .setRightLine(@weuiGridBorderColor);
- }
- &:after {
- .setBottomLine(@weuiGridBorderColor);
- }
+ &::before {
+ .setRightLine(@weuiGridBorderColor);
+ }
+ &::after {
+ .setBottomLine(@weuiGridBorderColor);
+ }
- &:active {
- background-color: @weuiBgColorActive;
- }
+ &:active {
+ background-color: @weuiBgColorActive;
+ }
}
.weui-grid__icon {
- width: @weuiGridIconSize;
- height: @weuiGridIconSize;
- margin: 0 auto;
+ width: @weuiGridIconSize;
+ height: @weuiGridIconSize;
+ margin: 0 auto;
- img {
- display: block;
- width: 100%;
- height: 100%;
- }
+ img {
+ display: block;
+ width: 100%;
+ height: 100%;
+ }
- & + .weui-grid__label {
- margin-top: 4px;
- }
+ & + .weui-grid__label {
+ margin-top: 4px;
+ }
}
.weui-grid__label {
- display: block;
- text-align: center;
- color: @weuiTextColorTitle;
- font-size: @weuiGridFontSize;
- white-space: nowrap;
- text-overflow: ellipsis;
- overflow: hidden;
+ display: block;
+ text-align: center;
+ color: @weuiTextColorTitle;
+ font-size: @weuiGridFontSize;
+ white-space: nowrap;
+ text-overflow: ellipsis;
+ overflow: hidden;
}
diff --git a/src/style/widget/weui-loading/weui-loading.less b/src/style/widget/weui-loading/weui-loading.less
index 2e048109..84730d7e 100644
--- a/src/style/widget/weui-loading/weui-loading.less
+++ b/src/style/widget/weui-loading/weui-loading.less
@@ -18,50 +18,50 @@
@import "./weui-primary-loading";
.weui-loading {
- font-size: 16px;
- width: 1em;
- height: 1em;
- display: inline-block;
- vertical-align: middle;
- 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%;
+ font-size: 16px;
+ width: 1em;
+ height: 1em;
+ display: inline-block;
+ vertical-align: middle;
+ 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,%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-loading_transparent,
+ &.weui-icon_toast,
+ .weui-btn_loading.weui-btn_primary & {
+ 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{
+.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;
+ 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;
+ color: #606060;
}
@-webkit-keyframes weuiLoading {
- 0% {
- transform: rotate3d(0, 0, 1, 0deg);
- }
+ 0% {
+ transform: rotate3d(0, 0, 1, 0deg);
+ }
- 100% {
- transform: rotate3d(0, 0, 1, 360deg);
- }
+ 100% {
+ transform: rotate3d(0, 0, 1, 360deg);
+ }
}
@keyframes weuiLoading {
- 0% {
- transform: rotate3d(0, 0, 1, 0deg);
- }
+ 0% {
+ transform: rotate3d(0, 0, 1, 0deg);
+ }
- 100% {
- transform: rotate3d(0, 0, 1, 360deg);
- }
+ 100% {
+ transform: rotate3d(0, 0, 1, 360deg);
+ }
}
diff --git a/src/style/widget/weui-loading/weui-primary-loading.less b/src/style/widget/weui-loading/weui-primary-loading.less
index 06d38f02..98d06503 100644
--- a/src/style/widget/weui-loading/weui-primary-loading.less
+++ b/src/style/widget/weui-loading/weui-primary-loading.less
@@ -22,17 +22,17 @@
// 默认色
.weui-primary-loading {
font-size: 16px;
- .setCircleLoading(#606060,1em,.0875em);
+ .setCircleLoading(#606060,1em,0.0875em);
}
// 跟随系统切换的品牌色
.weui-primary-loading_brand {
- color: var(--weui-BRAND);
+ color: var(--weui-BRAND);
}
// 固定白色半透明
.weui-primary-loading_transparent {
- color: #ededed;
+ color: #ededed;
}
diff --git a/src/style/widget/weui-media-box/weui-media-box.less b/src/style/widget/weui-media-box/weui-media-box.less
index 82f455e1..53a5e651 100644
--- a/src/style/widget/weui-media-box/weui-media-box.less
+++ b/src/style/widget/weui-media-box/weui-media-box.less
@@ -17,88 +17,88 @@
@import "../../base/fn";
.weui-media-box {
- padding: 16px;
- position: relative;
- &:before {
- .setTopLine(@weuiLineColorLight);
+ padding: 16px;
+ position: relative;
+ &::before {
+ .setTopLine(@weuiLineColorLight);
- left: 16px;
- }
- &:first-child {
- &:before {
- display: none;
- }
+ left: 16px;
+ }
+ &:first-child {
+ &::before {
+ display: none;
}
+ }
- a& {
- color: #000;
- .setTapColor();
- &:active {
- background-color: @weuiBgColorActive;
- }
+ a& {
+ color: #000;
+ .setTapColor();
+ &:active {
+ background-color: @weuiBgColorActive;
}
+ }
}
.weui-media-box__title {
- display: block;
- font-weight: 400;
- font-size: 17px;
- line-height: 1.4;
- color: @weuiTextColorTitle;
- .ellipsis();
- .hyphens;
+ display: block;
+ font-weight: 400;
+ font-size: 17px;
+ line-height: 1.4;
+ color: @weuiTextColorTitle;
+ .ellipsis();
+ .hyphens;
}
.weui-media-box__desc {
- color: @weuiTextColorTips;
- font-size: 14px;
- line-height: 1.4;
- padding-top: 4px;
- .ellipsisLn(2);
- .hyphens;
+ color: @weuiTextColorTips;
+ font-size: 14px;
+ line-height: 1.4;
+ padding-top: 4px;
+ .ellipsisLn(2);
+ .hyphens;
}
.weui-media-box__info {
- display: block;
- margin-top: 16px;
- padding-bottom: 4px;
- font-size: 13px;
- color: @weuiTextColorTips;
- line-height: 1em;
- list-style: none;
- overflow: hidden;
+ display: block;
+ margin-top: 16px;
+ padding-bottom: 4px;
+ font-size: 13px;
+ color: @weuiTextColorTips;
+ line-height: 1em;
+ list-style: none;
+ overflow: hidden;
}
.weui-media-box__info__meta {
- float: left;
- padding-right: 1em;
+ float: left;
+ padding-right: 1em;
}
.weui-media-box__info__meta_extra {
- padding-left: 1em;
- border-left: 1px solid @weuiTextColorTips;
+ padding-left: 1em;
+ border-left: 1px solid @weuiTextColorTips;
}
.weui-media-box_appmsg {
- display: flex;
- align-items: center;
- .weui-media-box__hd {
- margin-right: 16px;
- width: 60px;
- height: 60px;
- line-height: 60px;
- text-align: center;
- }
- .weui-media-box__thumb {
- width: 100%;
- max-height: 100%;
- vertical-align: top;
- }
- .weui-media-box__bd {
- flex: 1;
- min-width: 0;
- }
+ display: flex;
+ align-items: center;
+ .weui-media-box__hd {
+ margin-right: 16px;
+ width: 60px;
+ height: 60px;
+ line-height: 60px;
+ text-align: center;
+ }
+ .weui-media-box__thumb {
+ width: 100%;
+ max-height: 100%;
+ vertical-align: top;
+ }
+ .weui-media-box__bd {
+ flex: 1;
+ min-width: 0;
+ }
}
.weui-media-box_small-appmsg {
- padding: 0;
- .weui-cells {
- margin-top: 0;
- &:before {
- display: none;
- }
+ padding: 0;
+ .weui-cells {
+ margin-top: 0;
+ &::before {
+ display: none;
}
+ }
}
diff --git a/src/style/widget/weui-page/weui-article.less b/src/style/widget/weui-page/weui-article.less
index d6bf0158..5ff694ca 100644
--- a/src/style/widget/weui-page/weui-article.less
+++ b/src/style/widget/weui-page/weui-article.less
@@ -17,88 +17,95 @@
@import "../../base/fn";
.weui-article {
- padding: 48px 24px;
- padding: 48px calc(24px ~"+ constant(safe-area-inset-right)") calc(48px ~"+ constant(safe-area-inset-bottom)") calc(24px ~"+ constant(safe-area-inset-left)");
- padding: 48px calc(24px ~"+ env(safe-area-inset-right)") calc(48px ~"+ env(safe-area-inset-bottom)") calc(24px ~"+ env(safe-area-inset-left)");
- color: var(--weui-FG-0);
- font-size: 17px;
- line-height: 1.6;
- .hyphens;
+ padding: 48px 24px;
+ padding: 48px calc(24px ~"+ constant(safe-area-inset-right)") calc(48px ~"+ constant(safe-area-inset-bottom)") calc(24px ~"+ constant(safe-area-inset-left)");
+ padding: 48px calc(24px ~"+ env(safe-area-inset-right)") calc(48px ~"+ env(safe-area-inset-bottom)") calc(24px ~"+ env(safe-area-inset-left)");
+ color: var(--weui-FG-0);
+ font-size: 17px;
+ line-height: 1.6;
+ .hyphens;
+ section {
+ margin-bottom: 48px;
section {
- margin-bottom: 48px;
- section{
- margin-bottom: 32px;
- section{
- margin-bottom: 24px;
- }
- }
- }
- h1,h2,h3,h4,h5,h6{line-height:1.4;}
- h1 {
- font-size: 22px;
- font-weight: 500;
- margin-bottom: 48px;
- text-align:center;
- }
- h2 {
- font-size: 20px;
- font-weight: 500;
- margin-bottom: 16px;
- }
- h3 {
- font-size:17px;
- font-weight: 500;
- margin-bottom: 8px;
- }
- h4 {
- font-size:17px;
- font-weight: 400;
- margin-bottom: 4px;
- }
- h5,h6 {
- font-weight:400;
- font-size:17px;
- }
- * {
- max-width: 100%;
- box-sizing: border-box;
- word-wrap: break-word;
- }
- img{
- vertical-align:bottom;
- }
- p {
- margin: 0 0 24px;
- }
- ol,ul{
- margin-left: 1.2em;
- margin-bottom:24px;
- & ol,
- & ul{
- margin: .5em 0 .5em 1.2em;
+ margin-bottom: 32px;
+ section {
+ margin-bottom: 24px;
}
}
- ol{
- list-style: decimal;
- }
- ul {
- list-style: disc;
+ }
+ h1,
+ h2,
+ h3,
+ h4,
+ h5,
+ h6 { line-height: 1.4; }
+ h1 {
+ font-size: 22px;
+ font-weight: 500;
+ margin-bottom: 48px;
+ text-align: center;
+ }
+ h2 {
+ font-size: 20px;
+ font-weight: 500;
+ margin-bottom: 16px;
+ }
+ h3 {
+ font-size: 17px;
+ font-weight: 500;
+ margin-bottom: 8px;
+ }
+ h4 {
+ font-size: 17px;
+ font-weight: 400;
+ margin-bottom: 4px;
+ }
+ h5,
+ h6 {
+ font-weight: 400;
+ font-size: 17px;
+ }
+ * {
+ max-width: 100%;
+ box-sizing: border-box;
+ word-wrap: break-word;
+ }
+ img {
+ vertical-align: bottom;
+ }
+ p {
+ margin: 0 0 24px;
+ }
+ ol,
+ ul {
+ margin-left: 1.2em;
+ margin-bottom: 24px;
+ & ol,
+ & ul {
+ margin: 0.5em 0 0.5em 1.2em;
}
+ }
+ ol {
+ list-style: decimal;
+ }
+ ul {
+ list-style: disc;
+ }
+ li {
+ margin: 0.5em 0;
+ }
+ .weui-article__list_inside {
+ margin-left: 0;
li {
- margin: 0.5em 0;
+ list-style-position: inside;
}
- .weui-article__list_inside{
- margin-left: 0;
- li{
- list-style-position: inside;
- }
- }
- .weui-article__list_none{
- margin-left: 0;
- li{
- list-style: none;
- }
+ }
+ .weui-article__list_none {
+ margin-left: 0;
+ li {
+ list-style: none;
}
+ }
}
diff --git a/src/style/widget/weui-page/weui-form.less b/src/style/widget/weui-page/weui-form.less
index 36644a4b..210af32a 100644
--- a/src/style/widget/weui-page/weui-form.less
+++ b/src/style/widget/weui-page/weui-form.less
@@ -18,80 +18,80 @@
@import "../weui-cell/weui-cells__group";
.weui-form {
- padding: 56px 0 0;
- padding: calc(56px ~"+ constant(safe-area-inset-top)") constant(safe-area-inset-right) constant(safe-area-inset-bottom) constant(safe-area-inset-left);
- padding: calc(56px ~"+ env(safe-area-inset-top)") env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
- display: flex;
- flex-direction: column;
- line-height: 1.4;
- min-height: 100%;
- box-sizing: border-box;
- background-color: var(--weui-BG-2);
+ padding: 56px 0 0;
+ padding: calc(56px ~"+ constant(safe-area-inset-top)") constant(safe-area-inset-right) constant(safe-area-inset-bottom) constant(safe-area-inset-left);
+ padding: calc(56px ~"+ env(safe-area-inset-top)") env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
+ display: flex;
+ flex-direction: column;
+ line-height: 1.4;
+ min-height: 100%;
+ box-sizing: border-box;
+ background-color: var(--weui-BG-2);
- .weui-footer,
- .weui-footer__link {
- font-size: 14px;
- }
+ .weui-footer,
+ .weui-footer__link {
+ font-size: 14px;
+ }
}
.weui-form__bd {
- flex:1;
- display:flex;
- flex-direction:column;
+ flex: 1;
+ display: flex;
+ flex-direction: column;
}
.weui-form__text-area {
- padding: 0 32px;
- color: var(--weui-FG-0);
- text-align: center;
+ padding: 0 32px;
+ color: var(--weui-FG-0);
+ text-align: center;
}
.weui-form__control-area {
- flex: 1;
- margin: 48px 0;
+ flex: 1;
+ margin: 48px 0;
}
.weui-form__tips-area,
.weui-form__extra-area {
- margin-bottom: 24px;
- padding: 0 32px;
- text-align: center;
+ margin-bottom: 24px;
+ padding: 0 32px;
+ text-align: center;
}
.weui-form__extra-area {
- margin-top: 52px;
+ margin-top: 52px;
}
.weui-form__opr-area {
- padding: 0 32px;
- &:last-child {
- margin-bottom: 96px;
- }
- & + .weui-form__tips-area {
- margin-top: 16px;
- margin-bottom: 0;
- }
+ padding: 0 32px;
+ &:last-child {
+ margin-bottom: 96px;
+ }
+ & + .weui-form__tips-area {
+ margin-top: 16px;
+ margin-bottom: 0;
+ }
}
.weui-form__tips-area {
- & + .weui-form__extra-area {
- margin-top: 32px;
- }
- &:last-child {
- margin-bottom: 60px;
- }
+ & + .weui-form__extra-area {
+ margin-top: 32px;
+ }
+ &:last-child {
+ margin-bottom: 60px;
+ }
}
.weui-form__title {
- font-size: 22px;
- font-weight: 700;
- line-height: 1.36;
+ font-size: 22px;
+ font-weight: 700;
+ line-height: 1.36;
}
.weui-form__desc {
- font-size: 17px;
- margin-top: 16px;
+ font-size: 17px;
+ margin-top: 16px;
}
.weui-form__tips {
- color: @weuiTextColorDesc;
- font-size: 14px;
- a,
- navigator {
- color: @weuiLinkColorDefault;
- }
- navigator {
- display: inline;
- }
+ color: @weuiTextColorDesc;
+ font-size: 14px;
+ a,
+ navigator {
+ color: @weuiLinkColorDefault;
+ }
+ navigator {
+ display: inline;
+ }
}
diff --git a/src/style/widget/weui-page/weui-msg.less b/src/style/widget/weui-page/weui-msg.less
index c38504a7..acff121f 100644
--- a/src/style/widget/weui-page/weui-msg.less
+++ b/src/style/widget/weui-page/weui-msg.less
@@ -18,114 +18,114 @@
@import "../weui-button/weui-button";
a {
- .weui-msg__desc &,
- .weui-msg__desc-primary &,
- .weui-msg__tips & {
- color: @weuiLinkColorDefault;
- display: inline-block;
- vertical-align: baseline;
- }
+ .weui-msg__desc &,
+ .weui-msg__desc-primary &,
+ .weui-msg__tips & {
+ color: @weuiLinkColorDefault;
+ display: inline-block;
+ vertical-align: baseline;
+ }
}
.weui-msg {
- padding-top: @weuiMsgPaddingTop;
- padding: calc(@weuiMsgPaddingTop ~"+ constant(safe-area-inset-top)") constant(safe-area-inset-right) constant(safe-area-inset-bottom) constant(safe-area-inset-left);
- padding: calc(@weuiMsgPaddingTop ~"+ env(safe-area-inset-top)") env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
- text-align: center;
- line-height: 1.4;
- min-height: 100%;
- box-sizing: border-box;
- display: flex;
- flex-direction: column;
- background-color: var(--weui-BG-2);
+ padding-top: @weuiMsgPaddingTop;
+ padding: calc(@weuiMsgPaddingTop ~"+ constant(safe-area-inset-top)") constant(safe-area-inset-right) constant(safe-area-inset-bottom) constant(safe-area-inset-left);
+ padding: calc(@weuiMsgPaddingTop ~"+ env(safe-area-inset-top)") env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
+ text-align: center;
+ line-height: 1.4;
+ min-height: 100%;
+ box-sizing: border-box;
+ display: flex;
+ flex-direction: column;
+ background-color: var(--weui-BG-2);
}
.weui-msg__icon-area {
- margin-bottom: 32px;
+ margin-bottom: 32px;
}
.weui-msg__text-area {
- margin-bottom: 32px;
- padding: 0 32px;
- flex: 1;
- line-height: 1.6;
- .hyphens;
- &:first-child { padding-top: 96px; }
+ margin-bottom: 32px;
+ padding: 0 32px;
+ flex: 1;
+ line-height: 1.6;
+ .hyphens;
+ &:first-child { padding-top: 96px; }
}
.weui-msg__title {
- margin-bottom: @weuiMsgTitleGap;
- font-weight: 500;
- font-size: 22px;
- color: @weuiTextColorTitle;
+ margin-bottom: @weuiMsgTitleGap;
+ font-weight: 500;
+ font-size: 22px;
+ color: @weuiTextColorTitle;
}
.weui-msg__desc {
- font-size: 17px;
- font-weight: 400;
- color: @weuiTextColorTitle;
- margin-bottom: 16px;
+ font-size: 17px;
+ font-weight: 400;
+ color: @weuiTextColorTitle;
+ margin-bottom: 16px;
}
.weui-msg__desc-primary {
- font-size: 14px;
- color: @weuiTextColorDesc;
- margin-bottom: 16px;
+ font-size: 14px;
+ color: @weuiTextColorDesc;
+ margin-bottom: 16px;
}
.weui-msg__custom-area {
- text-align: left;
- word-wrap: break-word;
- hyphens: auto;
- margin-bottom: 16px;
- .weui-msg__title + & {
- margin-top: 48px;
- }
- .weui-msg__desc + &,
- .weui-msg__desc-primary + & {
- margin-top: 40px;
- }
- .weui-cells__group_form {
- .weui-cells {
- margin:0;
- }
+ text-align: left;
+ word-wrap: break-word;
+ hyphens: auto;
+ margin-bottom: 16px;
+ .weui-msg__title + & {
+ margin-top: 48px;
+ }
+ .weui-msg__desc + &,
+ .weui-msg__desc-primary + & {
+ margin-top: 40px;
+ }
+ .weui-cells__group_form {
+ .weui-cells {
+ margin: 0;
}
+ }
}
.weui-msg__opr-area {
- margin-bottom: 16px;
- .weui-btn-area { margin: 0; }
- .weui-btn + .weui-btn { margin-bottom: 16px; }
- &:last-child { margin-bottom: 96px; }
- & + .weui-msg__extra-area {
- margin-top: 48px;
- }
+ margin-bottom: 16px;
+ .weui-btn-area { margin: 0; }
+ .weui-btn + .weui-btn { margin-bottom: 16px; }
+ &:last-child { margin-bottom: 96px; }
+ & + .weui-msg__extra-area {
+ margin-top: 48px;
+ }
}
.weui-msg__tips-area {
- margin-bottom: 16px;
- padding: 0 40px;
- .hyphens;
- .weui-msg__opr-area + & {
- margin-bottom: 48px;
- }
- &:last-child {
- margin-bottom: 64px;
- }
+ margin-bottom: 16px;
+ padding: 0 40px;
+ .hyphens;
+ .weui-msg__opr-area + & {
+ margin-bottom: 48px;
+ }
+ &:last-child {
+ margin-bottom: 64px;
+ }
}
.weui-msg__tips {
- font-size: 14px;
- color: @weuiTextColorDesc;
+ font-size: 14px;
+ color: @weuiTextColorDesc;
}
.weui-msg__extra-area {
- margin-bottom: 24px;
- padding: 0 32px;
- box-sizing: border-box;
- font-size: 12px;
- color: @weuiTextColorDesc;
- a,
- navigator {
- color: @weuiLinkColorDefault;
- }
- navigator {
- display: inline;
- }
+ margin-bottom: 24px;
+ padding: 0 32px;
+ box-sizing: border-box;
+ font-size: 12px;
+ color: @weuiTextColorDesc;
+ a,
+ navigator {
+ color: @weuiLinkColorDefault;
+ }
+ navigator {
+ display: inline;
+ }
}
// 部分场景需要去掉头部间距
.weui-msg_align-top {
- .weui-msg__text-area {
- &:first-child { padding-top: 0; }
- }
+ .weui-msg__text-area {
+ &:first-child { padding-top: 0; }
+ }
}
diff --git a/src/style/widget/weui-panel/weui-panel.less b/src/style/widget/weui-panel/weui-panel.less
index d07d8462..18a935d8 100644
--- a/src/style/widget/weui-panel/weui-panel.less
+++ b/src/style/widget/weui-panel/weui-panel.less
@@ -18,38 +18,38 @@
.weui-panel {
- background-color: var(--weui-BG-2);
- margin-top: 10px;
- &:first-child {
- margin-top: 0;
- }
-
- position: relative;
- overflow: hidden;
- &:before {
- .setTopLine(@weuiLineColorLight);
- }
- &:after {
- .setBottomLine(@weuiLineColorLight);
- }
- .weui-cells{
- &:after {
- display:none;
- }
+ background-color: var(--weui-BG-2);
+ margin-top: 10px;
+ &:first-child {
+ margin-top: 0;
+ }
+
+ position: relative;
+ overflow: hidden;
+ &::before {
+ .setTopLine(@weuiLineColorLight);
+ }
+ &::after {
+ .setBottomLine(@weuiLineColorLight);
+ }
+ .weui-cells {
+ &::after {
+ display: none;
}
+ }
}
.weui-panel__hd {
- padding: 16px 16px 13px;
- color: @weuiTextColorTitle;
- font-size: 15px;
- font-weight: 500;
- position: relative;
- &:after {
- .setBottomLine(@weuiLineColorLight);
-
- left: 15px;
- }
+ padding: 16px 16px 13px;
+ color: @weuiTextColorTitle;
+ font-size: 15px;
+ font-weight: 500;
+ position: relative;
+ &::after {
+ .setBottomLine(@weuiLineColorLight);
+
+ left: 15px;
+ }
}
diff --git a/src/style/widget/weui-picker/weui-picker.less b/src/style/widget/weui-picker/weui-picker.less
index 53732be9..267f3412 100644
--- a/src/style/widget/weui-picker/weui-picker.less
+++ b/src/style/widget/weui-picker/weui-picker.less
@@ -18,124 +18,124 @@
@pickerItemHeight: 56px;
.weui-picker {
- position: fixed;
- width: 100%;
- box-sizing: border-box;
- left: 0;
- bottom: 0;
- z-index: 5000;
- background-color: var(--weui-BG-2);
- 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;
+ position: fixed;
+ width: 100%;
+ box-sizing: border-box;
+ left: 0;
+ bottom: 0;
+ z-index: 5000;
+ background-color: var(--weui-BG-2);
+ 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-half-screen-dialog__hd {
+ padding-left: 24px;
+ padding-right: 24px;
+ }
+ .weui-half-screen-dialog__bd {
+ overflow: visible;
+ }
}
.weui-picker__hd {
- display: flex;
- padding: 16px;
- padding: 16px calc(16px ~"+ constant(safe-area-inset-right)") 16px calc(16px ~"+ constant(safe-area-inset-left)");
- padding: 16px calc(16px ~"+ env(safe-area-inset-right)") 16px calc(16px ~"+ env(safe-area-inset-left)");
- position: relative;
- text-align: center;
- font-size: 17px;
- line-height: 1.4;
- &:after {
- .setBottomLine(@weuiLineColorLight);
- }
+ display: flex;
+ padding: 16px;
+ padding: 16px calc(16px ~"+ constant(safe-area-inset-right)") 16px calc(16px ~"+ constant(safe-area-inset-left)");
+ padding: 16px calc(16px ~"+ env(safe-area-inset-right)") 16px calc(16px ~"+ env(safe-area-inset-left)");
+ position: relative;
+ text-align: center;
+ font-size: 17px;
+ line-height: 1.4;
+ &::after {
+ .setBottomLine(@weuiLineColorLight);
+ }
}
.weui-picker__bd {
- display: flex;
- position: relative;
- background-color: var(--weui-BG-2);
- height: 240px;
- overflow: hidden;
+ display: flex;
+ position: relative;
+ background-color: var(--weui-BG-2);
+ height: 240px;
+ overflow: hidden;
}
.weui-picker__group {
- flex: 1;
- position: relative;
- height: 100%;
- font-size:17px;
- &:first-child {
- .weui-picker__indicator{
- left:8px;
- border-top-left-radius:8px;
- border-bottom-left-radius:8px;
- }
+ flex: 1;
+ position: relative;
+ height: 100%;
+ font-size: 17px;
+ &:first-child {
+ .weui-picker__indicator {
+ left: 8px;
+ border-top-left-radius: 8px;
+ border-bottom-left-radius: 8px;
}
- &:last-child {
- .weui-picker__indicator{
- right:8px;
- border-top-right-radius:8px;
- border-bottom-right-radius:8px;
- }
+ }
+ &:last-child {
+ .weui-picker__indicator {
+ right: 8px;
+ border-top-right-radius: 8px;
+ border-bottom-right-radius: 8px;
}
+ }
}
.weui-picker__mask {
- position: absolute;
- top: 0;
- left: 0;
- width: 100%;
- height: 100%;
- margin: 0 auto;
- z-index: 3;
- background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.6)), linear-gradient(0deg, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.6));
- .dark({
- background-image: linear-gradient(180deg, rgba(25, 25, 25, 0.95), rgba(25, 25, 25, 0.6)), linear-gradient(0deg, rgba(25, 25, 25, 0.95), rgba(25, 25, 25, 0.6));
- });
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ margin: 0 auto;
+ z-index: 3;
+ background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.6)), linear-gradient(0deg, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.6));
+ .dark({
+ background-image: linear-gradient(180deg, rgba(25, 25, 25, 0.95), rgba(25, 25, 25, 0.6)), linear-gradient(0deg, rgba(25, 25, 25, 0.95), rgba(25, 25, 25, 0.6));
+ });
- background-position: top, bottom;
- background-size: 100% (2 * @pickerItemHeight);
- background-repeat: no-repeat;
- transform: translateZ(0);
+ background-position: top, bottom;
+ background-size: 100% (2 * @pickerItemHeight);
+ background-repeat: no-repeat;
+ transform: translateZ(0);
}
.weui-picker__indicator {
- height: @pickerItemHeight;
- position: absolute;
- top: 112px;
- left: 0;
- right: 0;
- z-index: 1;
- background:var(--weui-BG-3);
+ height: @pickerItemHeight;
+ position: absolute;
+ top: 112px;
+ left: 0;
+ right: 0;
+ z-index: 1;
+ background: var(--weui-BG-3);
}
.weui-picker__content {
- position: absolute;
- top: 0;
- left: 0;
- width: 100%;
- z-index:2;
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ z-index: 2;
}
.weui-picker__item {
- height: @pickerItemHeight;
- line-height: @pickerItemHeight;
- text-align: center;
- color: @weuiTextColorTitle;
- text-overflow: ellipsis;
- white-space: nowrap;
- overflow: hidden;
+ height: @pickerItemHeight;
+ line-height: @pickerItemHeight;
+ text-align: center;
+ color: @weuiTextColorTitle;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ overflow: hidden;
}
.weui-picker__item_disabled {
- color: @weuiTextColorDesc;
+ color: @weuiTextColorDesc;
}
diff --git a/src/style/widget/weui-progress/weui-progress.less b/src/style/widget/weui-progress/weui-progress.less
index 281b458c..67cd52e7 100644
--- a/src/style/widget/weui-progress/weui-progress.less
+++ b/src/style/widget/weui-progress/weui-progress.less
@@ -17,24 +17,24 @@
@import "../../base/fn";
.weui-progress {
- display: flex;
- align-items: center;
+ display: flex;
+ align-items: center;
}
.weui-progress__bar {
- background-color: @weuiProgressBg;
- height: @weuiProgressHeight;
- flex: 1;
+ background-color: @weuiProgressBg;
+ height: @weuiProgressHeight;
+ flex: 1;
}
.weui-progress__inner-bar {
- width: 0;
- height: 100%;
- background-color: @weuiProgressColor;
+ width: 0;
+ height: 100%;
+ background-color: @weuiProgressColor;
}
.weui-progress__opr {
- display: block;
- margin-left: 15px;
- font-size: 0;
+ display: block;
+ margin-left: 15px;
+ font-size: 0;
}
diff --git a/src/style/widget/weui-searchbar/weui-searchbar.less b/src/style/widget/weui-searchbar/weui-searchbar.less
index 23a7b490..606337af 100644
--- a/src/style/widget/weui-searchbar/weui-searchbar.less
+++ b/src/style/widget/weui-searchbar/weui-searchbar.less
@@ -18,105 +18,105 @@
@import "../../base/fn";
.weui-search-bar {
- position: relative;
- padding: 8px;
- display: flex;
- box-sizing: border-box;
- background-color: @weuiBgColorDefault;
- align-items: center;
- &.weui-search-bar_focusing {
- .weui-search-bar__cancel-btn {
- display: block;
- }
- .weui-search-bar__label {
- display: none;
- }
+ position: relative;
+ padding: 8px;
+ display: flex;
+ box-sizing: border-box;
+ background-color: @weuiBgColorDefault;
+ align-items: center;
+ &.weui-search-bar_focusing {
+ .weui-search-bar__cancel-btn {
+ display: block;
}
-
- .weui-icon-search {
- font-size: 10px;
- width: 1.6em;
- height: 1.6em;
- margin-left: 8px;
- margin-right: 4px;
- flex-shrink: 0;
+ .weui-search-bar__label {
+ display: none;
}
+ }
+
+ .weui-icon-search {
+ font-size: 10px;
+ width: 1.6em;
+ height: 1.6em;
+ margin-left: 8px;
+ margin-right: 4px;
+ flex-shrink: 0;
+ }
}
.weui-search-bar__form {
- position: relative;
- flex: 1;
- min-width: 0;
- background-color: var(--weui-BG-2);
- border-radius: 4px;
+ position: relative;
+ flex: 1;
+ min-width: 0;
+ background-color: var(--weui-BG-2);
+ border-radius: 4px;
}
.weui-search-bar__box {
- position: relative;
- z-index: 1;
- display: flex;
- align-items: center;
+ position: relative;
+ z-index: 1;
+ display: flex;
+ align-items: center;
- .weui-search-bar__input {
- padding: 8px 0;
- width: 100%;
- height: unit((@weuiSearchInputHeight - 16px))/14em;
- border: 0;
- font-size: 14px;
- line-height: unit((@weuiSearchInputHeight - 16px))/14em;
- box-sizing: content-box;
- background: transparent;
- caret-color: @weuiColorPrimary;
- color: @weuiTextColorTitle;
- &:focus {
- outline: none;
- }
+ .weui-search-bar__input {
+ padding: 8px 0;
+ width: 100%;
+ height: unit((@weuiSearchInputHeight - 16px))/14em;
+ border: 0;
+ font-size: 14px;
+ line-height: unit((@weuiSearchInputHeight - 16px))/14em;
+ box-sizing: content-box;
+ background: transparent;
+ caret-color: @weuiColorPrimary;
+ color: @weuiTextColorTitle;
+ &:focus {
+ outline: none;
}
- .weui-icon-clear {
- flex-shrink: 0;
- font-size: 10px;
- width: 2em;
- height: 2em;
- margin-left: 8px;
- mask-size: 2em;
- mask-position: ~"calc(100% - 8px)" 0;
- min-width: 44px;
- &:after {
- content: "";
- position: absolute;
- top: 0;
- bottom: 0;
- width: 44px;
- }
+ }
+ .weui-icon-clear {
+ flex-shrink: 0;
+ font-size: 10px;
+ width: 2em;
+ height: 2em;
+ margin-left: 8px;
+ mask-size: 2em;
+ mask-position: ~"calc(100% - 8px)" 0;
+ min-width: 44px;
+ &::after {
+ content: "";
+ position: absolute;
+ top: 0;
+ bottom: 0;
+ width: 44px;
}
+ }
}
.weui-search-bar__label {
- position: absolute;
- top: 0;
- right: 0;
- bottom: 0;
- left: 0;
- z-index: 2;
- font-size: 0;
- border-radius: 4px;
- display: flex;
- align-items: center;
- justify-content: center;
- color: @weuiTextColorDesc;
- background: var(--weui-BG-2);
- span {
- display: inline-block;
- font-size: 14px;
- vertical-align: middle;
- }
+ position: absolute;
+ top: 0;
+ right: 0;
+ bottom: 0;
+ left: 0;
+ z-index: 2;
+ font-size: 0;
+ border-radius: 4px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ color: @weuiTextColorDesc;
+ background: var(--weui-BG-2);
+ span {
+ display: inline-block;
+ font-size: 14px;
+ vertical-align: middle;
+ }
}
.weui-search-bar__cancel-btn {
- flex-shrink: 0;
- display: none;
- margin-left: 8px;
- line-height: 28px;
- color: @weuiLinkColorDefault;
+ flex-shrink: 0;
+ display: none;
+ margin-left: 8px;
+ line-height: 28px;
+ color: @weuiLinkColorDefault;
}
.weui-search-bar__input:not(:valid) + .weui-icon-clear {
- display: none;
+ display: none;
}
//干掉input[search]默认的clear button
@@ -124,5 +124,5 @@ input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-results-button,
input[type="search"]::-webkit-search-results-decoration {
- display: none;
+ display: none;
}
diff --git a/src/style/widget/weui-slider/weui-slider.less b/src/style/widget/weui-slider/weui-slider.less
index 74de1f76..104b80a9 100644
--- a/src/style/widget/weui-slider/weui-slider.less
+++ b/src/style/widget/weui-slider/weui-slider.less
@@ -17,47 +17,47 @@
@import "../../base/fn";
.weui-slider {
- padding: 15px 18px;
- user-select: none;
+ padding: 15px 18px;
+ user-select: none;
}
.weui-slider__inner {
- position: relative;
- height: 2px;
- background-color: @weuiLineColorLight;
+ position: relative;
+ height: 2px;
+ background-color: @weuiLineColorLight;
}
.weui-slider__track {
- height: 100%;
- background-color: @weuiColorPrimary;
- width: 0;
+ height: 100%;
+ background-color: @weuiColorPrimary;
+ width: 0;
}
.weui-slider__handler {
- position: absolute;
- left: 0;
- top: 50%;
- width: 28px;
- height: 28px;
- margin-left: -14px;
- margin-top: -14px;
- border-radius: 50%;
- background-color: #fff; // 固定色值
- box-shadow: 0 0 4px var(--weui-FG-3);
+ position: absolute;
+ left: 0;
+ top: 50%;
+ width: 28px;
+ height: 28px;
+ margin-left: -14px;
+ margin-top: -14px;
+ border-radius: 50%;
+ background-color: #fff; // 固定色值
+ box-shadow: 0 0 4px var(--weui-FG-3);
}
.weui-slider-box {
- display: flex;
- align-items: center;
- .weui-slider {
- flex: 1;
- }
+ display: flex;
+ align-items: center;
+ .weui-slider {
+ flex: 1;
+ }
}
.weui-slider-box__value {
- margin-left: 0.5em;
- min-width: 24px;
- color: @weuiTextColorDesc;
- text-align: center;
- font-size: 14px;
+ margin-left: 0.5em;
+ min-width: 24px;
+ color: @weuiTextColorDesc;
+ text-align: center;
+ font-size: 14px;
}
diff --git a/src/style/widget/weui-steps/weui-steps.less b/src/style/widget/weui-steps/weui-steps.less
index 8eecf8dc..59b42898 100644
--- a/src/style/widget/weui-steps/weui-steps.less
+++ b/src/style/widget/weui-steps/weui-steps.less
@@ -22,176 +22,174 @@
横版的线左右端间距固定4px
**/
-body,page{
- --weui-STEPS-DEFAULT-COLOR:var(--weui-FG-3);
- --weui-STEPS-HIGHLIGHT-COLOR:var(--weui-BRAND);
- --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;
+body,
+page {
+ --weui-STEPS-DEFAULT-COLOR: var(--weui-FG-3);
+ --weui-STEPS-HIGHLIGHT-COLOR: var(--weui-BRAND);
+ --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;
}
-.weui-steps{
- line-height:var(--weui-STEPS-LINEHEIGHT);
- font-size:~"calc(1px * var(--weui-STEPS-FONT-SIZE))";
+.weui-steps {
+ line-height: var(--weui-STEPS-LINEHEIGHT);
+ font-size: ~"calc(1px * var(--weui-STEPS-FONT-SIZE))";
}
.weui-steps__item__title,
-.weui-steps__item__desc{
- display:block;
+.weui-steps__item__desc {
+ display: block;
}
-.weui-steps__item__title{
- font-weight:500;
+.weui-steps__item__title {
+ font-weight: 500;
}
-.weui-steps__item__desc{
- font-size:14px;
- color:var(--weui-FG-2);
- margin-top:4px;
+.weui-steps__item__desc {
+ font-size: 14px;
+ color: var(--weui-FG-2);
+ margin-top: 4px;
}
-.weui-steps_vertical{
- position:relative;
- .weui-steps__item{
- position:relative;
- padding-bottom:32px;
- &:before{
- content:"";
+.weui-steps_vertical {
+ position: relative;
+ .weui-steps__item {
+ position: relative;
+ padding-bottom: 32px;
+ &::before {
+ content: "";
.setLeftLine(var(--weui-STEPS-DEFAULT-COLOR));
- top:~"calc((var(--weui-STEPS-LINEHEIGHT) - (var(--weui-STEPS-LINEHEIGHT) - 1) / 2) * 1em)"; // 线的顶部跟文字区域底部对齐
- bottom:~"calc((var(--weui-STEPS-LINEHEIGHT) - 1) / 2 * -1em)"; // 线的底部跟下个步骤的文字区域顶部对齐
+
+ 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);
+ &:first-child {
+ &:not(.weui-steps__item_success) {
+ .weui-steps__item__inner {
+ &::before {
+ background-color: var(--weui-STEPS-HIGHLIGHT-COLOR);
}
}
}
}
- &:last-child{
- &:before{
- display:none;
+ &:last-child {
+ &::before {
+ display: none;
}
}
}
- .weui-steps__item__inner{
- position:relative;
- z-index:1; // 盖在线的上层
- padding-left:36px;
+ .weui-steps__item__inner {
+ position: relative;
+ z-index: 1; // 盖在线的上层
+ padding-left: 36px;
// before用来画圆点
- &:before{
- content:"";
- width:var(--weui-STEPS-DOT-SIZE);
- height:var(--weui-STEPS-DOT-SIZE);
- border-radius:100%;
- background-color:var(--weui-STEPS-DEFAULT-COLOR);
- position:absolute;
- z-index:1;
- left:0;
-
- top:~"calc(var(--weui-STEPS-LINEHEIGHT) / 2 * 1em)";
- transform:translate(-50%, -50%); // 和步骤文本第一行垂直居中
+ &::before {
+ content: "";
+ width: var(--weui-STEPS-DOT-SIZE);
+ height: var(--weui-STEPS-DOT-SIZE);
+ border-radius: 100%;
+ background-color: var(--weui-STEPS-DEFAULT-COLOR);
+ position: absolute;
+ z-index: 1;
+ left: 0;
+ top: ~"calc(var(--weui-STEPS-LINEHEIGHT) / 2 * 1em)";
+ 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__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_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__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_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);
+ .weui-steps__item_success {
+ &::before {
+ border-color: var(--weui-STEPS-HIGHLIGHT-COLOR);
}
- .weui-steps__item__inner{
- &:before{
- background-color:var(--weui-STEPS-HIGHLIGHT-COLOR);
+ .weui-steps__item__inner {
+ &::before {
+ background-color: var(--weui-STEPS-HIGHLIGHT-COLOR);
}
}
- & + .weui-steps__item{
- .weui-steps__item__inner{
- &:before{
- background-color:var(--weui-STEPS-HIGHLIGHT-COLOR);
+ & + .weui-steps__item {
+ .weui-steps__item__inner {
+ &::before {
+ background-color: var(--weui-STEPS-HIGHLIGHT-COLOR);
}
}
}
}
}
-.weui-steps_horizonal{
- display:flex;
- .weui-steps__item{
- flex:1;
- display:flex;
- align-items:center;
+.weui-steps_horizonal {
+ display: flex;
+ .weui-steps__item {
+ flex: 1;
+ display: flex;
+ align-items: center;
- &:before{
- content:"";
- display:block;
- width:var(--weui-STEPS-DOT-SIZE);
- height:var(--weui-STEPS-DOT-SIZE);
- border-radius:100%;
- background-color:var(--weui-STEPS-DEFAULT-COLOR);
- flex-shrink:0;
+ &::before {
+ content: "";
+ display: block;
+ width: var(--weui-STEPS-DOT-SIZE);
+ height: var(--weui-STEPS-DOT-SIZE);
+ border-radius: 100%;
+ background-color: var(--weui-STEPS-DEFAULT-COLOR);
+ flex-shrink: 0;
}
- &:after{
- content:"";
- height:0.5px;
- flex:1;
- margin:0 var(--weui-STEPS-HORIZONAL-DOT-GAP);
- background:var(--weui-STEPS-DEFAULT-COLOR);
+ &::after {
+ content: "";
+ height: 0.5px;
+ flex: 1;
+ margin: 0 var(--weui-STEPS-HORIZONAL-DOT-GAP);
+ background: var(--weui-STEPS-DEFAULT-COLOR);
}
- &:last-child{
- flex:none;
- &:after{
- display:none;
+ &:last-child {
+ flex: none;
+ &::after {
+ display: none;
}
}
- &:first-child{
- &:not(.weui-steps__item_success){
- &:before{
- background:var(--weui-STEPS-HIGHLIGHT-COLOR);
+ &:first-child {
+ &:not(.weui-steps__item_success) {
+ &::before {
+ background: var(--weui-STEPS-HIGHLIGHT-COLOR);
}
}
}
}
- .weui-steps__item__inner{
- margin-left:8px;
+ .weui-steps__item__inner {
+ margin-left: 8px;
}
- .weui-steps__item_success{
- &:before,
- &:after{
- background:var(--weui-STEPS-HIGHLIGHT-COLOR);
+ .weui-steps__item_success {
+ &::before,
+ &::after {
+ background: var(--weui-STEPS-HIGHLIGHT-COLOR);
}
- & + .weui-steps__item{
- &:before{
- background:var(--weui-STEPS-HIGHLIGHT-COLOR);
+ & + .weui-steps__item {
+ &::before {
+ background: var(--weui-STEPS-HIGHLIGHT-COLOR);
}
}
}
@@ -200,129 +198,128 @@ body,page{
// 以下两种扩展暂时不放出来
-.weui-steps_horizonal-primary{
- display:flex;
- .weui-steps__item{
- flex:1;
- position:relative;
- &:before{
+.weui-steps_horizonal-primary {
+ display: flex;
+ .weui-steps__item {
+ flex: 1;
+ position: relative;
+ &::before {
.setTopLine(var(--weui-STEPS-DEFAULT-COLOR));
}
- &:last-child{
- flex:none;
- &:before{
- display:none;
+ &:last-child {
+ flex: none;
+ &::before {
+ display: none;
}
}
}
- .weui-steps__item__inner{
- position:relative;
- padding-top:36px;
- &:before{
- content:"";
- position:absolute;
- z-index:1;
- width:var(--weui-STEPS-DOT-SIZE);
- height:var(--weui-STEPS-DOT-SIZE);
- border-radius:100%;
- background-color:var(--weui-STEPS-DEFAULT-COLOR);
- top:0;
- left:0;
- transform:translateY(-50%);
+ .weui-steps__item__inner {
+ position: relative;
+ padding-top: 36px;
+ &::before {
+ content: "";
+ position: absolute;
+ z-index: 1;
+ width: var(--weui-STEPS-DOT-SIZE);
+ height: var(--weui-STEPS-DOT-SIZE);
+ border-radius: 100%;
+ background-color: var(--weui-STEPS-DEFAULT-COLOR);
+ top: 0;
+ left: 0;
+ transform: translateY(-50%);
}
- &:after {
- content:"";
- background-color:var(--weui-BG-2);
- width:~"calc(var(--weui-STEPS-DOT-SIZE) + 2 * var(--weui-STEPS-HORIZONAL-DOT-GAP))";
- height:~"calc(var(--weui-STEPS-DOT-SIZE) + 2 * var(--weui-STEPS-HORIZONAL-DOT-GAP))";
- position:absolute;
- top:0;
- left:0;
- transform:translate(~"calc(-50% + var(--weui-STEPS-DOT-SIZE) / 2)", -50%);
+ &::after {
+ content: "";
+ background-color: var(--weui-BG-2);
+ width: ~"calc(var(--weui-STEPS-DOT-SIZE) + 2 * var(--weui-STEPS-HORIZONAL-DOT-GAP))";
+ height: ~"calc(var(--weui-STEPS-DOT-SIZE) + 2 * var(--weui-STEPS-HORIZONAL-DOT-GAP))";
+ position: absolute;
+ top: 0;
+ left: 0;
+ transform: translate(~"calc(-50% + var(--weui-STEPS-DOT-SIZE) / 2)", -50%);
}
}
- .weui-steps__item_success{
- &:before{
- border-color:var(--weui-STEPS-HIGHLIGHT-COLOR);
+ .weui-steps__item_success {
+ &::before {
+ border-color: var(--weui-STEPS-HIGHLIGHT-COLOR);
}
- .weui-steps__item__inner{
- &:before{
- background:var(--weui-STEPS-HIGHLIGHT-COLOR);
+ .weui-steps__item__inner {
+ &::before {
+ background: var(--weui-STEPS-HIGHLIGHT-COLOR);
}
}
- & + .weui-steps__item{
- .weui-steps__item__inner{
- &:before{
- background:var(--weui-STEPS-HIGHLIGHT-COLOR);
+ & + .weui-steps__item {
+ .weui-steps__item__inner {
+ &::before {
+ background: var(--weui-STEPS-HIGHLIGHT-COLOR);
}
}
}
}
}
-.weui-steps_horizonal-center{
- display:flex;
- text-align:center;
- .weui-steps__item{
- flex:1;
- position:relative;
- &:after,
- &:before{
+.weui-steps_horizonal-center {
+ display: flex;
+ text-align: center;
+ .weui-steps__item {
+ flex: 1;
+ position: relative;
+ &::after,
+ &::before {
.setTopLine(var(--weui-STEPS-DEFAULT-COLOR));
}
- &:before{
- right:50%;
+ &::before {
+ right: 50%;
}
- &:after{
- left:50%;
+ &::after {
+ left: 50%;
}
- &:first-child{
- &:before{
- display:none;
+ &:first-child {
+ &::before {
+ display: none;
}
}
- &:last-child{
- &:after{
- display:none;
+ &:last-child {
+ &::after {
+ display: none;
}
}
}
- .weui-steps__item__inner{
- position:relative;
- z-index:1;
- padding-top:36px;
- &:before{
- content:"";
- position:absolute;
- z-index:1;
- width:var(--weui-STEPS-DOT-SIZE);
- height:var(--weui-STEPS-DOT-SIZE);
- border-radius:100%;
- background-color:var(--weui-STEPS-DEFAULT-COLOR);
- top:0;
- left:50%;
- transform:translate(-50%, -50%);
+ .weui-steps__item__inner {
+ position: relative;
+ z-index: 1;
+ padding-top: 36px;
+ &::before {
+ content: "";
+ position: absolute;
+ z-index: 1;
+ width: var(--weui-STEPS-DOT-SIZE);
+ height: var(--weui-STEPS-DOT-SIZE);
+ border-radius: 100%;
+ background-color: var(--weui-STEPS-DEFAULT-COLOR);
+ top: 0;
+ left: 50%;
+ transform: translate(-50%, -50%);
}
- &:after {
- content:"";
- background-color:var(--weui-BG-2);
- width:~"calc(var(--weui-STEPS-DOT-SIZE) + 2 * var(--weui-STEPS-HORIZONAL-DOT-GAP))";
- height:~"calc(var(--weui-STEPS-DOT-SIZE) + 2 * var(--weui-STEPS-HORIZONAL-DOT-GAP))";
- position:absolute;
- top:0;
- left:50%;
- transform:translate(-50%, -50%);
+ &::after {
+ content: "";
+ background-color: var(--weui-BG-2);
+ width: ~"calc(var(--weui-STEPS-DOT-SIZE) + 2 * var(--weui-STEPS-HORIZONAL-DOT-GAP))";
+ height: ~"calc(var(--weui-STEPS-DOT-SIZE) + 2 * var(--weui-STEPS-HORIZONAL-DOT-GAP))";
+ position: absolute;
+ top: 0;
+ left: 50%;
+ transform: translate(-50%, -50%);
}
}
- .weui-steps__item_success{
- &:before,
- &:after,
- .weui-steps__item__inner:before,
-
- & + .weui-steps__item:before,
- & + .weui-steps__item .weui-steps__item__inner:before{
- background:var(--weui-STEPS-HIGHLIGHT-COLOR);
+ .weui-steps__item_success {
+ &::before,
+ &::after,
+ .weui-steps__item__inner::before,
+ & + .weui-steps__item::before,
+ & + .weui-steps__item .weui-steps__item__inner::before {
+ background: var(--weui-STEPS-HIGHLIGHT-COLOR);
}
}
}
diff --git a/src/style/widget/weui-tab/weui-navbar.less b/src/style/widget/weui-tab/weui-navbar.less
index adc40d4d..c1d9b0c6 100644
--- a/src/style/widget/weui-tab/weui-navbar.less
+++ b/src/style/widget/weui-tab/weui-navbar.less
@@ -17,56 +17,56 @@
@import "../../base/fn";
.weui-navbar {
- display: flex;
- position: relative;
- z-index: 500;
- background-color: var(--weui-BG-2);
- padding-top: constant(safe-area-inset-top);
- padding-top: env(safe-area-inset-top);
+ display: flex;
+ position: relative;
+ z-index: 500;
+ background-color: var(--weui-BG-2);
+ padding-top: constant(safe-area-inset-top);
+ padding-top: env(safe-area-inset-top);
- &:after {
- .setBottomLine(@weuiLineColorLight);
- }
+ &::after {
+ .setBottomLine(@weuiLineColorLight);
+ }
- & + .weui-tab__panel {
- padding-bottom: constant(safe-area-inset-bottom);
- padding-bottom: env(safe-area-inset-bottom);
- }
+ & + .weui-tab__panel {
+ padding-bottom: constant(safe-area-inset-bottom);
+ padding-bottom: env(safe-area-inset-bottom);
+ }
}
.weui-navbar__item {
- position: relative;
- display: block;
- flex: 1;
- padding: 16px 0;
- padding-top: calc(16px ~"+ constant(safe-area-inset-top)");
- padding-top: calc(16px ~"+ env(safe-area-inset-top)");
- text-align: center;
- font-size: 17px;
- line-height: unit(((@weuiNavBarHeight - 32) / 17));
- .setTapColor();
+ position: relative;
+ display: block;
+ flex: 1;
+ padding: 16px 0;
+ padding-top: calc(16px ~"+ constant(safe-area-inset-top)");
+ padding-top: calc(16px ~"+ env(safe-area-inset-top)");
+ text-align: center;
+ font-size: 17px;
+ line-height: unit(((@weuiNavBarHeight - 32) / 17));
+ .setTapColor();
- &:active {
- background-color: @weuiBgColorActive;
- }
+ &:active {
+ background-color: @weuiBgColorActive;
+ }
- &.weui-bar__item_on {
- background-color: @weuiBgColorActive;
- }
+ &.weui-bar__item_on {
+ background-color: @weuiBgColorActive;
+ }
- &:after {
- .setRightLine(@weuiLineColorLight);
- }
+ &::after {
+ .setRightLine(@weuiLineColorLight);
+ }
- &:first-child {
- padding-left: constant(safe-area-inset-left);
- padding-left: env(safe-area-inset-left);
- }
- &:last-child {
- padding-right: constant(safe-area-inset-right);
- padding-right: env(safe-area-inset-right);
- &:after {
- display: none;
- }
+ &:first-child {
+ padding-left: constant(safe-area-inset-left);
+ padding-left: env(safe-area-inset-left);
+ }
+ &:last-child {
+ padding-right: constant(safe-area-inset-right);
+ padding-right: env(safe-area-inset-right);
+ &::after {
+ display: none;
}
+ }
}
diff --git a/src/style/widget/weui-tab/weui-tab.less b/src/style/widget/weui-tab/weui-tab.less
index 07a610f9..382757f0 100644
--- a/src/style/widget/weui-tab/weui-tab.less
+++ b/src/style/widget/weui-tab/weui-tab.less
@@ -19,18 +19,18 @@
@import "weui-navbar";
.weui-tab {
- display: flex;
- height: 100%;
- box-sizing: border-box;
- flex-direction: column;
+ display: flex;
+ height: 100%;
+ box-sizing: border-box;
+ flex-direction: column;
}
.weui-tab__panel {
- box-sizing: border-box;
- flex: 1;
- overflow: auto;
- -webkit-overflow-scrolling: touch;
+ box-sizing: border-box;
+ flex: 1;
+ overflow: auto;
+ -webkit-overflow-scrolling: touch;
}
.weui-tab__content {
- display: none;
+ display: none;
}
diff --git a/src/style/widget/weui-tab/weui-tabbar.less b/src/style/widget/weui-tab/weui-tabbar.less
index d21e5205..20880cea 100644
--- a/src/style/widget/weui-tab/weui-tabbar.less
+++ b/src/style/widget/weui-tab/weui-tabbar.less
@@ -17,66 +17,66 @@
@import "../../base/fn";
.weui-tabbar {
- display: flex;
- position: relative;
- z-index: 500;
- background-color: @weuiBgColorPrimary;
+ display: flex;
+ position: relative;
+ z-index: 500;
+ background-color: @weuiBgColorPrimary;
- &:before {
- .setTopLine(@weuiLineColorLight);
- }
+ &::before {
+ .setTopLine(@weuiLineColorLight);
+ }
}
.weui-tabbar__item {
- display: block;
- flex: 1;
- padding: 8px 0;
- padding-bottom: calc(8px ~"+ constant(safe-area-inset-bottom)");
- padding-bottom: calc(8px ~"+ env(safe-area-inset-bottom)");
- font-size: 0;
- color: @weuiTextColorDesc;
- text-align: center;
- .setTapColor();
+ display: block;
+ flex: 1;
+ padding: 8px 0;
+ padding-bottom: calc(8px ~"+ constant(safe-area-inset-bottom)");
+ padding-bottom: calc(8px ~"+ env(safe-area-inset-bottom)");
+ font-size: 0;
+ color: @weuiTextColorDesc;
+ text-align: center;
+ .setTapColor();
- &:first-child {
- padding-left: constant(safe-area-inset-left);
- padding-left: env(safe-area-inset-left);
- }
- &:last-child {
- padding-right: constant(safe-area-inset-right);
- padding-right: env(safe-area-inset-right);
- }
+ &:first-child {
+ padding-left: constant(safe-area-inset-left);
+ padding-left: env(safe-area-inset-left);
+ }
+ &:last-child {
+ padding-right: constant(safe-area-inset-right);
+ padding-right: env(safe-area-inset-right);
+ }
- &.weui-bar__item_on {
- .weui-tabbar__icon,
- .weui-tabbar__icon > i,
- .weui-tabbar__label {
- color: @weuiColorPrimary;
- }
+ &.weui-bar__item_on {
+ .weui-tabbar__icon,
+ .weui-tabbar__icon > i,
+ .weui-tabbar__label {
+ color: @weuiColorPrimary;
}
+ }
}
.weui-tabbar__icon {
- display: inline-block;
- font-size: 10px;
- width: unit(((@weuiTabBarHeight - 8*2 - 10*1.4 - 2)/10), em);
- height: unit(((@weuiTabBarHeight - 8*2 - 10*1.4 - 2)/10), em);
- margin-bottom: 2px;
+ display: inline-block;
+ font-size: 10px;
+ width: unit(((@weuiTabBarHeight - 8*2 - 10*1.4 - 2)/10), em);
+ height: unit(((@weuiTabBarHeight - 8*2 - 10*1.4 - 2)/10), em);
+ margin-bottom: 2px;
- i&,
- > i {
- font-size: 24px;
- color: @weuiTextColorDesc;
- }
+ i&,
+ > i {
+ font-size: 24px;
+ color: @weuiTextColorDesc;
+ }
- img {
- width: 100%;
- height: 100%;
- }
+ img {
+ width: 100%;
+ height: 100%;
+ }
}
.weui-tabbar__label {
- color: @weuiTextColorTitle;
- font-size: 10px;
- line-height: 1.4;
+ color: @weuiTextColorTitle;
+ font-size: 10px;
+ line-height: 1.4;
}
diff --git a/src/style/widget/weui-text/weui-link.less b/src/style/widget/weui-text/weui-link.less
index 1ace6b38..06cfe3a9 100644
--- a/src/style/widget/weui-text/weui-link.less
+++ b/src/style/widget/weui-text/weui-link.less
@@ -17,12 +17,12 @@
@import "../../base/fn";
.weui-link {
+ color: @weuiLinkColorDefault;
+ -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+ &:visited {
color: @weuiLinkColorDefault;
- -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
- &:visited {
- color: @weuiLinkColorDefault;
- }
- &:active {
- opacity:.5;
- }
+ }
+ &:active {
+ opacity: 0.5;
+ }
}
diff --git a/src/style/widget/weui-tips/weui-actionsheet.less b/src/style/widget/weui-tips/weui-actionsheet.less
index 4f61956b..0a7d4e28 100644
--- a/src/style/widget/weui-tips/weui-actionsheet.less
+++ b/src/style/widget/weui-tips/weui-actionsheet.less
@@ -18,143 +18,142 @@
@weuiActionSheetAndroidBorderRadius: 2px;
.weui-actionsheet {
- position: fixed;
- left: 0;
- bottom: 0;
- transform: translate(0, 100%);
- backface-visibility: hidden;
- z-index: 5000;
- width: 100%;
- background-color: @weuiBgColorPrimary;
- //slide up animation
- transition: transform 0.3s;
- border-top-left-radius: 12px;
- border-top-right-radius: 12px;
- overflow: hidden;
- outline:0;
+ position: fixed;
+ left: 0;
+ bottom: 0;
+ transform: translate(0, 100%);
+ backface-visibility: hidden;
+ z-index: 5000;
+ width: 100%;
+ background-color: @weuiBgColorPrimary;
+ //slide up animation
+ transition: transform 0.3s;
+ border-top-left-radius: 12px;
+ border-top-right-radius: 12px;
+ overflow: hidden;
+ outline: 0;
}
.weui-actionsheet__title {
- position: relative;
- height: 56px;
- padding: 8px 24px;
- padding: 8px calc(24px ~"+ constant(safe-area-inset-right)") 8px calc(24px ~"+ constant(safe-area-inset-left)");
- padding: 8px calc(24px ~"+ env(safe-area-inset-right)") 8px calc(24px ~"+ env(safe-area-inset-left)");
- box-sizing:border-box;
- display: flex;
- justify-content: center;
- flex-direction: column;
- text-align: center;
- font-size: 12px;
- color: @weuiTextColorDesc;
- line-height: 1.4;
- background: var(--weui-BG-2);
- &:before {
- .setBottomLine(@weuiCellBorderColor);
- }
- .weui-actionsheet__title-text {
- .ellipsisLn(2);
- }
+ position: relative;
+ height: 56px;
+ padding: 8px 24px;
+ padding: 8px calc(24px ~"+ constant(safe-area-inset-right)") 8px calc(24px ~"+ constant(safe-area-inset-left)");
+ padding: 8px calc(24px ~"+ env(safe-area-inset-right)") 8px calc(24px ~"+ env(safe-area-inset-left)");
+ box-sizing: border-box;
+ display: flex;
+ justify-content: center;
+ flex-direction: column;
+ text-align: center;
+ font-size: 12px;
+ color: @weuiTextColorDesc;
+ line-height: 1.4;
+ background: var(--weui-BG-2);
+ &::before {
+ .setBottomLine(@weuiCellBorderColor);
+ }
+ .weui-actionsheet__title-text {
+ .ellipsisLn(2);
+ }
}
.weui-actionsheet__menu {
- color: @weuiTextColorTitle;
- background-color: var(--weui-BG-2);
+ color: @weuiTextColorTitle;
+ background-color: var(--weui-BG-2);
}
.weui-actionsheet__action {
- margin-top: 8px;
- color: @weuiTextColorTitle;
- background-color: var(--weui-BG-2);
- .weui-actionsheet__cell {
- &:last-child{
- padding-bottom: calc(@weuiCellGapV ~"+ constant(safe-area-inset-bottom)");
- padding-bottom: calc(@weuiCellGapV ~"+ env(safe-area-inset-bottom)");
- }
- &.weui-actionsheet__cell_tips{
- &:last-child{
- padding-bottom: calc(12px ~"+ constant(safe-area-inset-bottom)");
- padding-bottom: calc(12px ~"+ env(safe-area-inset-bottom)");
-
- }
+ margin-top: 8px;
+ color: @weuiTextColorTitle;
+ background-color: var(--weui-BG-2);
+ .weui-actionsheet__cell {
+ &:last-child {
+ padding-bottom: calc(@weuiCellGapV ~"+ constant(safe-area-inset-bottom)");
+ padding-bottom: calc(@weuiCellGapV ~"+ env(safe-area-inset-bottom)");
+ }
+ &.weui-actionsheet__cell_tips {
+ &:last-child {
+ padding-bottom: calc(12px ~"+ constant(safe-area-inset-bottom)");
+ padding-bottom: calc(12px ~"+ env(safe-area-inset-bottom)");
}
}
+ }
}
.weui-actionsheet__cell {
- position: relative;
- padding: @weuiCellGapV;
- padding: @weuiCellGapV calc(@weuiCellGapV ~"+ constant(safe-area-inset-right)") @weuiCellGapV calc(@weuiCellGapV ~"+ constant(safe-area-inset-left)");
- padding: @weuiCellGapV calc(@weuiCellGapV ~"+ env(safe-area-inset-right)") @weuiCellGapV calc(@weuiCellGapV ~"+ env(safe-area-inset-left)");
- text-align: center;
- font-size: 17px;
- line-height: @weuiCellLineHeight;
- overflow: hidden;
- &:before {
- .setTopLine(@weuiCellBorderColor);
- }
- &:active {
- background-color: @weuiBgColorActive;
- }
- &:first-child {
- &:before {
- display: none;
- }
+ position: relative;
+ padding: @weuiCellGapV;
+ padding: @weuiCellGapV calc(@weuiCellGapV ~"+ constant(safe-area-inset-right)") @weuiCellGapV calc(@weuiCellGapV ~"+ constant(safe-area-inset-left)");
+ padding: @weuiCellGapV calc(@weuiCellGapV ~"+ env(safe-area-inset-right)") @weuiCellGapV calc(@weuiCellGapV ~"+ env(safe-area-inset-left)");
+ text-align: center;
+ font-size: 17px;
+ line-height: @weuiCellLineHeight;
+ overflow: hidden;
+ &::before {
+ .setTopLine(@weuiCellBorderColor);
+ }
+ &:active {
+ background-color: @weuiBgColorActive;
+ }
+ &:first-child {
+ &::before {
+ display: none;
}
+ }
}
.weui-actionsheet__cell__tips {
- display:block;
- font-size:12px;
- color:var(--weui-FG-1);
+ display: block;
+ font-size: 12px;
+ color: var(--weui-FG-1);
}
.weui-actionsheet__cell_tips {
- padding-top:12px;
- padding-bottom:12px;
+ padding-top: 12px;
+ padding-bottom: 12px;
}
.weui-actionsheet__cell_warn {
- color: @weuiColorWarn;
+ color: @weuiColorWarn;
}
//android actionSheet
.weui-skin_android {
- .weui-actionsheet {
- position: fixed;
- left: 50%;
- top: 50%;
- bottom: auto;
- transform: translate(-50%, -50%);
- //padding: 0 40px;
- width: 274px;
- box-sizing: border-box;
- backface-visibility: hidden;
- background: transparent;
- //slide up animation
- transition: transform 0.3s;
- border-top-left-radius: 0;
- border-top-right-radius: 0;
- }
- .weui-actionsheet__action {
- display: none;
- }
- .weui-actionsheet__menu {
- border-radius: @weuiActionSheetAndroidBorderRadius;
- box-shadow: 0 6px 30px 0 rgba(0, 0, 0, 0.1);
+ .weui-actionsheet {
+ position: fixed;
+ left: 50%;
+ top: 50%;
+ bottom: auto;
+ transform: translate(-50%, -50%);
+ //padding: 0 40px;
+ width: 274px;
+ box-sizing: border-box;
+ backface-visibility: hidden;
+ background: transparent;
+ //slide up animation
+ transition: transform 0.3s;
+ border-top-left-radius: 0;
+ border-top-right-radius: 0;
+ }
+ .weui-actionsheet__action {
+ display: none;
+ }
+ .weui-actionsheet__menu {
+ border-radius: @weuiActionSheetAndroidBorderRadius;
+ box-shadow: 0 6px 30px 0 rgba(0, 0, 0, 0.1);
+ }
+ .weui-actionsheet__cell {
+ padding: @weuiCellGapV;
+ font-size: 17px;
+ line-height: @weuiCellLineHeight;
+ color: @weuiTextColorTitle;
+ text-align: left;
+ &:first-child {
+ border-top-left-radius: @weuiActionSheetAndroidBorderRadius;
+ border-top-right-radius: @weuiActionSheetAndroidBorderRadius;
}
- .weui-actionsheet__cell {
- padding: @weuiCellGapV;
- font-size: 17px;
- line-height: @weuiCellLineHeight;
- color: @weuiTextColorTitle;
- text-align: left;
- &:first-child {
- border-top-left-radius: @weuiActionSheetAndroidBorderRadius;
- border-top-right-radius: @weuiActionSheetAndroidBorderRadius;
- }
- &:last-child {
- border-bottom-left-radius: @weuiActionSheetAndroidBorderRadius;
- border-bottom-right-radius: @weuiActionSheetAndroidBorderRadius;
- }
+ &:last-child {
+ border-bottom-left-radius: @weuiActionSheetAndroidBorderRadius;
+ border-bottom-right-radius: @weuiActionSheetAndroidBorderRadius;
}
+ }
}
//actionSheet aniamtion
.weui-actionsheet_toggle {
- transform: translate(0, 0);
+ transform: translate(0, 0);
}
diff --git a/src/style/widget/weui-tips/weui-badge.less b/src/style/widget/weui-tips/weui-badge.less
index b3af7c9f..d18422fd 100644
--- a/src/style/widget/weui-tips/weui-badge.less
+++ b/src/style/widget/weui-tips/weui-badge.less
@@ -17,18 +17,18 @@
@import "../../base/fn";
.weui-badge {
- display: inline-block;
- padding: 0.15em 0.4em;
- min-width: unit((8/12), em);
- border-radius: 18px;
- background-color: @weuiColorWarn;
- color: #fff; // 固定色值
- line-height: 1.2;
- text-align: center;
- font-size: 12px;
- vertical-align: middle;
+ display: inline-block;
+ padding: 0.15em 0.4em;
+ min-width: unit((8/12), em);
+ border-radius: 18px;
+ background-color: @weuiColorWarn;
+ color: #fff; // 固定色值
+ line-height: 1.2;
+ text-align: center;
+ font-size: 12px;
+ vertical-align: middle;
}
.weui-badge_dot {
- padding: 0.4em;
- min-width: 0;
+ padding: 0.4em;
+ min-width: 0;
}
diff --git a/src/style/widget/weui-tips/weui-dialog.less b/src/style/widget/weui-tips/weui-dialog.less
index f4010f7b..ca0b33ae 100644
--- a/src/style/widget/weui-tips/weui-dialog.less
+++ b/src/style/widget/weui-tips/weui-dialog.less
@@ -17,145 +17,146 @@
@import "../../base/fn";
.weui-dialog {
- position: fixed;
- z-index: 5000;
- top: 50%;
- left: 16px;
- right: 16px;
- transform: translate(0, -50%);
- background-color: @weuiDialogBackgroundColor;
- text-align: center;
- border-radius: 12px;
- overflow: hidden;
- display: -webkit-box;
- display: -webkit-flex;
- display: flex;
- -webkit-flex-direction: column;
- flex-direction: column;
- max-height: 90%;
- outline:0;
+ position: fixed;
+ z-index: 5000;
+ top: 50%;
+ left: 16px;
+ right: 16px;
+ transform: translate(0, -50%);
+ background-color: @weuiDialogBackgroundColor;
+ text-align: center;
+ border-radius: 12px;
+ overflow: hidden;
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: flex;
+ -webkit-flex-direction: column;
+ flex-direction: column;
+ max-height: 90%;
+ outline: 0;
}
.weui-dialog__hd {
- padding: 32px @weuiDialogGapWidth 16px;
+ padding: 32px @weuiDialogGapWidth 16px;
}
.weui-dialog__title {
- font-weight: 700;
- font-size: 17px;
- line-height: 1.4;
- color:var(--weui-FG-0);
+ font-weight: 700;
+ font-size: 17px;
+ line-height: 1.4;
+ color: var(--weui-FG-0);
}
.weui-dialog__bd {
- overflow-y: auto;
- -webkit-overflow-scrolling: touch;
- padding: 0 @weuiDialogGapWidth;
- margin-bottom: 32px;
- font-size: 17px;
- line-height: 1.4;
- .hyphens;
+ overflow-y: auto;
+ -webkit-overflow-scrolling: touch;
+ padding: 0 @weuiDialogGapWidth;
+ margin-bottom: 32px;
+ font-size: 17px;
+ line-height: 1.4;
+ .hyphens;
- color: @weuiTextColorDesc;
- &:first-child {
- min-height: 40px;
- padding: 32px @weuiDialogGapWidth 0;
- font-weight: 700;
- color: @weuiTextColorTitle;
- display: -webkit-box;
- display: -webkit-flex;
- display: flex;
- -webkit-flex-direction: column;
- flex-direction: column;
- -webkit-box-pack: center;
- -webkit-justify-content: center;
- justify-content: center;
- }
+ color: @weuiTextColorDesc;
+ &:first-child {
+ min-height: 40px;
+ padding: 32px @weuiDialogGapWidth 0;
+ font-weight: 700;
+ color: @weuiTextColorTitle;
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: flex;
+ -webkit-flex-direction: column;
+ flex-direction: column;
+ -webkit-box-pack: center;
+ -webkit-justify-content: center;
+ justify-content: center;
+ }
}
.weui-dialog__ft {
- position: relative;
- display: flex;
- &:after {
- content: " ";
- .setTopLine(@weuiDialogLineColor);
- }
+ position: relative;
+ display: flex;
+ &::after {
+ content: " ";
+ .setTopLine(@weuiDialogLineColor);
+ }
}
.weui-dialog__btn {
- flex: 1;
- display: block;
- line-height: (56-32)/17;
- padding: 16px 0;
- font-size: 17px;
- color: @weuiDialogLinkColor;
- font-weight: 700;
- text-decoration: none;
- .setTapColor();
- user-select:none;
- &:active {
- background-color: @weuiDialogLinkActiveBc;
- }
+ flex: 1;
+ display: block;
+ line-height: (56-32)/17;
+ padding: 16px 0;
+ font-size: 17px;
+ color: @weuiDialogLinkColor;
+ font-weight: 700;
+ text-decoration: none;
+ .setTapColor();
- position: relative;
- overflow: hidden;//兼容小程序旁白点击无效
- &:after {
- content: " ";
- .setLeftLine(@weuiDialogLineColor);
- }
- &:first-child {
- &:after {
- display: none;
- }
+ user-select: none;
+ &:active {
+ background-color: @weuiDialogLinkActiveBc;
+ }
+
+ position: relative;
+ overflow: hidden;//兼容小程序旁白点击无效
+ &::after {
+ content: " ";
+ .setLeftLine(@weuiDialogLineColor);
+ }
+ &:first-child {
+ &::after {
+ display: none;
}
+ }
}
.weui-dialog__btn_default {
- color: var(--weui-FG-HALF);
+ color: var(--weui-FG-HALF);
}
.weui-skin_android {
- .weui-dialog {
- text-align: left;
- box-shadow: 0 6px 30px 0 rgba(0, 0, 0, 0.1);
- }
- .weui-dialog__title {
- font-size: 22px;
- line-height: 1.4;
- }
- .weui-dialog__hd {
- text-align: left;
- }
- .weui-dialog__bd {
- color: @weuiTextColorDesc;
- text-align: left;
- &:first-child {
- color: @weuiTextColorTitle;
- }
+ .weui-dialog {
+ text-align: left;
+ box-shadow: 0 6px 30px 0 rgba(0, 0, 0, 0.1);
+ }
+ .weui-dialog__title {
+ font-size: 22px;
+ line-height: 1.4;
+ }
+ .weui-dialog__hd {
+ text-align: left;
+ }
+ .weui-dialog__bd {
+ color: @weuiTextColorDesc;
+ text-align: left;
+ &:first-child {
+ color: @weuiTextColorTitle;
}
- .weui-dialog__ft {
- display: block;
- text-align: right;
- line-height: 40px;
- min-height: 40px;
- padding: 0 @weuiDialogGapWidth 16px;
- &:after {
- display: none;
- }
+ }
+ .weui-dialog__ft {
+ display: block;
+ text-align: right;
+ line-height: 40px;
+ min-height: 40px;
+ padding: 0 @weuiDialogGapWidth 16px;
+ &::after {
+ display: none;
}
- .weui-dialog__btn {
- display: inline-block;
- vertical-align: top;
- padding: 0 0.8em;
- &:after {
- display: none;
- }
- &:last-child {
- margin-right: -0.8em;
- }
+ }
+ .weui-dialog__btn {
+ display: inline-block;
+ vertical-align: top;
+ padding: 0 0.8em;
+ &::after {
+ display: none;
}
- .weui-dialog__btn_default {
- color: var(--weui-FG-HALF);
+ &:last-child {
+ margin-right: -0.8em;
}
+ }
+ .weui-dialog__btn_default {
+ color: var(--weui-FG-HALF);
+ }
}
@media screen and (min-width: 352px) {
- .weui-dialog {
- width: 320px;
- margin: 0 auto;
- }
+ .weui-dialog {
+ width: 320px;
+ margin: 0 auto;
+ }
}
diff --git a/src/style/widget/weui-tips/weui-half-screen-dialog.less b/src/style/widget/weui-tips/weui-half-screen-dialog.less
index 08a781d3..15755702 100644
--- a/src/style/widget/weui-tips/weui-half-screen-dialog.less
+++ b/src/style/widget/weui-tips/weui-half-screen-dialog.less
@@ -17,150 +17,151 @@
@import "../../base/fn";
.weui-half-screen-dialog {
- position: fixed;
- left: 0;
- right: 0;
- bottom: 0;
- min-height: 255px;
- max-height: 75%;
- 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;
- padding: 0 24px;
- padding: 0 calc(24px ~"+ constant(safe-area-inset-right)") constant(safe-area-inset-bottom) calc(24px ~"+ constant(safe-area-inset-left)");
- padding: 0 calc(24px ~"+ env(safe-area-inset-right)") env(safe-area-inset-bottom) calc(24px ~"+ env(safe-area-inset-left)");
- box-sizing: border-box;
- display: flex;
- flex-direction: column;
- outline:0;
-
- @media only screen and (max-device-height: 558px) {
- max-height: ~"calc(100% - 16px)";
- }
+ position: fixed;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ min-height: 255px;
+ max-height: 75%;
+ 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;
+ padding: 0 24px;
+ padding: 0 calc(24px ~"+ constant(safe-area-inset-right)") constant(safe-area-inset-bottom) calc(24px ~"+ constant(safe-area-inset-left)");
+ padding: 0 calc(24px ~"+ env(safe-area-inset-right)") env(safe-area-inset-bottom) calc(24px ~"+ env(safe-area-inset-left)");
+ box-sizing: border-box;
+ display: flex;
+ flex-direction: column;
+ outline: 0;
+
+ @media only screen and (max-device-height: 558px) {
+ max-height: ~"calc(100% - 16px)";
+ }
}
.weui-half-screen-dialog__hd {
- min-height: 64px;
- display: flex;
- align-items: center;
- flex-shrink: 0;
-
- .weui-btn_icon {
- position: absolute;
- top: 50%;
- -webkit-transform: translateY(-50%);
- transform: translateY(-50%);
- color:inherit;
- &:active { opacity: 0.5; }
- }
+ min-height: 64px;
+ display: flex;
+ align-items: center;
+ flex-shrink: 0;
+
+ .weui-btn_icon {
+ position: absolute;
+ top: 50%;
+ -webkit-transform: translateY(-50%);
+ transform: translateY(-50%);
+ color: inherit;
+ &:active { opacity: 0.5; }
+ }
}
.weui-half-screen-dialog__hd__side {
- position: relative;
- left: -8px;
+ position: relative;
+ left: -8px;
}
.weui-half-screen-dialog__hd__main {
- flex: 1;
- .weui-half-screen-dialog__hd__side + & {
- text-align: center;
- padding: 0 40px;
- }
- & + .weui-half-screen-dialog__hd__side {
- right: -8px;
- left: auto;
- .weui-icon-btn,//兼容老版本
- .weui-btn_icon {
- right: 0;
- }
+ flex: 1;
+ .weui-half-screen-dialog__hd__side + & {
+ text-align: center;
+ padding: 0 40px;
+ }
+ & + .weui-half-screen-dialog__hd__side {
+ right: -8px;
+ left: auto;
+ //兼容老版本
+ .weui-icon-btn,
+ .weui-btn_icon {
+ right: 0;
}
+ }
}
.weui-half-screen-dialog__title {
- display: block;
- color: var(--weui-FG-0);
- font-weight: 500;
- font-size: 15px;
+ display: block;
+ color: var(--weui-FG-0);
+ font-weight: 500;
+ font-size: 15px;
}
.weui-half-screen-dialog__subtitle {
- display: block;
- color: var(--weui-FG-1);
- font-size: 10px;
+ display: block;
+ color: var(--weui-FG-1);
+ font-size: 10px;
}
.weui-half-screen-dialog__bd {
- flex: 1;
- min-height: 0;
- overflow-y: auto;
+ flex: 1;
+ min-height: 0;
+ overflow-y: auto;
- .hyphens();
+ .hyphens();
- padding-bottom: 56px;
- font-size: 14px;
- color: var(--weui-FG-0);
+ padding-bottom: 56px;
+ font-size: 14px;
+ color: var(--weui-FG-0);
}
.weui-half-screen-dialog__desc {
- font-size: 17px;
- font-weight: 700;
- color: var(--weui-FG-0);
- line-height: 1.4;
+ font-size: 17px;
+ font-weight: 700;
+ color: var(--weui-FG-0);
+ line-height: 1.4;
}
.weui-half-screen-dialog__tips {
- padding-top: 16px;
- font-size: 14px;
- color: var(--weui-FG-2);
- line-height: 1.4;
+ padding-top: 16px;
+ font-size: 14px;
+ color: var(--weui-FG-2);
+ line-height: 1.4;
}
.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;
- }
-
+ 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 {
- & + .weui-half-screen-dialog__attachment-area {
- margin-top: 24px;
- margin-bottom: -34px;
- }
+ & + .weui-half-screen-dialog__attachment-area {
+ margin-top: 24px;
+ margin-bottom: -34px;
+ }
}
.weui-half-screen-dialog_large {
- max-height: none;
- top: 16px;
+ max-height: none;
+ top: 16px;
}
.weui-half-screen-dialog_slide {
.weui-half-screen-dialog__hd {
- min-height:0;
- padding:12px 16px 16px;
- justify-content:center;
+ min-height: 0;
+ padding: 12px 16px 16px;
+ justify-content: center;
}
- .weui-half-screen-dialog__slide-icon{
- position:absolute;
- top:12px;
- display:flex;
- width:40px;
- height:4px;
- border-radius:2px;
- background:var(--weui-BG-0);
+ .weui-half-screen-dialog__slide-icon {
+ position: absolute;
+ top: 12px;
+ display: flex;
+ width: 40px;
+ height: 4px;
+ border-radius: 2px;
+ background: var(--weui-BG-0);
.dark({
background:var(--weui-FG-3);
});
- justify-content:center;
- align-items:center;
- .weui-icon-arrow{
+ justify-content: center;
+ align-items: center;
+
+ .weui-icon-arrow {
transform: rotate(90deg);
width: 0.8em;
height: 1.6em;
- opacity:0;
+ opacity: 0;
}
}
}
@@ -178,7 +179,7 @@
.weui-icon-more {
- mask: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E %3Cpath fill-opacity='.9' fill-rule='evenodd' d='M5 10.25a1.75 1.75 0 1 1 0 3.5 1.75 1.75 0 0 1 0-3.5zm7 0a1.75 1.75 0 1 1 0 3.5 1.75 1.75 0 0 1 0-3.5zm7 0a1.75 1.75 0 1 1 0 3.5 1.75 1.75 0 0 1 0-3.5z'/%3E%3C/svg%3E") no-repeat 50% 50%;
+ mask: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E %3Cpath fill-opacity='.9' fill-rule='evenodd' d='M5 10.25a1.75 1.75 0 1 1 0 3.5 1.75 1.75 0 0 1 0-3.5zm7 0a1.75 1.75 0 1 1 0 3.5 1.75 1.75 0 0 1 0-3.5zm7 0a1.75 1.75 0 1 1 0 3.5 1.75 1.75 0 0 1 0-3.5z'/%3E%3C/svg%3E") no-repeat 50% 50%;
}
.weui-icon-slide-down {
mask-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='24' height='24' viewBox='0 0 24 24'%3E %3Cdefs%3E %3Crect id='dda90263-a290-4594-926f-6aba8cb4779f-a' width='24' height='24' x='0' y='0' rx='12'/%3E %3C/defs%3E %3Cg fill='none' fill-rule='evenodd'%3E %3Cmask id='dda90263-a290-4594-926f-6aba8cb4779f-b' fill='%23fff'%3E %3Cuse xlink:href='%23dda90263-a290-4594-926f-6aba8cb4779f-a'/%3E %3C/mask%3E %3Cuse fill='%23000' fill-opacity='.05' xlink:href='%23dda90263-a290-4594-926f-6aba8cb4779f-a'/%3E %3Cg fill-opacity='.9' mask='url(%23dda90263-a290-4594-926f-6aba8cb4779f-b)'%3E %3Cpath fill='%23000' d='M11.407 15.464L6.693 10.75l1.179-1.179 4.125 4.125 4.124-4.125L17.3 10.75l-4.714 4.714a.833.833 0 0 1-1.179 0z'/%3E %3C/g%3E %3C/g%3E%3C/svg%3E");
@@ -187,30 +188,30 @@
// 下面是兼容旧版本用的
.weui-half-screen-dialog__hd {
- .weui-icon-btn{
- position: absolute;
- top: 50%;
- -webkit-transform: translateY(-50%);
- transform: translateY(-50%);
- color:inherit;
- &:active { opacity: 0.5; }
-
- &:after{
- content:"";
- position: absolute;
- top: 50%;
- left: 50%;
- -webkit-transform: translate(-50%,-50%);
- transform: translate(-50%,-50%);
- min-width: 44px;
- min-height: 44px;
- width: 100%;
- height: 100%;
- }
+ .weui-icon-btn {
+ position: absolute;
+ top: 50%;
+ -webkit-transform: translateY(-50%);
+ transform: translateY(-50%);
+ color: inherit;
+ &:active { opacity: 0.5; }
+
+ &::after {
+ content: "";
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ -webkit-transform: translate(-50%, -50%);
+ transform: translate(-50%, -50%);
+ min-width: 44px;
+ min-height: 44px;
+ width: 100%;
+ height: 100%;
}
+ }
}
.weui-icon-btn {
- &&{
+ && {
outline: 0;
-webkit-appearance: none;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
@@ -223,23 +224,23 @@
}
}
.weui-icon-btn_goback {
- &&{
+ && {
color: @weuiTextColorTitle;
- background-color:currentColor;
- width: .71rem; // 字号17px下的12px
+ background-color: currentColor;
+ width: 0.71rem; // 字号17px下的12px
height: 1.42rem;
mask: url("data:image/svg+xml,%3Csvg%20width%3D%2212%22%20height%3D%2224%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M10%2019.438L8.955%2020.5l-7.666-7.79a1.02%201.02%200%20010-1.42L8.955%203.5%2010%204.563%202.682%2012%2010%2019.438z%22%20fill-rule%3D%22evenodd%22%2F%3E%3C%2Fsvg%3E") no-repeat 50% 50%;
- mask-size:100%;
+ mask-size: 100%;
}
}
.weui-icon-btn_close {
- &&{
+ && {
color: @weuiTextColorTitle;
- background-color:currentColor;
+ background-color: currentColor;
width: 1.42rem;
height: 1.42rem;
mask: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M12.25%2010.693L6.057%204.5%205%205.557l6.193%206.193L5%2017.943%206.057%2019l6.193-6.193L18.443%2019l1.057-1.057-6.193-6.193L19.5%205.557%2018.443%204.5z%22%20fill-rule%3D%22evenodd%22%2F%3E%3C%2Fsvg%3E") no-repeat 50% 50%;
- mask-size:100%;
+ mask-size: 100%;
}
}
diff --git a/src/style/widget/weui-tips/weui-information-bar.less b/src/style/widget/weui-tips/weui-information-bar.less
index 349a5b85..510f6ee6 100644
--- a/src/style/widget/weui-tips/weui-information-bar.less
+++ b/src/style/widget/weui-tips/weui-information-bar.less
@@ -48,94 +48,95 @@
font-size: 14px;
z-index: 5500;
.text_wrap();
+
transform: translateZ(0);
- .weui-btn_icon{
- margin-left:8px;
+ .weui-btn_icon {
+ margin-left: 8px;
- &:active{
- opacity:.5;
+ &:active {
+ opacity: 0.5;
}
}
// 换色
- color:var(--weui-informationBar-FG);
- background:var(--weui-informationBar-BG);
+ color: var(--weui-informationBar-FG);
+ background: var(--weui-informationBar-BG);
- [class*="weui-icon-"]{
- color:var(--weui-informationBar-ICON);
+ [class*="weui-icon-"] {
+ color: var(--weui-informationBar-ICON);
}
- .weui-link{
- color:var(--weui-informationBar-LINK);
+ .weui-link {
+ color: var(--weui-informationBar-LINK);
}
- .weui-btn_icon{
- [class*="weui-icon-"]{
- color:var(--weui-informationBar-FG);
+ .weui-btn_icon {
+ [class*="weui-icon-"] {
+ color: var(--weui-informationBar-FG);
}
}
}
.weui-information-bar,
.weui-information-bar__hd,
-.weui-information-bar__ft{
- display:flex;
- align-items:center;
+.weui-information-bar__ft {
+ display: flex;
+ align-items: center;
}
-.weui-information-bar__hd{
- [class*="weui-icon-"]{
- margin-right:8px;
+.weui-information-bar__hd {
+ [class*="weui-icon-"] {
+ margin-right: 8px;
}
}
-.weui-information-bar__bd{
- flex:1;
- min-width:0;
+.weui-information-bar__bd {
+ flex: 1;
+ min-width: 0;
- &:first-child{
- &:last-child{
- text-align:center;
+ &:first-child {
+ &:last-child {
+ text-align: center;
}
}
}
-.weui-information-bar_warn-weak{
- color:var(--weui-informationBar-warnWeak-FG);
- background:var(--weui-informationBar-warnWeak-BG);
+.weui-information-bar_warn-weak {
+ color: var(--weui-informationBar-warnWeak-FG);
+ background: var(--weui-informationBar-warnWeak-BG);
- [class*="weui-icon-"]{
- color:var(--weui-informationBar-warnWeak-ICON);
+ [class*="weui-icon-"] {
+ color: var(--weui-informationBar-warnWeak-ICON);
}
- .weui-link{
- color:var(--weui-informationBar-warnWeak-LINK);
+ .weui-link {
+ color: var(--weui-informationBar-warnWeak-LINK);
}
- .weui-btn_icon{
- [class*="weui-icon-"]{
- color:var(--weui-informationBar-warnWeak-FG);
+ .weui-btn_icon {
+ [class*="weui-icon-"] {
+ color: var(--weui-informationBar-warnWeak-FG);
}
}
}
-.weui-information-bar_warn-no-color{
- background:var(--weui-informationBar-noColor-BG);
+.weui-information-bar_warn-no-color {
+ background: var(--weui-informationBar-noColor-BG);
}
-.weui-information-bar_tips-strong{
- background:var(--weui-informationBar-tipsStrong-BG);
+.weui-information-bar_tips-strong {
+ background: var(--weui-informationBar-tipsStrong-BG);
}
-.weui-information-bar_tips-weak{
- color:var(--weui-informationBar-tipsWeak-FG);
- background:var(--weui-informationBar-tipsWeak-BG);
+.weui-information-bar_tips-weak {
+ color: var(--weui-informationBar-tipsWeak-FG);
+ background: var(--weui-informationBar-tipsWeak-BG);
- [class*="weui-icon-"]{
- color:var(--weui-informationBar-tipsWeak-ICON);
+ [class*="weui-icon-"] {
+ color: var(--weui-informationBar-tipsWeak-ICON);
}
- .weui-link{
- color:var(--weui-informationBar-tipsWeak-LINK);
+ .weui-link {
+ color: var(--weui-informationBar-tipsWeak-LINK);
}
- .weui-btn_icon{
- [class*="weui-icon-"]{
- color:var(--weui-informationBar-tipsWeak-FG);
+ .weui-btn_icon {
+ [class*="weui-icon-"] {
+ color: var(--weui-informationBar-tipsWeak-FG);
}
}
}
diff --git a/src/style/widget/weui-tips/weui-list-tips.less b/src/style/widget/weui-tips/weui-list-tips.less
index 04b55821..5d48b0bd 100644
--- a/src/style/widget/weui-tips/weui-list-tips.less
+++ b/src/style/widget/weui-tips/weui-list-tips.less
@@ -17,38 +17,38 @@
@import "../../base/fn";
.weui-list-tips {
- list-style: none;
- padding-top: 24px;
- padding-bottom: 24px;
- line-height: 1.4;
- font-size: 14px;
- color: var(--weui-FG-1);
- position: relative;
- &:before {
- content: "";
- .setTopLine(var(--weui-FG-3));
- }
- &:last-child {
- padding-bottom: 0;
- }
+ list-style: none;
+ padding-top: 24px;
+ padding-bottom: 24px;
+ line-height: 1.4;
+ font-size: 14px;
+ color: var(--weui-FG-1);
+ position: relative;
+ &::before {
+ content: "";
+ .setTopLine(var(--weui-FG-3));
+ }
+ &:last-child {
+ padding-bottom: 0;
+ }
}
.weui-list-tips__item {
- position: relative;
- padding-left: 15px;
- margin: 16px 0;
- &:before {
- content: "\2022";
- position: absolute;
- left: 0;
- top: -0.1em;
- }
+ position: relative;
+ padding-left: 15px;
+ margin: 16px 0;
+ &::before {
+ content: "\2022";
+ position: absolute;
+ left: 0;
+ top: -0.1em;
+ }
+ &:first-child {
+ margin-top: 0;
+ }
+ .weui-form-preview__list + .weui-list-tips > & {
&:first-child {
- margin-top: 0;
- }
- .weui-form-preview__list + .weui-list-tips > & {
- &:first-child {
- margin-top: 6px;
- }
+ margin-top: 6px;
}
+ }
}
diff --git a/src/style/widget/weui-tips/weui-loadmore.less b/src/style/widget/weui-tips/weui-loadmore.less
index 10fa6835..5f2091d8 100644
--- a/src/style/widget/weui-tips/weui-loadmore.less
+++ b/src/style/widget/weui-tips/weui-loadmore.less
@@ -17,46 +17,46 @@
@import "../../base/fn";
.weui-loadmore {
- width: 65%;
- margin: 20px auto;
- text-align: center;
- font-size: 0;
+ width: 65%;
+ margin: 20px auto;
+ text-align: center;
+ font-size: 0;
- .weui-loading,
- .weui-primary-loading {
- margin-right: 8px;
- }
+ .weui-loading,
+ .weui-primary-loading {
+ margin-right: 8px;
+ }
}
.weui-loadmore__tips {
- display: inline-block;
- vertical-align: middle;
- font-size: 14px;
- line-height: 1.6;
- color: var(--weui-FG-1);
+ display: inline-block;
+ vertical-align: middle;
+ font-size: 14px;
+ line-height: 1.6;
+ color: var(--weui-FG-1);
}
.weui-loadmore_line {
- border-top: 1px solid @weuiLineColorLight;
- margin-top: 32px;
- .weui-loadmore__tips {
- position: relative;
- top: -0.9em;
- padding: 0 8px;
- background-color: var(--weui-BG-2);
- }
+ border-top: 1px solid @weuiLineColorLight;
+ margin-top: 32px;
+ .weui-loadmore__tips {
+ position: relative;
+ top: -0.9em;
+ padding: 0 8px;
+ background-color: var(--weui-BG-2);
+ }
}
.weui-loadmore_dot {
- .weui-loadmore__tips {
- &:before {
- content: " ";
- width: 4px;
- height: 4px;
- border-radius: 50%;
- background-color: @weuiLineColorLight;
- display: inline-block;
- position: relative;
- vertical-align: 0;
- top: -0.16em;
- }
+ .weui-loadmore__tips {
+ &::before {
+ content: " ";
+ width: 4px;
+ height: 4px;
+ border-radius: 50%;
+ background-color: @weuiLineColorLight;
+ display: inline-block;
+ position: relative;
+ vertical-align: 0;
+ top: -0.16em;
}
+ }
}
diff --git a/src/style/widget/weui-tips/weui-mask.less b/src/style/widget/weui-tips/weui-mask.less
index e04eb826..0444b302 100644
--- a/src/style/widget/weui-tips/weui-mask.less
+++ b/src/style/widget/weui-tips/weui-mask.less
@@ -17,20 +17,20 @@
@import "../../base/fn";
.weui-mask {
- position: fixed;
- z-index: 1000;
- top: 0;
- right: 0;
- left: 0;
- bottom: 0;
- background: rgba(0, 0, 0, 0.6);
+ position: fixed;
+ z-index: 1000;
+ top: 0;
+ right: 0;
+ left: 0;
+ bottom: 0;
+ background: rgba(0, 0, 0, 0.6);
}
.weui-mask_transparent {
- position: fixed;
- z-index: 1000;
- top: 0;
- right: 0;
- left: 0;
- bottom: 0;
+ position: fixed;
+ z-index: 1000;
+ top: 0;
+ right: 0;
+ left: 0;
+ bottom: 0;
}
diff --git a/src/style/widget/weui-tips/weui-toast.less b/src/style/widget/weui-tips/weui-toast.less
index 91023925..14df44d6 100644
--- a/src/style/widget/weui-tips/weui-toast.less
+++ b/src/style/widget/weui-tips/weui-toast.less
@@ -17,93 +17,92 @@
@import "../../base/fn";
.weui-toast {
- position: fixed;
- z-index: 5500;
- font-size: 10px;
- width: 13.6em;
- height: 13.6em;
- top: 40%;
- left: 50%;
- transform: translate(-50%, -50%);
- text-align: center;
- border-radius: 12px;
- color: rgba(255, 255, 255, 0.9);
- display: flex;
- flex-direction: column;
- align-items: center;
- justify-content: center;
- background-color: var(--weui-BG-4);
- box-sizing: border-box;
- line-height: 1.4;
+ position: fixed;
+ z-index: 5500;
+ font-size: 10px;
+ width: 13.6em;
+ height: 13.6em;
+ top: 40%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+ text-align: center;
+ border-radius: 12px;
+ color: rgba(255, 255, 255, 0.9);
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ background-color: var(--weui-BG-4);
+ box-sizing: border-box;
+ line-height: 1.4;
}
.weui-toast_text {
- width: auto;
- height: auto;
- min-width: 152px;
- max-width: 216px;
- padding: 12px 0;
- border-radius:8px;
- .weui-toast__content {
- font-size: 14px;
- padding:0 20px;
- }
+ width: auto;
+ height: auto;
+ min-width: 152px;
+ max-width: 216px;
+ padding: 12px 0;
+ border-radius: 8px;
+ .weui-toast__content {
+ font-size: 14px;
+ padding: 0 20px;
+ }
}
.weui-icon_toast {
- // 重置weui-icon权重
- &&{
- width: 4em;
- height: 4em;
- }
+ // 重置weui-icon权重
+ && {
+ width: 4em;
+ height: 4em;
+ }
- display: block;
- margin-bottom: 16px;
- &.weui-icon-success-no-circle {
- color: rgba(255, 255, 255, 0.9);
- }
- &.weui-icon-warn {
- color: rgba(255, 255, 255, 0.9);
+ display: block;
+ margin-bottom: 16px;
+ &.weui-icon-success-no-circle {
+ color: rgba(255, 255, 255, 0.9);
+ }
+ &.weui-icon-warn {
+ color: rgba(255, 255, 255, 0.9);
+ }
+ &.weui-loading {
+ width: 1em;
+ height: 1em;
+ font-size: 40px;
+ }
+ &.weui-primary-loading {
+ display: flex;
+ width: 1em;
+ height: 1em;
+ font-size: 40px;
+ color: #ededed;
+ &::before {
+ border-width: 4px 0 4px 4px;
}
- &.weui-loading {
- width:1em;
- height:1em;
- font-size:40px;
+ &::after {
+ border-width: 4px 4px 4px 0;
}
- &.weui-primary-loading {
- display:flex;
- width:1em;
- height:1em;
-
- font-size: 40px;
- color: #ededed;
- &:before {
- border-width: 4px 0 4px 4px;
- }
- &:after {
- border-width: 4px 4px 4px 0;
- }
- .weui-primary-loading__dot {
- width: 4px;
- height: 4px;
- border-top-right-radius: 4px;
- border-bottom-right-radius: 4px;
- }
+ .weui-primary-loading__dot {
+ width: 4px;
+ height: 4px;
+ border-top-right-radius: 4px;
+ border-bottom-right-radius: 4px;
}
+ }
}
.weui-toast__content {
- font-size: 17px;
- padding: 0 12px;
- .hyphens;
+ font-size: 17px;
+ padding: 0 12px;
+ .hyphens;
}
// 多行文本场景
.weui-toast_text-more {
- .weui-icon_toast {
- margin-bottom: 12px;
- }
- .weui-toast__content {
- font-size: 14px;
- line-height: 1.6;
- }
+ .weui-icon_toast {
+ margin-bottom: 12px;
+ }
+ .weui-toast__content {
+ font-size: 14px;
+ line-height: 1.6;
+ }
}
diff --git a/src/style/widget/weui-tips/weui-toptips.less b/src/style/widget/weui-tips/weui-toptips.less
index 8d95354c..e74c2d14 100644
--- a/src/style/widget/weui-tips/weui-toptips.less
+++ b/src/style/widget/weui-tips/weui-toptips.less
@@ -17,20 +17,20 @@
@import "../../base/fn";
.weui-toptips {
- display: none;
- position: fixed;
- transform: translateZ(0);
- top: 8px;
- left: 8px;
- right: 8px;
- padding: 10px;
- border-radius: 8px;
- font-size: 14px;
- text-align: center;
- color: #fff; // 固定色值
- z-index: 5500;
- .text_wrap();
+ display: none;
+ position: fixed;
+ transform: translateZ(0);
+ top: 8px;
+ left: 8px;
+ right: 8px;
+ padding: 10px;
+ border-radius: 8px;
+ font-size: 14px;
+ text-align: center;
+ color: #fff; // 固定色值
+ z-index: 5500;
+ .text_wrap();
}
.weui-toptips_warn {
- background-color: @weuiColorWarn;
+ background-color: @weuiColorWarn;
}