Skip to content

Commit 4e29aaf

Browse files
MomoPoppyMomoPoppy
authored
feat(theme-mobile): [button] Adjust the theme of mobile (#2820)
1 parent bbe91c7 commit 4e29aaf

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

90 files changed

+1200
-738
lines changed

‎examples/sites/demos/mobile/app/avatar/avatar-size.vue‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -59,4 +59,8 @@ export default {
5959
overflow: hidden;
6060
overflow-y: auto;
6161
}
62+
63+
.tiny-mobile-avatar {
64+
margin-right: 4px;
65+
}
6266
</style>

‎examples/sites/demos/mobile/app/avatar/avatar-src-set.vue‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -36,6 +36,9 @@ export default {
3636
.avatar-wrap {
3737
padding: 20px;
3838
}
39+
.tiny-mobile-avatar {
40+
margin-right: 4px;
41+
}
3942
.avatar-wrap svg {
4043
height: 100%;
4144
width: 100%;

‎packages/mobile/components/image-viewer/src/mobile.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@
1212
<template>
1313
<transition name="viewer-fade">
1414
<div
15-
class="tiny-mobile-image-viewer__wrapper"
15+
class="tiny-mobile-image-viewer tiny-mobile-image-viewer__wrapper"
1616
ref="imagePreview"
1717
:style="{ 'z-index': zIndex }"
1818
v-show="state.previewVisible"

‎packages/theme-mobile/src/action-sheet/vars.less‎

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
11
.inject-ActionSheet-vars() {
2-
--tvm-ActionSheet-content-bg-color: #fff;
3-
--tvm-ActionSheet-menu-bg-color: var(--tvm-base-color-light, #fff);
4-
--tvm-ActionSheet-item-text-color: var(--tvm-base-color-info-normal, #333);
5-
--tvm-ActionSheet-item-warn-text-color: #f36f64;
6-
--tvm-ActionSheet-item-font-size: 12px;
7-
--tvm-ActionSheet-item-border-color: #ddd;
8-
--tvm-ActionSheet-item-active-bg-color: #ececec;
9-
--tvm-ActionSheet-item-active-text-color: #039be5;
10-
--tvm-ActionSheet-action-bg-color: var(--tvm-base-color-light, #fff);
2+
--tvm-ActionSheet-content-bg-color: var(--tvm-color-bg-secondary, #fff);
3+
--tvm-ActionSheet-menu-bg-color: var(--tvm-color-bg-secondary, #fff);
4+
--tvm-ActionSheet-item-text-color: var(--tvm-color-text, #191919);
5+
--tvm-ActionSheet-item-warn-text-color: var(--tvm-color-error-text, #f23030);
6+
--tvm-ActionSheet-item-font-size: var(--tvm-font-size-sm, 12px);
7+
--tvm-ActionSheet-item-border-color: var(--tvm-color-border, #c2c2c2);
8+
--tvm-ActionSheet-item-active-bg-color: var(--tvm-color-bg-active, #f5f5f5);
9+
--tvm-ActionSheet-item-active-text-color: var(--tvm-color-text-active, #1476ff);
10+
--tvm-ActionSheet-action-bg-color: var(--tvm-color-bg-secondary, #fff);
1111
}

‎packages/theme-mobile/src/alert/index.less‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,7 @@
3131
flex: 1;
3232
color: var(--tvm-Alert-content-text-color);
3333
font-weight: var(--tvm-Alert-font-weight);
34-
padding: 0 var(--tvm-Alert-content-padding-horizontal);
34+
padding: 0 var(--tvm-Alert-content-padding-x);
3535
white-space: pre-wrap;
3636
word-break: break-all;
3737
}
@@ -52,8 +52,8 @@
5252
}
5353

5454
&&--large {
55-
padding: var(--tvm-Alert-large-padding-vertical) var(--tvm-Alert-padding-right)
56-
var(--tvm-Alert-large-padding-vertical) var(--tvm-Alert-padding-left);
55+
padding: var(--tvm-Alert-large-padding-y) var(--tvm-Alert-padding-right) var(--tvm-Alert-large-padding-y)
56+
var(--tvm-Alert-padding-left);
5757

5858
.@{alert-prefix-cls}__content {
5959
font-size: var(--tvm-Alert-large-font-size);
@@ -75,31 +75,31 @@
7575
&--success {
7676
.alert-variant(
7777
var(--tvm-Alert-success-icon-color) ;
78-
var(--tvm-Alert-success-link-color) ;
78+
var(--tvm-Alert-success-link-text-color) ;
7979
var(--tvm-Alert-success-bg-color)
8080
);
8181
}
8282

8383
&--info {
8484
.alert-variant(
8585
var(--tvm-Alert-info-icon-color) ;
86-
var(--tvm-Alert-info-link-color) ;
86+
var(--tvm-Alert-info-link-text-color) ;
8787
var(--tvm-Alert-info-bg-color)
8888
);
8989
}
9090

9191
&--warning {
9292
.alert-variant(
9393
var(--tvm-Alert-warning-icon-color) ;
94-
var(--tvm-Alert-warning-link-color) ;
94+
var(--tvm-Alert-warning-link-text-color) ;
9595
var(--tvm-Alert-warning-bg-color)
9696
);
9797
}
9898

9999
&--error {
100100
.alert-variant(
101101
var(--tvm-Alert-error-icon-color) ;
102-
var(--tvm-Alert-error-link-color) ;
102+
var(--tvm-Alert-error-link-text-color) ;
103103
var(--tvm-Alert-error-bg-color)
104104
);
105105
}
@@ -132,7 +132,7 @@
132132
}
133133

134134
& &__close {
135-
font-size: var(--tvm-Alert-close-icon-font-size);
135+
font-size: var(--tvm-Alert-close-icon-size);
136136
cursor: pointer;
137137
}
138138
}

‎packages/theme-mobile/src/alert/vars.less‎

Lines changed: 24 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -1,60 +1,60 @@
11
.inject-Alert-vars() {
22
// 警告类型提示图标色
3-
--tvm-Alert-warning-icon-color: var(--tvm-color-warning, #ff8800);
3+
--tvm-Alert-warning-icon-color: var(--tvm-color-warn-icon, #ff8800);
44
// 警告类型提示链接字体色
5-
--tvm-Alert-warning-link-color: var(--tvm-color-text-link, #1476ff);
5+
--tvm-Alert-warning-link-text-color: var(--tvm-color-text-link, #1476ff);
66
// 警告类型提示背景色
7-
--tvm-Alert-warning-bg-color: var(--tvm-color-warning-subtle, #ffebd1);
7+
--tvm-Alert-warning-bg-color: var(--tvm-color-warn-bg-light, #ffebd1);
88

99
// 异常类型提示图标色
10-
--tvm-Alert-error-icon-color: var(--tvm-color-error, #f23030);
10+
--tvm-Alert-error-icon-color: var(--tvm-color-error-icon, #f23030);
1111
// 异常类型提示链接字体色
12-
--tvm-Alert-error-link-color: var(--tvm-color-text-link, #1476ff);
12+
--tvm-Alert-error-link-text-color: var(--tvm-color-text-link, #1476ff);
1313
// 异常类型提示背景色
14-
--tvm-Alert-error-bg-color: var(--tvm-color-error-subtle, #fce3e1);
14+
--tvm-Alert-error-bg-color: var(--tvm-color-error-bg-light, #fce3e1);
1515

1616
// 成功类型提示图标色
17-
--tvm-Alert-success-icon-color: var(--tvm-color-success, #5cb300);
17+
--tvm-Alert-success-icon-color: var(--tvm-color-success-icon, #5cb300);
1818
// 成功类型提示链接字体色
19-
--tvm-Alert-success-link-color: var(--tvm-color-text-link, #1476ff);
19+
--tvm-Alert-success-link-text-color: var(--tvm-color-text-link, #1476ff);
2020
// 成功类型提示背景色
21-
--tvm-Alert-success-bg-color: var(--tvm-color-success-subtle, #e6f2d5);
21+
--tvm-Alert-success-bg-color: var(--tvm-color-success-bg-light, #e6f2d5);
2222

2323
// 基础类型提示图标色
24-
--tvm-Alert-info-icon-color: var(--tvm-color-brand-2, #1476ff);
24+
--tvm-Alert-info-icon-color: var(--tvm-color-info-icon, #1476ff);
2525
// 基础类型提示链接字体色
26-
--tvm-Alert-info-link-color: var(--tvm-color-text-link, #1476ff);
26+
--tvm-Alert-info-link-text-color: var(--tvm-color-text-link, #1476ff);
2727
// 基础类型提示背景色
28-
--tvm-Alert-info-bg-color: var(--tvm-color-info-subtle, #deecff);
28+
--tvm-Alert-info-bg-color: var(--tvm-color-info-bg-light, #deecff);
2929

3030
// 默认高度
31-
--tvm-Alert-height: var(--tvm-color-info-subtle, 36px);
31+
--tvm-Alert-height: 36px;
3232
// 默认左内边距
33-
--tvm-Alert-padding-left: var(--tvm-space-6x, 24px);
33+
--tvm-Alert-padding-left: var(--tvm-space-xxl, 24px);
3434
// 默认右内边距
35-
--tvm-Alert-padding-right: var(--tvm-space-6x, 24px);
35+
--tvm-Alert-padding-right: var(--tvm-space-xxl, 24px);
3636
// 默认上内边距
3737
--tvm-Alert-padding-top: 9px;
3838
// 默认下内边距
3939
--tvm-Alert-padding-bottom: 9px;
4040
// 图标大小
41-
--tvm-Alert-icon-size: var(--tvm-font-size-l, 16px);
41+
--tvm-Alert-icon-size: var(--tvm-icon-size, 16px);
4242
// 字号
43-
--tvm-Alert-content-font-size: var(--tvm-font-size-s, 12px);
43+
--tvm-Alert-content-font-size: var(--tvm-font-size-sm, 12px);
4444
// 字体色
45-
--tvm-Alert-content-text-color: var(--tvm-color-text-primary, #191919);
45+
--tvm-Alert-content-text-color: var(--tvm-color-text, #191919);
4646
// 字重
4747
--tvm-Alert-font-weight: var(--tvm-font-weight-regular, 400);
4848
// 内容水平内边距
49-
--tvm-Alert-content-padding-horizontal: var(--tvm-space-2x, 8px);
49+
--tvm-Alert-content-padding-x: var(--tvm-space-md, 8px);
5050
// large提示字号
51-
--tvm-Alert-large-font-size: var(--tvm-font-size-l, 16px);
51+
--tvm-Alert-large-font-size: var(--tvm-font-size-lg, 16px);
5252
// large提示垂直内边距
53-
--tvm-Alert-large-padding-vertical: 10px;
53+
--tvm-Alert-large-padding-y: 10px;
5454
// 关闭图标大小
55-
--tvm-Alert-close-icon-font-size: var(--tvm-font-size-l, 16px);
55+
--tvm-Alert-close-icon-size: var(--tvm-icon-size, 16px);
5656
// 关闭图标颜色
57-
--tvm-Alert-close-icon-color: var(--tvm-color-default, #808080);
57+
--tvm-Alert-close-icon-color: var(--tvm-color-icon, #808080);
5858
// 自定义关闭文本色
59-
--tvm-Alert-custom-text-color: var(--tvm-color-text-placeholder, #808080);
59+
--tvm-Alert-custom-text-color: var(--tvm-color-text-weaken, #808080);
6060
}

‎packages/theme-mobile/src/avatar/index.less‎

Lines changed: 15 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -25,11 +25,11 @@
2525
overflow: hidden;
2626
border-style: solid;
2727
border-width: 0;
28-
color: var(--tvm-Avatar-color, #fff);
29-
background: var(--tvm-Avatar-bgcolor, #c0c4cc);
30-
width: var(--tvm-Avatar-size, 40px);
31-
height: var(--tvm-Avatar-size, 40px);
32-
line-height: var(--tvm-Avatar-size, 40px);
28+
color: var(--tvm-Avatar-text-color, #fff);
29+
background: var(--tvm-Avatar-bg-color, #c0c4cc);
30+
width: var(--tvm-Avatar-height, 40px);
31+
height: var(--tvm-Avatar-height, 40px);
32+
line-height: var(--tvm-Avatar-height, 40px);
3333
font-size: var(--tvm-Avatar-font-size, 14px);
3434

3535
& > img {
@@ -41,28 +41,24 @@
4141
}
4242

4343
&--icon {
44-
font-size: var(--tvm-Avatar-icon-font-size, 18px);
44+
font-size: var(--tvm-Avatar-icon-size, 18px);
4545
}
4646

4747
&--large {
48-
width: var(--tvm-Avatar-large-size, 80px);
49-
height: var(--tvm-Avatar-large-size, 80px);
50-
line-height: var(--tvm-Avatar-large-size, 80px);
48+
width: var(--tvm-Avatar-large-height, 80px);
49+
height: var(--tvm-Avatar-large-height, 80px);
50+
line-height: var(--tvm-Avatar-large-height, 80px);
5151
}
5252

5353
&--medium {
54-
width: var(--tvm-Avatar-medium-size, 56px);
55-
height: var(--tvm-Avatar-medium-size, 56px);
56-
line-height: var(--tvm-Avatar-medium-size, 56px);
54+
width: var(--tvm-Avatar-medium-height, 56px);
55+
height: var(--tvm-Avatar-medium-height, 56px);
56+
line-height: var(--tvm-Avatar-medium-height, 56px);
5757
}
5858

5959
&--small {
60-
width: var(--tvm-Avatar-small-size, 48px);
61-
height: var(--tvm-Avatar-small-size, 48px);
62-
line-height: var(--tvm-Avatar-small-size, 48px);
63-
}
64-
65-
&--bg-color {
66-
background-color: var(--tvm-base-color-brand-1);
60+
width: var(--tvm-Avatar-small-height, 48px);
61+
height: var(--tvm-Avatar-small-height, 48px);
62+
line-height: var(--tvm-Avatar-small-height, 48px);
6763
}
6864
}

‎packages/theme-mobile/src/avatar/vars.less‎

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
11
.inject-Avatar-vars() {
2-
--tvm-Avatar-color: var(--tvm-base-color-light, #fff);
3-
--tvm-Avatar-bgcolor: #c0c4cc;
4-
--tvm-Avatar-size: 40px;
5-
--tvm-Avatar-font-size: 14px;
6-
--tvm-Avatar-icon-font-size: 18px;
7-
--tvm-Avatar-square-border-radius: 4px;
8-
--tvm-Avatar-large-size: 80px;
9-
--tvm-Avatar-medium-size: 56px;
10-
--tvm-Avatar-small-size: 48px;
2+
--tvm-Avatar-text-color: var(--tvm-color-text-white, #fff);
3+
--tvm-Avatar-bg-color: var(--tvm-color-bg, #f5f5f5);
4+
--tvm-Avatar-height: var(--tvm-size-height-lg, 40px);
5+
--tvm-Avatar-font-size: var(--tvm-font-size-default, 14px);
6+
--tvm-Avatar-icon-size: 18px;
7+
--tvm-Avatar-square-border-radius: var(--tvm-border-radius-sm, 4px);
8+
--tvm-Avatar-large-height: 80px;
9+
--tvm-Avatar-medium-height: 56px;
10+
--tvm-Avatar-small-height: 48px;
1111
}

‎packages/theme-mobile/src/badge/index.less‎

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -23,12 +23,12 @@
2323
display: inline-block;
2424

2525
&__content {
26-
height: var(--tvm-Badge-size, 18px);
27-
line-height: var(--tvm-Badge-size, 18px);
26+
height: var(--tvm-Badge-height, 18px);
27+
line-height: var(--tvm-Badge-height, 18px);
2828
padding: 0 6px;
2929
font-size: var(--tvm-Badge-font-size, 13px);
30-
color: var(--tvm-Badge-color, #fff);
31-
background-color: var(--tvm-Badge-danger-bgcolor, #f36f64);
30+
color: var(--tvm-Badge-text-color, #fff);
31+
background-color: var(--tvm-Badge-danger-bg-color, #f36f64);
3232
border-radius: 10px;
3333
font-family: 'Microsoft YaHei', Arial;
3434
display: inline-block;
@@ -70,23 +70,23 @@
7070
}
7171

7272
&__content&--primary {
73-
background-color: var(--tvm-Badge-primary-bgcolor, #1890ff);
73+
background-color: var(--tvm-Badge-primary-bg-color, #1890ff);
7474
}
7575

7676
&__content&--success {
77-
background-color: var(--tvm-Badge-success-bgcolor, #52c41a);
77+
background-color: var(--tvm-Badge-success-bg-color, #52c41a);
7878
}
7979

8080
&__content&--warning {
81-
background-color: var(--tvm-Badge-warning-bgcolor, #faad14);
81+
background-color: var(--tvm-Badge-warning-bg-color, #faad14);
8282
}
8383

8484
&__content&--danger {
85-
background-color: var(--tvm-Badge-danger-bgcolor, #f36f64);
85+
background-color: var(--tvm-Badge-danger-bg-color, #f36f64);
8686
}
8787

8888
&__content&--info {
89-
background-color: var(--tvm-Badge-info-bgcolor, #333);
89+
background-color: var(--tvm-Badge-info-bg-color, #333);
9090
}
9191

9292
& &__link {

‎packages/theme-mobile/src/badge/vars.less‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
11
.inject-Badge-vars() {
2-
--tvm-Badge-size: 18px;
3-
--tvm-Badge-font-size: 13px;
4-
--tvm-Badge-color: var(--tvm-base-color-light, #fff);
5-
--tvm-Badge-primary-bgcolor: var(--tvm-base-color-primary-normal, #1890ff);
6-
--tvm-Badge-success-bgcolor: var(--tvm-base-color-success-normal, #52c41a);
7-
--tvm-Badge-warning-bgcolor: var(--tvm-base-color-warning-normal, #faad14);
8-
--tvm-Badge-danger-bgcolor: #f36f64;
9-
--tvm-Badge-info-bgcolor: var(--tvm-base-color-info-normal, #333333);
2+
--tvm-Badge-height: 18px;
3+
--tvm-Badge-font-size: var(--tvm-font-size-default, 14px);
4+
--tvm-Badge-text-color: var(--tvm-color-bg-secondary, #fff);
5+
--tvm-Badge-primary-bg-color: var(--tvm-color-act-primary-bg, #191919);
6+
--tvm-Badge-success-bg-color: var(--tvm-color-act-success-bg, #5cb300);
7+
--tvm-Badge-warning-bg-color: var(--tvm-color-act-warning-bg, #ff8800);
8+
--tvm-Badge-danger-bg-color: var(--tvm-color-act-danger-bg, #f23030);
9+
--tvm-Badge-info-bg-color: var(--tvm-color-act-info-bg, #1476ff);
1010
}

0 commit comments

Comments
 (0)