@arco-design/mobile-react 2.22.0 → 2.22.3

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 (72) hide show
  1. package/CHANGELOG.md +26 -0
  2. package/README.en-US.md +2 -2
  3. package/README.md +2 -2
  4. package/cjs/action-sheet/style/css/index.css +2 -2
  5. package/cjs/action-sheet/style/index.less +1 -1
  6. package/cjs/carousel/index.d.ts +6 -0
  7. package/cjs/carousel/index.js +6 -4
  8. package/cjs/dialog/style/css/index.css +2 -2
  9. package/cjs/dialog/style/index.less +1 -1
  10. package/cjs/pull-refresh/android-pull-refresh.js +2 -0
  11. package/cjs/pull-refresh/ios-pull-refresh.js +3 -2
  12. package/cjs/pull-refresh/model.d.ts +6 -2
  13. package/cjs/steps/demo/style/css/mobile.css +8 -2
  14. package/cjs/steps/index.d.ts +1 -1
  15. package/cjs/steps/index.js +5 -1
  16. package/cjs/steps/step.js +5 -3
  17. package/cjs/steps/style/css/index.css +78 -23
  18. package/cjs/steps/style/index.less +92 -24
  19. package/cjs/steps/type.d.ts +12 -0
  20. package/cjs/tabs/index.js +3 -2
  21. package/cjs/tabs/style/css/index.css +8 -8
  22. package/cjs/tabs/style/index.less +4 -4
  23. package/dist/index.js +107 -95
  24. package/dist/index.min.js +3 -3
  25. package/dist/style.css +87 -35
  26. package/dist/style.min.css +1 -1
  27. package/esm/action-sheet/style/css/index.css +2 -2
  28. package/esm/action-sheet/style/index.less +1 -1
  29. package/esm/carousel/index.d.ts +6 -0
  30. package/esm/carousel/index.js +6 -4
  31. package/esm/dialog/style/css/index.css +2 -2
  32. package/esm/dialog/style/index.less +1 -1
  33. package/esm/pull-refresh/android-pull-refresh.js +2 -0
  34. package/esm/pull-refresh/ios-pull-refresh.js +3 -2
  35. package/esm/pull-refresh/model.d.ts +6 -2
  36. package/esm/steps/demo/style/css/mobile.css +8 -2
  37. package/esm/steps/index.d.ts +1 -1
  38. package/esm/steps/index.js +5 -1
  39. package/esm/steps/step.js +5 -3
  40. package/esm/steps/style/css/index.css +78 -23
  41. package/esm/steps/style/index.less +92 -24
  42. package/esm/steps/type.d.ts +12 -0
  43. package/esm/tabs/index.js +4 -3
  44. package/esm/tabs/style/css/index.css +8 -8
  45. package/esm/tabs/style/index.less +4 -4
  46. package/package.json +3 -3
  47. package/tokens/app/arcodesign/default/css-variables.less +7 -3
  48. package/tokens/app/arcodesign/default/index.d.ts +4 -0
  49. package/tokens/app/arcodesign/default/index.js +7 -3
  50. package/tokens/app/arcodesign/default/index.json +58 -10
  51. package/tokens/app/arcodesign/default/index.less +7 -3
  52. package/tokens/mixin/index.less +1 -1
  53. package/tools/flexible.js +82 -63
  54. package/umd/action-sheet/style/css/index.css +2 -2
  55. package/umd/action-sheet/style/index.less +1 -1
  56. package/umd/carousel/index.d.ts +6 -0
  57. package/umd/carousel/index.js +6 -4
  58. package/umd/dialog/style/css/index.css +2 -2
  59. package/umd/dialog/style/index.less +1 -1
  60. package/umd/pull-refresh/android-pull-refresh.js +2 -0
  61. package/umd/pull-refresh/ios-pull-refresh.js +3 -2
  62. package/umd/pull-refresh/model.d.ts +6 -2
  63. package/umd/steps/demo/style/css/mobile.css +8 -2
  64. package/umd/steps/index.d.ts +1 -1
  65. package/umd/steps/index.js +5 -1
  66. package/umd/steps/step.js +5 -3
  67. package/umd/steps/style/css/index.css +78 -23
  68. package/umd/steps/style/index.less +92 -24
  69. package/umd/steps/type.d.ts +12 -0
  70. package/umd/tabs/index.js +3 -2
  71. package/umd/tabs/style/css/index.css +8 -8
  72. package/umd/tabs/style/index.less +4 -4
