@trionesdev/antd-mobile-base-react 0.0.2-beta.19 → 0.0.2-beta.20

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 (53) hide show
  1. package/LICENSE +21 -21
  2. package/README.md +23 -23
  3. package/dist/Alert/style.scss +69 -69
  4. package/dist/Avatar/style.scss +17 -17
  5. package/dist/Badge/style.scss +100 -100
  6. package/dist/Card/style.scss +35 -35
  7. package/dist/CascaderView/style.scss +22 -22
  8. package/dist/Cell/styles.scss +81 -81
  9. package/dist/Checkbox/index.scss +165 -165
  10. package/dist/DemoBlock/index.scss +20 -20
  11. package/dist/DemoDescription/index.scss +3 -3
  12. package/dist/Descriptions/style.scss +65 -65
  13. package/dist/Divider/style.scss +62 -62
  14. package/dist/Ellipsis/style.scss +13 -13
  15. package/dist/Empty/style.scss +29 -29
  16. package/dist/ErrorBlock/demo/base.js +2 -2
  17. package/dist/ErrorBlock/style.scss +62 -62
  18. package/dist/Footer/style.scss +55 -55
  19. package/dist/Form/styles.scss +11 -11
  20. package/dist/FormCell/styles.scss +103 -103
  21. package/dist/Grid/style.scss +17 -17
  22. package/dist/Icon/demo/base.js +2 -2
  23. package/dist/InputNumber/style.scss +100 -100
  24. package/dist/Loading/style.scss +113 -113
  25. package/dist/NavBar/style.scss +65 -65
  26. package/dist/NoticeBar/style.scss +130 -130
  27. package/dist/PageIndicator/style.scss +59 -59
  28. package/dist/Progress/style.scss +33 -33
  29. package/dist/Radio/style.scss +154 -154
  30. package/dist/Rate/style.scss +37 -37
  31. package/dist/Result/demo/base.js +2 -2
  32. package/dist/Result/style.scss +73 -73
  33. package/dist/SafeArea/style.scss +20 -20
  34. package/dist/Scaffold/style.scss +17 -17
  35. package/dist/Segmented/style.scss +75 -75
  36. package/dist/Skeleton/style.scss +215 -215
  37. package/dist/Space/style.scss +101 -101
  38. package/dist/Stepper/style.scss +100 -100
  39. package/dist/Steps/style.scss +153 -153
  40. package/dist/Switch/style.scss +127 -127
  41. package/dist/TabBar/demo/base.js +2 -2
  42. package/dist/TabBar/index.scss +37 -37
  43. package/dist/Tabs/style.scss +108 -108
  44. package/dist/Tag/style.scss +110 -110
  45. package/dist/WaterMark/style.scss +17 -17
  46. package/dist/style/css-variable.scss +6 -6
  47. package/dist/style/style.scss +52 -52
  48. package/dist/style/theme-dark.scss +24 -24
  49. package/dist/style/theme-default.scss +54 -54
  50. package/dist/style/variable.scss +180 -180
  51. package/dist/utils/type.js +36 -36
  52. package/dist/utils/with-default-props.js +4 -4
  53. package/package.json +3 -3
