@nutui/nutui-react-taro 4.0.0-beta.5 → 4.0.0-beta.7

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 (142) hide show
  1. package/CHANGELOG.md +15 -0
  2. package/dist/cjs/packages/actionsheet/style/style.harmony.css +12 -6
  3. package/dist/cjs/packages/address/style/style.harmony.css +12 -6
  4. package/dist/cjs/packages/animate/style/style.css +27 -9
  5. package/dist/cjs/packages/animate/style/style.harmony.css +27 -9
  6. package/dist/cjs/packages/animate/style-jmapp/style.css +27 -9
  7. package/dist/cjs/packages/animate/style-jrkf/style.css +27 -9
  8. package/dist/cjs/packages/audio/audio.js +14 -14
  9. package/dist/cjs/packages/audio/style/style.harmony.css +20 -8
  10. package/dist/cjs/packages/badge/badge.js +17 -17
  11. package/dist/cjs/packages/button/button.js +1 -2
  12. package/dist/cjs/packages/button/style/style.css +20 -8
  13. package/dist/cjs/packages/button/style/style.harmony.css +20 -8
  14. package/dist/cjs/packages/button/style-jmapp/style.css +20 -8
  15. package/dist/cjs/packages/button/style-jrkf/style.css +20 -8
  16. package/dist/cjs/packages/calendar/style/style.harmony.css +12 -6
  17. package/dist/cjs/packages/cascader/style/style.harmony.css +12 -6
  18. package/dist/cjs/packages/cascader/utils.js +3 -2
  19. package/dist/cjs/packages/configprovider/types.d.ts +1 -1
  20. package/dist/cjs/packages/datepicker/style/style.harmony.css +12 -6
  21. package/dist/cjs/packages/dialog/style/style.harmony.css +20 -8
  22. package/dist/cjs/packages/empty/style/style.harmony.css +20 -8
  23. package/dist/cjs/packages/imagepreview/style/style.harmony.css +12 -6
  24. package/dist/cjs/packages/indicator/indicator.js +6 -6
  25. package/dist/cjs/packages/infiniteloading/infiniteloading.js +9 -9
  26. package/dist/cjs/packages/navbar/style/style.css +3 -1
  27. package/dist/cjs/packages/navbar/style/style.harmony.css +3 -1
  28. package/dist/cjs/packages/navbar/style-jmapp/style.css +3 -1
  29. package/dist/cjs/packages/navbar/style-jrkf/style.css +3 -1
  30. package/dist/cjs/packages/noticebar/noticebar.js +120 -60
  31. package/dist/cjs/packages/noticebar/style/noticebar.scss +130 -10
  32. package/dist/cjs/packages/noticebar/style/style.css +138 -35
  33. package/dist/cjs/packages/noticebar/style/style.harmony.css +138 -35
  34. package/dist/cjs/packages/noticebar/style-jmapp/noticebar.scss +130 -10
  35. package/dist/cjs/packages/noticebar/style-jmapp/style.css +113 -10
  36. package/dist/cjs/packages/noticebar/style-jrkf/noticebar.scss +130 -10
  37. package/dist/cjs/packages/noticebar/style-jrkf/style.css +113 -10
  38. package/dist/cjs/packages/numberkeyboard/style/style.css +6 -6
  39. package/dist/cjs/packages/numberkeyboard/style/style.harmony.css +18 -12
  40. package/dist/cjs/packages/numberkeyboard/style-jmapp/style.css +6 -6
  41. package/dist/cjs/packages/numberkeyboard/style-jrkf/style.css +6 -6
  42. package/dist/cjs/packages/picker/style/style.harmony.css +12 -6
  43. package/dist/cjs/packages/popover/popover.js +46 -37
  44. package/dist/cjs/packages/popover/style/popover.scss +79 -54
  45. package/dist/cjs/packages/popover/style/style.css +73 -61
  46. package/dist/cjs/packages/popover/style/style.harmony.css +85 -67
  47. package/dist/cjs/packages/popover/style-jmapp/popover.scss +79 -54
  48. package/dist/cjs/packages/popover/style-jmapp/style.css +73 -61
  49. package/dist/cjs/packages/popover/style-jrkf/popover.scss +79 -54
  50. package/dist/cjs/packages/popover/style-jrkf/style.css +73 -61
  51. package/dist/cjs/packages/popup/style/style.css +12 -6
  52. package/dist/cjs/packages/popup/style/style.harmony.css +12 -6
  53. package/dist/cjs/packages/popup/style-jmapp/style.css +12 -6
  54. package/dist/cjs/packages/popup/style-jrkf/style.css +12 -6
  55. package/dist/cjs/packages/pulltorefresh/pulltorefresh.js +54 -54
  56. package/dist/cjs/packages/quickenter/style/style.harmony.css +12 -6
  57. package/dist/cjs/packages/resultpage/style/style.harmony.css +20 -8
  58. package/dist/cjs/packages/shortpassword/style/style.harmony.css +12 -6
  59. package/dist/cjs/packages/skeleton/skeleton.js +15 -15
  60. package/dist/cjs/packages/timeselect/style/style.harmony.css +12 -6
  61. package/dist/cjs/packages/tour/style/style.harmony.css +86 -68
  62. package/dist/cjs/packages/tour/tour.js +1 -1
  63. package/dist/cjs/types/spec/noticebar/base.d.ts +5 -1
  64. package/dist/cjs/types/spec/popover/base.d.ts +4 -0
  65. package/dist/cjs/utils/is-forward-ref-component.js +2 -2
  66. package/dist/cjs/utils/render.js +1 -1
  67. package/dist/es/packages/actionsheet/style/style.harmony.css +12 -6
  68. package/dist/es/packages/address/style/style.harmony.css +12 -6
  69. package/dist/es/packages/animate/style/style.css +27 -9
  70. package/dist/es/packages/animate/style/style.harmony.css +27 -9
  71. package/dist/es/packages/animate/style-jmapp/style.css +27 -9
  72. package/dist/es/packages/animate/style-jrkf/style.css +27 -9
  73. package/dist/es/packages/audio/audio.js +14 -14
  74. package/dist/es/packages/audio/style/style.harmony.css +20 -8
  75. package/dist/es/packages/badge/badge.js +17 -17
  76. package/dist/es/packages/button/button.js +1 -2
  77. package/dist/es/packages/button/style/style.css +20 -8
  78. package/dist/es/packages/button/style/style.harmony.css +20 -8
  79. package/dist/es/packages/button/style-jmapp/style.css +20 -8
  80. package/dist/es/packages/button/style-jrkf/style.css +20 -8
  81. package/dist/es/packages/calendar/style/style.harmony.css +12 -6
  82. package/dist/es/packages/cascader/style/style.harmony.css +12 -6
  83. package/dist/es/packages/cascader/utils.js +3 -2
  84. package/dist/es/packages/configprovider/types.d.ts +1 -1
  85. package/dist/es/packages/datepicker/style/style.harmony.css +12 -6
  86. package/dist/es/packages/dialog/style/style.harmony.css +20 -8
  87. package/dist/es/packages/empty/style/style.harmony.css +20 -8
  88. package/dist/es/packages/imagepreview/style/style.harmony.css +12 -6
  89. package/dist/es/packages/indicator/indicator.js +6 -6
  90. package/dist/es/packages/infiniteloading/infiniteloading.js +9 -9
  91. package/dist/es/packages/navbar/style/style.css +3 -1
  92. package/dist/es/packages/navbar/style/style.harmony.css +3 -1
  93. package/dist/es/packages/navbar/style-jmapp/style.css +3 -1
  94. package/dist/es/packages/navbar/style-jrkf/style.css +3 -1
  95. package/dist/es/packages/noticebar/noticebar.js +120 -60
  96. package/dist/es/packages/noticebar/style/noticebar.scss +130 -10
  97. package/dist/es/packages/noticebar/style/style.css +138 -35
  98. package/dist/es/packages/noticebar/style/style.harmony.css +138 -35
  99. package/dist/es/packages/noticebar/style-jmapp/noticebar.scss +130 -10
  100. package/dist/es/packages/noticebar/style-jmapp/style.css +113 -10
  101. package/dist/es/packages/noticebar/style-jrkf/noticebar.scss +130 -10
  102. package/dist/es/packages/noticebar/style-jrkf/style.css +113 -10
  103. package/dist/es/packages/numberkeyboard/style/style.css +6 -6
  104. package/dist/es/packages/numberkeyboard/style/style.harmony.css +18 -12
  105. package/dist/es/packages/numberkeyboard/style-jmapp/style.css +6 -6
  106. package/dist/es/packages/numberkeyboard/style-jrkf/style.css +6 -6
  107. package/dist/es/packages/picker/style/style.harmony.css +12 -6
  108. package/dist/es/packages/popover/popover.js +46 -37
  109. package/dist/es/packages/popover/style/popover.scss +79 -54
  110. package/dist/es/packages/popover/style/style.css +73 -61
  111. package/dist/es/packages/popover/style/style.harmony.css +85 -67
  112. package/dist/es/packages/popover/style-jmapp/popover.scss +79 -54
  113. package/dist/es/packages/popover/style-jmapp/style.css +73 -61
  114. package/dist/es/packages/popover/style-jrkf/popover.scss +79 -54
  115. package/dist/es/packages/popover/style-jrkf/style.css +73 -61
  116. package/dist/es/packages/popup/style/style.css +12 -6
  117. package/dist/es/packages/popup/style/style.harmony.css +12 -6
  118. package/dist/es/packages/popup/style-jmapp/style.css +12 -6
  119. package/dist/es/packages/popup/style-jrkf/style.css +12 -6
  120. package/dist/es/packages/pulltorefresh/pulltorefresh.js +54 -54
  121. package/dist/es/packages/quickenter/style/style.harmony.css +12 -6
  122. package/dist/es/packages/resultpage/style/style.harmony.css +20 -8
  123. package/dist/es/packages/shortpassword/style/style.harmony.css +12 -6
  124. package/dist/es/packages/skeleton/skeleton.js +15 -15
  125. package/dist/es/packages/timeselect/style/style.harmony.css +12 -6
  126. package/dist/es/packages/tour/style/style.harmony.css +86 -68
  127. package/dist/es/packages/tour/tour.js +1 -1
  128. package/dist/es/types/spec/noticebar/base.d.ts +19 -3
  129. package/dist/es/types/spec/popover/base.d.ts +21 -2
  130. package/dist/es/utils/render.js +1 -1
  131. package/dist/nutui.react.umd.js +329 -1213
  132. package/dist/style-jmapp.css +1 -1
  133. package/dist/style-jmapp.scss +32 -32
  134. package/dist/style-jrkf.css +1 -1
  135. package/dist/style-jrkf.scss +30 -30
  136. package/dist/style.css +1 -1
  137. package/dist/style.scss +33 -33
  138. package/dist/styles/variables-daojia.scss +55 -9
  139. package/dist/styles/variables-jmapp.scss +52 -6
  140. package/dist/styles/variables-jrkf.scss +52 -6
  141. package/dist/styles/variables.scss +123 -15
  142. package/package.json +1 -1
