@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
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
+ }