@@ -1,153 +1,153 @@
1
- $clsPrefixSteps: 'triones-antm-steps';
2
- $clsPrefixStep: 'triones-antm-step';
3
-
4
- .#{$clsPrefixSteps} {
5
- &-horizontal {
6
- display: flex;
7
- flex-direction: row;
8
-
9
- .#{$clsPrefixStep} {
10
- //flex: 1 auto;
11
- display: flex;
12
- flex-direction: column;
13
- gap: 4Px;
14
- &-indicator {
15
- display: flex;
16
- flex-direction: row;
17
-
18
- &-icon-before {
19
- flex: 1 auto;
20
- display: flex;
21
- align-items: center;
22
- min-width: 16Px;
23
-
24
- &-line {
25
- height: 1Px;
26
- width: 100%;
27
- }
28
- }
29
-
30
- &-icon {
31
- display: flex;
32
- align-items: center;
33
- justify-content: center;
34
- min-height: 24Px;
35
- }
36
-
37
- &-icon-after {
38
- flex: 1 auto;
39
- display: flex;
40
- align-items: center;
41
- min-width: 16Px;
42
-
43
- &-line {
44
- height: 1Px;
45
- width: 100%;
46
- }
47
- }
48
- }
49
-
50
- &-content {
51
- text-align: center;
52
- &-title{
53
-
54
- }
55
- &-desc{}
56
- }
57
-
58
- &:first-child {
59
- .#{$clsPrefixStep} {
60
- &-indicator {
61
- &-icon-before {
62
- &-line {
63
- display: none;
64
- }
65
- }
66
- }
67
- }
68
- }
69
-
70
- &:last-child {
71
- .#{$clsPrefixStep} {
72
- &-indicator {
73
- &-icon-after {
74
- &-line {
75
- display: none;
76
- }
77
- }
78
- }
79
- }
80
- }
81
- }
82
- }
83
-
84
- &-vertical {
85
- .#{$clsPrefixStep} {
86
- display: flex;
87
- flex-direction: row;
88
-
89
- &-indicator {
90
- display: flex;
91
- flex-direction: column;
92
- padding-inline: 4Px;
93
-
94
- &-icon-before {
95
- display: flex;
96
- justify-content: center;
97
- min-height: 8Px;
98
-
99
- &-line {
100
- width: 1Px;
101
- height: 100%;
102
- }
103
- }
104
-
105
- &-icon {
106
- display: flex;
107
- align-items: center;
108
- justify-content: center;
109
- min-width: 24Px;
110
- }
111
-
112
- &-icon-after {
113
- flex: 1 auto;
114
- display: flex;
115
- justify-content: center;
116
-
117
- &-line {
118
- width: 1Px;
119
- height: 100%;
120
- }
121
- }
122
- }
123
-
124
- &-content {
125
- padding: 4Px;
126
- }
127
-
128
- &:first-child {
129
- .#{$clsPrefixStep} {
130
- &-indicator {
131
- &-icon-before {
132
- &-line {
133
- display: none;
134
- }
135
- }
136
- }
137
- }
138
- }
139
-
140
- &:last-child {
141
- .#{$clsPrefixStep} {
142
- &-indicator {
143
- &-icon-after {
144
- &-line {
145
- display: none;
146
- }
147
- }
148
- }
149
- }
150
- }
151
- }
152
- }
153
- }
1
+ $clsPrefixSteps: 'triones-antm-steps';
2
+ $clsPrefixStep: 'triones-antm-step';
3
+
4
+ .#{$clsPrefixSteps} {
5
+ &-horizontal {
6
+ display: flex;
7
+ flex-direction: row;
8
+
9
+ .#{$clsPrefixStep} {
10
+ //flex: 1 auto;
11
+ display: flex;
12
+ flex-direction: column;
13
+ gap: 4Px;
14
+ &-indicator {
15
+ display: flex;
16
+ flex-direction: row;
17
+
18
+ &-icon-before {
19
+ flex: 1 auto;
20
+ display: flex;
21
+ align-items: center;
22
+ min-width: 16Px;
23
+
24
+ &-line {
25
+ height: 1Px;
26
+ width: 100%;
27
+ }
28
+ }
29
+
30
+ &-icon {
31
+ display: flex;
32
+ align-items: center;
33
+ justify-content: center;
34
+ min-height: 24Px;
35
+ }
36
+
37
+ &-icon-after {
38
+ flex: 1 auto;
39
+ display: flex;
40
+ align-items: center;
41
+ min-width: 16Px;
42
+
43
+ &-line {
44
+ height: 1Px;
45
+ width: 100%;
46
+ }
47
+ }
48
+ }
49
+
50
+ &-content {
51
+ text-align: center;
52
+ &-title{
53
+
54
+ }
55
+ &-desc{}
56
+ }
57
+
58
+ &:first-child {
59
+ .#{$clsPrefixStep} {
60
+ &-indicator {
61
+ &-icon-before {
62
+ &-line {
63
+ display: none;
64
+ }
65
+ }
66
+ }
67
+ }
68
+ }
69
+
70
+ &:last-child {
71
+ .#{$clsPrefixStep} {
72
+ &-indicator {
73
+ &-icon-after {
74
+ &-line {
75
+ display: none;
76
+ }
77
+ }
78
+ }
79
+ }
80
+ }
81
+ }
82
+ }
83
+
84
+ &-vertical {
85
+ .#{$clsPrefixStep} {
86
+ display: flex;
87
+ flex-direction: row;
88
+
89
+ &-indicator {
90
+ display: flex;
91
+ flex-direction: column;
92
+ padding-inline: 4Px;
93
+
94
+ &-icon-before {
95
+ display: flex;
96
+ justify-content: center;
97
+ min-height: 8Px;
98
+
99
+ &-line {
100
+ width: 1Px;
101
+ height: 100%;
102
+ }
103
+ }
104
+
105
+ &-icon {
106
+ display: flex;
107
+ align-items: center;
108
+ justify-content: center;
109
+ min-width: 24Px;
110
+ }
111
+
112
+ &-icon-after {
113
+ flex: 1 auto;
114
+ display: flex;
115
+ justify-content: center;
116
+
117
+ &-line {
118
+ width: 1Px;
119
+ height: 100%;
120
+ }
121
+ }
122
+ }
123
+
124
+ &-content {
125
+ padding: 4Px;
126
+ }
127
+
128
+ &:first-child {
129
+ .#{$clsPrefixStep} {
130
+ &-indicator {
131
+ &-icon-before {
132
+ &-line {
133
+ display: none;
134
+ }
135
+ }
136
+ }
137
+ }
138
+ }
139
+
140
+ &:last-child {
141
+ .#{$clsPrefixStep} {
142
+ &-indicator {
143
+ &-icon-after {
144
+ &-line {
145
+ display: none;
146
+ }
147
+ }
148
+ }
149
+ }
150
+ }
151
+ }
152
+ }
153
+ }
@@ -1,127 +1,127 @@
1
- @use "../style/variable" as variable;
2
-
3
- $class-prefix-switch: 'triones-antm-switch';
4
-
5
- @keyframes loading-rotate {
6
- 100% {
7
- transform: rotate(1turn);
8
- }
9
- }
10
-
11
- /* prettier-ignore */
12
- .#{$class-prefix-switch} {
13
- --height: 24PX;
14
- --width: 42PX;
15
- --border-width: 2PX;
16
-
17
- display: inline-block;
18
- vertical-align: middle;
19
- box-sizing: border-box;
20
- position: relative;
21
- cursor: pointer;
22
-
23
- input {
24
- display: none;
25
- }
26
-
27
- &-checkbox {
28
- min-width: var(--width);
29
- height: var(--height);
30
- box-sizing: border-box;
31
- border-radius: 31PX;
32
- background: variable.$trionesBorderColor;
33
- z-index: 0;
34
- overflow: hidden;
35
- line-height: var(--height);
36
-
37
- &:before {
38
- content: ' ';
39
- position: absolute;
40
- left: var(--border-width);
41
- top: var(--border-width);
42
- width: calc(100% - 2 * var(--border-width));
43
- height: calc(var(--height) - 2 * var(--border-width));
44
- border-radius: calc(var(--height) - 2 * var(--border-width));
45
- box-sizing: border-box;
46
- background: var(--triones-antm-color-background);
47
- z-index: 1;
48
- transition: all 200ms;
49
- transform: scale(1);
50
- }
51
- }
52
-
53
- &-handle {
54
- display: flex;
55
- justify-content: center;
56
- align-items: center;
57
- width: calc(var(--height) - 2 * var(--border-width));
58
- height: calc(var(--height) - 2 * var(--border-width));
59
- border-radius: calc(var(--height) - 2 * var(--border-width));
60
- background: variable.$trionesColorTextLightSolid;
61
- position: absolute;
62
- z-index: 2;
63
- top: var(--border-width);
64
- left: var(--border-width);
65
- transition: all 200ms;
66
- box-shadow: 0 0 2PX 0 rgba(0, 0, 0, 0.2),
67
- 0 2PX 11.5PX 0 rgba(0, 0, 0, 0.08),
68
- -1PX 2PX 2PX 0 rgba(0, 0, 0, 0.1);
69
-
70
- &-loading {
71
- color: var(--color,variable.$trionesColorPrimary);
72
- display: inline-block;
73
- height: 100%;
74
- width: 100%;
75
- background: currentColor;
76
- mask-image: var(--maskImage);
77
- -webkit-mask-image: var(--maskImage);
78
- animation: adm-spin-loading-rotate 2s infinite linear;
79
- }
80
- }
81
-
82
- &-inner {
83
- position: relative;
84
- z-index: 1;
85
- display: flex;
86
- justify-content: center;
87
- align-items: center;
88
- margin: 0 8PX 0 calc(var(--height) - var(--border-width) + 5PX);
89
- height: 100%;
90
- color: var(--triones-antm-color-weak);
91
- transition: margin 200ms;
92
- font-size: var(--triones-antm-font-size-7);
93
- }
94
-
95
- /* 选中状态 */
96
- &.#{$class-prefix-switch}-checked {
97
- .#{$class-prefix-switch}-checkbox {
98
- background: var(--checked-color, variable.$trionesColorPrimary);
99
-
100
- &:before {
101
- transform: scale(0);
102
- }
103
- }
104
-
105
- .#{$class-prefix-switch}-handle {
106
- left: calc(100% - (var(--height) - var(--border-width)));
107
- }
108
-
109
- .#{$class-prefix-switch}-inner {
110
- margin: 0 calc(var(--height) - var(--border-width) + 5PX) 0 8PX;
111
- color: variable.$trionesColorTextLightSolid;
112
- }
113
- }
114
-
115
- /* 禁用状态 */
116
- &.#{$class-prefix-switch}-disabled {
117
- cursor: not-allowed;
118
- opacity: 0.4;
119
- }
120
-
121
- /* loading图标 */
122
- &-spin-icon {
123
- width: 14PX;
124
- height: 14PX;
125
- animation: loading-rotate 1s linear infinite;
126
- }
127
- }
1
+ @use "../style/variable" as variable;
2
+
3
+ $class-prefix-switch: 'triones-antm-switch';
4
+
5
+ @keyframes loading-rotate {
6
+ 100% {
7
+ transform: rotate(1turn);
8
+ }
9
+ }
10
+
11
+ /* prettier-ignore */
12
+ .#{$class-prefix-switch} {
13
+ --height: 24PX;
14
+ --width: 42PX;
15
+ --border-width: 2PX;
16
+
17
+ display: inline-block;
18
+ vertical-align: middle;
19
+ box-sizing: border-box;
20
+ position: relative;
21
+ cursor: pointer;
22
+
23
+ input {
24
+ display: none;
25
+ }
26
+
27
+ &-checkbox {
28
+ min-width: var(--width);
29
+ height: var(--height);
30
+ box-sizing: border-box;
31
+ border-radius: 31PX;
32
+ background: variable.$trionesBorderColor;
33
+ z-index: 0;
34
+ overflow: hidden;
35
+ line-height: var(--height);
36
+
37
+ &:before {
38
+ content: ' ';
39
+ position: absolute;
40
+ left: var(--border-width);
41
+ top: var(--border-width);
42
+ width: calc(100% - 2 * var(--border-width));
43
+ height: calc(var(--height) - 2 * var(--border-width));
44
+ border-radius: calc(var(--height) - 2 * var(--border-width));
45
+ box-sizing: border-box;
46
+ background: var(--triones-antm-color-background);
47
+ z-index: 1;
48
+ transition: all 200ms;
49
+ transform: scale(1);
50
+ }
51
+ }
52
+
53
+ &-handle {
54
+ display: flex;
55
+ justify-content: center;
56
+ align-items: center;
57
+ width: calc(var(--height) - 2 * var(--border-width));
58
+ height: calc(var(--height) - 2 * var(--border-width));
59
+ border-radius: calc(var(--height) - 2 * var(--border-width));
60
+ background: variable.$trionesColorTextLightSolid;
61
+ position: absolute;
62
+ z-index: 2;
63
+ top: var(--border-width);
64
+ left: var(--border-width);
65
+ transition: all 200ms;
66
+ box-shadow: 0 0 2PX 0 rgba(0, 0, 0, 0.2),
67
+ 0 2PX 11.5PX 0 rgba(0, 0, 0, 0.08),
68
+ -1PX 2PX 2PX 0 rgba(0, 0, 0, 0.1);
69
+
70
+ &-loading {
71
+ color: var(--color,variable.$trionesColorPrimary);
72
+ display: inline-block;
73
+ height: 100%;
74
+ width: 100%;
75
+ background: currentColor;
76
+ mask-image: var(--maskImage);
77
+ -webkit-mask-image: var(--maskImage);
78
+ animation: adm-spin-loading-rotate 2s infinite linear;
79
+ }
80
+ }
81
+
82
+ &-inner {
83
+ position: relative;
84
+ z-index: 1;
85
+ display: flex;
86
+ justify-content: center;
87
+ align-items: center;
88
+ margin: 0 8PX 0 calc(var(--height) - var(--border-width) + 5PX);
89
+ height: 100%;
90
+ color: var(--triones-antm-color-weak);
91
+ transition: margin 200ms;
92
+ font-size: var(--triones-antm-font-size-7);
93
+ }
94
+
95
+ /* 选中状态 */
96
+ &.#{$class-prefix-switch}-checked {
97
+ .#{$class-prefix-switch}-checkbox {
98
+ background: var(--checked-color, variable.$trionesColorPrimary);
99
+
100
+ &:before {
101
+ transform: scale(0);
102
+ }
103
+ }
104
+
105
+ .#{$class-prefix-switch}-handle {
106
+ left: calc(100% - (var(--height) - var(--border-width)));
107
+ }
108
+
109
+ .#{$class-prefix-switch}-inner {
110
+ margin: 0 calc(var(--height) - var(--border-width) + 5PX) 0 8PX;
111
+ color: variable.$trionesColorTextLightSolid;
112
+ }
113
+ }
114
+
115
+ /* 禁用状态 */
116
+ &.#{$class-prefix-switch}-disabled {
117
+ cursor: not-allowed;
118
+ opacity: 0.4;
119
+ }
120
+
121
+ /* loading图标 */
122
+ &-spin-icon {
123
+ width: 14PX;
124
+ height: 14PX;
125
+ animation: loading-rotate 1s linear infinite;
126
+ }
127
+ }
@@ -1,5 +1,5 @@
1
- /**
2
- * compact: true
1
+ /**
2
+ * compact: true
3
3
  */
