@nutui/nutui-react 4.0.0-beta.2 → 4.0.0-beta.4

package/dist/cjs/packages/rate/style-jrkf/style.css

@@ -12,6 +12,31 @@
 .nut-rate.readonly .nut-rate-item-icon {
   cursor: default;
 }
+.nut-rate-horizontal {
+  flex-direction: row;
+  align-items: center;
+}
+.nut-rate-vertical {
+  flex-direction: column;
+  align-items: center;
+}
+.nut-rate-list {
+  display: flex;
+  align-items: center;
+}
+.nut-rate-label {
+  color: var(--nutui-rate-label-color, var(--nutui-color-text-disabled));
+  white-space: nowrap;
+}
+.nut-rate-labels {
+  display: flex;
+  width: 100%;
+}
+.nut-rate-labels-item {
+  flex: 1;
+  text-align: center;
+  color: var(--nutui-rate-label-color, var(--nutui-color-text-disabled));
+}
 .nut-rate-item {
   display: flex;
   align-items: center;
@@ -29,30 +54,6 @@
 .nut-rate-item-half .nut-icon {
   flex-shrink: 0;
 }
-.nut-rate-item-normal {
-  margin-left: var(--nutui-rate-item-margin, 14px);
-}
-.nut-rate-item-normal .nut-icon {
-  height: var(--nutui-rate-icon-size, 12px);
-  width: var(--nutui-rate-icon-size, 12px);
-}
-.nut-rate-item-large {
-  margin-left: calc(var(--nutui-rate-item-margin, 14px) * 2);
-}
-.nut-rate-item-large .nut-icon {
-  height: calc(var(--nutui-rate-icon-size, 12px) + scale-px(8px));
-  width: calc(var(--nutui-rate-icon-size, 12px) + scale-px(8px));
-}
-.nut-rate-item-small {
-  margin-left: calc(var(--nutui-rate-item-margin, 14px) / 2);
-}
-.nut-rate-item-small .nut-icon {
-  height: calc(var(--nutui-rate-icon-size, 12px) - scale-px(4px));
-  width: calc(var(--nutui-rate-icon-size, 12px) - scale-px(4px));
-}
-.nut-rate-item-normal:first-child, .nut-rate-item-large:first-child, .nut-rate-item-small:first-child {
-  margin-left: 0;
-}
 .nut-rate-item-icon {
   display: flex;
   align-items: center;
@@ -76,6 +77,9 @@
   left: auto;
   transform: none;
 }
+.nut-rate-item-icon-animate {
+  animation: nut-rate-bounce 0.3s ease-in-out;
+}
 .nut-rate-score {
   /* #ifdef dynamic*/
   display: flex;
@@ -87,48 +91,190 @@
   color: var(--nutui-rate-font-color, var(--nutui-color-primary-icon, #ff3333));
   font-family: "JDZH-Regular";
 }
-.nut-rate-score-normal {
-  padding-left: var(--nutui-rate-item-margin, 14px);
-  font-size: var(--nutui-rate-font-size, 12px);
+.nut-rate-score-disabled {
+  color: var(--nutui-rate-icon-inactive-color, var(--nutui-color-text-disabled));
+}
+.nut-rate-horizontal .nut-rate-item {
+  margin-left: var(--nutui-rate-item-margin, 14px);
+}
+.nut-rate-horizontal .nut-rate-item:first-child {
+  margin-left: 0;
+}
+.nut-rate-horizontal .nut-rate-item-small {
+  margin-left: scale-px(2px);
+}
+.nut-rate-horizontal .nut-rate-item-small:first-child {
+  margin-left: 0;
+}
+.nut-rate-horizontal .nut-rate-item-small .nut-icon {
+  height: scale-font-px(12px);
+  width: scale-font-px(12px);
+}
+.nut-rate-horizontal .nut-rate-item-normal .nut-icon {
+  height: scale-font-px(16px);
+  width: scale-font-px(16px);
+}
+.nut-rate-horizontal .nut-rate-item-large .nut-icon {
+  height: scale-font-px(20px);
+  width: scale-font-px(20px);
+}
+.nut-rate-horizontal .nut-rate-label-small {
+  font-size: var(--nutui-font-text-small);
+  margin-right: scale-px(4px);
+}
+.nut-rate-horizontal .nut-rate-label-normal {
+  font-size: var(--nutui-font-text-small);
+  margin-right: scale-px(12px);
+}
+.nut-rate-horizontal .nut-rate-label-large {
+  font-size: var(--nutui-font-text);
+  margin-right: scale-px(12px);
+}
+.nut-rate-horizontal .nut-rate-score-small {
+  padding-left: scale-px(4px);
+  font-size: var(--nutui-font-text-small);
   line-height: var(--nutui-line-height-s, var(--nutui-font-text-small));
 }
-.nut-rate-score-large {
-  font-size: var(--nutui-rate-font-size-large, calc(var(--nutui-rate-font-size, 12px) + 6px));
-  line-height: var(--nutui-line-height-xl, var(--nutui-font-h2));
-  padding-left: calc(var(--nutui-rate-item-margin, 14px) * 2);
+.nut-rate-horizontal .nut-rate-score-normal {
+  padding-left: scale-px(12px);
+  font-size: var(--nutui-font-text-small);
+  line-height: var(--nutui-line-height-s, var(--nutui-font-text-small));
 }
-.nut-rate-score-small {
-  font-size: var(--nutui-rate-font-size-small, calc(var(--nutui-rate-font-size, 12px) - 2px));
-  line-height: var(--nutui-line-height-xxs, var(--nutui-font-text-mini));
-  padding-left: calc(var(--nutui-rate-item-margin, 14px) / 2);
+.nut-rate-horizontal .nut-rate-score-large {
+  padding-left: scale-px(12px);
+  font-size: var(--nutui-font-text);
+  line-height: var(--nutui-line-height-base, var(--nutui-line-height, var(--nutui-font-text)));
 }
-.nut-rate-score-disabled {
-  color: var(--nutui-rate-icon-inactive-color, var(--nutui-color-text-disabled));
+.nut-rate-vertical .nut-rate-list {
+  justify-content: center;
+  width: 100%;
+}
+.nut-rate-vertical .nut-rate-item {
+  margin-left: var(--nutui-rate-item-margin, 14px);
+}
+.nut-rate-vertical .nut-rate-item:first-child {
+  margin-left: 0;
+}
+.nut-rate-vertical .nut-rate-item-small .nut-icon,
+.nut-rate-vertical .nut-rate-item-normal .nut-icon {
+  height: scale-font-px(20px);
+  width: scale-font-px(20px);
+}
+.nut-rate-vertical .nut-rate-item-large {
+  flex: 1;
+  justify-content: center;
+}
+.nut-rate-vertical .nut-rate-item-large .nut-icon {
+  height: scale-font-px(28px);
+  width: scale-font-px(28px);
+}
+.nut-rate-vertical .nut-rate-label-small,
+.nut-rate-vertical .nut-rate-label-normal {
+  font-size: var(--nutui-font-text-xs);
+  margin-top: scale-px(6px);
+}
+.nut-rate-vertical .nut-rate-label-large {
+  font-size: var(--nutui-font-text-small);
+  margin-top: scale-px(8px);
+}
+.nut-rate-vertical .nut-rate-labels {
+  width: 100%;
+}
+.nut-rate-vertical .nut-rate-labels-small,
+.nut-rate-vertical .nut-rate-labels-normal {
+  margin-top: scale-px(6px);
+}
+.nut-rate-vertical .nut-rate-labels-small .nut-rate-labels-item,
+.nut-rate-vertical .nut-rate-labels-normal .nut-rate-labels-item {
+  font-size: var(--nutui-font-text-xs);
+}
+.nut-rate-vertical .nut-rate-labels-large {
+  margin-top: scale-px(8px);
+}
+.nut-rate-vertical .nut-rate-labels-large .nut-rate-labels-item {
+  font-size: var(--nutui-font-text-small);
+}
+.nut-rate-vertical .nut-rate-score-small,
+.nut-rate-vertical .nut-rate-score-normal {
+  font-size: var(--nutui-font-text-xs);
+  line-height: var(--nutui-line-height-xs, var(--nutui-font-text-xs));
+  margin-top: scale-px(6px);
+}
+.nut-rate-vertical .nut-rate-score-large {
+  font-size: var(--nutui-font-text-small);
+  line-height: var(--nutui-line-height-s, var(--nutui-font-text-small));
+  margin-top: scale-px(8px);
 }
 
-[dir=rtl] .nut-rate-item,
-.nut-rtl .nut-rate-item {
+@keyframes nut-rate-bounce {
+  0% {
+    transform: scale(1);
+  }
+  50% {
+    transform: scale(1.25);
+  }
+  100% {
+    transform: scale(1);
+  }
+}
+[dir=rtl] .nut-rate-horizontal .nut-rate-item,
+.nut-rtl .nut-rate-horizontal .nut-rate-item {
   margin-left: 0;
+  margin-right: var(--nutui-rate-item-margin, 14px);
 }
-[dir=rtl] .nut-rate-item:first-child,
-.nut-rtl .nut-rate-item:first-child {
+[dir=rtl] .nut-rate-horizontal .nut-rate-item:first-child,
+.nut-rtl .nut-rate-horizontal .nut-rate-item:first-child {
   margin-right: 0;
 }
-[dir=rtl] .nut-rate-item-normal,
-.nut-rtl .nut-rate-item-normal {
-  margin-right: var(--nutui-rate-item-margin, 14px);
+[dir=rtl] .nut-rate-horizontal .nut-rate-item-small,
+.nut-rtl .nut-rate-horizontal .nut-rate-item-small {
+  margin-left: 0;
+  margin-right: scale-px(2px);
+}
+[dir=rtl] .nut-rate-horizontal .nut-rate-item-small:first-child,
+.nut-rtl .nut-rate-horizontal .nut-rate-item-small:first-child {
+  margin-right: 0;
+}
+[dir=rtl] .nut-rate-horizontal .nut-rate-label,
+.nut-rtl .nut-rate-horizontal .nut-rate-label {
+  margin-right: 0;
+}
+[dir=rtl] .nut-rate-horizontal .nut-rate-label-small,
+.nut-rtl .nut-rate-horizontal .nut-rate-label-small {
+  margin-left: scale-px(4px);
+}
+[dir=rtl] .nut-rate-horizontal .nut-rate-label-normal,
+.nut-rtl .nut-rate-horizontal .nut-rate-label-normal {
+  margin-left: scale-px(12px);
+}
+[dir=rtl] .nut-rate-horizontal .nut-rate-label-large,
+.nut-rtl .nut-rate-horizontal .nut-rate-label-large {
+  margin-left: scale-px(12px);
+}
+[dir=rtl] .nut-rate-horizontal .nut-rate-score,
+.nut-rtl .nut-rate-horizontal .nut-rate-score {
+  padding-left: 0;
 }
-[dir=rtl] .nut-rate-item-large,
-.nut-rtl .nut-rate-item-large {
-  margin-right: calc(var(--nutui-rate-item-margin, 14px) * 2);
+[dir=rtl] .nut-rate-horizontal .nut-rate-score-small,
+.nut-rtl .nut-rate-horizontal .nut-rate-score-small {
+  padding-right: scale-px(4px);
 }
-[dir=rtl] .nut-rate-item-small,
-.nut-rtl .nut-rate-item-small {
-  margin-right: calc(var(--nutui-rate-item-margin, 14px) - scale-px(2px));
+[dir=rtl] .nut-rate-horizontal .nut-rate-score-normal,
+.nut-rtl .nut-rate-horizontal .nut-rate-score-normal {
+  padding-right: scale-px(12px);
 }
-[dir=rtl] .nut-rate-item:last-child,
-.nut-rtl .nut-rate-item:last-child {
+[dir=rtl] .nut-rate-horizontal .nut-rate-score-large,
+.nut-rtl .nut-rate-horizontal .nut-rate-score-large {
+  padding-right: scale-px(12px);
+}
+[dir=rtl] .nut-rate-vertical .nut-rate-item,
+.nut-rtl .nut-rate-vertical .nut-rate-item {
   margin-left: 0;
+  margin-right: var(--nutui-rate-item-margin, 14px);
+}
+[dir=rtl] .nut-rate-vertical .nut-rate-item:first-child,
+.nut-rtl .nut-rate-vertical .nut-rate-item:first-child {
+  margin-right: 0;
 }
 [dir=rtl] .nut-rate-item-half,
 .nut-rtl .nut-rate-item-half {
@@ -144,20 +290,4 @@
 .nut-rtl .nut-rate-item-icon.nut-rate-item-icon::before {
   left: auto;
   right: auto;
-}
-[dir=rtl] .nut-rate-score,
-.nut-rtl .nut-rate-score {
-  padding-left: 0;
-}
-[dir=rtl] .nut-rate-score-large,
-.nut-rtl .nut-rate-score-large {
-  padding-right: calc(var(--nutui-rate-item-margin, 14px) * 2);
-}
-[dir=rtl] .nut-rate-score-normal,
-.nut-rtl .nut-rate-score-normal {
-  padding-right: var(--nutui-rate-item-margin, 14px);
-}
-[dir=rtl] .nut-rate-score-small,
-.nut-rtl .nut-rate-score-small {
-  padding-right: calc(var(--nutui-rate-item-margin, 14px) - scale-px(2px));
 }

package/dist/cjs/packages/resultpage/style/style.css

@@ -8,10 +8,6 @@ page {
   --nut-icon-line-height: calc(16px * var(--nut-scale-icon, var(--nut-scale-f, 1))) !important;
 }
 
-/* #ifdef harmony */
-/* #endif */
-/* #ifndef harmony */
-/* #endif */
 .nut-resultpage {
   width: 100%;
   display: flex;

package/dist/cjs/packages/row/style/style.css

@@ -8,10 +8,6 @@ page {
   --nut-icon-line-height: calc(16px * var(--nut-scale-icon, var(--nut-scale-f, 1))) !important;
 }
 
-/* #ifdef harmony */
-/* #endif */
-/* #ifndef harmony */
-/* #endif */
 .nut-row {
   display: flex;
   flex-direction: row;

package/dist/cjs/packages/safearea/style/style.css

@@ -8,10 +8,6 @@ page {
   --nut-icon-line-height: calc(16px * var(--nut-scale-icon, var(--nut-scale-f, 1))) !important;
 }
 
-/* #ifdef harmony */
-/* #endif */
-/* #ifndef harmony */
-/* #endif */
 .nut-safe-area {
   display: flex;
   width: 100%;

package/dist/cjs/packages/searchbar/style/style.css

@@ -8,10 +8,6 @@ page {
   --nut-icon-line-height: calc(16px * var(--nut-scale-icon, var(--nut-scale-f, 1))) !important;
 }
 
-/* #ifdef harmony */
-/* #endif */
-/* #ifndef harmony */
-/* #endif */
 .nut-searchbar {
   display: flex;
   align-items: center;
@@ -115,7 +111,7 @@ page {
   width: var(--nutui-icon-size-6, calc(6px * var(--nut-scale-icon, var(--nut-scale-f, 1))));
   height: var(--nutui-icon-size-6, calc(6px * var(--nut-scale-icon, var(--nut-scale-f, 1))));
   font-size: var(--nutui-icon-size-6, calc(6px * var(--nut-scale-icon, var(--nut-scale-f, 1))));
-  color: var(--nutui-color-text-disabled, #c2c4cc);
+  color: var(--nutui-color-text-disabled, #b4b8bf);
   margin-left: calc(4px * var(--nut-scale-f, 1));
 }
 .nut-searchbar-left, .nut-searchbar-right {

package/dist/cjs/packages/segmented/style/style.css

@@ -8,10 +8,6 @@ page {
   --nut-icon-line-height: calc(16px * var(--nut-scale-icon, var(--nut-scale-f, 1))) !important;
 }
 
-/* #ifdef harmony */
-/* #endif */
-/* #ifndef harmony */
-/* #endif */
 .nut-segmented {
   /* #ifdef dynamic*/
   display: flex;
@@ -35,7 +31,7 @@ page {
   justify-content: center;
   padding: var(--nutui-segmented-item-padding, 0 var(--nutui-spacing-xs, calc(6px * var(--nut-scale-f, 1))));
   border-radius: var(--nutui-segmented-item-radius, var(--nutui-radius-xs, calc(4px * var(--nut-scale-f, 1))));
-  color: var(--nutui-segmented-item-color, #ffffff);
+  color: var(--nutui-segmented-item-color, var(--nutui-color-primary-text, #ffffff));
   font-size: var(--nutui-segmented-item-fontsize, var(--nutui-font-size-s, calc(12px * var(--nut-scale-font, var(--nut-scale-f, 1)))));
   line-height: var(--nutui-line-height-s, var(--nutui-font-size-s, calc(12px * var(--nut-scale-font, var(--nut-scale-f, 1)))));
   box-sizing: border-box;

package/dist/cjs/packages/shortpassword/style/style.css

@@ -8,10 +8,6 @@ page {
   --nut-icon-line-height: calc(16px * var(--nut-scale-icon, var(--nut-scale-f, 1))) !important;
 }
 
-/* #ifdef harmony */
-/* #endif */
-/* #ifndef harmony */
-/* #endif */
 .nut-shortpassword-popup {
   padding: calc(32px * var(--nut-scale-f, 1)) calc(24px * var(--nut-scale-f, 1)) calc(28px * var(--nut-scale-f, 1)) calc(24px * var(--nut-scale-f, 1));
   border-radius: calc(12px * var(--nut-scale-f, 1));
@@ -125,7 +121,7 @@ page {
   padding: calc(8px * var(--nut-scale-f, 1)) calc(38px * var(--nut-scale-f, 1));
   line-height: var(--nutui-line-height-base, var(--nutui-font-size-base, calc(14px * var(--nut-scale-font, var(--nut-scale-f, 1)))));
   font-size: var(--nutui-font-size-base, calc(14px * var(--nut-scale-font, var(--nut-scale-f, 1))));
-  color: #ffffff;
+  color: var(--nutui-color-primary-text, #ffffff);
 }
 
 [dir=rtl] .nut-shortpassword-input-real,

package/dist/cjs/packages/sidebar/style/style.css

@@ -8,10 +8,6 @@ page {
   --nut-icon-line-height: calc(16px * var(--nut-scale-icon, var(--nut-scale-f, 1))) !important;
 }
 
-/* #ifdef harmony */
-/* #endif */
-/* #ifndef harmony */
-/* #endif */
 .nut-sidebar {
   display: flex;
 }
@@ -68,6 +64,6 @@ page {
   font-size: var(--nutui-sidebar-active-font-size, var(--nutui-font-size-l, calc(15px * var(--nut-scale-font, var(--nut-scale-f, 1)))));
 }
 .nut-sidebar-titles-item-disabled {
-  color: var(--nutui-color-text-disabled, #c2c4cc);
+  color: var(--nutui-color-text-disabled, #b4b8bf);
   cursor: not-allowed;
 }

package/dist/cjs/packages/sidebaritem/style/style.css

@@ -8,10 +8,6 @@ page {
   --nut-icon-line-height: calc(16px * var(--nut-scale-icon, var(--nut-scale-f, 1))) !important;
 }
 
-/* #ifdef harmony */
-/* #endif */
-/* #ifndef harmony */
-/* #endif */
 .nut-sidebaritem {
   width: 100%;
   height: 100%;

package/dist/cjs/packages/signature/style/style.css

@@ -8,10 +8,6 @@ page {
   --nut-icon-line-height: calc(16px * var(--nut-scale-icon, var(--nut-scale-f, 1))) !important;
 }
 
-/* #ifdef harmony */
-/* #endif */
-/* #ifndef harmony */
-/* #endif */
 .nut-signature .spcanvas_WEAPP {
   width: 100%;
   height: 100%;

package/dist/cjs/packages/skeleton/style/style.css

@@ -8,10 +8,6 @@ page {
   --nut-icon-line-height: calc(16px * var(--nut-scale-icon, var(--nut-scale-f, 1))) !important;
 }
 
-/* #ifdef harmony */
-/* #endif */
-/* #ifndef harmony */
-/* #endif */
 .nut-skeleton {
   line-height: 0;
   font-size: 0px;

package/dist/cjs/packages/space/style/style.css

@@ -8,10 +8,6 @@ page {
   --nut-icon-line-height: calc(16px * var(--nut-scale-icon, var(--nut-scale-f, 1))) !important;
 }
 
-/* #ifdef harmony */
-/* #endif */
-/* #ifndef harmony */
-/* #endif */
 .nut-space {
   display: flex;
 }

package/dist/cjs/packages/step/style/style.css

@@ -8,10 +8,6 @@ page {
   --nut-icon-line-height: calc(16px * var(--nut-scale-icon, var(--nut-scale-f, 1))) !important;
 }
 
-/* #ifdef harmony */
-/* #endif */
-/* #ifndef harmony */
-/* #endif */
 .nut-step {
   position: relative;
   display: flex;
@@ -45,7 +41,7 @@ page {
 .nut-step-head-dot {
   height: var(--nutui-steps-base-head-dot-size, var(--nutui-icon-size-6, calc(6px * var(--nut-scale-icon, var(--nut-scale-f, 1)))));
   width: var(--nutui-steps-base-head-dot-size, var(--nutui-icon-size-6, calc(6px * var(--nut-scale-icon, var(--nut-scale-f, 1)))));
-  background-color: var(--nutui-steps-base-head-dot-background-color, var(--nutui-color-text-disabled, #c2c4cc));
+  background-color: var(--nutui-steps-base-head-dot-background-color, var(--nutui-color-text-disabled, #b4b8bf));
 }
 .nut-step-head-dot, .nut-step-head-icon, .nut-step-head-text {
   display: flex;

package/dist/cjs/packages/steps/style/style.css

@@ -8,10 +8,6 @@ page {
   --nut-icon-line-height: calc(16px * var(--nut-scale-icon, var(--nut-scale-f, 1))) !important;
 }
 
-/* #ifdef harmony */
-/* #endif */
-/* #ifndef harmony */
-/* #endif */
 .nut-steps {
   display: flex;
 }
@@ -63,7 +59,7 @@ page {
   padding-left: calc(4px * var(--nut-scale-f, 1));
 }
 .nut-steps-horizontal-single .nut-step-special {
-  padding-right: var(--nutui-steps-horizontal-item-special-padding-right, calc(22px * var(--nut-scale-f, 1)));
+  padding-right: var(--nutui-steps-horizontal-item-special-padding-right, calc(22px * var(--nut-scale-font, var(--nut-scale-f, 1))));
 }
 .nut-steps-horizontal-single .nut-step-special .nut-step-line {
   width: 100%;

package/dist/cjs/packages/sticky/style/style.css

@@ -8,10 +8,6 @@ page {
   --nut-icon-line-height: calc(16px * var(--nut-scale-icon, var(--nut-scale-f, 1))) !important;
 }
 
-/* #ifdef harmony */
-/* #endif */
-/* #ifndef harmony */
-/* #endif */
 .nut-sticky-fixed {
   position: fixed;
 }

package/dist/cjs/packages/swipe/style/style.css

@@ -8,10 +8,6 @@ page {
   --nut-icon-line-height: calc(16px * var(--nut-scale-icon, var(--nut-scale-f, 1))) !important;
 }
 
-/* #ifdef harmony */
-/* #endif */
-/* #ifndef harmony */
-/* #endif */
 .nut-swipe {
   display: flex;
   flex-direction: row;

package/dist/cjs/packages/swiper/style/style.css

@@ -8,10 +8,6 @@ page {
   --nut-icon-line-height: calc(16px * var(--nut-scale-icon, var(--nut-scale-f, 1))) !important;
 }
 
-/* #ifdef harmony */
-/* #endif */
-/* #ifndef harmony */
-/* #endif */
 .nut-swiper {
   width: 100%;
   height: 100%;

package/dist/cjs/packages/swiperitem/style/style.css

@@ -8,10 +8,6 @@ page {
   --nut-icon-line-height: calc(16px * var(--nut-scale-icon, var(--nut-scale-f, 1))) !important;
 }
 
-/* #ifdef harmony */
-/* #endif */
-/* #ifndef harmony */
-/* #endif */
 .nut-swiper-item {
   height: 100%;
 }