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

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 (60) 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/DotLoading.d.ts +0 -1
  25. package/dist/Loading/DotLoading.js +0 -1
  26. package/dist/Loading/SpinLoading.d.ts +0 -1
  27. package/dist/Loading/SpinLoading.js +0 -1
  28. package/dist/Loading/index.d.ts +1 -0
  29. package/dist/Loading/index.js +1 -0
  30. package/dist/Loading/{dot-loading.scss → style.scss} +113 -72
  31. package/dist/NavBar/style.scss +65 -64
  32. package/dist/NoticeBar/style.scss +130 -130
  33. package/dist/PageIndicator/style.scss +59 -59
  34. package/dist/Progress/style.scss +33 -33
  35. package/dist/Radio/style.scss +154 -154
  36. package/dist/Rate/style.scss +37 -37
  37. package/dist/Result/demo/base.js +2 -2
  38. package/dist/Result/style.scss +73 -73
  39. package/dist/SafeArea/style.scss +20 -20
  40. package/dist/Scaffold/style.scss +17 -17
  41. package/dist/Segmented/style.scss +75 -75
  42. package/dist/Skeleton/style.scss +215 -215
  43. package/dist/Space/style.scss +101 -101
  44. package/dist/Stepper/style.scss +100 -100
  45. package/dist/Steps/style.scss +153 -153
  46. package/dist/Switch/style.scss +127 -127
  47. package/dist/TabBar/demo/base.js +2 -2
  48. package/dist/TabBar/index.scss +37 -37
  49. package/dist/Tabs/style.scss +108 -108
  50. package/dist/Tag/style.scss +110 -110
  51. package/dist/WaterMark/style.scss +17 -17
  52. package/dist/style/css-variable.scss +6 -6
  53. package/dist/style/style.scss +52 -52
  54. package/dist/style/theme-dark.scss +24 -24
  55. package/dist/style/theme-default.scss +54 -54
  56. package/dist/style/variable.scss +180 -180
  57. package/dist/utils/type.js +36 -36
  58. package/dist/utils/with-default-props.js +4 -4
  59. package/package.json +3 -3
  60. package/dist/Loading/spin-loading.scss +0 -39
