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

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/index.scss +173 -165
  10. package/dist/Checkbox/types.d.ts +1 -1
  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 +13 -11
package/dist/NavBar/style.scss CHANGED
@@ -1,65 +1,65 @@
1
- @use "../style/variable" as variable;
2
-
3
- $trionesNavBarColorBg: variable.$trionesColorBorderBg !default;
4
- $trionesNavBarColorText: variable.$trionesColorTextBase !default;
5
-
6
- $class-prefix-nav-bar: 'triones-antm-nav-bar';
7
- /* prettier-ignore */
8
- .#{$class-prefix-nav-bar} {
9
- --height: 45PX;
10
- --border-bottom: none;
11
- display: flex;
12
- flex: none;
13
- align-items: center;
14
- height: var(--height);
15
- border-bottom: var(--border-bottom);
16
- padding: 0 12PX;
17
- white-space: nowrap;
18
- color: $trionesNavBarColorText;
19
- background-color: $trionesNavBarColorBg;
20
-
21
- &-left,
22
- &-right {
23
- flex: 1;
24
- }
25
-
26
- &-title {
27
- flex: auto;
28
- text-align: center;
29
- overflow: hidden;
30
- text-overflow: ellipsis;
31
- }
32
-
33
- &-back {
34
- display: flex;
35
- align-items: center;
36
- margin-right: 16PX;
37
- padding: 6PX 0;
38
- cursor: pointer;
39
-
40
- &-arrow {
41
- font-size: 20PX;
42
- margin-right: 5PX;
43
- display: flex;
44
- align-items: center;
45
- }
46
- }
47
-
48
- &-left {
49
- font-size: var(--triones-antm-font-size-7);
50
- display: flex;
51
- justify-content: flex-start;
52
- align-items: center;
53
- }
54
-
55
- &-title {
56
- justify-content: center;
57
- white-space: nowrap;
58
- font-size: var(--triones-antm-font-size-10);
59
- padding: 0 12PX;
60
- }
61
-
62
- &-right {
63
- text-align: right;
64
- }
65
- }
1
+ @use "../style/variable" as variable;
2
+
3
+ $trionesNavBarColorBg: variable.$trionesColorBorderBg !default;
4
+ $trionesNavBarColorText: variable.$trionesColorTextBase !default;
5
+
6
+ $class-prefix-nav-bar: 'triones-antm-nav-bar';
7
+ /* prettier-ignore */
8
+ .#{$class-prefix-nav-bar} {
9
+ --height: 45PX;
10
+ --border-bottom: none;
11
+ display: flex;
12
+ flex: none;
13
+ align-items: center;
14
+ height: var(--height);
15
+ border-bottom: var(--border-bottom);
16
+ padding: 0 12PX;
17
+ white-space: nowrap;
18
+ color: $trionesNavBarColorText;
19
+ background-color: $trionesNavBarColorBg;
20
+
21
+ &-left,
22
+ &-right {
23
+ flex: 1;
24
+ }
25
+
26
+ &-title {
27
+ flex: auto;
28
+ text-align: center;
29
+ overflow: hidden;
30
+ text-overflow: ellipsis;
31
+ }
32
+
33
+ &-back {
34
+ display: flex;
35
+ align-items: center;
36
+ margin-right: 16PX;
37
+ padding: 6PX 0;
38
+ cursor: pointer;
39
+
40
+ &-arrow {
41
+ font-size: 20PX;
42
+ margin-right: 5PX;
43
+ display: flex;
44
+ align-items: center;
45
+ }
46
+ }
47
+
48
+ &-left {
49
+ font-size: var(--triones-antm-font-size-7);
50
+ display: flex;
51
+ justify-content: flex-start;
52
+ align-items: center;
53
+ }
54
+
55
+ &-title {
56
+ justify-content: center;
57
+ white-space: nowrap;
58
+ font-size: var(--triones-antm-font-size-10);
59
+ padding: 0 12PX;
60
+ }
61
+
62
+ &-right {
63
+ text-align: right;
64
+ }
65
+ }
package/dist/NoticeBar/style.scss CHANGED
@@ -1,130 +1,130 @@
1
- $class-prefix-notice-bar: 'triones-antm-notice-bar';
2
- /* prettier-ignore */
3
- .#{$class-prefix-notice-bar} {
4
- --background-color: var(--triones-antm-color-weak);
5
- --border-color: var(--triones-antm-color-weak);
6
- --text-color: var(--triones-antm-color-text-light-solid);
7
- --font-size: var(--triones-antm-font-size-7);
8
- --icon-font-size: var(--triones-antm-font-size-10);
9
- --height: 40PX;
10
- --triones-antm-notice-bar-border-radius: 4PX;
11
- --triones-antm-notice-bar-border-width: 1PX;
12
-
13
- flex: 1 auto;
14
- height: var(--height);
15
- box-sizing: border-box;
16
- font-size: var(--font-size);
17
- padding: 0 12PX;
18
- display: flex;
19
- align-items: center;
20
- justify-content: space-between;
21
-
22
- border: solid var(--triones-antm-notice-bar-border-width) var(--border-color);
23
- border-left-width: 0;
24
- border-right-width: 0;
25
- background-color: var(--background-color);
26
- color: var(--text-color);
27
- & > span[role='img'] {
28
- color: var(--text-color);
29
- }
30
-
31
- &.#{$class-prefix-notice-bar}-alert {
32
- --background-color: #fff9ed;
33
- --border-color: #fff3e9;
34
- --text-color: var(--triones-antm-color-orange);
35
- }
36
- &.#{$class-prefix-notice-bar}-error {
37
- --background-color: #d9281e;
38
- --border-color: #d9281e;
39
- --text-color: #fff;
40
- }
41
- &.#{$class-prefix-notice-bar}-info {
42
- --background-color: #d0e4ff;
43
- --border-color: #bcd8ff;
44
- --text-color: var(--triones-antm-color-primary);
45
- }
46
- &.#{$class-prefix-notice-bar}-success {
47
- --background-color: #d1fff0;
48
- --border-color: #a8f0d8;
49
- --text-color: var(--triones-antm-color-success);
50
- }
51
-
52
- & .#{$class-prefix-notice-bar}-left {
53
- flex-shrink: 0;
54
- margin-right: 8PX;
55
- font-size: var(--icon-font-size);
56
- }
57
- & .#{$class-prefix-notice-bar}-content {
58
- flex: 1;
59
- overflow: hidden;
60
- position: relative;
61
- height: 100%;
62
- display: flex;
63
- align-items: center;
64
-
65
- & .#{$class-prefix-notice-bar}-content-inner {
66
- width: auto;
67
- transition-timing-function: linear;
68
- white-space: nowrap;
69
- }
70
- }
71
-
72
- & .#{$class-prefix-notice-bar}-right {
73
- display: flex;
74
- align-items: center;
75
- flex-shrink: 0;
76
- margin-left: 12PX;
77
- }
78
-
79
- &-close {
80
- width: 24PX;
81
- height: 24PX;
82
- margin-right: -3PX;
83
- display: flex;
84
- align-items: center;
85
- justify-content: center;
86
- font-size: var(--triones-antm-font-size-10);
87
- }
88
-
89
- &-wrap {
90
- height: auto;
91
- align-items: flex-start;
92
- padding-top: 8PX;
93
- padding-bottom: 8PX;
94
- line-height: 22PX;
95
- }
96
-
97
- &-neutral {
98
- border-radius: var(--triones-antm-notice-bar-border-radius);
99
- -webkit-border-radius: var(--triones-antm-notice-bar-border-radius);
100
- -moz-border-radius: var(--triones-antm-notice-bar-border-radius);
101
- -ms-border-radius: var(--triones-antm-notice-bar-border-radius);
102
- -o-border-radius: var(--triones-antm-notice-bar-border-radius);
103
- }
104
-
105
- &-rounded {
106
- border-radius: 1000PX;
107
- -webkit-border-radius: 1000PX;
108
- -moz-border-radius: 1000PX;
109
- -ms-border-radius: 1000PX;
110
- -o-border-radius: 1000PX;
111
- }
112
-
113
- &-bordered {
114
- border-left-width: var(--triones-antm-notice-bar-border-width);
115
- border-right-width: var(--triones-antm-notice-bar-border-width);
116
- }
117
-
118
- &-without-border {
119
- border-top-width: 0;
120
- border-bottom-width: 0;
121
- }
122
- }
123
-
124
- .#{$class-prefix-notice-bar}.#{$class-prefix-notice-bar}-wrap {
125
- .#{$class-prefix-notice-bar}-content {
126
- .#{$class-prefix-notice-bar}-content-inner {
127
- white-space: normal;
128
- }
129
- }
130
- }
1
+ $class-prefix-notice-bar: 'triones-antm-notice-bar';
2
+ /* prettier-ignore */
3
+ .#{$class-prefix-notice-bar} {
4
+ --background-color: var(--triones-antm-color-weak);
5
+ --border-color: var(--triones-antm-color-weak);
6
+ --text-color: var(--triones-antm-color-text-light-solid);
7
+ --font-size: var(--triones-antm-font-size-7);
8
+ --icon-font-size: var(--triones-antm-font-size-10);
9
+ --height: 40PX;
10
+ --triones-antm-notice-bar-border-radius: 4PX;
11
+ --triones-antm-notice-bar-border-width: 1PX;
12
+
13
+ flex: 1 auto;
14
+ height: var(--height);
15
+ box-sizing: border-box;
16
+ font-size: var(--font-size);
17
+ padding: 0 12PX;
18
+ display: flex;
19
+ align-items: center;
20
+ justify-content: space-between;
21
+
22
+ border: solid var(--triones-antm-notice-bar-border-width) var(--border-color);
23
+ border-left-width: 0;
24
+ border-right-width: 0;
25
+ background-color: var(--background-color);
26
+ color: var(--text-color);
27
+ & > span[role='img'] {
28
+ color: var(--text-color);
29
+ }
30
+
31
+ &.#{$class-prefix-notice-bar}-alert {
32
+ --background-color: #fff9ed;
33
+ --border-color: #fff3e9;
34
+ --text-color: var(--triones-antm-color-orange);
35
+ }
36
+ &.#{$class-prefix-notice-bar}-error {
37
+ --background-color: #d9281e;
38
+ --border-color: #d9281e;
39
+ --text-color: #fff;
40
+ }
41
+ &.#{$class-prefix-notice-bar}-info {
42
+ --background-color: #d0e4ff;
43
+ --border-color: #bcd8ff;
44
+ --text-color: var(--triones-antm-color-primary);
45
+ }
46
+ &.#{$class-prefix-notice-bar}-success {
47
+ --background-color: #d1fff0;
48
+ --border-color: #a8f0d8;
49
+ --text-color: var(--triones-antm-color-success);
50
+ }
51
+
52
+ & .#{$class-prefix-notice-bar}-left {
53
+ flex-shrink: 0;
54
+ margin-right: 8PX;
55
+ font-size: var(--icon-font-size);
56
+ }
57
+ & .#{$class-prefix-notice-bar}-content {
58
+ flex: 1;
59
+ overflow: hidden;
60
+ position: relative;
61
+ height: 100%;
62
+ display: flex;
63
+ align-items: center;
64
+
65
+ & .#{$class-prefix-notice-bar}-content-inner {
66
+ width: auto;
67
+ transition-timing-function: linear;
68
+ white-space: nowrap;
69
+ }
70
+ }
71
+
72
+ & .#{$class-prefix-notice-bar}-right {
73
+ display: flex;
74
+ align-items: center;
75
+ flex-shrink: 0;
76
+ margin-left: 12PX;
77
+ }
78
+
79
+ &-close {
80
+ width: 24PX;
81
+ height: 24PX;
82
+ margin-right: -3PX;
83
+ display: flex;
84
+ align-items: center;
85
+ justify-content: center;
86
+ font-size: var(--triones-antm-font-size-10);
87
+ }
88
+
89
+ &-wrap {
90
+ height: auto;
91
+ align-items: flex-start;
92
+ padding-top: 8PX;
93
+ padding-bottom: 8PX;
94
+ line-height: 22PX;
95
+ }
96
+
97
+ &-neutral {
98
+ border-radius: var(--triones-antm-notice-bar-border-radius);
99
+ -webkit-border-radius: var(--triones-antm-notice-bar-border-radius);
100
+ -moz-border-radius: var(--triones-antm-notice-bar-border-radius);
101
+ -ms-border-radius: var(--triones-antm-notice-bar-border-radius);
102
+ -o-border-radius: var(--triones-antm-notice-bar-border-radius);
103
+ }
104
+
105
+ &-rounded {
106
+ border-radius: 1000PX;
107
+ -webkit-border-radius: 1000PX;
108
+ -moz-border-radius: 1000PX;
109
+ -ms-border-radius: 1000PX;
110
+ -o-border-radius: 1000PX;
111
+ }
112
+
113
+ &-bordered {
114
+ border-left-width: var(--triones-antm-notice-bar-border-width);
115
+ border-right-width: var(--triones-antm-notice-bar-border-width);
116
+ }
117
+
118
+ &-without-border {
119
+ border-top-width: 0;
120
+ border-bottom-width: 0;
121
+ }
122
+ }
123
+
124
+ .#{$class-prefix-notice-bar}.#{$class-prefix-notice-bar}-wrap {
125
+ .#{$class-prefix-notice-bar}-content {
126
+ .#{$class-prefix-notice-bar}-content-inner {
127
+ white-space: normal;
128
+ }
129
+ }
130
+ }
package/dist/PageIndicator/style.scss CHANGED
@@ -1,59 +1,59 @@
1
- /* prettier-ignore */
2
- .triones-antm-page-indicator {
3
- display: flex;
4
- width: auto;
5
-
6
- --dot-color: #ccc;
7
- --active-dot-color: #1677ff;
8
- --dot-size: 3PX;
9
- --active-dot-size: 13PX;
10
- --dot-border-radius: 1PX;
11
- --active-dot-border-radius: var(--dot-border-radius);
12
- --dot-spacing: 3PX;
13
-
14
- &-dot {
15
- display: block;
16
- width: var(--dot-size);
17
- height: var(--dot-size);
18
- border-radius: var(--dot-border-radius);
19
- background: var(--dot-color);
20
-
21
- &:last-child {
22
- margin-right: 0;
23
- }
24
-
25
- &-active {
26
- border-radius: var(--active-dot-border-radius);
27
- background: var(--active-dot-color);
28
- }
29
- }
30
-
31
- &-color-white {
32
- --dot-color: rgba(255, 255, 255, 50%);
33
- --active-dot-color: #fff;
34
- }
35
-
36
- &-horizontal {
37
- flex-direction: row;
38
-
39
- .triones-antm-page-indicator-dot {
40
- margin-right: var(--dot-spacing);
41
-
42
- &-active {
43
- width: var(--active-dot-size);
44
- }
45
- }
46
- }
47
-
48
- &-vertical {
49
- flex-direction: column;
50
-
51
- .triones-antm-page-indicator-dot {
52
- margin-bottom: var(--dot-spacing);
53
-
54
- &-active {
55
- height: var(--active-dot-size);
56
- }
57
- }
58
- }
59
- }
1
+ /* prettier-ignore */
2
+ .triones-antm-page-indicator {
3
+ display: flex;
4
+ width: auto;
5
+
6
+ --dot-color: #ccc;
7
+ --active-dot-color: #1677ff;
8
+ --dot-size: 3PX;
9
+ --active-dot-size: 13PX;
10
+ --dot-border-radius: 1PX;
11
+ --active-dot-border-radius: var(--dot-border-radius);
12
+ --dot-spacing: 3PX;
13
+
14
+ &-dot {
15
+ display: block;
16
+ width: var(--dot-size);
17
+ height: var(--dot-size);
18
+ border-radius: var(--dot-border-radius);
19
+ background: var(--dot-color);
20
+
21
+ &:last-child {
22
+ margin-right: 0;
23
+ }
24
+
25
+ &-active {
26
+ border-radius: var(--active-dot-border-radius);
27
+ background: var(--active-dot-color);
28
+ }
29
+ }
30
+
31
+ &-color-white {
32
+ --dot-color: rgba(255, 255, 255, 50%);
33
+ --active-dot-color: #fff;
34
+ }
35
+
36
+ &-horizontal {
37
+ flex-direction: row;
38
+
39
+ .triones-antm-page-indicator-dot {
40
+ margin-right: var(--dot-spacing);
41
+
42
+ &-active {
43
+ width: var(--active-dot-size);
44
+ }
45
+ }
46
+ }
47
+
48
+ &-vertical {
49
+ flex-direction: column;
50
+
51
+ .triones-antm-page-indicator-dot {
52
+ margin-bottom: var(--dot-spacing);
53
+
54
+ &-active {
55
+ height: var(--active-dot-size);
56
+ }
57
+ }
58
+ }
59
+ }
package/dist/Progress/style.scss CHANGED
@@ -1,33 +1,33 @@
1
- $progressLineCls: 'triones-antm-progress-line';
2
- $progressCircleCls: 'triones-antm-progress-circle';
3
-
4
- .#{$progressLineCls}{
5
- width: 100%;
6
- display: flex;
7
- align-items: center;
8
- gap: 4Px;
9
- &-rail{
10
- flex: 1 auto;
11
- border-radius: 90Px;
12
- }
13
- &-track{
14
- border-radius: 90Px;
15
- }
16
- &-indicator{}
17
- }
18
-
19
- .#{$progressCircleCls} {
20
- position: relative;
21
- &-indicator {
22
- position: absolute;
23
- inset-block-start: 50%;
24
- inset-inline-start: 0;
25
- width: 100%;
26
- margin: 0;
27
- padding: 0;
28
- line-height: 1;
29
- white-space: normal;
30
- text-align: center;
31
- transform: translatey(-50%);
32
- }
33
- }
1
+ $progressLineCls: 'triones-antm-progress-line';
2
+ $progressCircleCls: 'triones-antm-progress-circle';
3
+
4
+ .#{$progressLineCls}{
5
+ width: 100%;
6
+ display: flex;
7
+ align-items: center;
8
+ gap: 4Px;
9
+ &-rail{
10
+ flex: 1 auto;
11
+ border-radius: 90Px;
12
+ }
13
+ &-track{
14
+ border-radius: 90Px;
15
+ }
16
+ &-indicator{}
17
+ }
18
+
19
+ .#{$progressCircleCls} {
20
+ position: relative;
21
+ &-indicator {
22
+ position: absolute;
23
+ inset-block-start: 50%;
24
+ inset-inline-start: 0;
25
+ width: 100%;
26
+ margin: 0;
27
+ padding: 0;
28
+ line-height: 1;
29
+ white-space: normal;
30
+ text-align: center;
31
+ transform: translatey(-50%);
32
+ }
33
+ }