@arco-design/mobile-react 2.32.0 → 2.34.0
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 +36 -0
- package/README.en-US.md +2 -2
- package/README.md +2 -2
- package/cjs/_helpers/hooks.js +2 -0
- package/cjs/avatar/index.js +3 -1
- package/cjs/avatar/type.d.ts +6 -0
- package/cjs/carousel/index.js +18 -1
- package/cjs/divider/style/css/index.css +6 -4
- package/cjs/divider/style/index.less +3 -1
- package/cjs/notice-bar/index.js +11 -8
- package/cjs/popover/popover-inner.js +9 -2
- package/cjs/steps/index.d.ts +1 -1
- package/cjs/steps/index.js +6 -1
- package/cjs/steps/style/css/index.css +42 -4
- package/cjs/steps/style/index.less +58 -6
- package/cjs/steps/type.d.ts +5 -0
- package/dist/index.js +77 -41
- package/dist/index.min.js +2 -2
- package/dist/style.css +32 -7
- package/dist/style.min.css +1 -1
- package/esm/_helpers/hooks.js +2 -0
- package/esm/avatar/index.js +3 -1
- package/esm/avatar/type.d.ts +6 -0
- package/esm/carousel/index.js +18 -1
- package/esm/divider/style/css/index.css +6 -4
- package/esm/divider/style/index.less +3 -1
- package/esm/notice-bar/index.js +12 -9
- package/esm/popover/popover-inner.js +9 -2
- package/esm/steps/index.d.ts +1 -1
- package/esm/steps/index.js +7 -2
- package/esm/steps/style/css/index.css +42 -4
- package/esm/steps/style/index.less +58 -6
- package/esm/steps/type.d.ts +5 -0
- package/esnext/_helpers/hooks.js +6 -2
- package/esnext/avatar/index.js +2 -2
- package/esnext/avatar/type.d.ts +6 -0
- package/esnext/carousel/index.js +13 -4
- package/esnext/divider/style/css/index.css +6 -4
- package/esnext/divider/style/index.less +3 -1
- package/esnext/notice-bar/index.js +6 -6
- package/esnext/popover/popover-inner.js +7 -2
- package/esnext/steps/index.d.ts +1 -1
- package/esnext/steps/index.js +6 -3
- package/esnext/steps/style/css/index.css +42 -4
- package/esnext/steps/style/index.less +58 -6
- package/esnext/steps/type.d.ts +5 -0
- package/package.json +3 -3
- package/umd/_helpers/hooks.js +2 -0
- package/umd/avatar/index.js +3 -1
- package/umd/avatar/type.d.ts +6 -0
- package/umd/carousel/index.js +18 -1
- package/umd/divider/style/css/index.css +6 -4
- package/umd/divider/style/index.less +3 -1
- package/umd/notice-bar/index.js +11 -8
- package/umd/popover/popover-inner.js +9 -2
- package/umd/steps/index.d.ts +1 -1
- package/umd/steps/index.js +6 -1
- package/umd/steps/style/css/index.css +42 -4
- package/umd/steps/style/index.less +58 -6
- package/umd/steps/type.d.ts +5 -0
|
@@ -1,9 +1,13 @@
|
|
|
1
|
-
@import
|
|
1
|
+
@import '../../../style/mixin.less';
|
|
2
2
|
|
|
3
3
|
.@{prefix}-steps {
|
|
4
4
|
display: flex;
|
|
5
5
|
.use-var(padding, steps-padding);
|
|
6
6
|
|
|
7
|
+
&.reverse-order {
|
|
8
|
+
flex-direction: row-reverse;
|
|
9
|
+
}
|
|
10
|
+
|
|
7
11
|
&-item {
|
|
8
12
|
position: relative;
|
|
9
13
|
display: flex;
|
|
@@ -30,6 +34,20 @@
|
|
|
30
34
|
visibility: hidden;
|
|
31
35
|
}
|
|
32
36
|
|
|
37
|
+
&:first-child &-tail::after,
|
|
38
|
+
&:last-child &-tail::before {
|
|
39
|
+
.reverse-order & {
|
|
40
|
+
visibility: hidden;
|
|
41
|
+
}
|
|
42
|
+
}
|
|
43
|
+
|
|
44
|
+
&:first-child &-tail::before,
|
|
45
|
+
&:last-child &-tail::after {
|
|
46
|
+
.reverse-order & {
|
|
47
|
+
visibility: visible;
|
|
48
|
+
}
|
|
49
|
+
}
|
|
50
|
+
|
|
33
51
|
&-tail {
|
|
34
52
|
position: absolute;
|
|
35
53
|
display: flex;
|
|
@@ -50,7 +68,7 @@
|
|
|
50
68
|
.use-var(padding, steps-tail-horizontal-padding);
|
|
51
69
|
|
|
52
70
|
&::after {
|
|
53
|
-
content:
|
|
71
|
+
content: '';
|
|
54
72
|
width: 100%;
|
|
55
73
|
.use-var(border-radius, steps-tail-border-radius);
|
|
56
74
|
}
|
|
@@ -59,7 +77,7 @@
|
|
|
59
77
|
&-align-center {
|
|
60
78
|
&::before,
|
|
61
79
|
&::after {
|
|
62
|
-
content:
|
|
80
|
+
content: '';
|
|
63
81
|
width: 50%;
|
|
64
82
|
}
|
|
65
83
|
&::before {
|
|
@@ -90,7 +108,7 @@
|
|
|
90
108
|
.use-var(padding, steps-tail-vertical-padding);
|
|
91
109
|
|
|
92
110
|
&::after {
|
|
93
|
-
content:
|
|
111
|
+
content: '';
|
|
94
112
|
height: 100%;
|
|
95
113
|
.use-var(border-radius, steps-tail-border-radius);
|
|
96
114
|
}
|
|
@@ -99,7 +117,7 @@
|
|
|
99
117
|
&-align-center {
|
|
100
118
|
&::before,
|
|
101
119
|
&::after {
|
|
102
|
-
content:
|
|
120
|
+
content: '';
|
|
103
121
|
height: 50%;
|
|
104
122
|
}
|
|
105
123
|
&::before {
|
|
@@ -127,6 +145,20 @@
|
|
|
127
145
|
&-align-center&-status-error::before {
|
|
128
146
|
.use-var(background, steps-tail-finish-background);
|
|
129
147
|
}
|
|
148
|
+
|
|
149
|
+
&-status-finish::before,
|
|
150
|
+
&-status-process::after,
|
|
151
|
+
&-align-center&-status-error::after {
|
|
152
|
+
.reverse-order & {
|
|
153
|
+
.use-var(background, steps-tail-finish-background);
|
|
154
|
+
}
|
|
155
|
+
}
|
|
156
|
+
&-status-process::before,
|
|
157
|
+
&-align-center&-status-error::before {
|
|
158
|
+
.reverse-order & {
|
|
159
|
+
.use-var(background, steps-tail-standard-background);
|
|
160
|
+
}
|
|
161
|
+
}
|
|
130
162
|
}
|
|
131
163
|
|
|
132
164
|
&-custom-icon,
|
|
@@ -206,7 +238,6 @@
|
|
|
206
238
|
}
|
|
207
239
|
|
|
208
240
|
&-content {
|
|
209
|
-
|
|
210
241
|
.horizontal & {
|
|
211
242
|
.use-var(margin-top, steps-horizontal-content-margin-top);
|
|
212
243
|
&-align-center {
|
|
@@ -262,6 +293,10 @@
|
|
|
262
293
|
}
|
|
263
294
|
|
|
264
295
|
&.vertical {
|
|
296
|
+
&.reverse-order {
|
|
297
|
+
flex-direction: column-reverse;
|
|
298
|
+
}
|
|
299
|
+
|
|
265
300
|
flex-direction: column;
|
|
266
301
|
.use-var(padding-bottom, steps-vertical-padding-bottom);
|
|
267
302
|
.use-var-with-rtl(padding-left, steps-vertical-padding-left);
|
|
@@ -307,6 +342,23 @@
|
|
|
307
342
|
.use-var(background, dark-steps-tail-finish-background);
|
|
308
343
|
}
|
|
309
344
|
}
|
|
345
|
+
&-status-finish::before,
|
|
346
|
+
&-status-process::after,
|
|
347
|
+
&-align-center&-status-error::after {
|
|
348
|
+
.reverse-order & {
|
|
349
|
+
@{arco-dark-mode-selector} & {
|
|
350
|
+
.use-var(background, dark-steps-tail-finish-background);
|
|
351
|
+
}
|
|
352
|
+
}
|
|
353
|
+
}
|
|
354
|
+
&-status-process::before,
|
|
355
|
+
&-align-center&-status-error::before {
|
|
356
|
+
.reverse-order & {
|
|
357
|
+
@{arco-dark-mode-selector} & {
|
|
358
|
+
.use-var(background, dark-steps-tail-standard-background);
|
|
359
|
+
}
|
|
360
|
+
}
|
|
361
|
+
}
|
|
310
362
|
}
|
|
311
363
|
&-icon {
|
|
312
364
|
.number.finish & {
|
package/umd/steps/type.d.ts
CHANGED
|
@@ -32,6 +32,11 @@ export interface StepsProps {
|
|
|
32
32
|
* @en Custom classname
|
|
33
33
|
*/
|
|
34
34
|
className?: string;
|
|
35
|
+
/**
|
|
36
|
+
* 顺序反转，设置为true后，顺序将从右到左，从下到上
|
|
37
|
+
* @en reverse the order from right to left and from bottom to top
|
|
38
|
+
*/
|
|
39
|
+
reverseOrder?: boolean;
|
|
35
40
|
/**
|
|
36
41
|
* 自定义样式，如果想用 css 控制 icon 颜色，可使用公共 mixin '.set-steps-color(@color)'
|
|
37
42
|
* @en Custom stylesheet. If want to use CSS to control icon color, use public mixin '.set-steps-color(@color)'
|