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

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 (282) hide show
  1. package/CHANGELOG.md +21 -6
  2. package/dist/cjs/hooks/use-props-value.js +1 -1
  3. package/dist/cjs/hooks/use-touch.js +4 -4
  4. package/dist/cjs/packages/address/cascaderRender.js +1 -1
  5. package/dist/cjs/packages/address/existRender.js +1 -1
  6. package/dist/cjs/packages/audio/audio.js +1 -1
  7. package/dist/cjs/packages/avatarcropper/avatarcropper.js +1 -1
  8. package/dist/cjs/packages/badge/badge.js +1 -1
  9. package/dist/cjs/packages/barrage/barrage.js +1 -1
  10. package/dist/cjs/packages/button/button.js +1 -1
  11. package/dist/cjs/packages/card/card.js +1 -1
  12. package/dist/cjs/packages/cascader/utils.js +4 -4
  13. package/dist/cjs/packages/cellgroup/cellgroup.js +1 -1
  14. package/dist/cjs/packages/checkboxgroup/checkboxgroup.js +3 -3
  15. package/dist/cjs/packages/circleprogress/circleprogress.js +1 -1
  16. package/dist/cjs/packages/collapseitem/collapseitem.js +1 -1
  17. package/dist/cjs/packages/configprovider/types.d.ts +1 -1
  18. package/dist/cjs/packages/countdown/countdown.js +1 -1
  19. package/dist/cjs/packages/datepicker/datepicker.js +1 -1
  20. package/dist/cjs/packages/dialog/dialog.js +2 -2
  21. package/dist/cjs/packages/divider/divider.js +1 -1
  22. package/dist/cjs/packages/elevator/elevator.js +1 -1
  23. package/dist/cjs/packages/ellipsis/ellipsis.js +1 -1
  24. package/dist/cjs/packages/empty/empty.d.ts +4 -11
  25. package/dist/cjs/packages/empty/empty.js +21 -18
  26. package/dist/cjs/packages/empty/index.d.ts +1 -1
  27. package/dist/cjs/packages/empty/style/empty.scss +97 -31
  28. package/dist/cjs/packages/empty/style/style.css +77 -32
  29. package/dist/cjs/packages/empty/style/style.harmony.css +77 -32
  30. package/dist/cjs/packages/empty/style-jmapp/empty.scss +97 -31
  31. package/dist/cjs/packages/empty/style-jmapp/style.css +77 -32
  32. package/dist/cjs/packages/empty/style-jrkf/empty.scss +97 -31
  33. package/dist/cjs/packages/empty/style-jrkf/style.css +77 -32
  34. package/dist/cjs/packages/form/form.js +1 -1
  35. package/dist/cjs/packages/grid/grid.js +1 -1
  36. package/dist/cjs/packages/griditem/griditem.js +1 -1
  37. package/dist/cjs/packages/image/image.js +1 -1
  38. package/dist/cjs/packages/imagepreview/imagepreview.js +2 -2
  39. package/dist/cjs/packages/indicator/indicator.js +1 -1
  40. package/dist/cjs/packages/infiniteloading/infiniteloading.js +3 -3
  41. package/dist/cjs/packages/input/input.js +1 -1
  42. package/dist/cjs/packages/inputnumber/inputnumber.js +1 -1
  43. package/dist/cjs/packages/loading/loading.js +1 -1
  44. package/dist/cjs/packages/menu/menu.js +1 -1
  45. package/dist/cjs/packages/overlay/overlay.js +1 -1
  46. package/dist/cjs/packages/pagination/pagination.js +1 -1
  47. package/dist/cjs/packages/picker/picker.js +1 -1
  48. package/dist/cjs/packages/pickerview/pickerroller.js +1 -1
  49. package/dist/cjs/packages/popover/popover.js +1 -1
  50. package/dist/cjs/packages/progress/progress.js +6 -9
  51. package/dist/cjs/packages/quickenter/quickenter.js +2 -2
  52. package/dist/cjs/packages/radio/radio.js +1 -1
  53. package/dist/cjs/packages/radiogroup/radiogroup.js +3 -3
  54. package/dist/cjs/packages/range/range.js +3 -3
  55. package/dist/cjs/packages/rate/index.d.ts +1 -1
  56. package/dist/cjs/packages/rate/rate.js +54 -8
  57. package/dist/cjs/packages/rate/style/rate.scss +244 -76
  58. package/dist/cjs/packages/rate/style/style.css +198 -68
  59. package/dist/cjs/packages/rate/style/style.harmony.css +198 -68
  60. package/dist/cjs/packages/rate/style-jmapp/rate.scss +244 -76
  61. package/dist/cjs/packages/rate/style-jmapp/style.css +198 -68
  62. package/dist/cjs/packages/rate/style-jrkf/rate.scss +244 -76
  63. package/dist/cjs/packages/rate/style-jrkf/style.css +198 -68
  64. package/dist/cjs/packages/shortpassword/shortpassword.js +1 -1
  65. package/dist/cjs/packages/sidebar/sidebar.js +1 -1
  66. package/dist/cjs/packages/signature/signature.js +2 -2
  67. package/dist/cjs/packages/skeleton/skeleton.js +1 -1
  68. package/dist/cjs/packages/steps/style/style.css +1 -1
  69. package/dist/cjs/packages/steps/style/style.harmony.css +1 -1
  70. package/dist/cjs/packages/sticky/sticky.js +3 -3
  71. package/dist/cjs/packages/swiper/swiper.js +1 -1
  72. package/dist/cjs/packages/switch/switch.js +1 -1
  73. package/dist/cjs/packages/tabbaritem/tabbaritem.js +1 -1
  74. package/dist/cjs/packages/table/table.js +1 -1
  75. package/dist/cjs/packages/tabs/tabs.js +1 -1
  76. package/dist/cjs/packages/textarea/textarea.js +1 -1
  77. package/dist/cjs/packages/timeselect/timeselect.js +1 -1
  78. package/dist/cjs/packages/toast/toast.js +2 -2
  79. package/dist/cjs/packages/trendarrow/trendarrow.js +1 -1
  80. package/dist/cjs/packages/uploader/uploader.js +1 -1
  81. package/dist/cjs/packages/video/video.js +2 -2
  82. package/dist/cjs/packages/virtuallist/utils.js +1 -1
  83. package/dist/cjs/packages/virtuallist/virtuallist.js +1 -1
  84. package/dist/cjs/types/spec/empty/base.d.ts +12 -8
  85. package/dist/cjs/types/spec/empty/base.js +28 -1
  86. package/dist/cjs/types/spec/rate/base.d.ts +3 -0
  87. package/dist/cjs/utils/scale-f.js +1 -3
  88. package/dist/es/hooks/taro/use-custom-event.js +3 -3
  89. package/dist/es/hooks/taro/use-lock-scoll.js +1 -1
  90. package/dist/es/hooks/use-click-away.js +2 -2
  91. package/dist/es/hooks/use-lock-scroll.js +3 -3
  92. package/dist/es/hooks/use-pagination.js +1 -1
  93. package/dist/es/hooks/use-ref-state.js +3 -3
  94. package/dist/es/hooks/use-touch.js +13 -13
  95. package/dist/es/hooks/use-watch.js +1 -1
  96. package/dist/es/locales/en-US.js +4 -4
  97. package/dist/es/locales/id-ID.js +4 -4
  98. package/dist/es/locales/ja-JP.js +4 -4
  99. package/dist/es/locales/tr-TR.js +4 -4
  100. package/dist/es/locales/vi-VN.js +4 -4
  101. package/dist/es/locales/zh-CN.js +4 -4
  102. package/dist/es/locales/zh-TW.js +4 -4
  103. package/dist/es/locales/zh-UG.js +4 -4
  104. package/dist/es/packages/actionsheet/actionsheet.js +8 -8
  105. package/dist/es/packages/address/address.js +10 -10
  106. package/dist/es/packages/address/cascaderRender.js +4 -4
  107. package/dist/es/packages/address/elevatorRender.js +17 -17
  108. package/dist/es/packages/address/existRender.js +5 -5
  109. package/dist/es/packages/address/utils.js +5 -5
  110. package/dist/es/packages/animate/animate.js +3 -3
  111. package/dist/es/packages/animatingnumbers/countup.js +1 -1
  112. package/dist/es/packages/audio/audio.js +16 -16
  113. package/dist/es/packages/avatar/avatar.js +3 -3
  114. package/dist/es/packages/avatarcropper/avatarcropper.js +25 -25
  115. package/dist/es/packages/avatargroup/avatargroup.js +1 -1
  116. package/dist/es/packages/backtop/backtop.js +3 -3
  117. package/dist/es/packages/badge/badge.js +3 -3
  118. package/dist/es/packages/barrage/barrage.js +9 -9
  119. package/dist/es/packages/button/button.js +4 -4
  120. package/dist/es/packages/calendar/calendar.js +12 -12
  121. package/dist/es/packages/calendar/utils.js +7 -7
  122. package/dist/es/packages/calendarcard/calendarcard.js +22 -22
  123. package/dist/es/packages/calendarcard/icon.js +5 -5
  124. package/dist/es/packages/calendarcard/utils.js +5 -5
  125. package/dist/es/packages/calendaritem/calendaritem.js +32 -32
  126. package/dist/es/packages/card/card.js +2 -2
  127. package/dist/es/packages/cascader/cascader.js +15 -15
  128. package/dist/es/packages/cascader/utils.js +6 -6
  129. package/dist/es/packages/cell/cell.js +4 -4
  130. package/dist/es/packages/cellgroup/cellgroup.js +2 -2
  131. package/dist/es/packages/checkbox/checkbox.js +10 -10
  132. package/dist/es/packages/checkboxgroup/checkboxgroup.js +7 -7
  133. package/dist/es/packages/circleprogress/circleprogress.js +7 -7
  134. package/dist/es/packages/col/col.js +2 -2
  135. package/dist/es/packages/collapse/collapse.js +3 -3
  136. package/dist/es/packages/collapse/context.js +2 -2
  137. package/dist/es/packages/collapseitem/collapseitem.js +5 -5
  138. package/dist/es/packages/configprovider/configprovider.js +5 -5
  139. package/dist/es/packages/configprovider/types.d.ts +1 -1
  140. package/dist/es/packages/countdown/countdown.js +15 -15
  141. package/dist/es/packages/datepicker/datepicker.js +12 -12
  142. package/dist/es/packages/datepicker/utils.js +7 -7
  143. package/dist/es/packages/datepickerview/datepickerview.js +5 -5
  144. package/dist/es/packages/dialog/content.js +6 -6
  145. package/dist/es/packages/dialog/dialog.js +24 -24
  146. package/dist/es/packages/divider/divider.js +3 -3
  147. package/dist/es/packages/drag/drag.js +5 -5
  148. package/dist/es/packages/elevator/elevator.js +17 -17
  149. package/dist/es/packages/ellipsis/ellipsis.js +14 -14
  150. package/dist/es/packages/empty/empty.d.ts +4 -11
  151. package/dist/es/packages/empty/empty.js +22 -19
  152. package/dist/es/packages/empty/index.d.ts +1 -1
  153. package/dist/es/packages/empty/style/empty.scss +97 -31
  154. package/dist/es/packages/empty/style/style.css +77 -32
  155. package/dist/es/packages/empty/style/style.harmony.css +77 -32
  156. package/dist/es/packages/empty/style-jmapp/empty.scss +97 -31
  157. package/dist/es/packages/empty/style-jmapp/style.css +77 -32
  158. package/dist/es/packages/empty/style-jrkf/empty.scss +97 -31
  159. package/dist/es/packages/empty/style-jrkf/style.css +77 -32
  160. package/dist/es/packages/fixednav/fixednav.js +7 -7
  161. package/dist/es/packages/form/form.js +7 -7
  162. package/dist/es/packages/form/useform.js +4 -4
  163. package/dist/es/packages/formitem/formitem.js +1 -1
  164. package/dist/es/packages/grid/context.js +1 -1
  165. package/dist/es/packages/grid/grid.js +4 -4
  166. package/dist/es/packages/griditem/griditem.js +6 -6
  167. package/dist/es/packages/hoverbutton/hoverbutton.js +1 -1
  168. package/dist/es/packages/hoverbuttonitem/hoverbuttonitem.js +6 -6
  169. package/dist/es/packages/hoverbuttonitem/utils.js +1 -1
  170. package/dist/es/packages/image/image.js +7 -7
  171. package/dist/es/packages/imagepreview/imagepreview.js +15 -15
  172. package/dist/es/packages/indicator/indicator.js +5 -5
  173. package/dist/es/packages/infiniteloading/infiniteloading.js +14 -14
  174. package/dist/es/packages/input/input.js +13 -13
  175. package/dist/es/packages/inputnumber/inputnumber.js +12 -12
  176. package/dist/es/packages/layout/layout.js +1 -1
  177. package/dist/es/packages/loading/loading.js +3 -3
  178. package/dist/es/packages/lottie/index.js +1 -1
  179. package/dist/es/packages/lottie/lottiemp.js +1 -1
  180. package/dist/es/packages/menu/menu.js +13 -13
  181. package/dist/es/packages/menuitem/menuitem.js +12 -12
  182. package/dist/es/packages/navbar/navbar.js +7 -7
  183. package/dist/es/packages/noticebar/noticebar.js +22 -22
  184. package/dist/es/packages/notify/notify.js +8 -8
  185. package/dist/es/packages/numberkeyboard/numberkeyboard.js +12 -12
  186. package/dist/es/packages/overlay/overlay.js +7 -7
  187. package/dist/es/packages/pagination/pagination.js +8 -8
  188. package/dist/es/packages/picker/picker.js +15 -15
  189. package/dist/es/packages/pickerview/pickerroller.js +12 -12
  190. package/dist/es/packages/pickerview/pickerview.js +3 -3
  191. package/dist/es/packages/pickerview/utils.js +6 -6
  192. package/dist/es/packages/popover/popover.js +15 -15
  193. package/dist/es/packages/popup/popup.js +26 -26
  194. package/dist/es/packages/price/price.js +8 -8
  195. package/dist/es/packages/progress/progress.js +16 -19
  196. package/dist/es/packages/pulltorefresh/pulltorefresh.js +8 -8
  197. package/dist/es/packages/quickenter/quickenter.js +14 -14
  198. package/dist/es/packages/radio/radio.js +11 -11
  199. package/dist/es/packages/radiogroup/radiogroup.js +6 -6
  200. package/dist/es/packages/range/range.js +12 -12
  201. package/dist/es/packages/rate/index.d.ts +1 -1
  202. package/dist/es/packages/rate/rate.js +64 -18
  203. package/dist/es/packages/rate/style/rate.scss +244 -76
  204. package/dist/es/packages/rate/style/style.css +198 -68
  205. package/dist/es/packages/rate/style/style.harmony.css +198 -68
  206. package/dist/es/packages/rate/style-jmapp/rate.scss +244 -76
  207. package/dist/es/packages/rate/style-jmapp/style.css +198 -68
  208. package/dist/es/packages/rate/style-jrkf/rate.scss +244 -76
  209. package/dist/es/packages/rate/style-jrkf/style.css +198 -68
  210. package/dist/es/packages/resultpage/resultpage.js +1 -1
  211. package/dist/es/packages/row/row.js +4 -4
  212. package/dist/es/packages/safearea/safearea.js +1 -1
  213. package/dist/es/packages/searchbar/searchbar.js +4 -4
  214. package/dist/es/packages/segmented/segmented.js +4 -4
  215. package/dist/es/packages/shortpassword/shortpassword.js +7 -7
  216. package/dist/es/packages/sidebar/sidebar.js +11 -11
  217. package/dist/es/packages/sidebar/utils.js +1 -1
  218. package/dist/es/packages/sidebaritem/sidebaritem.js +1 -1
  219. package/dist/es/packages/signature/signature.js +15 -15
  220. package/dist/es/packages/skeleton/skeleton.js +4 -4
  221. package/dist/es/packages/space/space.js +1 -1
  222. package/dist/es/packages/step/step.js +1 -1
  223. package/dist/es/packages/steps/steps.js +1 -1
  224. package/dist/es/packages/steps/style/style.css +1 -1
  225. package/dist/es/packages/steps/style/style.harmony.css +1 -1
  226. package/dist/es/packages/sticky/sticky.js +5 -5
  227. package/dist/es/packages/swipe/swipe.js +16 -16
  228. package/dist/es/packages/swiper/swiper.js +7 -7
  229. package/dist/es/packages/swiperitem/swiperitem.js +1 -1
  230. package/dist/es/packages/switch/switch.js +6 -6
  231. package/dist/es/packages/tabbar/tabbar.js +2 -2
  232. package/dist/es/packages/tabbaritem/tabbaritem.js +10 -10
  233. package/dist/es/packages/table/table.js +10 -10
  234. package/dist/es/packages/tabpane/tabpane.js +1 -1
  235. package/dist/es/packages/tabs/tabs.js +11 -11
  236. package/dist/es/packages/tag/tag.js +10 -10
  237. package/dist/es/packages/textarea/textarea.js +11 -11
  238. package/dist/es/packages/timedetail/timedetail.js +3 -3
  239. package/dist/es/packages/timeselect/timeselect.js +6 -6
  240. package/dist/es/packages/toast/toast.js +10 -10
  241. package/dist/es/packages/tour/tour.js +10 -10
  242. package/dist/es/packages/trendarrow/trendarrow.js +4 -4
  243. package/dist/es/packages/uploader/preview.js +8 -8
  244. package/dist/es/packages/uploader/uploader.js +19 -19
  245. package/dist/es/packages/video/video.js +3 -3
  246. package/dist/es/packages/virtuallist/utils.js +5 -5
  247. package/dist/es/packages/virtuallist/virtuallist.js +8 -8
  248. package/dist/es/packages/watermark/watermark.js +2 -2
  249. package/dist/es/types/spec/empty/base.d.ts +15 -11
  250. package/dist/es/types/spec/empty/base.js +13 -1
  251. package/dist/es/types/spec/rate/base.d.ts +10 -1
  252. package/dist/es/utils/clamp.js +1 -1
  253. package/dist/es/utils/date.js +3 -3
  254. package/dist/es/utils/get-rect.js +1 -1
  255. package/dist/es/utils/interceptor.js +1 -1
  256. package/dist/es/utils/is-date.js +1 -1
  257. package/dist/es/utils/is-empty.js +1 -1
  258. package/dist/es/utils/is-function.js +1 -1
  259. package/dist/es/utils/is-object.js +1 -1
  260. package/dist/es/utils/is-promise.js +1 -1
  261. package/dist/es/utils/pad-zero.js +1 -1
  262. package/dist/es/utils/px-check.js +1 -1
  263. package/dist/es/utils/scale-f.js +2 -4
  264. package/dist/es/utils/sleep.js +1 -1
  265. package/dist/es/utils/taro/ConfigurableCSSTransition.js +1 -1
  266. package/dist/es/utils/taro/get-rect-by-id.js +1 -1
  267. package/dist/es/utils/taro/get-rect.js +3 -3
  268. package/dist/es/utils/taro/get-system-info.js +2 -2
  269. package/dist/es/utils/taro/platform.js +4 -4
  270. package/dist/es/utils/upper-case-first.js +1 -1
  271. package/dist/nutui.react.umd.js +1252 -1189
  272. package/dist/style-jmapp.css +1 -1
  273. package/dist/style-jmapp.scss +33 -33
  274. package/dist/style-jrkf.css +1 -1
  275. package/dist/style-jrkf.scss +32 -32
  276. package/dist/style.css +1 -1
  277. package/dist/style.scss +42 -42
  278. package/dist/styles/variables-daojia.scss +25 -12
  279. package/dist/styles/variables-jmapp.scss +42 -17
  280. package/dist/styles/variables-jrkf.scss +24 -20
  281. package/dist/styles/variables.scss +32 -24
  282. package/package.json +1 -1
