@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
@@ -1,154 +1,154 @@
1
- @use "../style/variable" as variable;
2
-
3
- $checkboxDisabledColor: rgba(0, 0, 0, 0.25) !default;
4
-
5
- $class-prefix-radio: 'triones-antm-radio';
6
-
7
- .#{$class-prefix-radio}-wrapper {
8
- cursor: pointer;
9
- display: flex;
10
- align-items: center;
11
- gap: 8Px;
12
-
13
- .#{$class-prefix-radio} {
14
- flex-shrink: 0;
15
- &-fake {
16
- width: 20PX;
17
- height: 20PX;
18
- line-height: 0;
19
- box-sizing: border-box;
20
- overflow: hidden;
21
-
22
- .triones-antm-icon {
23
- //position: absolute;
24
- font-size: variable.$trionesFontSize;
25
- }
26
-
27
- &-checked {
28
- height: 100%;
29
- width: 100%;
30
- display: inline-flex;
31
- justify-content: center;
32
- align-items: center;
33
- background-color: variable.$trionesColorPrimary;
34
- color: white;
35
- border-radius: 50vh;
36
- box-sizing: border-box;
37
- overflow: hidden;
38
-
39
- .triones-antm-icon {
40
- font-size: 14Px;
41
- line-height: 1;
42
- display: block;
43
- }
44
- }
45
-
46
- &-unchecked {
47
- height: 100%;
48
- width: 100%;
49
- display: inline-flex;
50
- justify-content: center;
51
- align-items: center;
52
- border-radius: 50vh;
53
- border: 1PX solid variable.$trionesBorderColor;
54
- box-sizing: border-box;
55
- }
56
-
57
- }
58
-
59
-
60
- &-label {
61
- flex: 1 auto;
62
- }
63
- }
64
-
65
- &.#{$class-prefix-radio} {
66
- &-disabled {
67
- color: $checkboxDisabledColor;
68
- pointer-events: none;
69
-
70
- .#{$class-prefix-radio}-fake-checked {
71
- background-color: $checkboxDisabledColor;
72
- }
73
- }
74
-
75
- &-block {
76
- width: 100%;
77
- }
78
- }
79
-
80
- }
81
-
82
-
83
- .#{$class-prefix-radio}-group {
84
-
85
- gap: 8Px;
86
-
87
- &-horizontal {
88
- display: inline-flex;
89
- flex-direction: row;
90
- align-items: center;
91
- vertical-align: middle;
92
- }
93
-
94
- &-vertical {
95
- display: flex;
96
- flex-direction: column;
97
- }
98
- }
99
-
100
- .#{$class-prefix-radio}-button-group {
101
- display: flex;
102
- }
103
-
104
- .#{$class-prefix-radio}-button-wrapper {
105
- display: inline-flex;
106
- position: relative;
107
- border-top: 1PX solid variable.$trionesBorderColor;
108
- border-bottom: 1PX solid variable.$trionesBorderColor;
109
- border-right: 1PX solid variable.$trionesBorderColor;
110
-
111
- &:first-child {
112
- border-left: 1PX solid variable.$trionesBorderColor;
113
- border-top-left-radius: variable.$trionesBorderRadius;
114
- border-bottom-left-radius: variable.$trionesBorderRadius;
115
- }
116
-
117
- &:last-child {
118
- border-right: 1PX solid variable.$trionesBorderColor;
119
- border-top-right-radius: variable.$trionesBorderRadius;
120
- border-bottom-right-radius: variable.$trionesBorderRadius;
121
- }
122
-
123
- &-checked {
124
- border-top: 1PX solid variable.$trionesColorPrimary;
125
- border-bottom: 1PX solid variable.$trionesColorPrimary;
126
- color: variable.$trionesColorPrimary;
127
-
128
- &:first-child {
129
- border: 1PX solid variable.$trionesColorPrimary;
130
- }
131
-
132
- &:not(:first-child) {
133
- &::before {
134
- content: " ";
135
- width: 1PX;
136
- background-color: variable.$trionesColorPrimary;
137
- position: absolute;
138
- inset-block-start: -1Px;
139
- inset-inline-start: -1Px;
140
- height: 100%;
141
- padding-block: 1Px;
142
- }
143
-
144
- border-right: 1PX solid variable.$trionesColorPrimary;
145
- }
146
- }
147
-
148
- .#{$class-prefix-radio}-button {
149
- cursor: pointer;
150
- display: inline-flex;
151
- padding: 8Px 12Px;
152
-
153
- }
154
- }
1
+ @use "../style/variable" as variable;
2
+
3
+ $checkboxDisabledColor: rgba(0, 0, 0, 0.25) !default;
4
+
5
+ $class-prefix-radio: 'triones-antm-radio';
6
+
7
+ .#{$class-prefix-radio}-wrapper {
8
+ cursor: pointer;
9
+ display: flex;
10
+ align-items: center;
11
+ gap: 8Px;
12
+
13
+ .#{$class-prefix-radio} {
14
+ flex-shrink: 0;
15
+ &-fake {
16
+ width: 20PX;
17
+ height: 20PX;
18
+ line-height: 0;
19
+ box-sizing: border-box;
20
+ overflow: hidden;
21
+
22
+ .triones-antm-icon {
23
+ //position: absolute;
24
+ font-size: variable.$trionesFontSize;
25
+ }
26
+
27
+ &-checked {
28
+ height: 100%;
29
+ width: 100%;
30
+ display: inline-flex;
31
+ justify-content: center;
32
+ align-items: center;
33
+ background-color: variable.$trionesColorPrimary;
34
+ color: white;
35
+ border-radius: 50vh;
36
+ box-sizing: border-box;
37
+ overflow: hidden;
38
+
39
+ .triones-antm-icon {
40
+ font-size: 14Px;
41
+ line-height: 1;
42
+ display: block;
43
+ }
44
+ }
45
+
46
+ &-unchecked {
47
+ height: 100%;
48
+ width: 100%;
49
+ display: inline-flex;
50
+ justify-content: center;
51
+ align-items: center;
52
+ border-radius: 50vh;
53
+ border: 1PX solid variable.$trionesBorderColor;
54
+ box-sizing: border-box;
55
+ }
56
+
57
+ }
58
+
59
+
60
+ &-label {
61
+ flex: 1 auto;
62
+ }
63
+ }
64
+
65
+ &.#{$class-prefix-radio} {
66
+ &-disabled {
67
+ color: $checkboxDisabledColor;
68
+ pointer-events: none;
69
+
70
+ .#{$class-prefix-radio}-fake-checked {
71
+ background-color: $checkboxDisabledColor;
72
+ }
73
+ }
74
+
75
+ &-block {
76
+ width: 100%;
77
+ }
78
+ }
79
+
80
+ }
81
+
82
+
83
+ .#{$class-prefix-radio}-group {
84
+
85
+ gap: 8Px;
86
+
87
+ &-horizontal {
88
+ display: inline-flex;
89
+ flex-direction: row;
90
+ align-items: center;
91
+ vertical-align: middle;
92
+ }
93
+
94
+ &-vertical {
95
+ display: flex;
96
+ flex-direction: column;
97
+ }
98
+ }
99
+
100
+ .#{$class-prefix-radio}-button-group {
101
+ display: flex;
102
+ }
103
+
104
+ .#{$class-prefix-radio}-button-wrapper {
105
+ display: inline-flex;
106
+ position: relative;
107
+ border-top: 1PX solid variable.$trionesBorderColor;
108
+ border-bottom: 1PX solid variable.$trionesBorderColor;
109
+ border-right: 1PX solid variable.$trionesBorderColor;
110
+
111
+ &:first-child {
112
+ border-left: 1PX solid variable.$trionesBorderColor;
113
+ border-top-left-radius: variable.$trionesBorderRadius;
114
+ border-bottom-left-radius: variable.$trionesBorderRadius;
115
+ }
116
+
117
+ &:last-child {
118
+ border-right: 1PX solid variable.$trionesBorderColor;
119
+ border-top-right-radius: variable.$trionesBorderRadius;
120
+ border-bottom-right-radius: variable.$trionesBorderRadius;
121
+ }
122
+
123
+ &-checked {
124
+ border-top: 1PX solid variable.$trionesColorPrimary;
125
+ border-bottom: 1PX solid variable.$trionesColorPrimary;
126
+ color: variable.$trionesColorPrimary;
127
+
128
+ &:first-child {
129
+ border: 1PX solid variable.$trionesColorPrimary;
130
+ }
131
+
132
+ &:not(:first-child) {
133
+ &::before {
134
+ content: " ";
135
+ width: 1PX;
136
+ background-color: variable.$trionesColorPrimary;
137
+ position: absolute;
138
+ inset-block-start: -1Px;
139
+ inset-inline-start: -1Px;
140
+ height: 100%;
141
+ padding-block: 1Px;
142
+ }
143
+
144
+ border-right: 1PX solid variable.$trionesColorPrimary;
145
+ }
146
+ }
147
+
148
+ .#{$class-prefix-radio}-button {
149
+ cursor: pointer;
150
+ display: inline-flex;
151
+ padding: 8Px 12Px;
152
+
153
+ }
154
+ }
@@ -1,37 +1,37 @@
1
- $rateCls: 'triones-antm-rate';
2
-
3
- .#{$rateCls} {
4
- display: inline-flex;
5
- align-items: center;
6
-
7
- &-star-wrapper {
8
- position: relative;
9
- padding: 0 2px;
10
- cursor: pointer;
11
- }
12
-
13
- &-star {
14
- font-size: 20px;
15
- color: var(--inactive-color, #e8e8e8);
16
- transition: color 0.3s;
17
-
18
- &-active {
19
- color: var(--active-color, #ffb400);
20
- }
21
- }
22
-
23
- &-star-half-item {
24
- position: absolute;
25
- left: 2px;
26
- top: 0;
27
- width: 42%;
28
- height: 100%;
29
- overflow: hidden;
30
- }
31
-
32
- &-readonly {
33
- .#{$rateCls}-star-wrapper {
34
- cursor: default;
35
- }
36
- }
37
- }
1
+ $rateCls: 'triones-antm-rate';
2
+
3
+ .#{$rateCls} {
4
+ display: inline-flex;
5
+ align-items: center;
6
+
7
+ &-star-wrapper {
8
+ position: relative;
9
+ padding: 0 2px;
10
+ cursor: pointer;
11
+ }
12
+
13
+ &-star {
14
+ font-size: 20px;
15
+ color: var(--inactive-color, #e8e8e8);
16
+ transition: color 0.3s;
17
+
18
+ &-active {
19
+ color: var(--active-color, #ffb400);
20
+ }
21
+ }
22
+
23
+ &-star-half-item {
24
+ position: absolute;
25
+ left: 2px;
26
+ top: 0;
27
+ width: 42%;
28
+ height: 100%;
29
+ overflow: hidden;
30
+ }
31
+
32
+ &-readonly {
33
+ .#{$rateCls}-star-wrapper {
34
+ cursor: default;
35
+ }
36
+ }
37
+ }
@@ -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,73 +1,73 @@
1
- $class-prefix-result: 'triones-antm-result';
2
- /* prettier-ignore */
3
- .#{$class-prefix-result} {
4
- padding: 32PX 12PX;
5
- background-color: var(--triones-antm-color-background);
6
-
7
- &-icon {
8
- box-sizing: border-box;
9
- width: 64PX;
10
- height: 64PX;
11
- margin: 0 auto 20PX auto;
12
- padding: 6PX;
13
-
14
- .antd-mobile-icon {
15
- font-size: 52PX;
16
- }
17
- }
18
-
19
- &-title {
20
- color: var(--triones-antm-color-text);
21
- font-size: var(--triones-antm-font-size-10);
22
- line-height: 1.4;
23
- text-align: center;
24
- }
25
-
26
- &-description {
27
- margin-top: 8PX;
28
- color: var(--triones-antm-color-weak);
29
- font-size: var(--triones-antm-font-size-main);
30
- line-height: 1.4;
31
- text-align: center;
32
- }
33
- }
34
-
35
- .#{$class-prefix-result}-success {
36
- .#{$class-prefix-result}-icon {
37
- .antd-mobile-icon {
38
- color: var(--triones-antm-color-primary);
39
- }
40
- }
41
- }
42
-
43
- .#{$class-prefix-result}-error {
44
- .#{$class-prefix-result}-icon {
45
- .antd-mobile-icon {
46
- color: var(--triones-antm-color-danger);
47
- }
48
- }
49
- }
50
-
51
- .#{$class-prefix-result}-info {
52
- .#{$class-prefix-result}-icon {
53
- .antd-mobile-icon {
54
- color: var(--triones-antm-color-primary);
55
- }
56
- }
57
- }
58
-
59
- .#{$class-prefix-result}-waiting {
60
- .#{$class-prefix-result}-icon {
61
- .antd-mobile-icon {
62
- color: var(--triones-antm-color-success);
63
- }
64
- }
65
- }
66
-
67
- .#{$class-prefix-result}-warning {
68
- .#{$class-prefix-result}-icon {
69
- .antd-mobile-icon {
70
- color: var(--triones-antm-color-warning);
71
- }
72
- }
73
- }
1
+ $class-prefix-result: 'triones-antm-result';
2
+ /* prettier-ignore */
3
+ .#{$class-prefix-result} {
4
+ padding: 32PX 12PX;
5
+ background-color: var(--triones-antm-color-background);
6
+
7
+ &-icon {
8
+ box-sizing: border-box;
9
+ width: 64PX;
10
+ height: 64PX;
11
+ margin: 0 auto 20PX auto;
12
+ padding: 6PX;
13
+
14
+ .antd-mobile-icon {
15
+ font-size: 52PX;
16
+ }
17
+ }
18
+
19
+ &-title {
20
+ color: var(--triones-antm-color-text);
21
+ font-size: var(--triones-antm-font-size-10);
22
+ line-height: 1.4;
23
+ text-align: center;
24
+ }
25
+
26
+ &-description {
27
+ margin-top: 8PX;
28
+ color: var(--triones-antm-color-weak);
29
+ font-size: var(--triones-antm-font-size-main);
30
+ line-height: 1.4;
31
+ text-align: center;
32
+ }
33
+ }
34
+
35
+ .#{$class-prefix-result}-success {
36
+ .#{$class-prefix-result}-icon {
37
+ .antd-mobile-icon {
38
+ color: var(--triones-antm-color-primary);
39
+ }
40
+ }
41
+ }
42
+
43
+ .#{$class-prefix-result}-error {
44
+ .#{$class-prefix-result}-icon {
45
+ .antd-mobile-icon {
46
+ color: var(--triones-antm-color-danger);
47
+ }
48
+ }
49
+ }
50
+
51
+ .#{$class-prefix-result}-info {
52
+ .#{$class-prefix-result}-icon {
53
+ .antd-mobile-icon {
54
+ color: var(--triones-antm-color-primary);
55
+ }
56
+ }
57
+ }
58
+
59
+ .#{$class-prefix-result}-waiting {
60
+ .#{$class-prefix-result}-icon {
61
+ .antd-mobile-icon {
62
+ color: var(--triones-antm-color-success);
63
+ }
64
+ }
65
+ }
66
+
67
+ .#{$class-prefix-result}-warning {
68
+ .#{$class-prefix-result}-icon {
69
+ .antd-mobile-icon {
70
+ color: var(--triones-antm-color-warning);
71
+ }
72
+ }
73
+ }
@@ -1,20 +1,20 @@
1
- @use "../style/variable" as variable;
2
-
3
- $class-prefix-safe-area: 'triones-antm-safe-area';
4
-
5
- $safeAreaMultiple : variable.$trionesSafeAreaMultiple;
6
-
7
- .#{$class-prefix-safe-area} {
8
- height: 100%;
9
- display: block;
10
- width: 100%;
11
- box-sizing: border-box;
12
-
13
- &-position-top {
14
- padding-top: calc(env(safe-area-inset-top) * $safeAreaMultiple);
15
- }
16
-
17
- &-position-bottom {
18
- padding-bottom: calc(env(safe-area-inset-bottom) * $safeAreaMultiple);
19
- }
20
- }
1
+ @use "../style/variable" as variable;
2
+
3
+ $class-prefix-safe-area: 'triones-antm-safe-area';
4
+
5
+ $safeAreaMultiple : variable.$trionesSafeAreaMultiple;
6
+
7
+ .#{$class-prefix-safe-area} {
8
+ height: 100%;
9
+ display: block;
10
+ width: 100%;
11
+ box-sizing: border-box;
12
+
13
+ &-position-top {
14
+ padding-top: calc(env(safe-area-inset-top) * $safeAreaMultiple);
15
+ }
16
+
17
+ &-position-bottom {
18
+ padding-bottom: calc(env(safe-area-inset-bottom) * $safeAreaMultiple);
19
+ }
20
+ }
@@ -1,17 +1,17 @@
1
- @use "../style/variable" as variable;
2
-
3
-
4
- $trionesScaffoldCls: 'triones-antm-scaffold';
5
-
6
- .#{$trionesScaffoldCls} {
7
- height: 100%;
8
- width: 100%;
9
- display: flex;
10
- flex-direction: column;
11
- background-color: variable.$trionesColorBgScaffold;
12
-
13
- &-body {
14
- flex: 1 auto;
15
- overflow: hidden;
16
- }
17
- }
1
+ @use "../style/variable" as variable;
2
+
3
+
4
+ $trionesScaffoldCls: 'triones-antm-scaffold';
5
+
6
+ .#{$trionesScaffoldCls} {
7
+ height: 100%;
8
+ width: 100%;
9
+ display: flex;
10
+ flex-direction: column;
11
+ background-color: variable.$trionesColorBgScaffold;
12
+
13
+ &-body {
14
+ flex: 1 auto;
15
+ overflow: hidden;
16
+ }
17
+ }