4
4
  import React from "react";
5
5
  import { FaceRecognitionOutline, AppstoreOutline, UserOutline } from "../../../../antd-mobile-icons-react";
@@ -1,37 +1,37 @@
1
- @use "../style/variable" as variable;
2
-
3
- $trionesTabBarActiveColor: variable.$trionesColorPrimary !default;
4
-
5
- $tabBarCls: 'triones-tab-bar';
6
- .#{$tabBarCls} {
7
- box-sizing: border-box;
8
- padding-top: 4Px;
9
- &-wrap {
10
- display: flex;
11
- background-color: #ffffff;
12
- width: 100%;
13
- justify-content: space-around;
14
- }
15
-
16
- &-item {
17
- display: flex;
18
- align-items: center;
19
- flex-direction: column;
20
- gap: 4Px;
21
- cursor: default;
22
- flex: 1 auto;
23
- padding: 4Px;
24
-
25
- &-active {
26
- color: $trionesTabBarActiveColor;
27
- }
28
-
29
- &-icon {
30
- flex-grow: 1;
31
- }
32
-
33
- &-label {
34
- font-size: 12Px;
35
- }
36
- }
37
- }
1
+ @use "../style/variable" as variable;
2
+
3
+ $trionesTabBarActiveColor: variable.$trionesColorPrimary !default;
4
+
5
+ $tabBarCls: 'triones-tab-bar';
6
+ .#{$tabBarCls} {
7
+ box-sizing: border-box;
8
+ padding-top: 4Px;
9
+ &-wrap {
10
+ display: flex;
11
+ background-color: #ffffff;
12
+ width: 100%;
13
+ justify-content: space-around;
14
+ }
15
+
16
+ &-item {
17
+ display: flex;
18
+ align-items: center;
19
+ flex-direction: column;
20
+ gap: 4Px;
21
+ cursor: default;
22
+ flex: 1 auto;
23
+ padding: 4Px;
24
+
25
+ &-active {
26
+ color: $trionesTabBarActiveColor;
27
+ }
28
+
29
+ &-icon {
30
+ flex-grow: 1;
31
+ }
32
+
33
+ &-label {
34
+ font-size: 12Px;
35
+ }
36
+ }
37
+ }