package/CHANGELOG.md CHANGED
@@ -3,6 +3,32 @@
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.22.3](https://github.com/arco-design/arco-design-mobile/compare/@arco-design/mobile-react@2.22.2...@arco-design/mobile-react@2.22.3) (2022-11-23)
7
+
8
+
9
+ ### Bug Fixes
10
+
11
+ * `Carousel` supports autoPlayDirection ([#72](https://github.com/arco-design/arco-design-mobile/issues/72)) ([527aaf4](https://github.com/arco-design/arco-design-mobile/commit/527aaf4bdf86fe4cf995bd8e4bd2580e9db8c942))
12
+ * flexible.js support umd ([#73](https://github.com/arco-design/arco-design-mobile/issues/73)) ([d3f35c0](https://github.com/arco-design/arco-design-mobile/commit/d3f35c093a579bb404fff91dbf6437cdd93f19f7))
13
+
14
+
15
+
16
+
17
+
18
+ ## [2.22.2](https://github.com/arco-design/arco-design-mobile/compare/@arco-design/mobile-react@2.22.0...@arco-design/mobile-react@2.22.2) (2022-11-09)
19
+
20
+
21
+ ### Bug Fixes
22
+
23
+ * `PullRefresh` support custom style ([edac495](https://github.com/arco-design/arco-design-mobile/commit/edac4954526b8f2e3a86c9742752222e19f899f8))
24
+ * `Steps` optimize style & support custom alignment ([617c570](https://github.com/arco-design/arco-design-mobile/commit/617c57003135215787897b48c07d2b674c482828))
25
+ * `Tabs` fix touch event on foldable screen ([a67fa71](https://github.com/arco-design/arco-design-mobile/commit/a67fa71c8944e27aa43d6353e4a24e4ba676cec3))
26
+ * optimize .text-medium mixin ([ab62ab2](https://github.com/arco-design/arco-design-mobile/commit/ab62ab2cdb51174cbd2106467bbf1a3db4694982))
27
+
28
+
29
+
30
+
31
+
6
32
  # [2.22.0](https://github.com/arco-design/arco-design-mobile/compare/@arco-design/mobile-react@2.21.3...@arco-design/mobile-react@2.22.0) (2022-10-28)
7
33
 
8
34
 
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.3/dist/style.min.css">
63
- <script src="https://unpkg.com/@arco-design/mobile-react@2.21.3/dist/index.min.js"></script>
62
+ <link ref="stylesheet" href="https://unpkg.com/@arco-design/mobile-react@2.22.2/dist/style.min.css">
63
+ <script src="https://unpkg.com/@arco-design/mobile-react@2.22.2/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.3/dist/style.min.css">
63
- <script src="https://unpkg.com/@arco-design/mobile-react@2.21.3/dist/index.min.js"></script>
62
+ <link ref="stylesheet" href="https://unpkg.com/@arco-design/mobile-react@2.22.2/dist/style.min.css">
63
+ <script src="https://unpkg.com/@arco-design/mobile-react@2.22.2/dist/index.min.js"></script>
64
64
  ```
65
65
 
66
66
  ## 引入全部
@@ -46,8 +46,8 @@
46
46
  .arco-action-sheet-title.android,
47
47
  .arco-action-sheet-title.system-android {
48
48
  font-weight: 400;
49
- -webkit-text-stroke: 0.3PX #1d2129;
50
- text-stroke: 0.3PX #1d2129;
49
+ -webkit-text-stroke: 0.3PX currentColor;
50
+ text-stroke: 0.3PX currentColor;
51
51
  }
52
52
  .arco-action-sheet-sub-title {
53
53
  color: #86909c ;
@@ -11,7 +11,7 @@
11
11
 
12
12
  &-title {
13
13
  .use-var(font-size, action-sheet-title-font-size);
14
- .text-medium-var(font-color);
14
+ .text-medium();
15
15
  }
16
16
 
17
17
  &-sub-title {
@@ -66,6 +66,12 @@ export interface CarouselProps {
66
66
  * @default true
67
67
  */
68
68
  autoPlay?: boolean;
69
+ /**
70
+ * 自动播放方向
71
+ * @en Direction when playing auto
72
+ * @default "normal"
73
+ */
74
+ autoPlayDirection?: 'normal' | 'reverse';
69
75
  /**
70
76
  * 是否响应手势滑动
71
77
  * @en Whether to respond to gesture swipe
@@ -42,6 +42,8 @@ var Carousel = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
42
42
  loop = _props$loop === void 0 ? true : _props$loop,
43
43
  _props$autoPlay = props.autoPlay,
44
44
  autoPlay = _props$autoPlay === void 0 ? true : _props$autoPlay,
45
+ _props$autoPlayDirect = props.autoPlayDirection,
46
+ autoPlayDirection = _props$autoPlayDirect === void 0 ? 'normal' : _props$autoPlayDirect,
45
47
  _props$swipeable = props.swipeable,
46
48
  swipeable = _props$swipeable === void 0 ? true : _props$swipeable,
47
49
  _props$stayDuration = props.stayDuration,
@@ -164,7 +166,7 @@ var Carousel = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
164
166
  transformsRef = _useRefState4[1],
165
167
  setTransforms = _useRefState4[2];
166
168
 
167
- var _useRefState5 = (0, _helpers.useRefState)('left'),
169
+ var _useRefState5 = (0, _helpers.useRefState)(autoPlayDirection === 'reverse' && autoPlay ? 'right' : 'left'),
168
170
  direction = _useRefState5[0],
169
171
  directionRef = _useRefState5[1],
170
172
  setStateDirection = _useRefState5[2];
@@ -401,7 +403,7 @@ var Carousel = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
401
403
  return function () {
402
404
  clear();
403
405
  };
404
- }, [userSetBoxWidth, userSetBoxHeight, childWidth, childHeight, stayDuration, noInterval]);
406
+ }, [userSetBoxWidth, userSetBoxHeight, childWidth, childHeight, stayDuration, noInterval, autoPlayDirection]);
405
407
  (0, _helpers.useUpdateEffect)(function () {
406
408
  if (currentIndex !== void 0) {
407
409
  jumpTo(currentIndex);
@@ -541,7 +543,7 @@ var Carousel = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
541
543
  var changedIndex = newIndex !== oldIndex ? getShownIndex(newIndex) : -1;
542
544
 
543
545
  if (autoJump) {
544
- setDirection('left');
546
+ setDirection(autoPlayDirection === 'reverse' ? 'right' : 'left');
545
547
  } else if (newIndex === indexRef.current) {
546
548
  setDirection(distanceRef.current > 0 ? 'right' : 'left');
547
549
  } else {
@@ -595,7 +597,7 @@ var Carousel = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
595
597
  }
596
598
 
597
599
  timerRef.current = delayTimeout(function () {
598
- jumpTo(indexRef.current + 1);
600
+ jumpTo(autoPlayDirection === 'reverse' ? indexRef.current - 1 : indexRef.current + 1);
599
601
  }, stayDuration);
600
602
  }
601
603
 
@@ -126,8 +126,8 @@
126
126
  .arco-dialog-header.ios.android,
127
127
  .arco-dialog-header.ios.system-android {
128
128
  font-weight: 400;
129
- -webkit-text-stroke: 0.3PX #1d2129;
130
- text-stroke: 0.3PX #1d2129;
129
+ -webkit-text-stroke: 0.3PX currentColor;
130
+ text-stroke: 0.3PX currentColor;
131
131
  }
132
132
  .arco-dialog-header.ios.only-title {
133
133
  padding-bottom: 0.4rem ;
@@ -105,7 +105,7 @@
105
105
  .use-var(padding-right, dialog-ios-horizontal-padding);
106
106
  .use-var(font-size, dialog-header-ios-font-size);
107
107
  .use-var(line-height, dialog-header-ios-line-height);
108
- .text-medium-var(dialog-header-ios-color);
108
+ .text-medium();
109
109
 
110
110
  &.only-title {
111
111
  .use-var(padding-bottom, dialog-ios-vertical-padding);
@@ -36,6 +36,7 @@ var PullRefresh = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
36
36
  locale = _useContext$locale === void 0 ? _mobileUtils.defaultLocale : _useContext$locale;
37
37
 
38
38
  var className = props.className,
39
+ style = props.style,
39
40
  children = props.children,
40
41
  _props$loosingText = props.loosingText,
41
42
  loosingText = _props$loosingText === void 0 ? /*#__PURE__*/_react.default.createElement("div", {
@@ -272,6 +273,7 @@ var PullRefresh = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
272
273
  className: (0, _mobileUtils.cls)(prefixCls + "-pull-refresh all-border-box is-android", className, {
273
274
  'is-disabled': (disabled || !touching && useHideAsNestedScroll) && status !== _model.PullRefreshStatus.Loading
274
275
  }),
276
+ style: style,
275
277
  ref: domRef
276
278
  }, /*#__PURE__*/_react.default.createElement("div", {
277
279
  className: (0, _mobileUtils.cls)(prefixCls + "-pull-refresh-place"),
@@ -35,6 +35,7 @@ var PullRefresh = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
35
35
 
36
36
  var animationRef = (0, _react.useRef)(0);
37
37
  var className = props.className,
38
+ style = props.style,
38
39
  children = props.children,
39
40
  _props$loadingText = props.loadingText,
40
41
  loadingText = _props$loadingText === void 0 ? /*#__PURE__*/_react.default.createElement("div", {
@@ -214,9 +215,9 @@ var PullRefresh = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
214
215
  'is-disabled': disabled || !touching && useHideAsNestedScroll
215
216
  }),
216
217
  ref: domRef,
217
- style: contentHeight > 0 ? {
218
+ style: contentHeight > 0 ? (0, _extends2.default)({
218
219
  height: contentHeight
219
- } : {}
220
+ }, style || {}) : style
220
221
  }, /*#__PURE__*/_react.default.createElement("div", {
221
222
  className: (0, _mobileUtils.cls)(prefixCls + "-pull-refresh-content-wrapper")
222
223
  }, /*#__PURE__*/_react.default.createElement("div", {
@@ -1,4 +1,4 @@
1
- import type { ReactNode } from 'react';
1
+ import type { CSSProperties, ReactNode } from 'react';
2
2
  export interface PullRefreshRef {
3
3
  /**
4
4
  * 最外层元素 DOM
@@ -32,9 +32,13 @@ export interface PullRefreshBasicProps {
32
32
  /**
33
33
  * 样式类名
34
34
  * @en Custom classname
35
- * @default ""
36
35
  */
37
36
  className?: string;
37
+ /**
38
+ * 自定义样式
39
+ * @en Custom style
40
+ */
41
+ style?: CSSProperties;
38
42
  /**
39
43
  * 是否禁用
40
44
  * @en Whether to be disabled
@@ -30,7 +30,10 @@
30
30
  #demo-steps #demo-order-7 .process-title-color-with-config {
31
31
  color: #FFB400;
32
32
  }
33
- #demo-steps #demo-order-7 .finish-tail-color-with-config:after {
33
+ #demo-steps #demo-order-7 .finish-tail-color-with-config::before,
34
+ #demo-steps #demo-order-7 .finish-tail-color-with-config::after,
35
+ #demo-steps #demo-order-7 .process-tail-color-with-config::before,
36
+ #demo-steps #demo-order-7 .error-tail-color-with-config::before {
34
37
  background: #FFB400;
35
38
  }
36
39
  #demo-steps #demo-order-8 .demo-svg .arco-steps-item-custom-icon {
@@ -57,7 +60,10 @@
57
60
  #demo-steps #demo-order-8 .demo-svg .process-title-color-with-config {
58
61
  color: #165DFF;
59
62
  }
60
- #demo-steps #demo-order-8 .demo-svg .finish-tail-color-with-config:after {
63
+ #demo-steps #demo-order-8 .demo-svg .finish-tail-color-with-config::before,
64
+ #demo-steps #demo-order-8 .demo-svg .finish-tail-color-with-config::after,
65
+ #demo-steps #demo-order-8 .demo-svg .process-tail-color-with-config::before,
66
+ #demo-steps #demo-order-8 .demo-svg .error-tail-color-with-config::before {
61
67
  background: #165DFF;
62
68
  }
63
69
  #demo-steps #demo-order-8 .demo-svg .arco-steps-item-custom-icon {
@@ -1,7 +1,7 @@
1
1
  import React from 'react';
2
2
  import { StepsProps, StepsRef } from './type';
3
3
  export * from './type';
4
- export declare const StepsContext: React.Context<Pick<StepsProps, "direction" | "status" | "current" | "iconType"> & {
4
+ export declare const StepsContext: React.Context<Pick<StepsProps, "direction" | "status" | "current" | "align" | "iconType"> & {
5
5
  index?: number | undefined;
6
6
  changeIndex: (newIndex: number) => void;
7
7
  }>;
@@ -44,6 +44,7 @@ var Steps = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
44
44
  children = props.children,
45
45
  _props$direction = props.direction,
46
46
  direction = _props$direction === void 0 ? 'horizontal' : _props$direction,
47
+ userSetAlign = props.align,
47
48
  _props$iconType = props.iconType,
48
49
  iconType = _props$iconType === void 0 ? 'number' : _props$iconType,
49
50
  current = props.current,
@@ -54,6 +55,8 @@ var Steps = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
54
55
  items = props.items,
55
56
  onClick = props.onClick,
56
57
  onChange = props.onChange;
58
+ var defaultAlign = direction === 'vertical' ? 'start' : 'center';
59
+ var align = userSetAlign !== void 0 ? userSetAlign : defaultAlign;
57
60
 
58
61
  var _useState = (0, _react.useState)(Number(defaultIndex)),
59
62
  innerIndex = _useState[0],
@@ -89,11 +92,12 @@ var Steps = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
89
92
  direction: direction,
90
93
  index: index,
91
94
  status: activeIndex === index ? status : void 0,
95
+ align: align,
92
96
  changeIndex: changeIndex
93
97
  },
94
98
  key: index
95
99
  }, child);
96
- }, [iconType, activeIndex, direction]);
100
+ }, [iconType, activeIndex, direction, align]);
97
101
  return /*#__PURE__*/_react.default.createElement(_contextProvider.ContextLayout, null, function (_ref) {
98
102
  var prefixCls = _ref.prefixCls;
99
103
  return /*#__PURE__*/_react.default.createElement("div", {
package/cjs/steps/step.js CHANGED
@@ -29,9 +29,11 @@ var Step = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
29
29
  _useContext$index = _useContext.index,
30
30
  index = _useContext$index === void 0 ? 0 : _useContext$index,
31
31
  contextStatus = _useContext.status,
32
+ contextAlign = _useContext.align,
32
33
  changeIndex = _useContext.changeIndex;
33
34
 
34
35
  var status = props.status || contextStatus;
36
+ var align = props.align || contextAlign;
35
37
  var domRef = (0, _react.useRef)(null);
36
38
  (0, _react.useImperativeHandle)(ref, function () {
37
39
  return {
@@ -70,12 +72,12 @@ var Step = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
70
72
  var prefixCls = _ref.prefixCls;
71
73
  return /*#__PURE__*/_react.default.createElement("div", {
72
74
  ref: domRef,
73
- className: (0, _mobileUtils.cls)(prefixCls + "-steps-item", currentStatus, direction, iconType),
75
+ className: (0, _mobileUtils.cls)(prefixCls + "-steps-item", prefixCls + "-steps-item-align-" + align, currentStatus, direction, iconType),
74
76
  onClick: function onClick() {
75
77
  return changeIndex(index);
76
78
  }
77
79
  }, /*#__PURE__*/_react.default.createElement("div", {
78
- className: (0, _mobileUtils.cls)(prefixCls + "-steps-item-tail", currentStatus + "-tail-color-with-config")
80
+ className: (0, _mobileUtils.cls)(prefixCls + "-steps-item-tail", prefixCls + "-steps-item-tail-status-" + currentStatus, prefixCls + "-steps-item-tail-align-" + align, currentStatus + "-tail-color-with-config")
79
81
  }), icon ? /*#__PURE__*/_react.default.createElement("div", {
80
82
  className: (0, _mobileUtils.cls)(prefixCls + "-steps-item-custom-icon", currentStatus + "-custom-icon-bg-color-with-config")
81
83
  }, icon) : /*#__PURE__*/_react.default.createElement("div", {
@@ -83,7 +85,7 @@ var Step = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
83
85
  }, iconType === 'number' ? renderNumIcon(prefixCls) : /*#__PURE__*/_react.default.createElement("span", {
84
86
  className: (0, _mobileUtils.cls)(prefixCls + "-steps-item-icon-dot")
85
87
  })), title || description ? /*#__PURE__*/_react.default.createElement("div", {
86
- className: (0, _mobileUtils.cls)(prefixCls + "-steps-item-content")
88
+ className: (0, _mobileUtils.cls)(prefixCls + "-steps-item-content", prefixCls + "-steps-item-content-align-" + align)
87
89
  }, title ? /*#__PURE__*/_react.default.createElement("div", {
88
90
  className: (0, _mobileUtils.cls)(prefixCls + "-steps-item-title", currentStatus + "-title-color-with-config")
89
91
  }, title) : null, description ? /*#__PURE__*/_react.default.createElement("div", {
@@ -18,17 +18,23 @@
18
18
  -webkit-box-direction: normal;
19
19
  -webkit-flex-direction: column;
20
20
  flex-direction: column;
21
+ }
22
+ .arco-steps-item-align-center {
21
23
  -webkit-box-align: center;
22
24
  -webkit-align-items: center;
23
25
  align-items: center;
24
26
  }
25
- .arco-steps-item.vertical {
27
+ .arco-steps-item-align-start {
26
28
  -webkit-box-align: start;
27
29
  -webkit-align-items: flex-start;
28
30
  align-items: flex-start;
29
31
  }
30
- .arco-steps-item:last-child .arco-steps-item-tail:after {
31
- display: none;
32
+ .arco-steps-item-align-center.vertical {
33
+ padding-bottom: 0.5rem ;
34
+ }
35
+ .arco-steps-item:first-child .arco-steps-item-tail::before,
36
+ .arco-steps-item:last-child .arco-steps-item-tail::after {
37
+ visibility: hidden;
32
38
  }
33
39
  .arco-steps-item-tail {
34
40
  position: absolute;
@@ -44,33 +50,81 @@
44
50
  }
45
51
  .horizontal .arco-steps-item-tail {
46
52
  width: 100%;
47
- left: 50%;
48
53
  height: 18PX ;
49
- padding: 0 0.36rem ;
50
54
  }
51
- .horizontal .arco-steps-item-tail:after {
55
+ .horizontal .arco-steps-item-tail::before,
56
+ .horizontal .arco-steps-item-tail::after {
57
+ height: 1PX ;
58
+ }
59
+ .horizontal .arco-steps-item-tail-align-start {
60
+ left: 9PX ;
61
+ padding: 0 18PX ;
62
+ }
63
+ .horizontal .arco-steps-item-tail-align-start::after {
52
64
  content: "";
53
- display: inline-block;
54
65
  width: 100%;
55
- height: 1PX ;
56
- background: #e5e6eb ;
57
- border-radius: 0.04rem;
66
+ border-radius: 2PX ;
67
+ }
68
+ .horizontal .arco-steps-item-tail-align-center::before,
69
+ .horizontal .arco-steps-item-tail-align-center::after {
70
+ content: "";
71
+ width: 50%;
72
+ }
73
+ .horizontal .arco-steps-item-tail-align-center::before {
74
+ margin-right: 18PX ;
75
+ border-top-right-radius: 2PX ;
76
+ border-bottom-right-radius: 2PX ;
77
+ }
78
+ .horizontal .arco-steps-item-tail-align-center::after {
79
+ margin-left: 18PX ;
80
+ border-top-left-radius: 2PX ;
81
+ border-bottom-left-radius: 2PX ;
58
82
  }
59
83
  .vertical .arco-steps-item-tail {
60
84
  height: 100%;
61
85
  width: 18PX ;
62
- top: 0.18rem ;
63
- padding: 0.28rem 0 ;
86
+ -webkit-box-orient: vertical;
87
+ -webkit-box-direction: normal;
88
+ -webkit-flex-direction: column;
89
+ flex-direction: column;
64
90
  }
65
- .vertical .arco-steps-item-tail:after {
91
+ .vertical .arco-steps-item-tail::before,
92
+ .vertical .arco-steps-item-tail::after {
93
+ width: 1PX ;
94
+ }
95
+ .vertical .arco-steps-item-tail-align-start {
96
+ top: 9PX ;
97
+ padding: 14PX 0 ;
98
+ }
99
+ .vertical .arco-steps-item-tail-align-start::after {
66
100
  content: "";
67
- display: inline-block;
68
101
  height: 100%;
69
- width: 1PX ;
102
+ border-radius: 2PX ;
103
+ }
104
+ .vertical .arco-steps-item-tail-align-center::before,
105
+ .vertical .arco-steps-item-tail-align-center::after {
106
+ content: "";
107
+ height: 50%;
108
+ }
109
+ .vertical .arco-steps-item-tail-align-center::before {
110
+ margin-bottom: 14PX ;
111
+ border-bottom-left-radius: 2PX ;
112
+ border-bottom-right-radius: 2PX ;
113
+ }
114
+ .vertical .arco-steps-item-tail-align-center::after {
115
+ margin-top: 14PX ;
116
+ border-top-left-radius: 2PX ;
117
+ border-top-right-radius: 2PX ;
118
+ }
119
+ .arco-steps-item-tail::after,
120
+ .arco-steps-item-tail::before {
121
+ display: inline-block;
70
122
  background: #e5e6eb ;
71
- border-radius: 0.04rem;
72
123
  }
73
- .finish .arco-steps-item-tail:after {
124
+ .arco-steps-item-tail-status-finish::before,
125
+ .arco-steps-item-tail-status-finish::after,
126
+ .arco-steps-item-tail-align-center.arco-steps-item-tail-status-process::before,
127
+ .arco-steps-item-tail-align-center.arco-steps-item-tail-status-error::before {
74
128
  background: #165dff ;
75
129
  }
76
130
  .arco-steps-item-custom-icon,
@@ -122,8 +176,8 @@
122
176
  .arco-steps-item-icon-num.android,
123
177
  .arco-steps-item-icon-num.system-android {
124
178
  font-weight: 400;
125
- -webkit-text-stroke: 0.3PX #86909c;
126
- text-stroke: 0.3PX #86909c;
179
+ -webkit-text-stroke: 0.3PX currentColor;
180
+ text-stroke: 0.3PX currentColor;
127
181
  }
128
182
  .process .arco-steps-item-icon-num {
129
183
  color: #FFFFFF ;
@@ -147,18 +201,19 @@
147
201
  border: none;
148
202
  background: #165dff ;
149
203
  }
150
- .arco-steps-item-content {
151
- text-align: center;
152
- }
153
204
  .horizontal .arco-steps-item-content {
154
205
  margin-top: 0.1rem ;
155
206
  }
207
+ .horizontal .arco-steps-item-content-align-center {
208
+ text-align: center;
209
+ }
156
210
  .vertical .arco-steps-item-content {
157
211
  margin-left: 0.26rem ;
158
- text-align: left;
159
212
  -webkit-box-flex: 1;
160
213
  -webkit-flex: 1;
161
214
  flex: 1;
215
+ }
216
+ .vertical .arco-steps-item-content-align-start {
162
217
  padding-bottom: 0.5rem ;
163
218
  }
164
219
  .arco-steps-item-title {
@@ -11,15 +11,23 @@
11
11
 
12
12
  &.horizontal {
13
13
  flex-direction: column;
14
+ }
15
+
16
+ &-align-center {
14
17
  align-items: center;
15
18
  }
16
19
 
17
- &.vertical {
20
+ &-align-start {
18
21
  align-items: flex-start;
19
22
  }
20
23
 
21
- &:last-child &-tail:after {
22
- display: none;
24
+ &-align-center.vertical {
25
+ .use-var(padding-bottom, steps-vertical-content-padding-bottom);
26
+ }
27
+
28
+ &:first-child &-tail::before,
29
+ &:last-child &-tail::after {
30
+ visibility: hidden;
23
31
  }
24
32
 
25
33
  &-tail {
@@ -30,37 +38,93 @@
30
38
 
31
39
  .horizontal & {
32
40
  width: 100%;
33
- left: 50%;
34
41
  .use-var(height, steps-icon-height);
35
- .use-var(padding, steps-tail-horizontal-padding);
36
42
 
37
- &:after {
38
- content: "";
39
- display: inline-block;
40
- width: 100%;
43
+ &::before,
44
+ &::after {
41
45
  .use-var(height, steps-tail-standard-size);
42
- .use-var(background, steps-tail-standard-background);
43
- .rem(border-radius, 2);
46
+ }
47
+
48
+ &-align-start {
49
+ .use-var(left, steps-tail-horizontal-left);
50
+ .use-var(padding, steps-tail-horizontal-padding);
51
+
52
+ &::after {
53
+ content: "";
54
+ width: 100%;
55
+ .use-var(border-radius, steps-tail-border-radius);
56
+ }
57
+ }
58
+
59
+ &-align-center {
60
+ &::before,
61
+ &::after {
62
+ content: "";
63
+ width: 50%;
64
+ }
65
+ &::before {
66
+ .use-var(margin-right, steps-tail-horizontal-gutter);
67
+ .use-var(border-top-right-radius, steps-tail-border-radius);
68
+ .use-var(border-bottom-right-radius, steps-tail-border-radius);
69
+ }
70
+ &::after {
71
+ .use-var(margin-left, steps-tail-horizontal-gutter);
72
+ .use-var(border-top-left-radius, steps-tail-border-radius);
73
+ .use-var(border-bottom-left-radius, steps-tail-border-radius);
74
+ }
44
75
  }
45
76
  }
46
77
 
47
78
  .vertical & {
48
79
  height: 100%;
49
80
  .use-var(width, steps-icon-width);
50
- .use-var(top, steps-tail-vertical-top);
51
- .use-var(padding, steps-tail-vertical-padding);
81
+ flex-direction: column;
52
82
 
53
- &:after {
54
- content: "";
55
- display: inline-block;
56
- height: 100%;
83
+ &::before,
84
+ &::after {
57
85
  .use-var(width, steps-tail-standard-size);
58
- .use-var(background, steps-tail-standard-background);
59
- .rem(border-radius, 2);
60
86
  }
87
+
88
+ &-align-start {
89
+ .use-var(top, steps-tail-vertical-top);
90
+ .use-var(padding, steps-tail-vertical-padding);
91
+
92
+ &::after {
93
+ content: "";
94
+ height: 100%;
95
+ .use-var(border-radius, steps-tail-border-radius);
96
+ }
97
+ }
98
+
99
+ &-align-center {
100
+ &::before,
101
+ &::after {
102
+ content: "";
103
+ height: 50%;
104
+ }
105
+ &::before {
106
+ .use-var(margin-bottom, steps-tail-vertical-gutter);
107
+ .use-var(border-bottom-left-radius, steps-tail-border-radius);
108
+ .use-var(border-bottom-right-radius, steps-tail-border-radius);
109
+ }
110
+ &::after {
111
+ .use-var(margin-top, steps-tail-vertical-gutter);
112
+ .use-var(border-top-left-radius, steps-tail-border-radius);
113
+ .use-var(border-top-right-radius, steps-tail-border-radius);
114
+ }
115
+ }
116
+ }
117
+
118
+ &::after,
119
+ &::before {
120
+ display: inline-block;
121
+ .use-var(background, steps-tail-standard-background);
61
122
  }
62
123
 
63
- .finish &:after {
124
+ &-status-finish::before,
125
+ &-status-finish::after,
126
+ &-align-center&-status-process::before,
127
+ &-align-center&-status-error::before {
64
128
  .use-var(background, steps-tail-finish-background);
65
129
  }
66
130
  }
@@ -110,7 +174,7 @@
110
174
  .use-var(font-size, steps-icon-num-font-size);
111
175
  .use-var(line-height, steps-icon-num-line-height);
112
176
  .use-var(color, steps-icon-num-color);
113
- .text-medium-var(steps-icon-num-color);
177
+ .text-medium();
114
178
 
115
179
  .process & {
116
180
  .use-var(color, steps-process-icon-num-color);
@@ -142,17 +206,21 @@
142
206
  }
143
207
 
144
208
  &-content {
145
- text-align: center;
146
209
 
147
210
  .horizontal & {
148
211
  .use-var(margin-top, steps-horizontal-content-margin-top);
212
+ &-align-center {
213
+ text-align: center;
214
+ }
149
215
  }
150
216
 
151
217
  .vertical & {
152
218
  .use-var(margin-left, steps-vertical-content-margin-left);
153
- text-align: left;
154
219
  flex: 1;
155
- .use-var(padding-bottom, steps-vertical-content-padding-bottom);
220
+
221
+ &-align-start {
222
+ .use-var(padding-bottom, steps-vertical-content-padding-bottom);
223
+ }
156
224
  }
157
225
  }
158
226