@@ -1,62 +1,62 @@
1
- @use "../style/variable" as variable;
2
-
3
- $dividerCls: 'triones-antm-divider';
4
- /* prettier-ignore */
5
- .#{$dividerCls} {
6
- display: flex;
7
- align-items: center;
8
- font-size: 14PX;
9
- color: variable.$trionesBorderColor;
10
- border: 0 solid variable.$trionesBorderColor ;
11
- width: 100%;
12
-
13
- &::before,
14
- &::after {
15
- content: '';
16
- border-style: inherit;
17
- border-color: inherit;
18
- border-width: 1PX 0 0;
19
- height: 1PX;
20
- flex: 1;
21
- }
22
-
23
- &-center,
24
- &-left,
25
- &-right {
26
- &::before {
27
- margin-right: 8PX;
28
- }
29
-
30
- &::after {
31
- margin-left: 8PX;
32
- }
33
- }
34
-
35
- &-left {
36
- &::before {
37
- max-width: 10%;
38
- }
39
- }
40
-
41
- &-right {
42
- &::after {
43
- max-width: 10%;
44
- }
45
- }
46
-
47
- &-hairline {
48
- &::before,
49
- &::after {
50
- // transform: scaleY(0.5);
51
- }
52
- }
53
-
54
- &-vertical {
55
- display: inline-block;
56
- width: auto;
57
- height: 12PX;
58
- border-left: 1PX solid variable.$trionesBorderColor;
59
- margin: 0 8PX;
60
- vertical-align: middle;
61
- }
62
- }
1
+ @use "../style/variable" as variable;
2
+
3
+ $dividerCls: 'triones-antm-divider';
4
+ /* prettier-ignore */
5
+ .#{$dividerCls} {
6
+ display: flex;
7
+ align-items: center;
8
+ font-size: 14PX;
9
+ color: variable.$trionesBorderColor;
10
+ border: 0 solid variable.$trionesBorderColor ;
11
+ width: 100%;
12
+
13
+ &::before,
14
+ &::after {
15
+ content: '';
16
+ border-style: inherit;
17
+ border-color: inherit;
18
+ border-width: 1PX 0 0;
19
+ height: 1PX;
20
+ flex: 1;
21
+ }
22
+
23
+ &-center,
24
+ &-left,
25
+ &-right {
26
+ &::before {
27
+ margin-right: 8PX;
28
+ }
29
+
30
+ &::after {
31
+ margin-left: 8PX;
32
+ }
33
+ }
34
+
35
+ &-left {
36
+ &::before {
37
+ max-width: 10%;
38
+ }
39
+ }
40
+
41
+ &-right {
42
+ &::after {
43
+ max-width: 10%;
44
+ }
45
+ }
46
+
47
+ &-hairline {
48
+ &::before,
49
+ &::after {
50
+ // transform: scaleY(0.5);
51
+ }
52
+ }
53
+
54
+ &-vertical {
55
+ display: inline-block;
56
+ width: auto;
57
+ height: 12PX;
58
+ border-left: 1PX solid variable.$trionesBorderColor;
59
+ margin: 0 8PX;
60
+ vertical-align: middle;
61
+ }
62
+ }
@@ -1,13 +1,13 @@
1
- $class-prefix-ellipsis: 'triones-antm-ellipsis';
2
- /* prettier-ignore */
3
- .#{$class-prefix-ellipsis} {
4
- overflow: hidden;
5
- line-height: 1.5;
6
- word-break: break-word;
7
-
8
- &-icon {
9
- display: inline-block;
10
- color: #1677ff;
11
- cursor: pointer;
12
- }
13
- }
1
+ $class-prefix-ellipsis: 'triones-antm-ellipsis';
2
+ /* prettier-ignore */
3
+ .#{$class-prefix-ellipsis} {
4
+ overflow: hidden;
5
+ line-height: 1.5;
6
+ word-break: break-word;
7
+
8
+ &-icon {
9
+ display: inline-block;
10
+ color: #1677ff;
11
+ cursor: pointer;
12
+ }
13
+ }
@@ -1,29 +1,29 @@
1
- .triones-antm-empty {
2
- text-align: center;
3
-
4
- &-wrapper {
5
- width: 100%;
6
- height: 100%;
7
- display: flex;
8
- align-items: center;
9
- justify-content: space-around;
10
- }
11
-
12
- &-image {
13
- //margin-bottom: 8Px;
14
- :global {
15
- img,
16
- image {
17
- width: 100%;
18
- height: 100%;
19
- object-fit: cover;
20
- }
21
- }
22
- }
23
-
24
- &-description {
25
- color: rgba(0, 0, 0, 45%);
26
- font-size: 14Px;
27
- padding: 8Px;
28
- }
29
- }
1
+ .triones-antm-empty {
2
+ text-align: center;
3
+
4
+ &-wrapper {
5
+ width: 100%;
6
+ height: 100%;
7
+ display: flex;
8
+ align-items: center;
9
+ justify-content: space-around;
10
+ }
11
+
12
+ &-image {
13
+ //margin-bottom: 8Px;
14
+ :global {
15
+ img,
16
+ image {
17
+ width: 100%;
18
+ height: 100%;
19
+ object-fit: cover;
20
+ }
21
+ }
22
+ }
23
+
24
+ &-description {
25
+ color: rgba(0, 0, 0, 45%);
26
+ font-size: 14Px;
27
+ padding: 8Px;
28
+ }
29
+ }
@@ -1,5 +1,5 @@
1
- /**
2
- * compact: true
1
+ /**
2
+ * compact: true
3
3
  */
4
4
  import { DemoBlock } from "../../DemoBlock";
5
5
  import React from 'react';
