@trionesdev/antd-mobile-base-react 0.0.2-beta.21 → 0.0.2-beta.22

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 (54) 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/checkbox.js +8 -1
  10. package/dist/Checkbox/index.scss +165 -165
  11. package/dist/DemoBlock/index.scss +20 -20
  12. package/dist/DemoDescription/index.scss +3 -3
  13. package/dist/Descriptions/style.scss +65 -65
  14. package/dist/Divider/style.scss +62 -62
  15. package/dist/Ellipsis/style.scss +13 -13
  16. package/dist/Empty/style.scss +29 -29
  17. package/dist/ErrorBlock/demo/base.js +2 -2
  18. package/dist/ErrorBlock/style.scss +62 -62
  19. package/dist/Footer/style.scss +55 -55
  20. package/dist/Form/styles.scss +11 -11
  21. package/dist/FormCell/styles.scss +103 -103
  22. package/dist/Grid/style.scss +17 -17
  23. package/dist/Icon/demo/base.js +2 -2
  24. package/dist/InputNumber/style.scss +100 -100
  25. package/dist/Loading/style.scss +113 -113
  26. package/dist/NavBar/style.scss +65 -65
  27. package/dist/NoticeBar/style.scss +130 -130
  28. package/dist/PageIndicator/style.scss +59 -59
  29. package/dist/Progress/style.scss +33 -33
  30. package/dist/Radio/style.scss +154 -154
  31. package/dist/Rate/style.scss +37 -37
  32. package/dist/Result/demo/base.js +2 -2
  33. package/dist/Result/style.scss +73 -73
  34. package/dist/SafeArea/style.scss +20 -20
  35. package/dist/Scaffold/style.scss +17 -17
  36. package/dist/Segmented/style.scss +75 -75
  37. package/dist/Skeleton/style.scss +215 -215
  38. package/dist/Space/style.scss +101 -101
  39. package/dist/Stepper/style.scss +100 -100
  40. package/dist/Steps/style.scss +153 -153
  41. package/dist/Switch/style.scss +127 -127
  42. package/dist/TabBar/demo/base.js +2 -2
  43. package/dist/TabBar/index.scss +37 -37
  44. package/dist/Tabs/style.scss +108 -108
  45. package/dist/Tag/style.scss +110 -110
  46. package/dist/WaterMark/style.scss +17 -17
  47. package/dist/style/css-variable.scss +6 -6
  48. package/dist/style/style.scss +52 -52
  49. package/dist/style/theme-dark.scss +24 -24
  50. package/dist/style/theme-default.scss +54 -54
  51. package/dist/style/variable.scss +180 -180
  52. package/dist/utils/type.js +36 -36
  53. package/dist/utils/with-default-props.js +4 -4
  54. package/package.json +11 -13