package/dist/cjs/packages/noticebar/style/style.css CHANGED
@@ -15,20 +15,27 @@ page {
15
15
  position: relative;
16
16
  display: flex;
17
17
  align-items: center;
18
- height: var(--nutui-noticebar-height, calc(36px * var(--nut-scale-f, 1)));
19
- padding: var(--nutui-noticebar-box-padding, 0 calc(16px * var(--nut-scale-f, 1)));
20
- font-size: var(--nutui-noticebar-font-size, var(--nutui-font-size-s, calc(12px * var(--nut-scale-font, var(--nut-scale-f, 1)))));
21
- background: var(--nutui-noticebar-background, rgb(251, 248, 220));
22
- color: var(--nutui-noticebar-color, #d9500b);
18
+ height: var(--nutui-noticebar-height, calc(40px * var(--nut-scale-f, 1)));
19
+ padding: var(--nutui-noticebar-box-padding, calc(2px * var(--nut-scale-f, 1)) calc(8px * var(--nut-scale-f, 1)));
20
+ font-size: var(--nutui-noticebar-font-size, var(--nutui-font-size-base, calc(14px * var(--nut-scale-font, var(--nut-scale-f, 1)))));
21
+ background: var(--nutui-noticebar-background, var(--nutui-color-background-overlay, #ffffff));
22
+ color: var(--nutui-noticebar-color, var(--nutui-color-title, #1a1a1a));
23
23
  border-radius: var(--nutui-noticebar-border-radius, 0);
24
24
  }
25
25
  .nut-noticebar .nut-noticebar-box-wrapable, .nut-noticebar .nut-noticebar-box-center {
26
26
  height: auto;
27
- padding: var(--nutui-noticebar-wrapable-padding, calc(8px * var(--nut-scale-f, 1)) calc(16px * var(--nut-scale-f, 1)));
27
+ padding: var(--nutui-noticebar-wrapable-padding, calc(9px * var(--nut-scale-f, 1)) calc(8px * var(--nut-scale-f, 1)));
28
28
  }
29
29
  .nut-noticebar .nut-noticebar-box-wrapable .nut-noticebar-box-wrap, .nut-noticebar .nut-noticebar-box-center .nut-noticebar-box-wrap {
30
30
  height: auto;
31
31
  }
32
+ .nut-noticebar .nut-noticebar-box-wrapable .nut-noticebar-box-left-icon, .nut-noticebar .nut-noticebar-box-center .nut-noticebar-box-left-icon {
33
+ height: var(--nutui-noticebar-left-icon-wrap-width, calc(32px * var(--nut-scale-f, 1)));
34
+ min-width: var(--nutui-noticebar-left-icon-wrap-width, calc(32px * var(--nut-scale-f, 1)));
35
+ }
36
+ .nut-noticebar .nut-noticebar-box-wrapable .nut-noticebar-box-wrap {
37
+ flex: initial;
38
+ }
32
39
  .nut-noticebar .nut-noticebar-box-wrapable .nut-noticebar-box-wrap .nut-noticebar-box-wrap-content {
33
40
  position: relative;
34
41
  white-space: normal;
@@ -50,43 +57,119 @@ page {
50
57
  }
51
58
  .nut-noticebar .nut-noticebar-box-left-icon {
52
59
  display: flex;
53
- height: var(--nutui-noticebar-left-icon-width, calc(16px * var(--nut-scale-f, 1)));
54
- min-width: var(--nutui-noticebar-left-icon-width, calc(16px * var(--nut-scale-f, 1)));
55
- margin-right: var(--nutui-noticebar-icon-gap, calc(4px * var(--nut-scale-f, 1)));
60
+ align-items: center;
61
+ justify-content: center;
62
+ height: var(--nutui-noticebar-left-icon-width, calc(24px * var(--nut-scale-f, 1)));
63
+ min-width: var(--nutui-noticebar-left-icon-width, calc(24px * var(--nut-scale-f, 1)));
64
+ margin-right: var(--nutui-noticebar-icon-gap, calc(6px * var(--nut-scale-f, 1)));
56
65
  background-size: 100% 100%;
57
66
  }
58
67
  .nut-noticebar .nut-noticebar-box-left-icon .nut-icon {
59
- color: var(--nutui-noticebar-color, #d9500b);
68
+ color: var(--nutui-noticebar-icon-color, var(--nutui-color-primary, #ff0f23));
69
+ }
70
+ .nut-noticebar .nut-noticebar-box-left-icon img {
71
+ border-radius: var(--nutui-noticebar-left-icon-border-radius, calc(4px * var(--nut-scale-f, 1)));
72
+ }
73
+ .nut-noticebar .nut-noticebar-box-content-wrapper {
74
+ flex: 1;
75
+ overflow: hidden;
76
+ min-width: 0;
77
+ }
78
+ .nut-noticebar .nut-noticebar-box-content-main {
79
+ display: flex;
80
+ align-items: center;
81
+ }
82
+ .nut-noticebar .nut-noticebar-box-description {
83
+ font-size: var(--nutui-noticebar-description-font-size, calc(11px * var(--nut-scale-f, 1)));
84
+ color: var(--nutui-noticebar-description-color, var(--nutui-color-text, #505259));
85
+ line-height: var(--nutui-noticebar-description-line-height, calc(16px * var(--nut-scale-f, 1)));
86
+ white-space: nowrap;
87
+ overflow: hidden;
88
+ text-overflow: ellipsis;
89
+ }
90
+ .nut-noticebar .nut-noticebar-box-tag {
91
+ display: flex;
92
+ align-items: center;
93
+ width: var(--nutui-noticebar-tag-size, calc(12px * var(--nut-scale-f, 1)));
94
+ height: var(--nutui-noticebar-tag-size, calc(12px * var(--nut-scale-f, 1)));
95
+ margin-left: var(--nutui-noticebar-tag-gap, calc(4px * var(--nut-scale-f, 1)));
96
+ flex-shrink: 0;
97
+ }
98
+ .nut-noticebar .nut-noticebar-box-action {
99
+ display: flex;
100
+ align-items: center;
101
+ justify-content: center;
102
+ max-width: var(--nutui-noticebar-action-max-width, calc(99px * var(--nut-scale-f, 1)));
103
+ margin-left: var(--nutui-noticebar-action-gap, calc(12px * var(--nut-scale-f, 1)));
104
+ font-size: var(--nutui-noticebar-action-font-size, var(--nutui-font-size-xs, calc(11px * var(--nut-scale-font, var(--nut-scale-f, 1)))));
105
+ color: var(--nutui-color-primary, #ff0f23);
106
+ flex-shrink: 0;
107
+ white-space: nowrap;
60
108
  }
61
109
  .nut-noticebar .nut-noticebar-box-right-icon {
62
110
  display: flex;
63
111
  align-items: center;
64
112
  justify-content: center;
65
- width: var(--nutui-noticebar-right-icon-width, calc(16px * var(--nut-scale-f, 1)));
66
- margin-left: var(--nutui-noticebar-icon-gap, calc(4px * var(--nut-scale-f, 1)));
113
+ width: var(--nutui-noticebar-close-size, calc(20px * var(--nut-scale-f, 1)));
114
+ height: var(--nutui-noticebar-close-size, calc(20px * var(--nut-scale-f, 1)));
115
+ margin-left: var(--nutui-noticebar-action-gap, calc(12px * var(--nut-scale-f, 1)));
116
+ flex-shrink: 0;
117
+ cursor: pointer;
67
118
  }
68
119
  .nut-noticebar .nut-noticebar-box-right-icon .nut-icon {
69
- width: calc(12px * var(--nut-scale-f, 1));
70
- height: calc(12px * var(--nut-scale-f, 1));
71
- color: var(--nutui-noticebar-color, #d9500b);
120
+ color: var(--nutui-noticebar-close-color, var(--nutui-color-text-help, #888b94));
72
121
  }
73
122
  .nut-noticebar .nut-noticebar-box-right-icon-default {
74
123
  width: var(--nutui-icon-size-12, calc(12px * var(--nut-scale-icon, var(--nut-scale-f, 1))));
75
124
  height: var(--nutui-icon-size-12, calc(12px * var(--nut-scale-icon, var(--nut-scale-f, 1))));
76
125
  }
126
+ .nut-noticebar .nut-noticebar-box-close-countdown {
127
+ position: relative;
128
+ display: flex;
129
+ align-items: center;
130
+ justify-content: center;
131
+ width: var(--nutui-noticebar-close-size, calc(20px * var(--nut-scale-f, 1)));
132
+ height: var(--nutui-noticebar-close-size, calc(20px * var(--nut-scale-f, 1)));
133
+ background: conic-gradient(var(--nutui-noticebar-close-ring-color, var(--nutui-color-text-help, #888b94)) 0% var(--progress), var(--nutui-noticebar-close-ring-shadow-color, var(--nutui-color-border, rgba(0, 0, 0, 0.06))) var(--progress) 100%);
134
+ border-radius: 50%;
135
+ }
136
+ .nut-noticebar .nut-noticebar-box-close-countdown::before {
137
+ content: "";
138
+ position: absolute;
139
+ inset: calc(1px * var(--nut-scale-f, 1));
140
+ background: var(--nutui-noticebar-background, var(--nutui-color-background-overlay, #ffffff));
141
+ border-radius: 50%;
142
+ }
143
+ .nut-noticebar .nut-noticebar-box-close-icon {
144
+ position: relative;
145
+ width: var(--nutui-noticebar-close-icon-size, calc(10px * var(--nut-scale-f, 1)));
146
+ height: var(--nutui-noticebar-close-icon-size, calc(10px * var(--nut-scale-f, 1)));
147
+ color: var(--nutui-noticebar-close-color, var(--nutui-color-text-help, #888b94));
148
+ }
149
+ .nut-noticebar .nut-noticebar-box-left-icon--product {
150
+ height: calc(32px * var(--nut-scale-f, 1));
151
+ min-width: calc(32px * var(--nut-scale-f, 1));
152
+ }
153
+ .nut-noticebar .nut-noticebar-box-left-icon--product img {
154
+ background: #ffffff;
155
+ border-radius: var(--nutui-noticebar-left-icon-border-radius, calc(4px * var(--nut-scale-f, 1)));
156
+ }
157
+ .nut-noticebar .nut-noticebar-box-right {
158
+ flex-shrink: 0;
159
+ }
77
160
  .nut-noticebar .nut-noticebar-box-wrap {
78
161
  display: flex;
79
162
  flex: 1;
80
163
  align-items: center;
81
- height: var(--nutui-noticebar-line-height, calc(24px * var(--nut-scale-f, 1)));
82
- line-height: var(--nutui-noticebar-line-height, calc(24px * var(--nut-scale-f, 1)));
164
+ height: var(--nutui-noticebar-line-height, calc(20px * var(--nut-scale-f, 1)));
165
+ line-height: var(--nutui-noticebar-line-height, calc(20px * var(--nut-scale-f, 1)));
83
166
  overflow: hidden;
84
167
  position: relative;
85
168
  }
86
169
  .nut-noticebar .nut-noticebar-box-wrap .nut-noticebar-box-wrap-content {
87
170
  position: absolute;
88
171
  white-space: nowrap;
89
- color: var(--nutui-noticebar-color, #d9500b);
172
+ color: var(--nutui-noticebar-color, var(--nutui-color-title, #1a1a1a));
90
173
  }
91
174
  .nut-noticebar .nut-noticebar-box-wrap .nut-noticebar-box-wrap-content.nut-ellipsis {
92
175
  max-width: 100%;
@@ -107,17 +190,17 @@ page {
107
190
  position: relative;
108
191
  display: flex;
109
192
  justify-content: space-between;
110
- height: var(--nutui-noticebar-height, calc(36px * var(--nut-scale-f, 1)));
111
- font-size: var(--nutui-noticebar-font-size, var(--nutui-font-size-s, calc(12px * var(--nut-scale-font, var(--nut-scale-f, 1)))));
193
+ height: var(--nutui-noticebar-height, calc(40px * var(--nut-scale-f, 1)));
194
+ font-size: var(--nutui-noticebar-font-size, var(--nutui-font-size-base, calc(14px * var(--nut-scale-font, var(--nut-scale-f, 1)))));
112
195
  overflow: hidden;
113
- padding: var(--nutui-noticebar-box-padding, 0 calc(16px * var(--nut-scale-f, 1)));
114
- background: var(--nutui-noticebar-background, rgb(251, 248, 220));
115
- color: var(--nutui-noticebar-color, #d9500b);
196
+ padding: var(--nutui-noticebar-box-padding, calc(2px * var(--nut-scale-f, 1)) calc(8px * var(--nut-scale-f, 1)));
197
+ background: var(--nutui-noticebar-background, var(--nutui-color-background-overlay, #ffffff));
198
+ color: var(--nutui-noticebar-color, var(--nutui-color-title, #1a1a1a));
116
199
  }
117
200
  .nut-noticebar .nut-noticebar-vertical .nut-noticebar-box-left-icon {
118
- height: var(--nutui-noticebar-left-icon-width, calc(16px * var(--nut-scale-f, 1)));
119
- min-width: var(--nutui-noticebar-left-icon-width, calc(16px * var(--nut-scale-f, 1)));
120
- margin: var(--nutui-noticebar-icon-gap, calc(4px * var(--nut-scale-f, 1)));
201
+ height: var(--nutui-noticebar-left-icon-width, calc(24px * var(--nut-scale-f, 1)));
202
+ min-width: var(--nutui-noticebar-left-icon-width, calc(24px * var(--nut-scale-f, 1)));
203
+ margin: var(--nutui-noticebar-icon-gap, calc(6px * var(--nut-scale-f, 1)));
121
204
  background-size: 100% 100%;
122
205
  display: flex;
123
206
  align-self: center;
@@ -131,7 +214,7 @@ page {
131
214
  .nut-noticebar .nut-noticebar-vertical .nut-noticebar-box-horseLamp-list-item {
132
215
  display: flex;
133
216
  align-items: center;
134
- height: var(--nutui-noticebar-height, calc(36px * var(--nut-scale-f, 1)));
217
+ height: var(--nutui-noticebar-height, calc(40px * var(--nut-scale-f, 1)));
135
218
  width: 100%;
136
219
  }
137
220
  .nut-noticebar .nut-noticebar-vertical .nut-noticebar-box-wrap {
@@ -142,12 +225,12 @@ page {
142
225
  -webkit-box-direction: normal;
143
226
  flex-direction: column;
144
227
  }
228
+ .nut-noticebar .nut-noticebar-vertical .nut-noticebar-box-description {
229
+ white-space: normal;
230
+ }
145
231
  .nut-noticebar .nut-noticebar-vertical .nut-noticebar-box-right-icon {
146
232
  align-self: center;
147
- display: flex;
148
- justify-content: center;
149
- width: var(--nutui-noticebar-right-icon-width, calc(16px * var(--nut-scale-f, 1)));
150
- margin-left: var(--nutui-noticebar-icon-gap, calc(4px * var(--nut-scale-f, 1)));
233
+ margin-left: var(--nutui-noticebar-icon-gap, calc(6px * var(--nut-scale-f, 1)));
151
234
  }
152
235
  @keyframes nut-notice-bar-play {
153
236
  to {
@@ -161,19 +244,29 @@ page {
161
244
  }
162
245
  @keyframes nut-notice-bar-play-vertical {
163
246
  to {
164
- transform: translateY(var(--nutui-noticebar-height, calc(36px * var(--nut-scale-f, 1))));
247
+ transform: translateY(var(--nutui-noticebar-height, calc(40px * var(--nut-scale-f, 1))));
165
248
  }
166
249
  }
167
250
 
168
251
  [dir=rtl] .nut-noticebar .nut-noticebar-box-left-icon,
169
252
  .nut-rtl .nut-noticebar .nut-noticebar-box-left-icon {
170
253
  margin-right: 0;
171
- margin-left: var(--nutui-noticebar-icon-gap, calc(4px * var(--nut-scale-f, 1)));
254
+ margin-left: var(--nutui-noticebar-icon-gap, calc(6px * var(--nut-scale-f, 1)));
172
255
  }
173
256
  [dir=rtl] .nut-noticebar .nut-noticebar-box-right-icon,
174
257
  .nut-rtl .nut-noticebar .nut-noticebar-box-right-icon {
175
258
  margin-left: 0;
176
- margin-right: var(--nutui-noticebar-icon-gap, calc(4px * var(--nut-scale-f, 1)));
259
+ margin-right: var(--nutui-noticebar-action-gap, calc(12px * var(--nut-scale-f, 1)));
260
+ }
261
+ [dir=rtl] .nut-noticebar .nut-noticebar-box-tag,
262
+ .nut-rtl .nut-noticebar .nut-noticebar-box-tag {
263
+ margin-left: 0;
264
+ margin-right: var(--nutui-noticebar-tag-gap, calc(4px * var(--nut-scale-f, 1)));
265
+ }
266
+ [dir=rtl] .nut-noticebar .nut-noticebar-box-action,
267
+ .nut-rtl .nut-noticebar .nut-noticebar-box-action {
268
+ margin-left: 0;
269
+ margin-right: var(--nutui-noticebar-action-gap, calc(12px * var(--nut-scale-f, 1)));
177
270
  }
178
271
  [dir=rtl] .nut-noticebar .nut-noticebar-box .play,
179
272
  .nut-rtl .nut-noticebar .nut-noticebar-box .play {
@@ -196,5 +289,15 @@ page {
196
289
  [dir=rtl] .nut-noticebar .nut-noticebar-vertical .nut-noticebar-box-right-icon,
197
290
  .nut-rtl .nut-noticebar .nut-noticebar-vertical .nut-noticebar-box-right-icon {
198
291
  margin-left: 0;
199
- margin-right: var(--nutui-noticebar-icon-gap, calc(4px * var(--nut-scale-f, 1)));
292
+ margin-right: var(--nutui-noticebar-icon-gap, calc(6px * var(--nut-scale-f, 1)));
293
+ }
294
+ [dir=rtl] .nut-noticebar .nut-noticebar-vertical .nut-noticebar-box-tag,
295
+ .nut-rtl .nut-noticebar .nut-noticebar-vertical .nut-noticebar-box-tag {
296
+ margin-left: 0;
297
+ margin-right: var(--nutui-noticebar-tag-gap, calc(4px * var(--nut-scale-f, 1)));
298
+ }
299
+ [dir=rtl] .nut-noticebar .nut-noticebar-vertical .nut-noticebar-box-action,
300
+ .nut-rtl .nut-noticebar .nut-noticebar-vertical .nut-noticebar-box-action {
301
+ margin-left: 0;
302
+ margin-right: var(--nutui-noticebar-action-gap, calc(12px * var(--nut-scale-f, 1)));
200
303
  }
package/dist/cjs/packages/noticebar/style/style.harmony.css CHANGED
@@ -15,20 +15,27 @@ page {
15
15
  position: relative;
16
16
  display: flex;
17
17
  align-items: center;
18
- height: var(--nutui-noticebar-height, calc(36px * var(--nut-scale-f, 1)));
19
- padding: var(--nutui-noticebar-box-padding, 0 calc(16px * var(--nut-scale-f, 1)));
20
- font-size: var(--nutui-noticebar-font-size, var(--nutui-font-size-s, calc(12px * var(--nut-scale-font, var(--nut-scale-f, 1)))));
21
- background: var(--nutui-noticebar-background, rgb(251, 248, 220));
22
- color: var(--nutui-noticebar-color, #d9500b);
18
+ height: var(--nutui-noticebar-height, calc(40px * var(--nut-scale-f, 1)));
19
+ padding: var(--nutui-noticebar-box-padding, calc(2px * var(--nut-scale-f, 1)) calc(8px * var(--nut-scale-f, 1)));
20
+ font-size: var(--nutui-noticebar-font-size, var(--nutui-font-size-base, calc(14px * var(--nut-scale-font, var(--nut-scale-f, 1)))));
21
+ background: var(--nutui-noticebar-background, var(--nutui-color-background-overlay, #ffffff));
22
+ color: var(--nutui-noticebar-color, var(--nutui-color-title, #1a1a1a));
23
23
  border-radius: var(--nutui-noticebar-border-radius, 0);
24
24
  }
25
25
  .nut-noticebar .nut-noticebar-box-wrapable, .nut-noticebar .nut-noticebar-box-center {
26
26
  height: auto;
27
- padding: var(--nutui-noticebar-wrapable-padding, calc(8px * var(--nut-scale-f, 1)) calc(16px * var(--nut-scale-f, 1)));
27
+ padding: var(--nutui-noticebar-wrapable-padding, calc(9px * var(--nut-scale-f, 1)) calc(8px * var(--nut-scale-f, 1)));
28
28
  }
29
29
  .nut-noticebar .nut-noticebar-box-wrapable .nut-noticebar-box-wrap, .nut-noticebar .nut-noticebar-box-center .nut-noticebar-box-wrap {
30
30
  height: auto;
31
31
  }
32
+ .nut-noticebar .nut-noticebar-box-wrapable .nut-noticebar-box-left-icon, .nut-noticebar .nut-noticebar-box-center .nut-noticebar-box-left-icon {
33
+ height: var(--nutui-noticebar-left-icon-wrap-width, calc(32px * var(--nut-scale-f, 1)));
34
+ min-width: var(--nutui-noticebar-left-icon-wrap-width, calc(32px * var(--nut-scale-f, 1)));
35
+ }
36
+ .nut-noticebar .nut-noticebar-box-wrapable .nut-noticebar-box-wrap {
37
+ flex: initial;
38
+ }
32
39
  .nut-noticebar .nut-noticebar-box-wrapable .nut-noticebar-box-wrap .nut-noticebar-box-wrap-content {
33
40
  position: relative;
34
41
  white-space: normal;
@@ -50,43 +57,119 @@ page {
50
57
  }
51
58
  .nut-noticebar .nut-noticebar-box-left-icon {
52
59
  display: flex;
53
- height: var(--nutui-noticebar-left-icon-width, calc(16px * var(--nut-scale-f, 1)));
54
- min-width: var(--nutui-noticebar-left-icon-width, calc(16px * var(--nut-scale-f, 1)));
55
- margin-right: var(--nutui-noticebar-icon-gap, calc(4px * var(--nut-scale-f, 1)));
60
+ align-items: center;
61
+ justify-content: center;
62
+ height: var(--nutui-noticebar-left-icon-width, calc(24px * var(--nut-scale-f, 1)));
63
+ min-width: var(--nutui-noticebar-left-icon-width, calc(24px * var(--nut-scale-f, 1)));
64
+ margin-right: var(--nutui-noticebar-icon-gap, calc(6px * var(--nut-scale-f, 1)));
56
65
  background-size: 100% 100%;
57
66
  }
58
67
  .nut-noticebar .nut-noticebar-box-left-icon .nut-icon {
59
- color: var(--nutui-noticebar-color, #d9500b);
68
+ color: var(--nutui-noticebar-icon-color, var(--nutui-color-primary, #ff0f23));
69
+ }
70
+ .nut-noticebar .nut-noticebar-box-left-icon img {
71
+ border-radius: var(--nutui-noticebar-left-icon-border-radius, calc(4px * var(--nut-scale-f, 1)));
72
+ }
73
+ .nut-noticebar .nut-noticebar-box-content-wrapper {
74
+ flex: 1;
75
+ overflow: hidden;
76
+ min-width: 0;
77
+ }
78
+ .nut-noticebar .nut-noticebar-box-content-main {
79
+ display: flex;
80
+ align-items: center;
81
+ }
82
+ .nut-noticebar .nut-noticebar-box-description {
83
+ font-size: var(--nutui-noticebar-description-font-size, calc(11px * var(--nut-scale-f, 1)));
84
+ color: var(--nutui-noticebar-description-color, var(--nutui-color-text, #505259));
85
+ line-height: var(--nutui-noticebar-description-line-height, calc(16px * var(--nut-scale-f, 1)));
86
+ white-space: nowrap;
87
+ overflow: hidden;
88
+ text-overflow: ellipsis;
89
+ }
90
+ .nut-noticebar .nut-noticebar-box-tag {
91
+ display: flex;
92
+ align-items: center;
93
+ width: var(--nutui-noticebar-tag-size, calc(12px * var(--nut-scale-f, 1)));
94
+ height: var(--nutui-noticebar-tag-size, calc(12px * var(--nut-scale-f, 1)));
95
+ margin-left: var(--nutui-noticebar-tag-gap, calc(4px * var(--nut-scale-f, 1)));
96
+ flex-shrink: 0;
97
+ }
98
+ .nut-noticebar .nut-noticebar-box-action {
99
+ display: flex;
100
+ align-items: center;
101
+ justify-content: center;
102
+ max-width: var(--nutui-noticebar-action-max-width, calc(99px * var(--nut-scale-f, 1)));
103
+ margin-left: var(--nutui-noticebar-action-gap, calc(12px * var(--nut-scale-f, 1)));
104
+ font-size: var(--nutui-noticebar-action-font-size, var(--nutui-font-size-xs, calc(11px * var(--nut-scale-font, var(--nut-scale-f, 1)))));
105
+ color: var(--nutui-color-primary, #ff0f23);
106
+ flex-shrink: 0;
107
+ white-space: nowrap;
60
108
  }
61
109
  .nut-noticebar .nut-noticebar-box-right-icon {
62
110
  display: flex;
63
111
  align-items: center;
64
112
  justify-content: center;
65
- width: var(--nutui-noticebar-right-icon-width, calc(16px * var(--nut-scale-f, 1)));
66
- margin-left: var(--nutui-noticebar-icon-gap, calc(4px * var(--nut-scale-f, 1)));
113
+ width: var(--nutui-noticebar-close-size, calc(20px * var(--nut-scale-f, 1)));
114
+ height: var(--nutui-noticebar-close-size, calc(20px * var(--nut-scale-f, 1)));
115
+ margin-left: var(--nutui-noticebar-action-gap, calc(12px * var(--nut-scale-f, 1)));
116
+ flex-shrink: 0;
117
+ cursor: pointer;
67
118
  }
68
119
  .nut-noticebar .nut-noticebar-box-right-icon .nut-icon {
69
- width: calc(12px * var(--nut-scale-f, 1));
70
- height: calc(12px * var(--nut-scale-f, 1));
71
- color: var(--nutui-noticebar-color, #d9500b);
120
+ color: var(--nutui-noticebar-close-color, var(--nutui-color-text-help, #888b94));
72
121
  }
73
122
  .nut-noticebar .nut-noticebar-box-right-icon-default {
74
123
  width: var(--nutui-icon-size-12, calc(12px * var(--nut-scale-icon, var(--nut-scale-f, 1))));
75
124
  height: var(--nutui-icon-size-12, calc(12px * var(--nut-scale-icon, var(--nut-scale-f, 1))));
76
125
  }
126
+ .nut-noticebar .nut-noticebar-box-close-countdown {
127
+ position: relative;
128
+ display: flex;
129
+ align-items: center;
130
+ justify-content: center;
131
+ width: var(--nutui-noticebar-close-size, calc(20px * var(--nut-scale-f, 1)));
132
+ height: var(--nutui-noticebar-close-size, calc(20px * var(--nut-scale-f, 1)));
133
+ background: conic-gradient(var(--nutui-noticebar-close-ring-color, var(--nutui-color-text-help, #888b94)) 0% var(--progress), var(--nutui-noticebar-close-ring-shadow-color, var(--nutui-color-border, rgba(0, 0, 0, 0.06))) var(--progress) 100%);
134
+ border-radius: 50%;
135
+ }
136
+ .nut-noticebar .nut-noticebar-box-close-countdown::before {
137
+ content: "";
138
+ position: absolute;
139
+ inset: calc(1px * var(--nut-scale-f, 1));
140
+ background: var(--nutui-noticebar-background, var(--nutui-color-background-overlay, #ffffff));
141
+ border-radius: 50%;
142
+ }
143
+ .nut-noticebar .nut-noticebar-box-close-icon {
144
+ position: relative;
145
+ width: var(--nutui-noticebar-close-icon-size, calc(10px * var(--nut-scale-f, 1)));
146
+ height: var(--nutui-noticebar-close-icon-size, calc(10px * var(--nut-scale-f, 1)));
147
+ color: var(--nutui-noticebar-close-color, var(--nutui-color-text-help, #888b94));
148
+ }
149
+ .nut-noticebar .nut-noticebar-box-left-icon--product {
150
+ height: calc(32px * var(--nut-scale-f, 1));
151
+ min-width: calc(32px * var(--nut-scale-f, 1));
152
+ }
153
+ .nut-noticebar .nut-noticebar-box-left-icon--product img {
154
+ background: #ffffff;
155
+ border-radius: var(--nutui-noticebar-left-icon-border-radius, calc(4px * var(--nut-scale-f, 1)));
156
+ }
157
+ .nut-noticebar .nut-noticebar-box-right {
158
+ flex-shrink: 0;
159
+ }
77
160
  .nut-noticebar .nut-noticebar-box-wrap {
78
161
  display: flex;
79
162
  flex: 1;
80
163
  align-items: center;
81
- height: var(--nutui-noticebar-line-height, calc(24px * var(--nut-scale-f, 1)));
82
- line-height: var(--nutui-noticebar-line-height, calc(24px * var(--nut-scale-f, 1)));
164
+ height: var(--nutui-noticebar-line-height, calc(20px * var(--nut-scale-f, 1)));
165
+ line-height: var(--nutui-noticebar-line-height, calc(20px * var(--nut-scale-f, 1)));
83
166
  overflow: hidden;
84
167
  position: relative;
85
168
  }
86
169
  .nut-noticebar .nut-noticebar-box-wrap .nut-noticebar-box-wrap-content {
87
170
  position: absolute;
88
171
  white-space: nowrap;
89
- color: var(--nutui-noticebar-color, #d9500b);
172
+ color: var(--nutui-noticebar-color, var(--nutui-color-title, #1a1a1a));
90
173
  }
91
174
  .nut-noticebar .nut-noticebar-box-wrap .nut-noticebar-box-wrap-content.nut-ellipsis {
92
175
  max-width: 100%;
@@ -107,17 +190,17 @@ page {
107
190
  position: relative;
108
191
  display: flex;
109
192
  justify-content: space-between;
110
- height: var(--nutui-noticebar-height, calc(36px * var(--nut-scale-f, 1)));
111
- font-size: var(--nutui-noticebar-font-size, var(--nutui-font-size-s, calc(12px * var(--nut-scale-font, var(--nut-scale-f, 1)))));
193
+ height: var(--nutui-noticebar-height, calc(40px * var(--nut-scale-f, 1)));
194
+ font-size: var(--nutui-noticebar-font-size, var(--nutui-font-size-base, calc(14px * var(--nut-scale-font, var(--nut-scale-f, 1)))));
112
195
  overflow: hidden;
113
- padding: var(--nutui-noticebar-box-padding, 0 calc(16px * var(--nut-scale-f, 1)));
114
- background: var(--nutui-noticebar-background, rgb(251, 248, 220));
115
- color: var(--nutui-noticebar-color, #d9500b);
196
+ padding: var(--nutui-noticebar-box-padding, calc(2px * var(--nut-scale-f, 1)) calc(8px * var(--nut-scale-f, 1)));
197
+ background: var(--nutui-noticebar-background, var(--nutui-color-background-overlay, #ffffff));
198
+ color: var(--nutui-noticebar-color, var(--nutui-color-title, #1a1a1a));
116
199
  }
117
200
  .nut-noticebar .nut-noticebar-vertical .nut-noticebar-box-left-icon {
118
- height: var(--nutui-noticebar-left-icon-width, calc(16px * var(--nut-scale-f, 1)));
119
- min-width: var(--nutui-noticebar-left-icon-width, calc(16px * var(--nut-scale-f, 1)));
120
- margin: var(--nutui-noticebar-icon-gap, calc(4px * var(--nut-scale-f, 1)));
201
+ height: var(--nutui-noticebar-left-icon-width, calc(24px * var(--nut-scale-f, 1)));
202
+ min-width: var(--nutui-noticebar-left-icon-width, calc(24px * var(--nut-scale-f, 1)));
203
+ margin: var(--nutui-noticebar-icon-gap, calc(6px * var(--nut-scale-f, 1)));
121
204
  background-size: 100% 100%;
122
205
  display: flex;
123
206
  align-self: center;
@@ -131,7 +214,7 @@ page {
131
214
  .nut-noticebar .nut-noticebar-vertical .nut-noticebar-box-horseLamp-list-item {
132
215
  display: flex;
133
216
  align-items: center;
134
- height: var(--nutui-noticebar-height, calc(36px * var(--nut-scale-f, 1)));
217
+ height: var(--nutui-noticebar-height, calc(40px * var(--nut-scale-f, 1)));
135
218
  width: 100%;
136
219
  }
137
220
  .nut-noticebar .nut-noticebar-vertical .nut-noticebar-box-wrap {
@@ -142,12 +225,12 @@ page {
142
225
  -webkit-box-direction: normal;
143
226
  flex-direction: column;
144
227
  }
228
+ .nut-noticebar .nut-noticebar-vertical .nut-noticebar-box-description {
229
+ white-space: normal;
230
+ }
145
231
  .nut-noticebar .nut-noticebar-vertical .nut-noticebar-box-right-icon {
146
232
  align-self: center;
147
- display: flex;
148
- justify-content: center;
149
- width: var(--nutui-noticebar-right-icon-width, calc(16px * var(--nut-scale-f, 1)));
150
- margin-left: var(--nutui-noticebar-icon-gap, calc(4px * var(--nut-scale-f, 1)));
233
+ margin-left: var(--nutui-noticebar-icon-gap, calc(6px * var(--nut-scale-f, 1)));
151
234
  }
152
235
  @keyframes nut-notice-bar-play {
153
236
  to {
@@ -161,19 +244,29 @@ page {
161
244
  }
162
245
  @keyframes nut-notice-bar-play-vertical {
163
246
  to {
164
- transform: translateY(var(--nutui-noticebar-height, calc(36px * var(--nut-scale-f, 1))));
247
+ transform: translateY(var(--nutui-noticebar-height, calc(40px * var(--nut-scale-f, 1))));
165
248
  }
166
249
  }
167
250
 
168
251
  [dir=rtl] .nut-noticebar .nut-noticebar-box-left-icon,
169
252
  .nut-rtl .nut-noticebar .nut-noticebar-box-left-icon {
170
253
  margin-right: 0;
171
- margin-left: var(--nutui-noticebar-icon-gap, calc(4px * var(--nut-scale-f, 1)));
254
+ margin-left: var(--nutui-noticebar-icon-gap, calc(6px * var(--nut-scale-f, 1)));
172
255
  }
173
256
  [dir=rtl] .nut-noticebar .nut-noticebar-box-right-icon,
174
257
  .nut-rtl .nut-noticebar .nut-noticebar-box-right-icon {
175
258
  margin-left: 0;
176
- margin-right: var(--nutui-noticebar-icon-gap, calc(4px * var(--nut-scale-f, 1)));
259
+ margin-right: var(--nutui-noticebar-action-gap, calc(12px * var(--nut-scale-f, 1)));
260
+ }
261
+ [dir=rtl] .nut-noticebar .nut-noticebar-box-tag,
262
+ .nut-rtl .nut-noticebar .nut-noticebar-box-tag {
263
+ margin-left: 0;
264
+ margin-right: var(--nutui-noticebar-tag-gap, calc(4px * var(--nut-scale-f, 1)));
265
+ }
266
+ [dir=rtl] .nut-noticebar .nut-noticebar-box-action,
267
+ .nut-rtl .nut-noticebar .nut-noticebar-box-action {
268
+ margin-left: 0;
269
+ margin-right: var(--nutui-noticebar-action-gap, calc(12px * var(--nut-scale-f, 1)));
177
270
  }
178
271
  [dir=rtl] .nut-noticebar .nut-noticebar-box .play,
179
272
  .nut-rtl .nut-noticebar .nut-noticebar-box .play {
@@ -196,5 +289,15 @@ page {
196
289
  [dir=rtl] .nut-noticebar .nut-noticebar-vertical .nut-noticebar-box-right-icon,
197
290
  .nut-rtl .nut-noticebar .nut-noticebar-vertical .nut-noticebar-box-right-icon {
198
291
  margin-left: 0;
199
- margin-right: var(--nutui-noticebar-icon-gap, calc(4px * var(--nut-scale-f, 1)));
292
+ margin-right: var(--nutui-noticebar-icon-gap, calc(6px * var(--nut-scale-f, 1)));
293
+ }
294
+ [dir=rtl] .nut-noticebar .nut-noticebar-vertical .nut-noticebar-box-tag,
295
+ .nut-rtl .nut-noticebar .nut-noticebar-vertical .nut-noticebar-box-tag {
296
+ margin-left: 0;
297
+ margin-right: var(--nutui-noticebar-tag-gap, calc(4px * var(--nut-scale-f, 1)));
298
+ }
299
+ [dir=rtl] .nut-noticebar .nut-noticebar-vertical .nut-noticebar-box-action,
300
+ .nut-rtl .nut-noticebar .nut-noticebar-vertical .nut-noticebar-box-action {
301
+ margin-left: 0;
302
+ margin-right: var(--nutui-noticebar-action-gap, calc(12px * var(--nut-scale-f, 1)));
200
303
  }