@@ -1,62 +1,62 @@
1
- $class-prefix-error-block: 'triones-antm-error-block';
2
- /* prettier-ignore */
3
- .#{$class-prefix-error-block} {
4
- --color: var(--triones-antm-color-text);
5
- --image-height: var(--triones-antm-error-block-image-height, 100PX);
6
- --image-height-full-page: var(
7
- --triones-antm-error-block-image-height-full-page,
8
- 200PX
9
- );
10
- --image-width: var(--triones-antm-error-block-image-width, auto);
11
- --image-width-full-page: var(
12
- --triones-antm-error-block-image-width-full-page,
13
- auto
14
- );
15
- width: 100%;
16
- box-sizing: border-box;
17
- text-align: center;
18
-
19
- &-image {
20
- height: var(--image-height);
21
- width: var(--image-width);
22
- max-width: 100%;
23
-
24
- & svg,
25
- img {
26
- height: 100%;
27
- }
28
- }
29
-
30
- &-description {
31
- font-size: var(--triones-antm-font-size-4);
32
- color: var(--triones-antm-color-weak);
33
- line-height: 1.4;
34
- margin-top: 12PX;
35
- &-title {
36
- font-size: var(--triones-antm-font-size-7);
37
- }
38
- &-subtitle {
39
- margin-top: 8PX;
40
- }
41
- }
42
-
43
- &-content {
44
- margin-top: 12PX;
45
- }
46
-
47
- &-full-page {
48
- padding-top: calc(50vh - var(--image-height-full-page));
49
- .#{$class-prefix-error-block}-image {
50
- height: var(--image-height-full-page);
51
- width: var(--image-width-full-page);
52
- }
53
- .#{$class-prefix-error-block}-description {
54
- margin-top: 20PX;
55
- font-size: var(--triones-antm-font-size-main);
56
- &-title {
57
- font-size: 20PX;
58
- color: var(--triones-antm-color-text);
59
- }
60
- }
61
- }
62
- }
1
+ $class-prefix-error-block: 'triones-antm-error-block';
2
+ /* prettier-ignore */
3
+ .#{$class-prefix-error-block} {
4
+ --color: var(--triones-antm-color-text);
5
+ --image-height: var(--triones-antm-error-block-image-height, 100PX);
6
+ --image-height-full-page: var(
7
+ --triones-antm-error-block-image-height-full-page,
8
+ 200PX
9
+ );
10
+ --image-width: var(--triones-antm-error-block-image-width, auto);
11
+ --image-width-full-page: var(
12
+ --triones-antm-error-block-image-width-full-page,
13
+ auto
14
+ );
15
+ width: 100%;
16
+ box-sizing: border-box;
17
+ text-align: center;
18
+
19
+ &-image {
20
+ height: var(--image-height);
21
+ width: var(--image-width);
22
+ max-width: 100%;
23
+
24
+ & svg,
25
+ img {
26
+ height: 100%;
27
+ }
28
+ }
29
+
30
+ &-description {
31
+ font-size: var(--triones-antm-font-size-4);
32
+ color: var(--triones-antm-color-weak);
33
+ line-height: 1.4;
34
+ margin-top: 12PX;
35
+ &-title {
36
+ font-size: var(--triones-antm-font-size-7);
37
+ }
38
+ &-subtitle {
39
+ margin-top: 8PX;
40
+ }
41
+ }
42
+
43
+ &-content {
44
+ margin-top: 12PX;
45
+ }
46
+
47
+ &-full-page {
48
+ padding-top: calc(50vh - var(--image-height-full-page));
49
+ .#{$class-prefix-error-block}-image {
50
+ height: var(--image-height-full-page);
51
+ width: var(--image-width-full-page);
52
+ }
53
+ .#{$class-prefix-error-block}-description {
54
+ margin-top: 20PX;
55
+ font-size: var(--triones-antm-font-size-main);
56
+ &-title {
57
+ font-size: 20PX;
58
+ color: var(--triones-antm-color-text);
59
+ }
60
+ }
61
+ }
62
+ }
@@ -1,55 +1,55 @@
1
- $class-prefix-footer: 'triones-antm-footer';
2
- /* prettier-ignore */
3
- .#{$class-prefix-footer} {
4
- --background-color: #ffffff;
5
-
6
- color: #333333;
7
- display: flex;
8
- flex-direction: column;
9
- align-items: center;
10
- background-color: var(--background-color);
11
-
12
- &-label {
13
- width: 100%;
14
- .triones-antm-divider {
15
- color: #cccccc;
16
- }
17
- }
18
- &-links {
19
- margin: 8PX 0;
20
- color: #1677ff;
21
- white-space: nowrap;
22
- &-item {
23
- display: inline-block;
24
- }
25
- }
26
- &-content {
27
- display: flex;
28
- align-items: center;
29
- margin: 8PX 0;
30
- color: #cccccc;
31
- }
32
- &-chips {
33
- display: flex;
34
- align-items: center;
35
- white-space: nowrap;
36
- margin: 8PX 0;
37
- }
38
- &-chip {
39
- white-space: nowrap;
40
- margin-right: 20PX;
41
- font-size: 12PX;
42
- background-color: #f5f5f5;
43
- color: #999999;
44
- padding: 4PX 12PX;
45
- border-radius: 100PX;
46
- &-link {
47
- cursor: pointer;
48
- background-color: #e7f1ff;
49
- color: #1677ff;
50
- }
51
- &:last-child {
52
- margin-right: 0;
53
- }
54
- }
55
- }
1
+ $class-prefix-footer: 'triones-antm-footer';
2
+ /* prettier-ignore */
3
+ .#{$class-prefix-footer} {
4
+ --background-color: #ffffff;
5
+
6
+ color: #333333;
7
+ display: flex;
8
+ flex-direction: column;
9
+ align-items: center;
10
+ background-color: var(--background-color);
11
+
12
+ &-label {
13
+ width: 100%;
14
+ .triones-antm-divider {
15
+ color: #cccccc;
16
+ }
17
+ }
18
+ &-links {
19
+ margin: 8PX 0;
20
+ color: #1677ff;
21
+ white-space: nowrap;
22
+ &-item {
23
+ display: inline-block;
24
+ }
25
+ }
26
+ &-content {
27
+ display: flex;
28
+ align-items: center;
29
+ margin: 8PX 0;
30
+ color: #cccccc;
31
+ }
32
+ &-chips {
33
+ display: flex;
34
+ align-items: center;
35
+ white-space: nowrap;
36
+ margin: 8PX 0;
37
+ }
38
+ &-chip {
39
+ white-space: nowrap;
40
+ margin-right: 20PX;
41
+ font-size: 12PX;
42
+ background-color: #f5f5f5;
43
+ color: #999999;
44
+ padding: 4PX 12PX;
45
+ border-radius: 100PX;
46
+ &-link {
47
+ cursor: pointer;
48
+ background-color: #e7f1ff;
49
+ color: #1677ff;
50
+ }
51
+ &:last-child {
52
+ margin-right: 0;
53
+ }
54
+ }
55
+ }
@@ -1,11 +1,11 @@
1
- @use "../style/variable" as variable;
2
-
3
- .triones-antm-form{
4
- &-item{
5
- &-explain-error{
6
- font-size: variable.$trionesFontSizeSm;
7
- color: variable.$trionesColorError;
8
- }
9
- }
10
-
11
- }
1
+ @use "../style/variable" as variable;
2
+
3
+ .triones-antm-form{
4
+ &-item{
5
+ &-explain-error{
6
+ font-size: variable.$trionesFontSizeSm;
7
+ color: variable.$trionesColorError;
8
+ }
9
+ }
10
+
11
+ }
@@ -1,103 +1,103 @@
1
- @use "../style/variable" as variable;
2
-
3
- $cellCls: 'triones-antm-form-cell';
4
-
5
- .#{$cellCls} {
6
- width: 100%;
7
- display: flex;
8
- flex-direction: row;
9
- gap: 4Px;
10
- align-items: center;
11
-
12
- &-content {
13
- flex: 1 auto;
14
- display: flex;
15
- align-items: center;
16
- min-height: 20Px;
17
- }
18
-
19
- &-placeholder {
20
- font-size: variable.$trionesFontSize;
21
- color: variable.$trionesColorTextPlaceholder;
22
- //width: 100%;
23
- }
24
-
25
- &-extra {
26
- flex-shrink: 0;
27
- }
28
-
29
- &-arrow {
30
- flex-shrink: 0;
31
-
32
- .triones-antm-icon {
33
- color: variable.$trionesColorTextPlaceholder;
34
- font-size: variable.$trionesFontSize;
35
- }
36
- }
37
-
38
- &-small {
39
- min-height: 20Px;
40
- }
41
-
42
- &-medium {
43
- //min-height: 32Px;
44
- }
45
-
46
- &-large {
47
- min-height: 40Px;
48
- }
49
-
50
- &-start {
51
- .#{$cellCls} {
52
- &-content {
53
- justify-content: flex-start;
54
- }
55
- }
56
- }
57
-
58
- &-center {
59
- .#{$cellCls} {
60
- &-content {
61
- justify-content: center;
62
- }
63
- }
64
- }
65
-
66
- &-end {
67
- .#{$cellCls} {
68
- &-content {
69
- justify-content: flex-end;
70
- }
71
- }
72
- }
73
-
74
- &-borderless {
75
- border: 0;
76
- }
77
-
78
- &-outlined {
79
- border-radius: variable.$trionesBorderRadius;
80
- border: 1Px solid variable.$trionesBorderColor;
81
- padding-inline: 4Px;
82
- box-sizing: border-box;
83
- min-height: variable.$trionesControlHeight;
84
- }
85
-
86
- &-filled {
87
- border-radius: variable.$trionesBorderRadius;
88
- background-color: variable.$trionesColorFillTertiary;
89
- padding-inline: 4Px;
90
- box-sizing: border-box;
91
- border: 0;
92
- min-height: variable.$trionesControlHeight;
93
- }
94
-
95
- &-underlined {
96
- border-top: 0;
97
- border-left: 0;
98
- border-right: 0;
99
- border-bottom: 1Px solid variable.$trionesBorderColor;
100
- box-sizing: border-box;
101
- min-height: variable.$trionesControlHeight;
102
- }
103
- }
1
+ @use "../style/variable" as variable;
2
+
3
+ $cellCls: 'triones-antm-form-cell';
4
+
5
+ .#{$cellCls} {
6
+ width: 100%;
7
+ display: flex;
8
+ flex-direction: row;
9
+ gap: 4Px;
10
+ align-items: center;
11
+
12
+ &-content {
13
+ flex: 1 auto;
14
+ display: flex;
15
+ align-items: center;
16
+ min-height: 20Px;
17
+ }
18
+
19
+ &-placeholder {
20
+ font-size: variable.$trionesFontSize;
21
+ color: variable.$trionesColorTextPlaceholder;
22
+ //width: 100%;
23
+ }
24
+
25
+ &-extra {
26
+ flex-shrink: 0;
27
+ }
28
+
29
+ &-arrow {
30
+ flex-shrink: 0;
31
+
32
+ .triones-antm-icon {
33
+ color: variable.$trionesColorTextPlaceholder;
34
+ font-size: variable.$trionesFontSize;
35
+ }
36
+ }
37
+
38
+ &-small {
39
+ min-height: 20Px;
40
+ }
41
+
42
+ &-medium {
43
+ //min-height: 32Px;
44
+ }
45
+
46
+ &-large {
47
+ min-height: 40Px;
48
+ }
49
+
50
+ &-start {
51
+ .#{$cellCls} {
52
+ &-content {
53
+ justify-content: flex-start;
54
+ }
55
+ }
56
+ }
57
+
58
+ &-center {
59
+ .#{$cellCls} {
60
+ &-content {
61
+ justify-content: center;
62
+ }
63
+ }
64
+ }
65
+
66
+ &-end {
67
+ .#{$cellCls} {
68
+ &-content {
69
+ justify-content: flex-end;
70
+ }
71
+ }
72
+ }
73
+
74
+ &-borderless {
75
+ border: 0;
76
+ }
77
+
78
+ &-outlined {
79
+ border-radius: variable.$trionesBorderRadius;
80
+ border: 1Px solid variable.$trionesBorderColor;
81
+ padding-inline: 4Px;
82
+ box-sizing: border-box;
83
+ min-height: variable.$trionesControlHeight;
84
+ }
85
+
86
+ &-filled {
87
+ border-radius: variable.$trionesBorderRadius;
88
+ background-color: variable.$trionesColorFillTertiary;
89
+ padding-inline: 4Px;
90
+ box-sizing: border-box;
91
+ border: 0;
92
+ min-height: variable.$trionesControlHeight;
93
+ }
94
+
95
+ &-underlined {
96
+ border-top: 0;
97
+ border-left: 0;
98
+ border-right: 0;
99
+ border-bottom: 1Px solid variable.$trionesBorderColor;
100
+ box-sizing: border-box;
101
+ min-height: variable.$trionesControlHeight;
102
+ }
103
+ }