@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.
Files changed (12) hide show
  1. package/CHANGELOG.md +11 -0
  2. package/README.en-US.md +2 -2
  3. package/README.md +2 -2
  4. package/cjs/button/style/css/index.css +64 -64
  5. package/cjs/button/style/index.less +7 -5
  6. package/dist/style.css +64 -64
  7. package/dist/style.min.css +1 -1
  8. package/esm/button/style/css/index.css +64 -64
  9. package/esm/button/style/index.less +7 -5
  10. package/package.json +3 -3
  11. package/umd/button/style/css/index.css +64 -64
  12. package/umd/button/style/index.less +7 -5
package/CHANGELOG.md CHANGED
@@ -3,6 +3,17 @@
3
3
  All notable changes to this project will be documented in this file.
4
4
  See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
5
5
 
6
+ ## [2.21.2](https://github.com/arco-design/arco-design-mobile/compare/@arco-design/mobile-react@2.21.1...@arco-design/mobile-react@2.21.2) (2022-09-07)
7
+
8
+
9
+ ### Bug Fixes
10
+
11
+ * `Button` fix style when use reset.less ([bb05f2c](https://github.com/arco-design/arco-design-mobile/commit/bb05f2c279089115f73fc39c523c9767ed37a8c4))
12
+
13
+
14
+
15
+
16
+
6
17
  ## [2.21.1](https://github.com/arco-design/arco-design-mobile/compare/@arco-design/mobile-react@2.21.0...@arco-design/mobile-react@2.21.1) (2022-09-01)
7
18
 
8
19
 
package/README.en-US.md CHANGED
@@ -59,8 +59,8 @@ React & ReactDOM: **<a href="https://reactjs.org/docs/cdn-links.html" target="_b
59
59
  React Transition Group: **<a href="https://reactcommunity.org/react-transition-group/" target="_blank">Click here</a>**
60
60
 
61
61
  ```
62
- <link ref="stylesheet" href="https://unpkg.com/@arco-design/mobile-react@2.21.0/dist/style.min.css">
63
- <script src="https://unpkg.com/@arco-design/mobile-react@2.21.0/dist/index.min.js"></script>
62
+ <link ref="stylesheet" href="https://unpkg.com/@arco-design/mobile-react@2.21.1/dist/style.min.css">
63
+ <script src="https://unpkg.com/@arco-design/mobile-react@2.21.1/dist/index.min.js"></script>
64
64
  ```
65
65
 
66
66
  ## Full import
package/README.md CHANGED
@@ -59,8 +59,8 @@ React & ReactDOM： **<a href="https://reactjs.org/docs/cdn-links.html" target="
59
59
  React Transition Group： **<a href="https://reactcommunity.org/react-transition-group/" target="_blank">戳这里获取</a>**
60
60
 
61
61
  ```
62
- <link ref="stylesheet" href="https://unpkg.com/@arco-design/mobile-react@2.21.0/dist/style.min.css">
63
- <script src="https://unpkg.com/@arco-design/mobile-react@2.21.0/dist/index.min.js"></script>
62
+ <link ref="stylesheet" href="https://unpkg.com/@arco-design/mobile-react@2.21.1/dist/style.min.css">
63
+ <script src="https://unpkg.com/@arco-design/mobile-react@2.21.1/dist/index.min.js"></script>
64
64
  ```
65
65
 
66
66
  ## 引入全部
package/cjs/button/style/css/index.css CHANGED
@@ -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-ghost-disabled {
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-default-disabled {
65
- background: #E8F3FF ;
66
- color: #94bfff ;
71
+ .arco-button.arco-button-type-primary {
72
+ background: #165dff ;
73
+ color: #fff ;
67
74
  }
68
- .arco-button-type-default-active {
75
+ .arco-button.arco-button-type-primary-disabled {
69
76
  background: #94bfff ;
77
+ color: #E8F3FF ;
70
78
  }
71
- .arco-button-type-primary {
72
- background: #165dff ;
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-primary-disabled {
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 {
package/cjs/button/style/index.less CHANGED
@@ -56,14 +56,14 @@
56
56
  .use-var(border-radius, button-radius);
57
57
  .noselect();
58
58
 
59
- &-inline {
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
- &-type-ghost {
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
- &-type-@{type} {
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
- &-size-@{size} {
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/dist/style.css CHANGED
@@ -1128,14 +1128,21 @@ samp {
1128
1128
  user-select: none;
1129
1129
  /* Non-prefixed version, currently*/
1130
1130
  }
1131
- .arco-button-inline {
1131
+ .arco-button.arco-button-inline {
1132
1132
  width: auto;
1133
1133
  display: inline-block;
1134
1134
  }
1135
- .arco-button-type-ghost {
1135
+ .arco-button.arco-button-type-ghost {
1136
1136
  background: transparent ;
1137
1137
  color: #165dff ;
1138
1138
  }
1139
+ .arco-button.arco-button-type-ghost-disabled {
1140
+ background: transparent ;
1141
+ color: #94bfff ;
1142
+ }
1143
+ .arco-button.arco-button-type-ghost-active {
1144
+ background: #e8f3ff ;
1145
+ }
1139
1146
  .arco-button-type-ghost .bg-color-with-config {
1140
1147
  background: #165dff;
1141
1148
  }
@@ -1148,17 +1155,17 @@ samp {
1148
1155
  .arco-button-type-ghost .stroke-color-with-config {
1149
1156
  stroke: #165dff;
1150
1157
  }
1151
- .arco-button-type-ghost-disabled {
1152
- background: transparent ;
1153
- color: #94bfff ;
1154
- }
1155
- .arco-button-type-ghost-active {
1156
- background: #e8f3ff ;
1157
- }
1158
- .arco-button-type-default {
1158
+ .arco-button.arco-button-type-default {
1159
1159
  background: #E8F3FF ;
1160
1160
  color: #165dff ;
1161
1161
  }
1162
+ .arco-button.arco-button-type-default-disabled {
1163
+ background: #E8F3FF ;
1164
+ color: #94bfff ;
1165
+ }
1166
+ .arco-button.arco-button-type-default-active {
1167
+ background: #94bfff ;
1168
+ }
1162
1169
  .arco-button-type-default .bg-color-with-config {
1163
1170
  background: #165dff;
1164
1171
  }
@@ -1171,16 +1178,16 @@ samp {
1171
1178
  .arco-button-type-default .stroke-color-with-config {
1172
1179
  stroke: #165dff;
1173
1180
  }
1174
- .arco-button-type-default-disabled {
1175
- background: #E8F3FF ;
1176
- color: #94bfff ;
1181
+ .arco-button.arco-button-type-primary {
1182
+ background: #165dff ;
1183
+ color: #fff ;
1177
1184
  }
1178
- .arco-button-type-default-active {
1185
+ .arco-button.arco-button-type-primary-disabled {
1179
1186
  background: #94bfff ;
1187
+ color: #E8F3FF ;
1180
1188
  }
1181
- .arco-button-type-primary {
1182
- background: #165dff ;
1183
- color: #fff ;
1189
+ .arco-button.arco-button-type-primary-active {
1190
+ background: #0E42D2 ;
1184
1191
  }
1185
1192
  .arco-button-type-primary .bg-color-with-config {
1186
1193
  background: #fff;
@@ -1194,108 +1201,101 @@ samp {
1194
1201
  .arco-button-type-primary .stroke-color-with-config {
1195
1202
  stroke: #fff;
1196
1203
  }
1197
- .arco-button-type-primary-disabled {
1198
- background: #94bfff ;
1199
- color: #E8F3FF ;
1200
- }
1201
- .arco-button-type-primary-active {
1202
- background: #0E42D2 ;
1203
- }
1204
- .arco-button-type-ghost {
1204
+ .arco-button.arco-button-type-ghost {
1205
1205
  border: 1PX solid currentColor;
1206
1206
  }
1207
- .arco-button-type-ghost.half-border {
1207
+ .arco-button.arco-button-type-ghost.half-border {
1208
1208
  border-width: 0;
1209
1209
  box-shadow: 0 0 0 1PX currentColor inset;
1210
1210
  }
1211
1211
  @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) {
1212
- .arco-button-type-ghost.half-border {
1212
+ .arco-button.arco-button-type-ghost.half-border {
1213
1213
  box-shadow: 0 0 0 0.5PX currentColor inset;
1214
1214
  }
1215
1215
  }
1216
- .ios .arco-button-type-ghost.half-border,
1217
- .arco-button-type-ghost.half-border.ios {
1216
+ .ios .arco-button.arco-button-type-ghost.half-border,
1217
+ .arco-button.arco-button-type-ghost.half-border.ios {
1218
1218
  box-shadow: none;
1219
1219
  border: 0.5PX solid currentColor;
1220
1220
  }
1221
- .arco-button-size-mini {
1221
+ .arco-button.arco-button-size-mini {
1222
1222
  padding: 0 0.16rem ;
1223
1223
  height: 0.48rem ;
1224
1224
  }
1225
- .arco-button-size-mini-is-round {
1225
+ .arco-button.arco-button-size-mini-is-round {
1226
1226
  border-radius: 0.48rem ;
1227
1227
  }
1228
- .arco-button-size-mini-is-square {
1228
+ .arco-button.arco-button-size-mini-is-square {
1229
1229
  border-radius: 0;
1230
1230
  }
1231
- .arco-button-size-mini .arco-button-icon,
1232
- .arco-button-size-mini i,
1233
- .arco-button-size-mini .arco-button-text,
1234
- .arco-button-size-mini svg {
1231
+ .arco-button.arco-button-size-mini .arco-button-icon,
1232
+ .arco-button.arco-button-size-mini i,
1233
+ .arco-button.arco-button-size-mini .arco-button-text,
1234
+ .arco-button.arco-button-size-mini svg {
1235
1235
  font-size: 0.24rem ;
1236
1236
  }
1237
- .arco-button-size-small {
1237
+ .arco-button.arco-button-size-small {
1238
1238
  padding: 0 0.16rem ;
1239
1239
  height: 0.56rem ;
1240
1240
  }
1241
- .arco-button-size-small-is-round {
1241
+ .arco-button.arco-button-size-small-is-round {
1242
1242
  border-radius: 0.56rem ;
1243
1243
  }
1244
- .arco-button-size-small-is-square {
1244
+ .arco-button.arco-button-size-small-is-square {
1245
1245
  border-radius: 0;
1246
1246
  }
1247
- .arco-button-size-small .arco-button-icon,
1248
- .arco-button-size-small i,
1249
- .arco-button-size-small .arco-button-text,
1250
- .arco-button-size-small svg {
1247
+ .arco-button.arco-button-size-small .arco-button-icon,
1248
+ .arco-button.arco-button-size-small i,
1249
+ .arco-button.arco-button-size-small .arco-button-text,
1250
+ .arco-button.arco-button-size-small svg {
1251
1251
  font-size: 0.28rem ;
1252
1252
  }
1253
- .arco-button-size-medium {
1253
+ .arco-button.arco-button-size-medium {
1254
1254
  padding: 0 0.32rem ;
1255
1255
  height: 0.64rem ;
1256
1256
  }
1257
- .arco-button-size-medium-is-round {
1257
+ .arco-button.arco-button-size-medium-is-round {
1258
1258
  border-radius: 0.64rem ;
1259
1259
  }
1260
- .arco-button-size-medium-is-square {
1260
+ .arco-button.arco-button-size-medium-is-square {
1261
1261
  border-radius: 0;
1262
1262
  }
1263
- .arco-button-size-medium .arco-button-icon,
1264
- .arco-button-size-medium i,
1265
- .arco-button-size-medium .arco-button-text,
1266
- .arco-button-size-medium svg {
1263
+ .arco-button.arco-button-size-medium .arco-button-icon,
1264
+ .arco-button.arco-button-size-medium i,
1265
+ .arco-button.arco-button-size-medium .arco-button-text,
1266
+ .arco-button.arco-button-size-medium svg {
1267
1267
  font-size: 0.28rem ;
1268
1268
  }
1269
- .arco-button-size-large {
1269
+ .arco-button.arco-button-size-large {
1270
1270
  padding: 0 0.32rem ;
1271
1271
  height: 0.72rem ;
1272
1272
  }
1273
- .arco-button-size-large-is-round {
1273
+ .arco-button.arco-button-size-large-is-round {
1274
1274
  border-radius: 0.72rem ;
1275
1275
  }
1276
- .arco-button-size-large-is-square {
1276
+ .arco-button.arco-button-size-large-is-square {
1277
1277
  border-radius: 0;
1278
1278
  }
1279
- .arco-button-size-large .arco-button-icon,
1280
- .arco-button-size-large i,
1281
- .arco-button-size-large .arco-button-text,
1282
- .arco-button-size-large svg {
1279
+ .arco-button.arco-button-size-large .arco-button-icon,
1280
+ .arco-button.arco-button-size-large i,
1281
+ .arco-button.arco-button-size-large .arco-button-text,
1282
+ .arco-button.arco-button-size-large svg {
1283
1283
  font-size: 0.3rem ;
1284
1284
  }
1285
- .arco-button-size-huge {
1285
+ .arco-button.arco-button-size-huge {
1286
1286
  padding: 0 0.32rem ;
1287
1287
  height: 0.88rem ;
1288
1288
  }
1289
- .arco-button-size-huge-is-round {
1289
+ .arco-button.arco-button-size-huge-is-round {
1290
1290
  border-radius: 0.88rem ;
1291
1291
  }
1292
- .arco-button-size-huge-is-square {
1292
+ .arco-button.arco-button-size-huge-is-square {
1293
1293
  border-radius: 0;
1294
1294
  }
1295
- .arco-button-size-huge .arco-button-icon,
1296
- .arco-button-size-huge i,
1297
- .arco-button-size-huge .arco-button-text,
1298
- .arco-button-size-huge svg {
1295
+ .arco-button.arco-button-size-huge .arco-button-icon,
1296
+ .arco-button.arco-button-size-huge i,
1297
+ .arco-button.arco-button-size-huge .arco-button-text,
1298
+ .arco-button.arco-button-size-huge svg {
1299
1299
  font-size: 0.32rem ;
1300
1300
  }
1301
1301
  .arco-button-text-android {