@arco-design/mobile-react 2.21.1 → 2.21.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +11 -0
- package/README.en-US.md +2 -2
- package/README.md +2 -2
- package/cjs/button/style/css/index.css +64 -64
- package/cjs/button/style/index.less +7 -5
- package/dist/style.css +64 -64
- package/dist/style.min.css +1 -1
- package/esm/button/style/css/index.css +64 -64
- package/esm/button/style/index.less +7 -5
- package/package.json +3 -3
- package/umd/button/style/css/index.css +64 -64
- package/umd/button/style/index.less +7 -5
|
@@ -18,14 +18,21 @@
|
|
|
18
18
|
user-select: none;
|
|
19
19
|
/* Non-prefixed version, currently*/
|
|
20
20
|
}
|
|
21
|
-
.arco-button-inline {
|
|
21
|
+
.arco-button.arco-button-inline {
|
|
22
22
|
width: auto;
|
|
23
23
|
display: inline-block;
|
|
24
24
|
}
|
|
25
|
-
.arco-button-type-ghost {
|
|
25
|
+
.arco-button.arco-button-type-ghost {
|
|
26
26
|
background: transparent ;
|
|
27
27
|
color: #165dff ;
|
|
28
28
|
}
|
|
29
|
+
.arco-button.arco-button-type-ghost-disabled {
|
|
30
|
+
background: transparent ;
|
|
31
|
+
color: #94bfff ;
|
|
32
|
+
}
|
|
33
|
+
.arco-button.arco-button-type-ghost-active {
|
|
34
|
+
background: #e8f3ff ;
|
|
35
|
+
}
|
|
29
36
|
.arco-button-type-ghost .bg-color-with-config {
|
|
30
37
|
background: #165dff;
|
|
31
38
|
}
|
|
@@ -38,17 +45,17 @@
|
|
|
38
45
|
.arco-button-type-ghost .stroke-color-with-config {
|
|
39
46
|
stroke: #165dff;
|
|
40
47
|
}
|
|
41
|
-
.arco-button-type-
|
|
42
|
-
background: transparent ;
|
|
43
|
-
color: #94bfff ;
|
|
44
|
-
}
|
|
45
|
-
.arco-button-type-ghost-active {
|
|
46
|
-
background: #e8f3ff ;
|
|
47
|
-
}
|
|
48
|
-
.arco-button-type-default {
|
|
48
|
+
.arco-button.arco-button-type-default {
|
|
49
49
|
background: #E8F3FF ;
|
|
50
50
|
color: #165dff ;
|
|
51
51
|
}
|
|
52
|
+
.arco-button.arco-button-type-default-disabled {
|
|
53
|
+
background: #E8F3FF ;
|
|
54
|
+
color: #94bfff ;
|
|
55
|
+
}
|
|
56
|
+
.arco-button.arco-button-type-default-active {
|
|
57
|
+
background: #94bfff ;
|
|
58
|
+
}
|
|
52
59
|
.arco-button-type-default .bg-color-with-config {
|
|
53
60
|
background: #165dff;
|
|
54
61
|
}
|
|
@@ -61,16 +68,16 @@
|
|
|
61
68
|
.arco-button-type-default .stroke-color-with-config {
|
|
62
69
|
stroke: #165dff;
|
|
63
70
|
}
|
|
64
|
-
.arco-button-type-
|
|
65
|
-
background: #
|
|
66
|
-
color: #
|
|
71
|
+
.arco-button.arco-button-type-primary {
|
|
72
|
+
background: #165dff ;
|
|
73
|
+
color: #fff ;
|
|
67
74
|
}
|
|
68
|
-
.arco-button-type-
|
|
75
|
+
.arco-button.arco-button-type-primary-disabled {
|
|
69
76
|
background: #94bfff ;
|
|
77
|
+
color: #E8F3FF ;
|
|
70
78
|
}
|
|
71
|
-
.arco-button-type-primary {
|
|
72
|
-
background: #
|
|
73
|
-
color: #fff ;
|
|
79
|
+
.arco-button.arco-button-type-primary-active {
|
|
80
|
+
background: #0E42D2 ;
|
|
74
81
|
}
|
|
75
82
|
.arco-button-type-primary .bg-color-with-config {
|
|
76
83
|
background: #fff;
|
|
@@ -84,108 +91,101 @@
|
|
|
84
91
|
.arco-button-type-primary .stroke-color-with-config {
|
|
85
92
|
stroke: #fff;
|
|
86
93
|
}
|
|
87
|
-
.arco-button-type-
|
|
88
|
-
background: #94bfff ;
|
|
89
|
-
color: #E8F3FF ;
|
|
90
|
-
}
|
|
91
|
-
.arco-button-type-primary-active {
|
|
92
|
-
background: #0E42D2 ;
|
|
93
|
-
}
|
|
94
|
-
.arco-button-type-ghost {
|
|
94
|
+
.arco-button.arco-button-type-ghost {
|
|
95
95
|
border: 1PX solid currentColor;
|
|
96
96
|
}
|
|
97
|
-
.arco-button-type-ghost.half-border {
|
|
97
|
+
.arco-button.arco-button-type-ghost.half-border {
|
|
98
98
|
border-width: 0;
|
|
99
99
|
box-shadow: 0 0 0 1PX currentColor inset;
|
|
100
100
|
}
|
|
101
101
|
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) {
|
|
102
|
-
.arco-button-type-ghost.half-border {
|
|
102
|
+
.arco-button.arco-button-type-ghost.half-border {
|
|
103
103
|
box-shadow: 0 0 0 0.5PX currentColor inset;
|
|
104
104
|
}
|
|
105
105
|
}
|
|
106
|
-
.ios .arco-button-type-ghost.half-border,
|
|
107
|
-
.arco-button-type-ghost.half-border.ios {
|
|
106
|
+
.ios .arco-button.arco-button-type-ghost.half-border,
|
|
107
|
+
.arco-button.arco-button-type-ghost.half-border.ios {
|
|
108
108
|
box-shadow: none;
|
|
109
109
|
border: 0.5PX solid currentColor;
|
|
110
110
|
}
|
|
111
|
-
.arco-button-size-mini {
|
|
111
|
+
.arco-button.arco-button-size-mini {
|
|
112
112
|
padding: 0 0.16rem ;
|
|
113
113
|
height: 0.48rem ;
|
|
114
114
|
}
|
|
115
|
-
.arco-button-size-mini-is-round {
|
|
115
|
+
.arco-button.arco-button-size-mini-is-round {
|
|
116
116
|
border-radius: 0.48rem ;
|
|
117
117
|
}
|
|
118
|
-
.arco-button-size-mini-is-square {
|
|
118
|
+
.arco-button.arco-button-size-mini-is-square {
|
|
119
119
|
border-radius: 0;
|
|
120
120
|
}
|
|
121
|
-
.arco-button-size-mini .arco-button-icon,
|
|
122
|
-
.arco-button-size-mini i,
|
|
123
|
-
.arco-button-size-mini .arco-button-text,
|
|
124
|
-
.arco-button-size-mini svg {
|
|
121
|
+
.arco-button.arco-button-size-mini .arco-button-icon,
|
|
122
|
+
.arco-button.arco-button-size-mini i,
|
|
123
|
+
.arco-button.arco-button-size-mini .arco-button-text,
|
|
124
|
+
.arco-button.arco-button-size-mini svg {
|
|
125
125
|
font-size: 0.24rem ;
|
|
126
126
|
}
|
|
127
|
-
.arco-button-size-small {
|
|
127
|
+
.arco-button.arco-button-size-small {
|
|
128
128
|
padding: 0 0.16rem ;
|
|
129
129
|
height: 0.56rem ;
|
|
130
130
|
}
|
|
131
|
-
.arco-button-size-small-is-round {
|
|
131
|
+
.arco-button.arco-button-size-small-is-round {
|
|
132
132
|
border-radius: 0.56rem ;
|
|
133
133
|
}
|
|
134
|
-
.arco-button-size-small-is-square {
|
|
134
|
+
.arco-button.arco-button-size-small-is-square {
|
|
135
135
|
border-radius: 0;
|
|
136
136
|
}
|
|
137
|
-
.arco-button-size-small .arco-button-icon,
|
|
138
|
-
.arco-button-size-small i,
|
|
139
|
-
.arco-button-size-small .arco-button-text,
|
|
140
|
-
.arco-button-size-small svg {
|
|
137
|
+
.arco-button.arco-button-size-small .arco-button-icon,
|
|
138
|
+
.arco-button.arco-button-size-small i,
|
|
139
|
+
.arco-button.arco-button-size-small .arco-button-text,
|
|
140
|
+
.arco-button.arco-button-size-small svg {
|
|
141
141
|
font-size: 0.28rem ;
|
|
142
142
|
}
|
|
143
|
-
.arco-button-size-medium {
|
|
143
|
+
.arco-button.arco-button-size-medium {
|
|
144
144
|
padding: 0 0.32rem ;
|
|
145
145
|
height: 0.64rem ;
|
|
146
146
|
}
|
|
147
|
-
.arco-button-size-medium-is-round {
|
|
147
|
+
.arco-button.arco-button-size-medium-is-round {
|
|
148
148
|
border-radius: 0.64rem ;
|
|
149
149
|
}
|
|
150
|
-
.arco-button-size-medium-is-square {
|
|
150
|
+
.arco-button.arco-button-size-medium-is-square {
|
|
151
151
|
border-radius: 0;
|
|
152
152
|
}
|
|
153
|
-
.arco-button-size-medium .arco-button-icon,
|
|
154
|
-
.arco-button-size-medium i,
|
|
155
|
-
.arco-button-size-medium .arco-button-text,
|
|
156
|
-
.arco-button-size-medium svg {
|
|
153
|
+
.arco-button.arco-button-size-medium .arco-button-icon,
|
|
154
|
+
.arco-button.arco-button-size-medium i,
|
|
155
|
+
.arco-button.arco-button-size-medium .arco-button-text,
|
|
156
|
+
.arco-button.arco-button-size-medium svg {
|
|
157
157
|
font-size: 0.28rem ;
|
|
158
158
|
}
|
|
159
|
-
.arco-button-size-large {
|
|
159
|
+
.arco-button.arco-button-size-large {
|
|
160
160
|
padding: 0 0.32rem ;
|
|
161
161
|
height: 0.72rem ;
|
|
162
162
|
}
|
|
163
|
-
.arco-button-size-large-is-round {
|
|
163
|
+
.arco-button.arco-button-size-large-is-round {
|
|
164
164
|
border-radius: 0.72rem ;
|
|
165
165
|
}
|
|
166
|
-
.arco-button-size-large-is-square {
|
|
166
|
+
.arco-button.arco-button-size-large-is-square {
|
|
167
167
|
border-radius: 0;
|
|
168
168
|
}
|
|
169
|
-
.arco-button-size-large .arco-button-icon,
|
|
170
|
-
.arco-button-size-large i,
|
|
171
|
-
.arco-button-size-large .arco-button-text,
|
|
172
|
-
.arco-button-size-large svg {
|
|
169
|
+
.arco-button.arco-button-size-large .arco-button-icon,
|
|
170
|
+
.arco-button.arco-button-size-large i,
|
|
171
|
+
.arco-button.arco-button-size-large .arco-button-text,
|
|
172
|
+
.arco-button.arco-button-size-large svg {
|
|
173
173
|
font-size: 0.3rem ;
|
|
174
174
|
}
|
|
175
|
-
.arco-button-size-huge {
|
|
175
|
+
.arco-button.arco-button-size-huge {
|
|
176
176
|
padding: 0 0.32rem ;
|
|
177
177
|
height: 0.88rem ;
|
|
178
178
|
}
|
|
179
|
-
.arco-button-size-huge-is-round {
|
|
179
|
+
.arco-button.arco-button-size-huge-is-round {
|
|
180
180
|
border-radius: 0.88rem ;
|
|
181
181
|
}
|
|
182
|
-
.arco-button-size-huge-is-square {
|
|
182
|
+
.arco-button.arco-button-size-huge-is-square {
|
|
183
183
|
border-radius: 0;
|
|
184
184
|
}
|
|
185
|
-
.arco-button-size-huge .arco-button-icon,
|
|
186
|
-
.arco-button-size-huge i,
|
|
187
|
-
.arco-button-size-huge .arco-button-text,
|
|
188
|
-
.arco-button-size-huge svg {
|
|
185
|
+
.arco-button.arco-button-size-huge .arco-button-icon,
|
|
186
|
+
.arco-button.arco-button-size-huge i,
|
|
187
|
+
.arco-button.arco-button-size-huge .arco-button-text,
|
|
188
|
+
.arco-button.arco-button-size-huge svg {
|
|
189
189
|
font-size: 0.32rem ;
|
|
190
190
|
}
|
|
191
191
|
.arco-button-text-android {
|
|
@@ -56,14 +56,14 @@
|
|
|
56
56
|
.use-var(border-radius, button-radius);
|
|
57
57
|
.noselect();
|
|
58
58
|
|
|
59
|
-
|
|
59
|
+
&&-inline {
|
|
60
60
|
width: auto;
|
|
61
61
|
display: inline-block;
|
|
62
62
|
}
|
|
63
63
|
|
|
64
64
|
.set-button-type(length(@type-map));
|
|
65
65
|
|
|
66
|
-
|
|
66
|
+
&&-type-ghost {
|
|
67
67
|
.button-has-border-value(currentColor);
|
|
68
68
|
}
|
|
69
69
|
|
|
@@ -101,10 +101,9 @@
|
|
|
101
101
|
.set-button-type(@index) when (@index > 0) {
|
|
102
102
|
@type: extract(@type-map, @index);
|
|
103
103
|
|
|
104
|
-
|
|
104
|
+
&&-type-@{type} {
|
|
105
105
|
.use-var(background, 'button-@{type}-background');
|
|
106
106
|
.use-var(color, 'button-@{type}-text-color');
|
|
107
|
-
.set-loading-color-var('button-@{type}-text-color');
|
|
108
107
|
&-disabled {
|
|
109
108
|
.use-var(background, 'button-@{type}-disabled-background');
|
|
110
109
|
.use-var(color, 'button-@{type}-disabled-text-color')
|
|
@@ -113,6 +112,9 @@
|
|
|
113
112
|
.use-var(background, 'button-@{type}-clicked-background');
|
|
114
113
|
}
|
|
115
114
|
}
|
|
115
|
+
&-type-@{type} {
|
|
116
|
+
.set-loading-color-var('button-@{type}-text-color');
|
|
117
|
+
}
|
|
116
118
|
|
|
117
119
|
.set-button-type(@index - 1);
|
|
118
120
|
}
|
|
@@ -120,7 +122,7 @@
|
|
|
120
122
|
.set-button-size(@index) when (@index > 0) {
|
|
121
123
|
@size: extract(@size-map, @index);
|
|
122
124
|
|
|
123
|
-
|
|
125
|
+
&&-size-@{size} {
|
|
124
126
|
.use-var(padding, "button-@{size}-padding");
|
|
125
127
|
.button-size-height("button-@{size}-height");
|
|
126
128
|
.button-text-size("button-@{size}-text-size");
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@arco-design/mobile-react",
|
|
3
|
-
"version": "2.21.
|
|
3
|
+
"version": "2.21.2",
|
|
4
4
|
"description": "",
|
|
5
5
|
"main": "cjs/index.js",
|
|
6
6
|
"module": "esm/index.js",
|
|
@@ -15,7 +15,7 @@
|
|
|
15
15
|
"author": "taoyiyue@bytedance.com",
|
|
16
16
|
"license": "ISC",
|
|
17
17
|
"dependencies": {
|
|
18
|
-
"@arco-design/mobile-utils": "^2.12.
|
|
18
|
+
"@arco-design/mobile-utils": "^2.12.2",
|
|
19
19
|
"@arco-design/transformable": "^1.0.0",
|
|
20
20
|
"es6-promise": "^4.2.8",
|
|
21
21
|
"lodash.throttle": "^4.1.1",
|
|
@@ -36,5 +36,5 @@
|
|
|
36
36
|
"publishConfig": {
|
|
37
37
|
"access": "public"
|
|
38
38
|
},
|
|
39
|
-
"gitHead": "
|
|
39
|
+
"gitHead": "f226b3daa582369797ab83f5299c541252ebba82"
|
|
40
40
|
}
|
|
@@ -18,14 +18,21 @@
|
|
|
18
18
|
user-select: none;
|
|
19
19
|
/* Non-prefixed version, currently*/
|
|
20
20
|
}
|
|
21
|
-
.arco-button-inline {
|
|
21
|
+
.arco-button.arco-button-inline {
|
|
22
22
|
width: auto;
|
|
23
23
|
display: inline-block;
|
|
24
24
|
}
|
|
25
|
-
.arco-button-type-ghost {
|
|
25
|
+
.arco-button.arco-button-type-ghost {
|
|
26
26
|
background: transparent ;
|
|
27
27
|
color: #165dff ;
|
|
28
28
|
}
|
|
29
|
+
.arco-button.arco-button-type-ghost-disabled {
|
|
30
|
+
background: transparent ;
|
|
31
|
+
color: #94bfff ;
|
|
32
|
+
}
|
|
33
|
+
.arco-button.arco-button-type-ghost-active {
|
|
34
|
+
background: #e8f3ff ;
|
|
35
|
+
}
|
|
29
36
|
.arco-button-type-ghost .bg-color-with-config {
|
|
30
37
|
background: #165dff;
|
|
31
38
|
}
|
|
@@ -38,17 +45,17 @@
|
|
|
38
45
|
.arco-button-type-ghost .stroke-color-with-config {
|
|
39
46
|
stroke: #165dff;
|
|
40
47
|
}
|
|
41
|
-
.arco-button-type-
|
|
42
|
-
background: transparent ;
|
|
43
|
-
color: #94bfff ;
|
|
44
|
-
}
|
|
45
|
-
.arco-button-type-ghost-active {
|
|
46
|
-
background: #e8f3ff ;
|
|
47
|
-
}
|
|
48
|
-
.arco-button-type-default {
|
|
48
|
+
.arco-button.arco-button-type-default {
|
|
49
49
|
background: #E8F3FF ;
|
|
50
50
|
color: #165dff ;
|
|
51
51
|
}
|
|
52
|
+
.arco-button.arco-button-type-default-disabled {
|
|
53
|
+
background: #E8F3FF ;
|
|
54
|
+
color: #94bfff ;
|
|
55
|
+
}
|
|
56
|
+
.arco-button.arco-button-type-default-active {
|
|
57
|
+
background: #94bfff ;
|
|
58
|
+
}
|
|
52
59
|
.arco-button-type-default .bg-color-with-config {
|
|
53
60
|
background: #165dff;
|
|
54
61
|
}
|
|
@@ -61,16 +68,16 @@
|
|
|
61
68
|
.arco-button-type-default .stroke-color-with-config {
|
|
62
69
|
stroke: #165dff;
|
|
63
70
|
}
|
|
64
|
-
.arco-button-type-
|
|
65
|
-
background: #
|
|
66
|
-
color: #
|
|
71
|
+
.arco-button.arco-button-type-primary {
|
|
72
|
+
background: #165dff ;
|
|
73
|
+
color: #fff ;
|
|
67
74
|
}
|
|
68
|
-
.arco-button-type-
|
|
75
|
+
.arco-button.arco-button-type-primary-disabled {
|
|
69
76
|
background: #94bfff ;
|
|
77
|
+
color: #E8F3FF ;
|
|
70
78
|
}
|
|
71
|
-
.arco-button-type-primary {
|
|
72
|
-
background: #
|
|
73
|
-
color: #fff ;
|
|
79
|
+
.arco-button.arco-button-type-primary-active {
|
|
80
|
+
background: #0E42D2 ;
|
|
74
81
|
}
|
|
75
82
|
.arco-button-type-primary .bg-color-with-config {
|
|
76
83
|
background: #fff;
|
|
@@ -84,108 +91,101 @@
|
|
|
84
91
|
.arco-button-type-primary .stroke-color-with-config {
|
|
85
92
|
stroke: #fff;
|
|
86
93
|
}
|
|
87
|
-
.arco-button-type-
|
|
88
|
-
background: #94bfff ;
|
|
89
|
-
color: #E8F3FF ;
|
|
90
|
-
}
|
|
91
|
-
.arco-button-type-primary-active {
|
|
92
|
-
background: #0E42D2 ;
|
|
93
|
-
}
|
|
94
|
-
.arco-button-type-ghost {
|
|
94
|
+
.arco-button.arco-button-type-ghost {
|
|
95
95
|
border: 1PX solid currentColor;
|
|
96
96
|
}
|
|
97
|
-
.arco-button-type-ghost.half-border {
|
|
97
|
+
.arco-button.arco-button-type-ghost.half-border {
|
|
98
98
|
border-width: 0;
|
|
99
99
|
box-shadow: 0 0 0 1PX currentColor inset;
|
|
100
100
|
}
|
|
101
101
|
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) {
|
|
102
|
-
.arco-button-type-ghost.half-border {
|
|
102
|
+
.arco-button.arco-button-type-ghost.half-border {
|
|
103
103
|
box-shadow: 0 0 0 0.5PX currentColor inset;
|
|
104
104
|
}
|
|
105
105
|
}
|
|
106
|
-
.ios .arco-button-type-ghost.half-border,
|
|
107
|
-
.arco-button-type-ghost.half-border.ios {
|
|
106
|
+
.ios .arco-button.arco-button-type-ghost.half-border,
|
|
107
|
+
.arco-button.arco-button-type-ghost.half-border.ios {
|
|
108
108
|
box-shadow: none;
|
|
109
109
|
border: 0.5PX solid currentColor;
|
|
110
110
|
}
|
|
111
|
-
.arco-button-size-mini {
|
|
111
|
+
.arco-button.arco-button-size-mini {
|
|
112
112
|
padding: 0 0.16rem ;
|
|
113
113
|
height: 0.48rem ;
|
|
114
114
|
}
|
|
115
|
-
.arco-button-size-mini-is-round {
|
|
115
|
+
.arco-button.arco-button-size-mini-is-round {
|
|
116
116
|
border-radius: 0.48rem ;
|
|
117
117
|
}
|
|
118
|
-
.arco-button-size-mini-is-square {
|
|
118
|
+
.arco-button.arco-button-size-mini-is-square {
|
|
119
119
|
border-radius: 0;
|
|
120
120
|
}
|
|
121
|
-
.arco-button-size-mini .arco-button-icon,
|
|
122
|
-
.arco-button-size-mini i,
|
|
123
|
-
.arco-button-size-mini .arco-button-text,
|
|
124
|
-
.arco-button-size-mini svg {
|
|
121
|
+
.arco-button.arco-button-size-mini .arco-button-icon,
|
|
122
|
+
.arco-button.arco-button-size-mini i,
|
|
123
|
+
.arco-button.arco-button-size-mini .arco-button-text,
|
|
124
|
+
.arco-button.arco-button-size-mini svg {
|
|
125
125
|
font-size: 0.24rem ;
|
|
126
126
|
}
|
|
127
|
-
.arco-button-size-small {
|
|
127
|
+
.arco-button.arco-button-size-small {
|
|
128
128
|
padding: 0 0.16rem ;
|
|
129
129
|
height: 0.56rem ;
|
|
130
130
|
}
|
|
131
|
-
.arco-button-size-small-is-round {
|
|
131
|
+
.arco-button.arco-button-size-small-is-round {
|
|
132
132
|
border-radius: 0.56rem ;
|
|
133
133
|
}
|
|
134
|
-
.arco-button-size-small-is-square {
|
|
134
|
+
.arco-button.arco-button-size-small-is-square {
|
|
135
135
|
border-radius: 0;
|
|
136
136
|
}
|
|
137
|
-
.arco-button-size-small .arco-button-icon,
|
|
138
|
-
.arco-button-size-small i,
|
|
139
|
-
.arco-button-size-small .arco-button-text,
|
|
140
|
-
.arco-button-size-small svg {
|
|
137
|
+
.arco-button.arco-button-size-small .arco-button-icon,
|
|
138
|
+
.arco-button.arco-button-size-small i,
|
|
139
|
+
.arco-button.arco-button-size-small .arco-button-text,
|
|
140
|
+
.arco-button.arco-button-size-small svg {
|
|
141
141
|
font-size: 0.28rem ;
|
|
142
142
|
}
|
|
143
|
-
.arco-button-size-medium {
|
|
143
|
+
.arco-button.arco-button-size-medium {
|
|
144
144
|
padding: 0 0.32rem ;
|
|
145
145
|
height: 0.64rem ;
|
|
146
146
|
}
|
|
147
|
-
.arco-button-size-medium-is-round {
|
|
147
|
+
.arco-button.arco-button-size-medium-is-round {
|
|
148
148
|
border-radius: 0.64rem ;
|
|
149
149
|
}
|
|
150
|
-
.arco-button-size-medium-is-square {
|
|
150
|
+
.arco-button.arco-button-size-medium-is-square {
|
|
151
151
|
border-radius: 0;
|
|
152
152
|
}
|
|
153
|
-
.arco-button-size-medium .arco-button-icon,
|
|
154
|
-
.arco-button-size-medium i,
|
|
155
|
-
.arco-button-size-medium .arco-button-text,
|
|
156
|
-
.arco-button-size-medium svg {
|
|
153
|
+
.arco-button.arco-button-size-medium .arco-button-icon,
|
|
154
|
+
.arco-button.arco-button-size-medium i,
|
|
155
|
+
.arco-button.arco-button-size-medium .arco-button-text,
|
|
156
|
+
.arco-button.arco-button-size-medium svg {
|
|
157
157
|
font-size: 0.28rem ;
|
|
158
158
|
}
|
|
159
|
-
.arco-button-size-large {
|
|
159
|
+
.arco-button.arco-button-size-large {
|
|
160
160
|
padding: 0 0.32rem ;
|
|
161
161
|
height: 0.72rem ;
|
|
162
162
|
}
|
|
163
|
-
.arco-button-size-large-is-round {
|
|
163
|
+
.arco-button.arco-button-size-large-is-round {
|
|
164
164
|
border-radius: 0.72rem ;
|
|
165
165
|
}
|
|
166
|
-
.arco-button-size-large-is-square {
|
|
166
|
+
.arco-button.arco-button-size-large-is-square {
|
|
167
167
|
border-radius: 0;
|
|
168
168
|
}
|
|
169
|
-
.arco-button-size-large .arco-button-icon,
|
|
170
|
-
.arco-button-size-large i,
|
|
171
|
-
.arco-button-size-large .arco-button-text,
|
|
172
|
-
.arco-button-size-large svg {
|
|
169
|
+
.arco-button.arco-button-size-large .arco-button-icon,
|
|
170
|
+
.arco-button.arco-button-size-large i,
|
|
171
|
+
.arco-button.arco-button-size-large .arco-button-text,
|
|
172
|
+
.arco-button.arco-button-size-large svg {
|
|
173
173
|
font-size: 0.3rem ;
|
|
174
174
|
}
|
|
175
|
-
.arco-button-size-huge {
|
|
175
|
+
.arco-button.arco-button-size-huge {
|
|
176
176
|
padding: 0 0.32rem ;
|
|
177
177
|
height: 0.88rem ;
|
|
178
178
|
}
|
|
179
|
-
.arco-button-size-huge-is-round {
|
|
179
|
+
.arco-button.arco-button-size-huge-is-round {
|
|
180
180
|
border-radius: 0.88rem ;
|
|
181
181
|
}
|
|
182
|
-
.arco-button-size-huge-is-square {
|
|
182
|
+
.arco-button.arco-button-size-huge-is-square {
|
|
183
183
|
border-radius: 0;
|
|
184
184
|
}
|
|
185
|
-
.arco-button-size-huge .arco-button-icon,
|
|
186
|
-
.arco-button-size-huge i,
|
|
187
|
-
.arco-button-size-huge .arco-button-text,
|
|
188
|
-
.arco-button-size-huge svg {
|
|
185
|
+
.arco-button.arco-button-size-huge .arco-button-icon,
|
|
186
|
+
.arco-button.arco-button-size-huge i,
|
|
187
|
+
.arco-button.arco-button-size-huge .arco-button-text,
|
|
188
|
+
.arco-button.arco-button-size-huge svg {
|
|
189
189
|
font-size: 0.32rem ;
|
|
190
190
|
}
|
|
191
191
|
.arco-button-text-android {
|
|
@@ -56,14 +56,14 @@
|
|
|
56
56
|
.use-var(border-radius, button-radius);
|
|
57
57
|
.noselect();
|
|
58
58
|
|
|
59
|
-
|
|
59
|
+
&&-inline {
|
|
60
60
|
width: auto;
|
|
61
61
|
display: inline-block;
|
|
62
62
|
}
|
|
63
63
|
|
|
64
64
|
.set-button-type(length(@type-map));
|
|
65
65
|
|
|
66
|
-
|
|
66
|
+
&&-type-ghost {
|
|
67
67
|
.button-has-border-value(currentColor);
|
|
68
68
|
}
|
|
69
69
|
|
|
@@ -101,10 +101,9 @@
|
|
|
101
101
|
.set-button-type(@index) when (@index > 0) {
|
|
102
102
|
@type: extract(@type-map, @index);
|
|
103
103
|
|
|
104
|
-
|
|
104
|
+
&&-type-@{type} {
|
|
105
105
|
.use-var(background, 'button-@{type}-background');
|
|
106
106
|
.use-var(color, 'button-@{type}-text-color');
|
|
107
|
-
.set-loading-color-var('button-@{type}-text-color');
|
|
108
107
|
&-disabled {
|
|
109
108
|
.use-var(background, 'button-@{type}-disabled-background');
|
|
110
109
|
.use-var(color, 'button-@{type}-disabled-text-color')
|
|
@@ -113,6 +112,9 @@
|
|
|
113
112
|
.use-var(background, 'button-@{type}-clicked-background');
|
|
114
113
|
}
|
|
115
114
|
}
|
|
115
|
+
&-type-@{type} {
|
|
116
|
+
.set-loading-color-var('button-@{type}-text-color');
|
|
117
|
+
}
|
|
116
118
|
|
|
117
119
|
.set-button-type(@index - 1);
|
|
118
120
|
}
|
|
@@ -120,7 +122,7 @@
|
|
|
120
122
|
.set-button-size(@index) when (@index > 0) {
|
|
121
123
|
@size: extract(@size-map, @index);
|
|
122
124
|
|
|
123
|
-
|
|
125
|
+
&&-size-@{size} {
|
|
124
126
|
.use-var(padding, "button-@{size}-padding");
|
|
125
127
|
.button-size-height("button-@{size}-height");
|
|
126
128
|
.button-text-size("button-@{size}-text-size");
|