package/dist/Segmented/style.scss CHANGED
@@ -1,75 +1,75 @@
1
- @use "../style/variable" as variable;
2
-
3
- $class-prefix-segmented: 'triones-antm-segmented';
4
-
5
- .#{$class-prefix-segmented} {
6
- display: inline-flex;
7
- flex-direction: row;
8
- align-items: stretch;
9
- box-sizing: border-box;
10
- padding: 2Px;
11
- border-radius: variable.$trionesBorderRadius;
12
- background: variable.$trionesColorFillTertiary;
13
- gap: 0;
14
-
15
- &-block {
16
- display: flex;
17
- width: 100%;
18
- }
19
-
20
- &-disabled {
21
- opacity: 0.45;
22
- pointer-events: none;
23
- }
24
-
25
- &-item {
26
- position: relative;
27
- z-index: 0;
28
- display: inline-flex;
29
- flex: 0 1 auto;
30
- align-items: center;
31
- justify-content: center;
32
- min-height: 10Px;
33
- padding: 0Px 11Px;
34
- font-size: variable.$trionesFontSize;
35
- line-height: variable.$trionesLineHeightSm;
36
- color: variable.$trionesColorTextSecondary;
37
- border-radius: variable.$trionesBorderRadiusXs;
38
- cursor: pointer;
39
- user-select: none;
40
- transition:
41
- color 0.2s,
42
- background-color 0.2s,
43
- box-shadow 0.2s;
44
-
45
- &-icon {
46
- display: inline-flex;
47
- margin-inline-end: 4Px;
48
- font-size: variable.$trionesFontSizeIcon;
49
- line-height: 1;
50
- }
51
-
52
- &-label {
53
- display: inline-flex;
54
- align-items: center;
55
- line-height: 28Px;
56
- }
57
-
58
- &-active {
59
- z-index: 1;
60
- color: variable.$trionesColorTextHeading;
61
- background: variable.$trionesColorBgBase;
62
- box-shadow: 0 1Px 2Px rgba(0, 0, 0, 0.06);
63
- }
64
-
65
- &-disabled {
66
- cursor: not-allowed;
67
- color: variable.$trionesColorTextDisabled;
68
- }
69
- }
70
-
71
- &-block &-item {
72
- flex: 1 1 0;
73
- min-width: 0;
74
- }
75
- }
1
+ @use "../style/variable" as variable;
2
+
3
+ $class-prefix-segmented: 'triones-antm-segmented';
4
+
5
+ .#{$class-prefix-segmented} {
6
+ display: inline-flex;
7
+ flex-direction: row;
8
+ align-items: stretch;
9
+ box-sizing: border-box;
10
+ padding: 2Px;
11
+ border-radius: variable.$trionesBorderRadius;
12
+ background: variable.$trionesColorFillTertiary;
13
+ gap: 0;
14
+
15
+ &-block {
16
+ display: flex;
17
+ width: 100%;
18
+ }
19
+
20
+ &-disabled {
21
+ opacity: 0.45;
22
+ pointer-events: none;
23
+ }
24
+
25
+ &-item {
26
+ position: relative;
27
+ z-index: 0;
28
+ display: inline-flex;
29
+ flex: 0 1 auto;
30
+ align-items: center;
31
+ justify-content: center;
32
+ min-height: 10Px;
33
+ padding: 0Px 11Px;
34
+ font-size: variable.$trionesFontSize;
35
+ line-height: variable.$trionesLineHeightSm;
36
+ color: variable.$trionesColorTextSecondary;
37
+ border-radius: variable.$trionesBorderRadiusXs;
38
+ cursor: pointer;
39
+ user-select: none;
40
+ transition:
41
+ color 0.2s,
42
+ background-color 0.2s,
43
+ box-shadow 0.2s;
44
+
45
+ &-icon {
46
+ display: inline-flex;
47
+ margin-inline-end: 4Px;
48
+ font-size: variable.$trionesFontSizeIcon;
49
+ line-height: 1;
50
+ }
51
+
52
+ &-label {
53
+ display: inline-flex;
54
+ align-items: center;
55
+ line-height: 28Px;
56
+ }
57
+
58
+ &-active {
59
+ z-index: 1;
60
+ color: variable.$trionesColorTextHeading;
61
+ background: variable.$trionesColorBgBase;
62
+ box-shadow: 0 1Px 2Px rgba(0, 0, 0, 0.06);
63
+ }
64
+
65
+ &-disabled {
66
+ cursor: not-allowed;
67
+ color: variable.$trionesColorTextDisabled;
68
+ }
69
+ }
70
+
71
+ &-block &-item {
72
+ flex: 1 1 0;
73
+ min-width: 0;
74
+ }
75
+ }
package/dist/Skeleton/style.scss CHANGED
@@ -1,215 +1,215 @@
1
- $prefix: triones-antm-skeleton;
2
-
3
- @mixin skeleton-fill {
4
- background: rgba(0, 0, 0, 0.06);
5
- }
6
-
7
- .#{$prefix} {
8
- width: 100%;
9
- box-sizing: border-box;
10
- }
11
-
12
- .#{$prefix}-element-active {
13
- background: linear-gradient(
14
- 90deg,
15
- rgba(0, 0, 0, 0.06) 25%,
16
- rgba(0, 0, 0, 0.12) 50%,
17
- rgba(0, 0, 0, 0.06) 75%
18
- );
19
- background-size: 200% 100%;
20
- animation: #{$prefix}-shimmer 1.4s ease infinite;
21
- }
22
-
23
- .#{$prefix}-with-avatar {
24
- display: flex;
25
- align-items: flex-start;
26
- gap: 12px;
27
- }
28
-
29
- .#{$prefix}-header {
30
- flex-shrink: 0;
31
- }
32
-
33
- .#{$prefix}-section {
34
- flex: 1;
35
- min-width: 0;
36
- display: flex;
37
- flex-direction: column;
38
- gap: 12px;
39
- padding-top: 4px;
40
- }
41
-
42
- .#{$prefix}-avatar {
43
- @include skeleton-fill;
44
- flex-shrink: 0;
45
-
46
- &.#{$prefix}-element-active {
47
- @include skeleton-fill;
48
- background: linear-gradient(
49
- 90deg,
50
- rgba(0, 0, 0, 0.06) 25%,
51
- rgba(0, 0, 0, 0.12) 50%,
52
- rgba(0, 0, 0, 0.06) 75%
53
- );
54
- background-size: 200% 100%;
55
- animation: #{$prefix}-shimmer 1.4s ease infinite;
56
- }
57
- }
58
-
59
- .#{$prefix}-avatar-circle {
60
- border-radius: 50%;
61
- }
62
-
63
- .#{$prefix}-avatar-square {
64
- border-radius: 8px;
65
- }
66
-
67
- .#{$prefix}-title {
68
- height: 16px;
69
- max-width: 100%;
70
- border-radius: 4px;
71
- @include skeleton-fill;
72
-
73
- &.#{$prefix}-element-active {
74
- background: linear-gradient(
75
- 90deg,
76
- rgba(0, 0, 0, 0.06) 25%,
77
- rgba(0, 0, 0, 0.12) 50%,
78
- rgba(0, 0, 0, 0.06) 75%
79
- );
80
- background-size: 200% 100%;
81
- animation: #{$prefix}-shimmer 1.4s ease infinite;
82
- }
83
- }
84
-
85
- .#{$prefix}-round .#{$prefix}-title,
86
- .#{$prefix}-round .#{$prefix}-paragraph-line {
87
- border-radius: 9999px;
88
- }
89
-
90
- .#{$prefix}-paragraph {
91
- display: flex;
92
- flex-direction: column;
93
- gap: 8px;
94
- }
95
-
96
- .#{$prefix}-paragraph-line {
97
- height: 14px;
98
- max-width: 100%;
99
- border-radius: 4px;
100
- @include skeleton-fill;
101
-
102
- &.#{$prefix}-element-active {
103
- background: linear-gradient(
104
- 90deg,
105
- rgba(0, 0, 0, 0.06) 25%,
106
- rgba(0, 0, 0, 0.12) 50%,
107
- rgba(0, 0, 0, 0.06) 75%
108
- );
109
- background-size: 200% 100%;
110
- animation: #{$prefix}-shimmer 1.4s ease infinite;
111
- }
112
- }
113
-
114
- .#{$prefix}-input {
115
- width: 100%;
116
- border-radius: 6px;
117
- @include skeleton-fill;
118
-
119
- &.#{$prefix}-element-active {
120
- background: linear-gradient(
121
- 90deg,
122
- rgba(0, 0, 0, 0.06) 25%,
123
- rgba(0, 0, 0, 0.12) 50%,
124
- rgba(0, 0, 0, 0.06) 75%
125
- );
126
- background-size: 200% 100%;
127
- animation: #{$prefix}-shimmer 1.4s ease infinite;
128
- }
129
- }
130
-
131
- .#{$prefix}-button {
132
- display: inline-block;
133
- min-width: 60px;
134
- border-radius: 6px;
135
- @include skeleton-fill;
136
-
137
- &.#{$prefix}-element-active {
138
- background: linear-gradient(
139
- 90deg,
140
- rgba(0, 0, 0, 0.06) 25%,
141
- rgba(0, 0, 0, 0.12) 50%,
142
- rgba(0, 0, 0, 0.06) 75%
143
- );
144
- background-size: 200% 100%;
145
- animation: #{$prefix}-shimmer 1.4s ease infinite;
146
- }
147
- }
148
-
149
- .#{$prefix}-button-block {
150
- display: block;
151
- width: 100%;
152
- }
153
-
154
- .#{$prefix}-button-square {
155
- border-radius: 4px;
156
- }
157
-
158
- .#{$prefix}-button-round {
159
- border-radius: 9999px;
160
- }
161
-
162
- .#{$prefix}-button-circle {
163
- min-width: unset;
164
- border-radius: 50%;
165
- }
166
-
167
- .#{$prefix}-block-root {
168
- display: flex;
169
- flex-direction: column;
170
- gap: 8px;
171
- width: 100%;
172
- }
173
-
174
- .#{$prefix}-block {
175
- @include skeleton-fill;
176
- box-sizing: border-box;
177
-
178
- &.#{$prefix}-element-active {
179
- background: linear-gradient(
180
- 90deg,
181
- rgba(0, 0, 0, 0.06) 25%,
182
- rgba(0, 0, 0, 0.12) 50%,
183
- rgba(0, 0, 0, 0.06) 75%
184
- );
185
- background-size: 200% 100%;
186
- animation: #{$prefix}-shimmer 1.4s ease infinite;
187
- }
188
- }
189
-
190
- .#{$prefix}-block-text {
191
- width: 100%;
192
- height: 16px;
193
- border-radius: 4px;
194
- }
195
-
196
- .#{$prefix}-block-rect {
197
- width: 100%;
198
- height: 64px;
199
- border-radius: 8px;
200
- }
201
-
202
- .#{$prefix}-block-circle {
203
- width: 32px;
204
- height: 32px;
205
- border-radius: 50%;
206
- }
207
-
208
- @keyframes #{$prefix}-shimmer {
209
- 0% {
210
- background-position: 100% 0;
211
- }
212
- 100% {
213
- background-position: -100% 0;
214
- }
215
- }
1
+ $prefix: triones-antm-skeleton;
2
+
3
+ @mixin skeleton-fill {
4
+ background: rgba(0, 0, 0, 0.06);
5
+ }
6
+
7
+ .#{$prefix} {
8
+ width: 100%;
9
+ box-sizing: border-box;
10
+ }
11
+
12
+ .#{$prefix}-element-active {
13
+ background: linear-gradient(
14
+ 90deg,
15
+ rgba(0, 0, 0, 0.06) 25%,
16
+ rgba(0, 0, 0, 0.12) 50%,
17
+ rgba(0, 0, 0, 0.06) 75%
18
+ );
19
+ background-size: 200% 100%;
20
+ animation: #{$prefix}-shimmer 1.4s ease infinite;
21
+ }
22
+
23
+ .#{$prefix}-with-avatar {
24
+ display: flex;
25
+ align-items: flex-start;
26
+ gap: 12px;
27
+ }
28
+
29
+ .#{$prefix}-header {
30
+ flex-shrink: 0;
31
+ }
32
+
33
+ .#{$prefix}-section {
34
+ flex: 1;
35
+ min-width: 0;
36
+ display: flex;
37
+ flex-direction: column;
38
+ gap: 12px;
39
+ padding-top: 4px;
40
+ }
41
+
42
+ .#{$prefix}-avatar {
43
+ @include skeleton-fill;
44
+ flex-shrink: 0;
45
+
46
+ &.#{$prefix}-element-active {
47
+ @include skeleton-fill;
48
+ background: linear-gradient(
49
+ 90deg,
50
+ rgba(0, 0, 0, 0.06) 25%,
51
+ rgba(0, 0, 0, 0.12) 50%,
52
+ rgba(0, 0, 0, 0.06) 75%
53
+ );
54
+ background-size: 200% 100%;
55
+ animation: #{$prefix}-shimmer 1.4s ease infinite;
56
+ }
57
+ }
58
+
59
+ .#{$prefix}-avatar-circle {
60
+ border-radius: 50%;
61
+ }
62
+
63
+ .#{$prefix}-avatar-square {
64
+ border-radius: 8px;
65
+ }
66
+
67
+ .#{$prefix}-title {
68
+ height: 16px;
69
+ max-width: 100%;
70
+ border-radius: 4px;
71
+ @include skeleton-fill;
72
+
73
+ &.#{$prefix}-element-active {
74
+ background: linear-gradient(
75
+ 90deg,
76
+ rgba(0, 0, 0, 0.06) 25%,
77
+ rgba(0, 0, 0, 0.12) 50%,
78
+ rgba(0, 0, 0, 0.06) 75%
79
+ );
80
+ background-size: 200% 100%;
81
+ animation: #{$prefix}-shimmer 1.4s ease infinite;
82
+ }
83
+ }
84
+
85
+ .#{$prefix}-round .#{$prefix}-title,
86
+ .#{$prefix}-round .#{$prefix}-paragraph-line {
87
+ border-radius: 9999px;
88
+ }
89
+
90
+ .#{$prefix}-paragraph {
91
+ display: flex;
92
+ flex-direction: column;
93
+ gap: 8px;
94
+ }
95
+
96
+ .#{$prefix}-paragraph-line {
97
+ height: 14px;
98
+ max-width: 100%;
99
+ border-radius: 4px;
100
+ @include skeleton-fill;
101
+
102
+ &.#{$prefix}-element-active {
103
+ background: linear-gradient(
104
+ 90deg,
105
+ rgba(0, 0, 0, 0.06) 25%,
106
+ rgba(0, 0, 0, 0.12) 50%,
107
+ rgba(0, 0, 0, 0.06) 75%
108
+ );
109
+ background-size: 200% 100%;
110
+ animation: #{$prefix}-shimmer 1.4s ease infinite;
111
+ }
112
+ }
113
+
114
+ .#{$prefix}-input {
115
+ width: 100%;
116
+ border-radius: 6px;
117
+ @include skeleton-fill;
118
+
119
+ &.#{$prefix}-element-active {
120
+ background: linear-gradient(
121
+ 90deg,
122
+ rgba(0, 0, 0, 0.06) 25%,
123
+ rgba(0, 0, 0, 0.12) 50%,
124
+ rgba(0, 0, 0, 0.06) 75%
125
+ );
126
+ background-size: 200% 100%;
127
+ animation: #{$prefix}-shimmer 1.4s ease infinite;
128
+ }
129
+ }
130
+
131
+ .#{$prefix}-button {
132
+ display: inline-block;
133
+ min-width: 60px;
134
+ border-radius: 6px;
135
+ @include skeleton-fill;
136
+
137
+ &.#{$prefix}-element-active {
138
+ background: linear-gradient(
139
+ 90deg,
140
+ rgba(0, 0, 0, 0.06) 25%,
141
+ rgba(0, 0, 0, 0.12) 50%,
142
+ rgba(0, 0, 0, 0.06) 75%
143
+ );
144
+ background-size: 200% 100%;
145
+ animation: #{$prefix}-shimmer 1.4s ease infinite;
146
+ }
147
+ }
148
+
149
+ .#{$prefix}-button-block {
150
+ display: block;
151
+ width: 100%;
152
+ }
153
+
154
+ .#{$prefix}-button-square {
155
+ border-radius: 4px;
156
+ }
157
+
158
+ .#{$prefix}-button-round {
159
+ border-radius: 9999px;
160
+ }
161
+
162
+ .#{$prefix}-button-circle {
163
+ min-width: unset;
164
+ border-radius: 50%;
165
+ }
166
+
167
+ .#{$prefix}-block-root {
168
+ display: flex;
169
+ flex-direction: column;
170
+ gap: 8px;
171
+ width: 100%;
172
+ }
173
+
174
+ .#{$prefix}-block {
175
+ @include skeleton-fill;
176
+ box-sizing: border-box;
177
+
178
+ &.#{$prefix}-element-active {
179
+ background: linear-gradient(
180
+ 90deg,
181
+ rgba(0, 0, 0, 0.06) 25%,
182
+ rgba(0, 0, 0, 0.12) 50%,
183
+ rgba(0, 0, 0, 0.06) 75%
184
+ );
185
+ background-size: 200% 100%;
186
+ animation: #{$prefix}-shimmer 1.4s ease infinite;
187
+ }
188
+ }
189
+
190
+ .#{$prefix}-block-text {
191
+ width: 100%;
192
+ height: 16px;
193
+ border-radius: 4px;
194
+ }
195
+
196
+ .#{$prefix}-block-rect {
197
+ width: 100%;
198
+ height: 64px;
199
+ border-radius: 8px;
200
+ }
201
+
202
+ .#{$prefix}-block-circle {
203
+ width: 32px;
204
+ height: 32px;
205
+ border-radius: 50%;
206
+ }
207
+
208
+ @keyframes #{$prefix}-shimmer {
209
+ 0% {
210
+ background-position: 100% 0;
211
+ }
212
+ 100% {
213
+ background-position: -100% 0;
214
+ }
215
+ }