package/dist/cjs/packages/rate/style/style.css CHANGED
@@ -18,6 +18,31 @@ page {
18
18
  .nut-rate.readonly .nut-rate-item-icon {
19
19
  cursor: default;
20
20
  }
21
+ .nut-rate-horizontal {
22
+ flex-direction: row;
23
+ align-items: center;
24
+ }
25
+ .nut-rate-vertical {
26
+ flex-direction: column;
27
+ align-items: center;
28
+ }
29
+ .nut-rate-list {
30
+ display: flex;
31
+ align-items: center;
32
+ }
33
+ .nut-rate-label {
34
+ color: var(--nutui-rate-label-color, var(--nutui-color-text-disabled, #b4b8bf));
35
+ white-space: nowrap;
36
+ }
37
+ .nut-rate-labels {
38
+ display: flex;
39
+ width: 100%;
40
+ }
41
+ .nut-rate-labels-item {
42
+ flex: 1;
43
+ text-align: center;
44
+ color: var(--nutui-rate-label-color, var(--nutui-color-text-disabled, #b4b8bf));
45
+ }
21
46
  .nut-rate-item {
22
47
  display: flex;
23
48
  align-items: center;
@@ -35,30 +60,6 @@ page {
35
60
  .nut-rate-item-half .nut-icon {
36
61
  flex-shrink: 0;
37
62
  }
38
- .nut-rate-item-normal {
39
- margin-left: var(--nutui-rate-item-margin, calc(4px * var(--nut-scale-f, 1)));
40
- }
41
- .nut-rate-item-normal .nut-icon {
42
- height: var(--nutui-rate-icon-size, calc(12px * var(--nut-scale-font, var(--nut-scale-f, 1))));
43
- width: var(--nutui-rate-icon-size, calc(12px * var(--nut-scale-font, var(--nut-scale-f, 1))));
44
- }
45
- .nut-rate-item-large {
46
- margin-left: calc(var(--nutui-rate-item-margin, calc(4px * var(--nut-scale-f, 1))) * 2);
47
- }
48
- .nut-rate-item-large .nut-icon {
49
- height: calc(var(--nutui-rate-icon-size, calc(12px * var(--nut-scale-font, var(--nut-scale-f, 1)))) + 8px * var(--nut-scale-f, 1));
50
- width: calc(var(--nutui-rate-icon-size, calc(12px * var(--nut-scale-font, var(--nut-scale-f, 1)))) + 8px * var(--nut-scale-f, 1));
51
- }
52
- .nut-rate-item-small {
53
- margin-left: calc(var(--nutui-rate-item-margin, calc(4px * var(--nut-scale-f, 1))) / 2);
54
- }
55
- .nut-rate-item-small .nut-icon {
56
- height: calc(var(--nutui-rate-icon-size, calc(12px * var(--nut-scale-font, var(--nut-scale-f, 1)))) - 4px * var(--nut-scale-f, 1));
57
- width: calc(var(--nutui-rate-icon-size, calc(12px * var(--nut-scale-font, var(--nut-scale-f, 1)))) - 4px * var(--nut-scale-f, 1));
58
- }
59
- .nut-rate-item-normal:first-child, .nut-rate-item-large:first-child, .nut-rate-item-small:first-child {
60
- margin-left: 0;
61
- }
62
63
  .nut-rate-item-icon {
63
64
  display: flex;
64
65
  align-items: center;
@@ -82,6 +83,9 @@ page {
82
83
  left: auto;
83
84
  transform: none;
84
85
  }
86
+ .nut-rate-item-icon-animate {
87
+ animation: nut-rate-bounce 0.3s ease-in-out;
88
+ }
85
89
  .nut-rate-score {
86
90
  /* #ifdef dynamic*/
87
91
  display: flex;
@@ -93,48 +97,190 @@ page {
93
97
  color: var(--nutui-rate-font-color, var(--nutui-color-primary-icon, #ff3333));
94
98
  font-family: "JDZH-Regular";
95
99
  }
96
- .nut-rate-score-normal {
97
- padding-left: var(--nutui-rate-item-margin, calc(4px * var(--nut-scale-f, 1)));
98
- font-size: var(--nutui-rate-font-size, var(--nutui-font-size-s, calc(12px * var(--nut-scale-font, var(--nut-scale-f, 1)))));
100
+ .nut-rate-score-disabled {
101
+ color: var(--nutui-rate-icon-inactive-color, var(--nutui-color-primary-icon-disabled, #dadce0));
102
+ }
103
+ .nut-rate-horizontal .nut-rate-item {
104
+ margin-left: var(--nutui-rate-item-margin, calc(4px * var(--nut-scale-f, 1)));
105
+ }
106
+ .nut-rate-horizontal .nut-rate-item:first-child {
107
+ margin-left: 0;
108
+ }
109
+ .nut-rate-horizontal .nut-rate-item-small {
110
+ margin-left: calc(2px * var(--nut-scale-f, 1));
111
+ }
112
+ .nut-rate-horizontal .nut-rate-item-small:first-child {
113
+ margin-left: 0;
114
+ }
115
+ .nut-rate-horizontal .nut-rate-item-small .nut-icon {
116
+ height: calc(12px * var(--nut-scale-font, var(--nut-scale-f, 1)));
117
+ width: calc(12px * var(--nut-scale-font, var(--nut-scale-f, 1)));
118
+ }
119
+ .nut-rate-horizontal .nut-rate-item-normal .nut-icon {
120
+ height: calc(16px * var(--nut-scale-font, var(--nut-scale-f, 1)));
121
+ width: calc(16px * var(--nut-scale-font, var(--nut-scale-f, 1)));
122
+ }
123
+ .nut-rate-horizontal .nut-rate-item-large .nut-icon {
124
+ height: calc(20px * var(--nut-scale-font, var(--nut-scale-f, 1)));
125
+ width: calc(20px * var(--nut-scale-font, var(--nut-scale-f, 1)));
126
+ }
127
+ .nut-rate-horizontal .nut-rate-label-small {
128
+ font-size: var(--nutui-font-size-s, calc(12px * var(--nut-scale-font, var(--nut-scale-f, 1))));
129
+ margin-right: calc(4px * var(--nut-scale-f, 1));
130
+ }
131
+ .nut-rate-horizontal .nut-rate-label-normal {
132
+ font-size: var(--nutui-font-size-s, calc(12px * var(--nut-scale-font, var(--nut-scale-f, 1))));
133
+ margin-right: calc(12px * var(--nut-scale-f, 1));
134
+ }
135
+ .nut-rate-horizontal .nut-rate-label-large {
136
+ font-size: var(--nutui-font-size-base, calc(14px * var(--nut-scale-font, var(--nut-scale-f, 1))));
137
+ margin-right: calc(12px * var(--nut-scale-f, 1));
138
+ }
139
+ .nut-rate-horizontal .nut-rate-score-small {
140
+ padding-left: calc(4px * var(--nut-scale-f, 1));
141
+ font-size: var(--nutui-font-size-s, calc(12px * var(--nut-scale-font, var(--nut-scale-f, 1))));
99
142
  line-height: var(--nutui-line-height-s, var(--nutui-font-size-s, calc(12px * var(--nut-scale-font, var(--nut-scale-f, 1)))));
100
143
  }
101
- .nut-rate-score-large {
102
- font-size: var(--nutui-rate-font-size-large, calc(var(--nutui-rate-font-size, var(--nutui-font-size-s, calc(12px * var(--nut-scale-font, var(--nut-scale-f, 1))))) + 6px * var(--nut-scale-font, var(--nut-scale-f, 1))));
103
- line-height: var(--nutui-line-height-xl, var(--nutui-font-size-xl, calc(18px * var(--nut-scale-font, var(--nut-scale-f, 1)))));
104
- padding-left: calc(var(--nutui-rate-item-margin, calc(4px * var(--nut-scale-f, 1))) * 2);
144
+ .nut-rate-horizontal .nut-rate-score-normal {
145
+ padding-left: calc(12px * var(--nut-scale-f, 1));
146
+ font-size: var(--nutui-font-size-s, calc(12px * var(--nut-scale-font, var(--nut-scale-f, 1))));
147
+ line-height: var(--nutui-line-height-s, var(--nutui-font-size-s, calc(12px * var(--nut-scale-font, var(--nut-scale-f, 1)))));
105
148
  }
106
- .nut-rate-score-small {
107
- font-size: var(--nutui-rate-font-size-small, calc(var(--nutui-rate-font-size, var(--nutui-font-size-s, calc(12px * var(--nut-scale-font, var(--nut-scale-f, 1))))) - 2px * var(--nut-scale-font, var(--nut-scale-f, 1))));
108
- line-height: var(--nutui-line-height-xxs, var(--nutui-font-size-xxs, calc(10px * var(--nut-scale-font, var(--nut-scale-f, 1)))));
109
- padding-left: calc(var(--nutui-rate-item-margin, calc(4px * var(--nut-scale-f, 1))) / 2);
149
+ .nut-rate-horizontal .nut-rate-score-large {
150
+ padding-left: calc(12px * var(--nut-scale-f, 1));
151
+ font-size: var(--nutui-font-size-base, calc(14px * var(--nut-scale-font, var(--nut-scale-f, 1))));
152
+ line-height: var(--nutui-line-height-base, var(--nutui-font-size-base, calc(14px * var(--nut-scale-font, var(--nut-scale-f, 1)))));
110
153
  }
111
- .nut-rate-score-disabled {
112
- color: var(--nutui-rate-icon-inactive-color, var(--nutui-color-primary-icon-disabled, #dadce0));
154
+ .nut-rate-vertical .nut-rate-list {
155
+ justify-content: center;
156
+ width: 100%;
157
+ }
158
+ .nut-rate-vertical .nut-rate-item {
159
+ margin-left: var(--nutui-rate-item-margin, calc(4px * var(--nut-scale-f, 1)));
160
+ }
161
+ .nut-rate-vertical .nut-rate-item:first-child {
162
+ margin-left: 0;
163
+ }
164
+ .nut-rate-vertical .nut-rate-item-small .nut-icon,
165
+ .nut-rate-vertical .nut-rate-item-normal .nut-icon {
166
+ height: calc(20px * var(--nut-scale-font, var(--nut-scale-f, 1)));
167
+ width: calc(20px * var(--nut-scale-font, var(--nut-scale-f, 1)));
168
+ }
169
+ .nut-rate-vertical .nut-rate-item-large {
170
+ flex: 1;
171
+ justify-content: center;
172
+ }
173
+ .nut-rate-vertical .nut-rate-item-large .nut-icon {
174
+ height: calc(28px * var(--nut-scale-font, var(--nut-scale-f, 1)));
175
+ width: calc(28px * var(--nut-scale-font, var(--nut-scale-f, 1)));
176
+ }
177
+ .nut-rate-vertical .nut-rate-label-small,
178
+ .nut-rate-vertical .nut-rate-label-normal {
179
+ font-size: var(--nutui-font-size-xs, calc(11px * var(--nut-scale-font, var(--nut-scale-f, 1))));
180
+ margin-top: calc(6px * var(--nut-scale-f, 1));
181
+ }
182
+ .nut-rate-vertical .nut-rate-label-large {
183
+ font-size: var(--nutui-font-size-s, calc(12px * var(--nut-scale-font, var(--nut-scale-f, 1))));
184
+ margin-top: calc(8px * var(--nut-scale-f, 1));
185
+ }
186
+ .nut-rate-vertical .nut-rate-labels {
187
+ width: 100%;
188
+ }
189
+ .nut-rate-vertical .nut-rate-labels-small,
190
+ .nut-rate-vertical .nut-rate-labels-normal {
191
+ margin-top: calc(6px * var(--nut-scale-f, 1));
192
+ }
193
+ .nut-rate-vertical .nut-rate-labels-small .nut-rate-labels-item,
194
+ .nut-rate-vertical .nut-rate-labels-normal .nut-rate-labels-item {
195
+ font-size: var(--nutui-font-size-xs, calc(11px * var(--nut-scale-font, var(--nut-scale-f, 1))));
196
+ }
197
+ .nut-rate-vertical .nut-rate-labels-large {
198
+ margin-top: calc(8px * var(--nut-scale-f, 1));
199
+ }
200
+ .nut-rate-vertical .nut-rate-labels-large .nut-rate-labels-item {
201
+ font-size: var(--nutui-font-size-s, calc(12px * var(--nut-scale-font, var(--nut-scale-f, 1))));
202
+ }
203
+ .nut-rate-vertical .nut-rate-score-small,
204
+ .nut-rate-vertical .nut-rate-score-normal {
205
+ font-size: var(--nutui-font-size-xs, calc(11px * var(--nut-scale-font, var(--nut-scale-f, 1))));
206
+ line-height: var(--nutui-line-height-xs, var(--nutui-font-size-xs, calc(11px * var(--nut-scale-font, var(--nut-scale-f, 1)))));
207
+ margin-top: calc(6px * var(--nut-scale-f, 1));
208
+ }
209
+ .nut-rate-vertical .nut-rate-score-large {
210
+ font-size: var(--nutui-font-size-s, calc(12px * var(--nut-scale-font, var(--nut-scale-f, 1))));
211
+ line-height: var(--nutui-line-height-s, var(--nutui-font-size-s, calc(12px * var(--nut-scale-font, var(--nut-scale-f, 1)))));
212
+ margin-top: calc(8px * var(--nut-scale-f, 1));
113
213
  }
114
214
 
115
- [dir=rtl] .nut-rate-item,
116
- .nut-rtl .nut-rate-item {
215
+ @keyframes nut-rate-bounce {
216
+ 0% {
217
+ transform: scale(1);
218
+ }
219
+ 50% {
220
+ transform: scale(1.25);
221
+ }
222
+ 100% {
223
+ transform: scale(1);
224
+ }
225
+ }
226
+ [dir=rtl] .nut-rate-horizontal .nut-rate-item,
227
+ .nut-rtl .nut-rate-horizontal .nut-rate-item {
117
228
  margin-left: 0;
229
+ margin-right: var(--nutui-rate-item-margin, calc(4px * var(--nut-scale-f, 1)));
118
230
  }
119
- [dir=rtl] .nut-rate-item:first-child,
120
- .nut-rtl .nut-rate-item:first-child {
231
+ [dir=rtl] .nut-rate-horizontal .nut-rate-item:first-child,
232
+ .nut-rtl .nut-rate-horizontal .nut-rate-item:first-child {
121
233
  margin-right: 0;
122
234
  }
123
- [dir=rtl] .nut-rate-item-normal,
124
- .nut-rtl .nut-rate-item-normal {
125
- margin-right: var(--nutui-rate-item-margin, calc(4px * var(--nut-scale-f, 1)));
235
+ [dir=rtl] .nut-rate-horizontal .nut-rate-item-small,
236
+ .nut-rtl .nut-rate-horizontal .nut-rate-item-small {
237
+ margin-left: 0;
238
+ margin-right: calc(2px * var(--nut-scale-f, 1));
239
+ }
240
+ [dir=rtl] .nut-rate-horizontal .nut-rate-item-small:first-child,
241
+ .nut-rtl .nut-rate-horizontal .nut-rate-item-small:first-child {
242
+ margin-right: 0;
243
+ }
244
+ [dir=rtl] .nut-rate-horizontal .nut-rate-label,
245
+ .nut-rtl .nut-rate-horizontal .nut-rate-label {
246
+ margin-right: 0;
247
+ }
248
+ [dir=rtl] .nut-rate-horizontal .nut-rate-label-small,
249
+ .nut-rtl .nut-rate-horizontal .nut-rate-label-small {
250
+ margin-left: calc(4px * var(--nut-scale-f, 1));
251
+ }
252
+ [dir=rtl] .nut-rate-horizontal .nut-rate-label-normal,
253
+ .nut-rtl .nut-rate-horizontal .nut-rate-label-normal {
254
+ margin-left: calc(12px * var(--nut-scale-f, 1));
255
+ }
256
+ [dir=rtl] .nut-rate-horizontal .nut-rate-label-large,
257
+ .nut-rtl .nut-rate-horizontal .nut-rate-label-large {
258
+ margin-left: calc(12px * var(--nut-scale-f, 1));
259
+ }
260
+ [dir=rtl] .nut-rate-horizontal .nut-rate-score,
261
+ .nut-rtl .nut-rate-horizontal .nut-rate-score {
262
+ padding-left: 0;
126
263
  }
127
- [dir=rtl] .nut-rate-item-large,
128
- .nut-rtl .nut-rate-item-large {
129
- margin-right: calc(var(--nutui-rate-item-margin, calc(4px * var(--nut-scale-f, 1))) * 2);
264
+ [dir=rtl] .nut-rate-horizontal .nut-rate-score-small,
265
+ .nut-rtl .nut-rate-horizontal .nut-rate-score-small {
266
+ padding-right: calc(4px * var(--nut-scale-f, 1));
130
267
  }
131
- [dir=rtl] .nut-rate-item-small,
132
- .nut-rtl .nut-rate-item-small {
133
- margin-right: calc(var(--nutui-rate-item-margin, calc(4px * var(--nut-scale-f, 1))) - 2px * var(--nut-scale-f, 1));
268
+ [dir=rtl] .nut-rate-horizontal .nut-rate-score-normal,
269
+ .nut-rtl .nut-rate-horizontal .nut-rate-score-normal {
270
+ padding-right: calc(12px * var(--nut-scale-f, 1));
134
271
  }
135
- [dir=rtl] .nut-rate-item:last-child,
136
- .nut-rtl .nut-rate-item:last-child {
272
+ [dir=rtl] .nut-rate-horizontal .nut-rate-score-large,
273
+ .nut-rtl .nut-rate-horizontal .nut-rate-score-large {
274
+ padding-right: calc(12px * var(--nut-scale-f, 1));
275
+ }
276
+ [dir=rtl] .nut-rate-vertical .nut-rate-item,
277
+ .nut-rtl .nut-rate-vertical .nut-rate-item {
137
278
  margin-left: 0;
279
+ margin-right: var(--nutui-rate-item-margin, calc(4px * var(--nut-scale-f, 1)));
280
+ }
281
+ [dir=rtl] .nut-rate-vertical .nut-rate-item:first-child,
282
+ .nut-rtl .nut-rate-vertical .nut-rate-item:first-child {
283
+ margin-right: 0;
138
284
  }
139
285
  [dir=rtl] .nut-rate-item-half,
140
286
  .nut-rtl .nut-rate-item-half {
@@ -150,20 +296,4 @@ page {
150
296
  .nut-rtl .nut-rate-item-icon.nut-rate-item-icon::before {
151
297
  left: auto;
152
298
  right: auto;
153
- }
154
- [dir=rtl] .nut-rate-score,
155
- .nut-rtl .nut-rate-score {
156
- padding-left: 0;
157
- }
158
- [dir=rtl] .nut-rate-score-large,
159
- .nut-rtl .nut-rate-score-large {
160
- padding-right: calc(var(--nutui-rate-item-margin, calc(4px * var(--nut-scale-f, 1))) * 2);
161
- }
162
- [dir=rtl] .nut-rate-score-normal,
163
- .nut-rtl .nut-rate-score-normal {
164
- padding-right: var(--nutui-rate-item-margin, calc(4px * var(--nut-scale-f, 1)));
165
- }
166
- [dir=rtl] .nut-rate-score-small,
167
- .nut-rtl .nut-rate-score-small {
168
- padding-right: calc(var(--nutui-rate-item-margin, calc(4px * var(--nut-scale-f, 1))) - 2px * var(--nut-scale-f, 1));
169
299
  }
package/dist/cjs/packages/rate/style/style.harmony.css CHANGED
@@ -18,6 +18,31 @@ page {
18
18
  .nut-rate.readonly .nut-rate-item-icon {
19
19
  cursor: default;
20
20
  }
21
+ .nut-rate-horizontal {
22
+ flex-direction: row;
23
+ align-items: center;
24
+ }
25
+ .nut-rate-vertical {
26
+ flex-direction: column;
27
+ align-items: center;
28
+ }
29
+ .nut-rate-list {
30
+ display: flex;
31
+ align-items: center;
32
+ }
33
+ .nut-rate-label {
34
+ color: var(--nutui-rate-label-color, var(--nutui-color-text-disabled, #b4b8bf));
35
+ white-space: nowrap;
36
+ }
37
+ .nut-rate-labels {
38
+ display: flex;
39
+ width: 100%;
40
+ }
41
+ .nut-rate-labels-item {
42
+ flex: 1;
43
+ text-align: center;
44
+ color: var(--nutui-rate-label-color, var(--nutui-color-text-disabled, #b4b8bf));
45
+ }
21
46
  .nut-rate-item {
22
47
  display: flex;
23
48
  align-items: center;
@@ -35,30 +60,6 @@ page {
35
60
  .nut-rate-item-half .nut-icon {
36
61
  flex-shrink: 0;
37
62
  }
38
- .nut-rate-item-normal {
39
- margin-left: var(--nutui-rate-item-margin, calc(4px * var(--nut-scale-f, 1)));
40
- }
41
- .nut-rate-item-normal .nut-icon {
42
- height: var(--nutui-rate-icon-size, calc(12px * var(--nut-scale-font, var(--nut-scale-f, 1))));
43
- width: var(--nutui-rate-icon-size, calc(12px * var(--nut-scale-font, var(--nut-scale-f, 1))));
44
- }
45
- .nut-rate-item-large {
46
- margin-left: calc(var(--nutui-rate-item-margin, calc(4px * var(--nut-scale-f, 1))) * 2);
47
- }
48
- .nut-rate-item-large .nut-icon {
49
- height: calc(var(--nutui-rate-icon-size, calc(12px * var(--nut-scale-font, var(--nut-scale-f, 1)))) + 8px * var(--nut-scale-f, 1));
50
- width: calc(var(--nutui-rate-icon-size, calc(12px * var(--nut-scale-font, var(--nut-scale-f, 1)))) + 8px * var(--nut-scale-f, 1));
51
- }
52
- .nut-rate-item-small {
53
- margin-left: calc(var(--nutui-rate-item-margin, calc(4px * var(--nut-scale-f, 1))) / 2);
54
- }
55
- .nut-rate-item-small .nut-icon {
56
- height: calc(var(--nutui-rate-icon-size, calc(12px * var(--nut-scale-font, var(--nut-scale-f, 1)))) - 4px * var(--nut-scale-f, 1));
57
- width: calc(var(--nutui-rate-icon-size, calc(12px * var(--nut-scale-font, var(--nut-scale-f, 1)))) - 4px * var(--nut-scale-f, 1));
58
- }
59
- .nut-rate-item-normal:first-child, .nut-rate-item-large:first-child, .nut-rate-item-small:first-child {
60
- margin-left: 0;
61
- }
62
63
  .nut-rate-item-icon {
63
64
  display: flex;
64
65
  align-items: center;
@@ -82,6 +83,9 @@ page {
82
83
  left: auto;
83
84
  transform: none;
84
85
  }
86
+ .nut-rate-item-icon-animate {
87
+ animation: nut-rate-bounce 0.3s ease-in-out;
88
+ }
85
89
  .nut-rate-score {
86
90
  /* #ifdef dynamic*/
87
91
  display: flex;
@@ -93,48 +97,190 @@ page {
93
97
  color: var(--nutui-rate-font-color, var(--nutui-color-primary-icon, #ff3333));
94
98
  font-family: "JDZH-Regular";
95
99
  }
96
- .nut-rate-score-normal {
97
- padding-left: var(--nutui-rate-item-margin, calc(4px * var(--nut-scale-f, 1)));
98
- font-size: var(--nutui-rate-font-size, var(--nutui-font-size-s, calc(12px * var(--nut-scale-font, var(--nut-scale-f, 1)))));
100
+ .nut-rate-score-disabled {
101
+ color: var(--nutui-rate-icon-inactive-color, var(--nutui-color-primary-icon-disabled, #dadce0));
102
+ }
103
+ .nut-rate-horizontal .nut-rate-item {
104
+ margin-left: var(--nutui-rate-item-margin, calc(4px * var(--nut-scale-f, 1)));
105
+ }
106
+ .nut-rate-horizontal .nut-rate-item:first-child {
107
+ margin-left: 0;
108
+ }
109
+ .nut-rate-horizontal .nut-rate-item-small {
110
+ margin-left: calc(2px * var(--nut-scale-f, 1));
111
+ }
112
+ .nut-rate-horizontal .nut-rate-item-small:first-child {
113
+ margin-left: 0;
114
+ }
115
+ .nut-rate-horizontal .nut-rate-item-small .nut-icon {
116
+ height: calc(12px * var(--nut-scale-font, var(--nut-scale-f, 1)));
117
+ width: calc(12px * var(--nut-scale-font, var(--nut-scale-f, 1)));
118
+ }
119
+ .nut-rate-horizontal .nut-rate-item-normal .nut-icon {
120
+ height: calc(16px * var(--nut-scale-font, var(--nut-scale-f, 1)));
121
+ width: calc(16px * var(--nut-scale-font, var(--nut-scale-f, 1)));
122
+ }
123
+ .nut-rate-horizontal .nut-rate-item-large .nut-icon {
124
+ height: calc(20px * var(--nut-scale-font, var(--nut-scale-f, 1)));
125
+ width: calc(20px * var(--nut-scale-font, var(--nut-scale-f, 1)));
126
+ }
127
+ .nut-rate-horizontal .nut-rate-label-small {
128
+ font-size: var(--nutui-font-size-s, calc(12px * var(--nut-scale-font, var(--nut-scale-f, 1))));
129
+ margin-right: calc(4px * var(--nut-scale-f, 1));
130
+ }
131
+ .nut-rate-horizontal .nut-rate-label-normal {
132
+ font-size: var(--nutui-font-size-s, calc(12px * var(--nut-scale-font, var(--nut-scale-f, 1))));
133
+ margin-right: calc(12px * var(--nut-scale-f, 1));
134
+ }
135
+ .nut-rate-horizontal .nut-rate-label-large {
136
+ font-size: var(--nutui-font-size-base, calc(14px * var(--nut-scale-font, var(--nut-scale-f, 1))));
137
+ margin-right: calc(12px * var(--nut-scale-f, 1));
138
+ }
139
+ .nut-rate-horizontal .nut-rate-score-small {
140
+ padding-left: calc(4px * var(--nut-scale-f, 1));
141
+ font-size: var(--nutui-font-size-s, calc(12px * var(--nut-scale-font, var(--nut-scale-f, 1))));
99
142
  line-height: var(--nutui-line-height-s, var(--nutui-font-size-s, calc(12px * var(--nut-scale-font, var(--nut-scale-f, 1)))));
100
143
  }
101
- .nut-rate-score-large {
102
- font-size: var(--nutui-rate-font-size-large, calc(var(--nutui-rate-font-size, var(--nutui-font-size-s, calc(12px * var(--nut-scale-font, var(--nut-scale-f, 1))))) + 6px * var(--nut-scale-font, var(--nut-scale-f, 1))));
103
- line-height: var(--nutui-line-height-xl, var(--nutui-font-size-xl, calc(18px * var(--nut-scale-font, var(--nut-scale-f, 1)))));
104
- padding-left: calc(var(--nutui-rate-item-margin, calc(4px * var(--nut-scale-f, 1))) * 2);
144
+ .nut-rate-horizontal .nut-rate-score-normal {
145
+ padding-left: calc(12px * var(--nut-scale-f, 1));
146
+ font-size: var(--nutui-font-size-s, calc(12px * var(--nut-scale-font, var(--nut-scale-f, 1))));
147
+ line-height: var(--nutui-line-height-s, var(--nutui-font-size-s, calc(12px * var(--nut-scale-font, var(--nut-scale-f, 1)))));
105
148
  }
106
- .nut-rate-score-small {
107
- font-size: var(--nutui-rate-font-size-small, calc(var(--nutui-rate-font-size, var(--nutui-font-size-s, calc(12px * var(--nut-scale-font, var(--nut-scale-f, 1))))) - 2px * var(--nut-scale-font, var(--nut-scale-f, 1))));
108
- line-height: var(--nutui-line-height-xxs, var(--nutui-font-size-xxs, calc(10px * var(--nut-scale-font, var(--nut-scale-f, 1)))));
109
- padding-left: calc(var(--nutui-rate-item-margin, calc(4px * var(--nut-scale-f, 1))) / 2);
149
+ .nut-rate-horizontal .nut-rate-score-large {
150
+ padding-left: calc(12px * var(--nut-scale-f, 1));
151
+ font-size: var(--nutui-font-size-base, calc(14px * var(--nut-scale-font, var(--nut-scale-f, 1))));
152
+ line-height: var(--nutui-line-height-base, var(--nutui-font-size-base, calc(14px * var(--nut-scale-font, var(--nut-scale-f, 1)))));
110
153
  }
111
- .nut-rate-score-disabled {
112
- color: var(--nutui-rate-icon-inactive-color, var(--nutui-color-primary-icon-disabled, #dadce0));
154
+ .nut-rate-vertical .nut-rate-list {
155
+ justify-content: center;
156
+ width: 100%;
157
+ }
158
+ .nut-rate-vertical .nut-rate-item {
159
+ margin-left: var(--nutui-rate-item-margin, calc(4px * var(--nut-scale-f, 1)));
160
+ }
161
+ .nut-rate-vertical .nut-rate-item:first-child {
162
+ margin-left: 0;
163
+ }
164
+ .nut-rate-vertical .nut-rate-item-small .nut-icon,
165
+ .nut-rate-vertical .nut-rate-item-normal .nut-icon {
166
+ height: calc(20px * var(--nut-scale-font, var(--nut-scale-f, 1)));
167
+ width: calc(20px * var(--nut-scale-font, var(--nut-scale-f, 1)));
168
+ }
169
+ .nut-rate-vertical .nut-rate-item-large {
170
+ flex: 1;
171
+ justify-content: center;
172
+ }
173
+ .nut-rate-vertical .nut-rate-item-large .nut-icon {
174
+ height: calc(28px * var(--nut-scale-font, var(--nut-scale-f, 1)));
175
+ width: calc(28px * var(--nut-scale-font, var(--nut-scale-f, 1)));
176
+ }
177
+ .nut-rate-vertical .nut-rate-label-small,
178
+ .nut-rate-vertical .nut-rate-label-normal {
179
+ font-size: var(--nutui-font-size-xs, calc(11px * var(--nut-scale-font, var(--nut-scale-f, 1))));
180
+ margin-top: calc(6px * var(--nut-scale-f, 1));
181
+ }
182
+ .nut-rate-vertical .nut-rate-label-large {
183
+ font-size: var(--nutui-font-size-s, calc(12px * var(--nut-scale-font, var(--nut-scale-f, 1))));
184
+ margin-top: calc(8px * var(--nut-scale-f, 1));
185
+ }
186
+ .nut-rate-vertical .nut-rate-labels {
187
+ width: 100%;
188
+ }
189
+ .nut-rate-vertical .nut-rate-labels-small,
190
+ .nut-rate-vertical .nut-rate-labels-normal {
191
+ margin-top: calc(6px * var(--nut-scale-f, 1));
192
+ }
193
+ .nut-rate-vertical .nut-rate-labels-small .nut-rate-labels-item,
194
+ .nut-rate-vertical .nut-rate-labels-normal .nut-rate-labels-item {
195
+ font-size: var(--nutui-font-size-xs, calc(11px * var(--nut-scale-font, var(--nut-scale-f, 1))));
196
+ }
197
+ .nut-rate-vertical .nut-rate-labels-large {
198
+ margin-top: calc(8px * var(--nut-scale-f, 1));
199
+ }
200
+ .nut-rate-vertical .nut-rate-labels-large .nut-rate-labels-item {
201
+ font-size: var(--nutui-font-size-s, calc(12px * var(--nut-scale-font, var(--nut-scale-f, 1))));
202
+ }
203
+ .nut-rate-vertical .nut-rate-score-small,
204
+ .nut-rate-vertical .nut-rate-score-normal {
205
+ font-size: var(--nutui-font-size-xs, calc(11px * var(--nut-scale-font, var(--nut-scale-f, 1))));
206
+ line-height: var(--nutui-line-height-xs, var(--nutui-font-size-xs, calc(11px * var(--nut-scale-font, var(--nut-scale-f, 1)))));
207
+ margin-top: calc(6px * var(--nut-scale-f, 1));
208
+ }
209
+ .nut-rate-vertical .nut-rate-score-large {
210
+ font-size: var(--nutui-font-size-s, calc(12px * var(--nut-scale-font, var(--nut-scale-f, 1))));
211
+ line-height: var(--nutui-line-height-s, var(--nutui-font-size-s, calc(12px * var(--nut-scale-font, var(--nut-scale-f, 1)))));
212
+ margin-top: calc(8px * var(--nut-scale-f, 1));
113
213
  }
114
214
 
115
- [dir=rtl] .nut-rate-item,
116
- .nut-rtl .nut-rate-item {
215
+ @keyframes nut-rate-bounce {
216
+ 0% {
217
+ transform: scale(1);
218
+ }
219
+ 50% {
220
+ transform: scale(1.25);
221
+ }
222
+ 100% {
223
+ transform: scale(1);
224
+ }
225
+ }
226
+ [dir=rtl] .nut-rate-horizontal .nut-rate-item,
227
+ .nut-rtl .nut-rate-horizontal .nut-rate-item {
117
228
  margin-left: 0;
229
+ margin-right: var(--nutui-rate-item-margin, calc(4px * var(--nut-scale-f, 1)));
118
230
  }
119
- [dir=rtl] .nut-rate-item:first-child,
120
- .nut-rtl .nut-rate-item:first-child {
231
+ [dir=rtl] .nut-rate-horizontal .nut-rate-item:first-child,
232
+ .nut-rtl .nut-rate-horizontal .nut-rate-item:first-child {
121
233
  margin-right: 0;
122
234
  }
123
- [dir=rtl] .nut-rate-item-normal,
124
- .nut-rtl .nut-rate-item-normal {
125
- margin-right: var(--nutui-rate-item-margin, calc(4px * var(--nut-scale-f, 1)));
235
+ [dir=rtl] .nut-rate-horizontal .nut-rate-item-small,
236
+ .nut-rtl .nut-rate-horizontal .nut-rate-item-small {
237
+ margin-left: 0;
238
+ margin-right: calc(2px * var(--nut-scale-f, 1));
239
+ }
240
+ [dir=rtl] .nut-rate-horizontal .nut-rate-item-small:first-child,
241
+ .nut-rtl .nut-rate-horizontal .nut-rate-item-small:first-child {
242
+ margin-right: 0;
243
+ }
244
+ [dir=rtl] .nut-rate-horizontal .nut-rate-label,
245
+ .nut-rtl .nut-rate-horizontal .nut-rate-label {
246
+ margin-right: 0;
247
+ }
248
+ [dir=rtl] .nut-rate-horizontal .nut-rate-label-small,
249
+ .nut-rtl .nut-rate-horizontal .nut-rate-label-small {
250
+ margin-left: calc(4px * var(--nut-scale-f, 1));
251
+ }
252
+ [dir=rtl] .nut-rate-horizontal .nut-rate-label-normal,
253
+ .nut-rtl .nut-rate-horizontal .nut-rate-label-normal {
254
+ margin-left: calc(12px * var(--nut-scale-f, 1));
255
+ }
256
+ [dir=rtl] .nut-rate-horizontal .nut-rate-label-large,
257
+ .nut-rtl .nut-rate-horizontal .nut-rate-label-large {
258
+ margin-left: calc(12px * var(--nut-scale-f, 1));
259
+ }
260
+ [dir=rtl] .nut-rate-horizontal .nut-rate-score,
261
+ .nut-rtl .nut-rate-horizontal .nut-rate-score {
262
+ padding-left: 0;
126
263
  }
127
- [dir=rtl] .nut-rate-item-large,
128
- .nut-rtl .nut-rate-item-large {
129
- margin-right: calc(var(--nutui-rate-item-margin, calc(4px * var(--nut-scale-f, 1))) * 2);
264
+ [dir=rtl] .nut-rate-horizontal .nut-rate-score-small,
265
+ .nut-rtl .nut-rate-horizontal .nut-rate-score-small {
266
+ padding-right: calc(4px * var(--nut-scale-f, 1));
130
267
  }
131
- [dir=rtl] .nut-rate-item-small,
132
- .nut-rtl .nut-rate-item-small {
133
- margin-right: calc(var(--nutui-rate-item-margin, calc(4px * var(--nut-scale-f, 1))) - 2px * var(--nut-scale-f, 1));
268
+ [dir=rtl] .nut-rate-horizontal .nut-rate-score-normal,
269
+ .nut-rtl .nut-rate-horizontal .nut-rate-score-normal {
270
+ padding-right: calc(12px * var(--nut-scale-f, 1));
134
271
  }
135
- [dir=rtl] .nut-rate-item:last-child,
136
- .nut-rtl .nut-rate-item:last-child {
272
+ [dir=rtl] .nut-rate-horizontal .nut-rate-score-large,
273
+ .nut-rtl .nut-rate-horizontal .nut-rate-score-large {
274
+ padding-right: calc(12px * var(--nut-scale-f, 1));
275
+ }
276
+ [dir=rtl] .nut-rate-vertical .nut-rate-item,
277
+ .nut-rtl .nut-rate-vertical .nut-rate-item {
137
278
  margin-left: 0;
279
+ margin-right: var(--nutui-rate-item-margin, calc(4px * var(--nut-scale-f, 1)));
280
+ }
281
+ [dir=rtl] .nut-rate-vertical .nut-rate-item:first-child,
282
+ .nut-rtl .nut-rate-vertical .nut-rate-item:first-child {
283
+ margin-right: 0;
138
284
  }
139
285
  [dir=rtl] .nut-rate-item-half,
140
286
  .nut-rtl .nut-rate-item-half {
@@ -150,20 +296,4 @@ page {
150
296
  .nut-rtl .nut-rate-item-icon.nut-rate-item-icon::before {
151
297
  left: auto;
152
298
  right: auto;
153
- }
154
- [dir=rtl] .nut-rate-score,
155
- .nut-rtl .nut-rate-score {
156
- padding-left: 0;
157
- }
158
- [dir=rtl] .nut-rate-score-large,
159
- .nut-rtl .nut-rate-score-large {
160
- padding-right: calc(var(--nutui-rate-item-margin, calc(4px * var(--nut-scale-f, 1))) * 2);
161
- }
162
- [dir=rtl] .nut-rate-score-normal,
163
- .nut-rtl .nut-rate-score-normal {
164
- padding-right: var(--nutui-rate-item-margin, calc(4px * var(--nut-scale-f, 1)));
165
- }
166
- [dir=rtl] .nut-rate-score-small,
167
- .nut-rtl .nut-rate-score-small {
168
- padding-right: calc(var(--nutui-rate-item-margin, calc(4px * var(--nut-scale-f, 1))) - 2px * var(--nut-scale-f, 1));
169
299
  }