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

package/dist/cjs/packages/rate/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-rate {
   display: flex;
   touch-action: pan-x;
@@ -22,6 +18,31 @@ page {
 .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, #b4b8bf));
+  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, #b4b8bf));
+}
 .nut-rate-item {
   display: flex;
   align-items: center;
@@ -39,30 +60,6 @@ page {
 .nut-rate-item-half .nut-icon {
   flex-shrink: 0;
 }
-.nut-rate-item-normal {
-  margin-left: var(--nutui-rate-item-margin, calc(4px * var(--nut-scale-f, 1)));
-}
-.nut-rate-item-normal .nut-icon {
-  height: var(--nutui-rate-icon-size, calc(12px * var(--nut-scale-font, var(--nut-scale-f, 1))));
-  width: var(--nutui-rate-icon-size, calc(12px * var(--nut-scale-font, var(--nut-scale-f, 1))));
-}
-.nut-rate-item-large {
-  margin-left: calc(var(--nutui-rate-item-margin, calc(4px * var(--nut-scale-f, 1))) * 2);
-}
-.nut-rate-item-large .nut-icon {
-  height: calc(var(--nutui-rate-icon-size, calc(12px * var(--nut-scale-font, var(--nut-scale-f, 1)))) + 8px * var(--nut-scale-f, 1));
-  width: calc(var(--nutui-rate-icon-size, calc(12px * var(--nut-scale-font, var(--nut-scale-f, 1)))) + 8px * var(--nut-scale-f, 1));
-}
-.nut-rate-item-small {
-  margin-left: calc(var(--nutui-rate-item-margin, calc(4px * var(--nut-scale-f, 1))) / 2);
-}
-.nut-rate-item-small .nut-icon {
-  height: calc(var(--nutui-rate-icon-size, calc(12px * var(--nut-scale-font, var(--nut-scale-f, 1)))) - 4px * var(--nut-scale-f, 1));
-  width: calc(var(--nutui-rate-icon-size, calc(12px * var(--nut-scale-font, var(--nut-scale-f, 1)))) - 4px * var(--nut-scale-f, 1));
-}
-.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;
@@ -86,6 +83,9 @@ page {
   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;
@@ -97,48 +97,190 @@ page {
   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, calc(4px * var(--nut-scale-f, 1)));
-  font-size: var(--nutui-rate-font-size, var(--nutui-font-size-s, calc(12px * var(--nut-scale-font, var(--nut-scale-f, 1)))));
+.nut-rate-score-disabled {
+  color: var(--nutui-rate-icon-inactive-color, var(--nutui-color-primary-icon-disabled, #dadce0));
+}
+.nut-rate-horizontal .nut-rate-item {
+  margin-left: var(--nutui-rate-item-margin, calc(4px * var(--nut-scale-f, 1)));
+}
+.nut-rate-horizontal .nut-rate-item:first-child {
+  margin-left: 0;
+}
+.nut-rate-horizontal .nut-rate-item-small {
+  margin-left: calc(2px * var(--nut-scale-f, 1));
+}
+.nut-rate-horizontal .nut-rate-item-small:first-child {
+  margin-left: 0;
+}
+.nut-rate-horizontal .nut-rate-item-small .nut-icon {
+  height: calc(12px * var(--nut-scale-font, var(--nut-scale-f, 1)));
+  width: calc(12px * var(--nut-scale-font, var(--nut-scale-f, 1)));
+}
+.nut-rate-horizontal .nut-rate-item-normal .nut-icon {
+  height: calc(16px * var(--nut-scale-font, var(--nut-scale-f, 1)));
+  width: calc(16px * var(--nut-scale-font, var(--nut-scale-f, 1)));
+}
+.nut-rate-horizontal .nut-rate-item-large .nut-icon {
+  height: calc(20px * var(--nut-scale-font, var(--nut-scale-f, 1)));
+  width: calc(20px * var(--nut-scale-font, var(--nut-scale-f, 1)));
+}
+.nut-rate-horizontal .nut-rate-label-small {
+  font-size: var(--nutui-font-size-s, calc(12px * var(--nut-scale-font, var(--nut-scale-f, 1))));
+  margin-right: calc(4px * var(--nut-scale-f, 1));
+}
+.nut-rate-horizontal .nut-rate-label-normal {
+  font-size: var(--nutui-font-size-s, calc(12px * var(--nut-scale-font, var(--nut-scale-f, 1))));
+  margin-right: calc(12px * var(--nut-scale-f, 1));
+}
+.nut-rate-horizontal .nut-rate-label-large {
+  font-size: var(--nutui-font-size-base, calc(14px * var(--nut-scale-font, var(--nut-scale-f, 1))));
+  margin-right: calc(12px * var(--nut-scale-f, 1));
+}
+.nut-rate-horizontal .nut-rate-score-small {
+  padding-left: calc(4px * var(--nut-scale-f, 1));
+  font-size: 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)))));
 }
-.nut-rate-score-large {
-  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))));
-  line-height: var(--nutui-line-height-xl, var(--nutui-font-size-xl, calc(18px * var(--nut-scale-font, var(--nut-scale-f, 1)))));
-  padding-left: calc(var(--nutui-rate-item-margin, calc(4px * var(--nut-scale-f, 1))) * 2);
+.nut-rate-horizontal .nut-rate-score-normal {
+  padding-left: calc(12px * var(--nut-scale-f, 1));
+  font-size: 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)))));
 }
-.nut-rate-score-small {
-  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))));
-  line-height: var(--nutui-line-height-xxs, var(--nutui-font-size-xxs, calc(10px * var(--nut-scale-font, var(--nut-scale-f, 1)))));
-  padding-left: calc(var(--nutui-rate-item-margin, calc(4px * var(--nut-scale-f, 1))) / 2);
+.nut-rate-horizontal .nut-rate-score-large {
+  padding-left: calc(12px * var(--nut-scale-f, 1));
+  font-size: var(--nutui-font-size-base, calc(14px * var(--nut-scale-font, 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)))));
 }
-.nut-rate-score-disabled {
-  color: var(--nutui-rate-icon-inactive-color, var(--nutui-color-primary-icon-disabled, #dadce0));
+.nut-rate-vertical .nut-rate-list {
+  justify-content: center;
+  width: 100%;
+}
+.nut-rate-vertical .nut-rate-item {
+  margin-left: var(--nutui-rate-item-margin, calc(4px * var(--nut-scale-f, 1)));
+}
+.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: calc(20px * var(--nut-scale-font, var(--nut-scale-f, 1)));
+  width: calc(20px * var(--nut-scale-font, var(--nut-scale-f, 1)));
+}
+.nut-rate-vertical .nut-rate-item-large {
+  flex: 1;
+  justify-content: center;
+}
+.nut-rate-vertical .nut-rate-item-large .nut-icon {
+  height: calc(28px * var(--nut-scale-font, var(--nut-scale-f, 1)));
+  width: calc(28px * var(--nut-scale-font, var(--nut-scale-f, 1)));
+}
+.nut-rate-vertical .nut-rate-label-small,
+.nut-rate-vertical .nut-rate-label-normal {
+  font-size: var(--nutui-font-size-xs, calc(11px * var(--nut-scale-font, var(--nut-scale-f, 1))));
+  margin-top: calc(6px * var(--nut-scale-f, 1));
+}
+.nut-rate-vertical .nut-rate-label-large {
+  font-size: var(--nutui-font-size-s, calc(12px * var(--nut-scale-font, var(--nut-scale-f, 1))));
+  margin-top: calc(8px * var(--nut-scale-f, 1));
+}
+.nut-rate-vertical .nut-rate-labels {
+  width: 100%;
+}
+.nut-rate-vertical .nut-rate-labels-small,
+.nut-rate-vertical .nut-rate-labels-normal {
+  margin-top: calc(6px * var(--nut-scale-f, 1));
+}
+.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-size-xs, calc(11px * var(--nut-scale-font, var(--nut-scale-f, 1))));
+}
+.nut-rate-vertical .nut-rate-labels-large {
+  margin-top: calc(8px * var(--nut-scale-f, 1));
+}
+.nut-rate-vertical .nut-rate-labels-large .nut-rate-labels-item {
+  font-size: var(--nutui-font-size-s, calc(12px * var(--nut-scale-font, var(--nut-scale-f, 1))));
+}
+.nut-rate-vertical .nut-rate-score-small,
+.nut-rate-vertical .nut-rate-score-normal {
+  font-size: var(--nutui-font-size-xs, calc(11px * var(--nut-scale-font, var(--nut-scale-f, 1))));
+  line-height: var(--nutui-line-height-xs, var(--nutui-font-size-xs, calc(11px * var(--nut-scale-font, var(--nut-scale-f, 1)))));
+  margin-top: calc(6px * var(--nut-scale-f, 1));
+}
+.nut-rate-vertical .nut-rate-score-large {
+  font-size: 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)))));
+  margin-top: calc(8px * var(--nut-scale-f, 1));
 }
 
-[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, calc(4px * var(--nut-scale-f, 1)));
 }
-[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, calc(4px * var(--nut-scale-f, 1)));
+[dir=rtl] .nut-rate-horizontal .nut-rate-item-small,
+.nut-rtl .nut-rate-horizontal .nut-rate-item-small {
+  margin-left: 0;
+  margin-right: calc(2px * var(--nut-scale-f, 1));
+}
+[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: calc(4px * var(--nut-scale-f, 1));
+}
+[dir=rtl] .nut-rate-horizontal .nut-rate-label-normal,
+.nut-rtl .nut-rate-horizontal .nut-rate-label-normal {
+  margin-left: calc(12px * var(--nut-scale-f, 1));
+}
+[dir=rtl] .nut-rate-horizontal .nut-rate-label-large,
+.nut-rtl .nut-rate-horizontal .nut-rate-label-large {
+  margin-left: calc(12px * var(--nut-scale-f, 1));
+}
+[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, calc(4px * var(--nut-scale-f, 1))) * 2);
+[dir=rtl] .nut-rate-horizontal .nut-rate-score-small,
+.nut-rtl .nut-rate-horizontal .nut-rate-score-small {
+  padding-right: calc(4px * var(--nut-scale-f, 1));
 }
-[dir=rtl] .nut-rate-item-small,
-.nut-rtl .nut-rate-item-small {
-  margin-right: calc(var(--nutui-rate-item-margin, calc(4px * var(--nut-scale-f, 1))) - 2px * var(--nut-scale-f, 1));
+[dir=rtl] .nut-rate-horizontal .nut-rate-score-normal,
+.nut-rtl .nut-rate-horizontal .nut-rate-score-normal {
+  padding-right: calc(12px * var(--nut-scale-f, 1));
 }
-[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: calc(12px * var(--nut-scale-f, 1));
+}
+[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, calc(4px * var(--nut-scale-f, 1)));
+}
+[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 {
@@ -154,20 +296,4 @@ page {
 .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, calc(4px * var(--nut-scale-f, 1))) * 2);
-}
-[dir=rtl] .nut-rate-score-normal,
-.nut-rtl .nut-rate-score-normal {
-  padding-right: var(--nutui-rate-item-margin, calc(4px * var(--nut-scale-f, 1)));
-}
-[dir=rtl] .nut-rate-score-small,
-.nut-rtl .nut-rate-score-small {
-  padding-right: calc(var(--nutui-rate-item-margin, calc(4px * var(--nut-scale-f, 1))) - 2px * var(--nut-scale-f, 1));
 }

package/dist/cjs/packages/rate/style-jmapp/rate.scss

@@ -14,6 +14,37 @@
     }
   }
 
+  &-horizontal {
+    flex-direction: row;
+    align-items: center;
+  }
+
+  &-vertical {
+    flex-direction: column;
+    align-items: center;
+  }
+
+  &-list {
+    display: flex;
+    align-items: center;
+  }
+
+  &-label {
+    color: $rate-label-color;
+    white-space: nowrap;
+  }
+
+  &-labels {
+    display: flex;
+    width: 100%;
+
+    &-item {
+      flex: 1;
+      text-align: center;
+      color: $rate-label-color;
+    }
+  }
+
   &-item {
     display: flex;
     align-items: center;
@@ -33,38 +64,6 @@
       }
     }
 
-    &-normal {
-      margin-left: $rate-item-margin;
-      .nut-icon {
-        height: $rate-icon-size;
-        width: $rate-icon-size;
-      }
-    }
-
-    &-large {
-      margin-left: calc($rate-item-margin * 2);
-      .nut-icon {
-        height: calc($rate-icon-size + scale-px(8px));
-        width: calc($rate-icon-size + scale-px(8px));
-      }
-    }
-
-    &-small {
-      margin-left: calc($rate-item-margin / 2);
-      .nut-icon {
-        height: calc($rate-icon-size - scale-px(4px));
-        width: calc($rate-icon-size - scale-px(4px));
-      }
-    }
-
-    &-normal,
-    &-large,
-    &-small {
-      &:first-child {
-        margin-left: 0;
-      }
-    }
-
     &-icon {
       display: flex;
       align-items: center;
@@ -93,6 +92,10 @@
         left: auto;
         transform: none;
       }
+
+      &-animate {
+        animation: nut-rate-bounce 0.3s ease-in-out;
+      }
     }
   }
 
@@ -107,85 +110,250 @@
     color: $rate-font-color;
     font-family: 'JDZH-Regular';
 
-    &-normal {
-      padding-left: $rate-item-margin;
-      font-size: $rate-font-size;
+    &-disabled {
+      color: $rate-icon-inactive-color;
+    }
+  }
+
+  // horizontal layout
+  &-horizontal {
+    .nut-rate-item {
+      margin-left: $rate-item-margin;
+      &:first-child {
+        margin-left: 0;
+      }
+    }
+
+    // 12DP - star gap 2px
+    .nut-rate-item-small {
+      margin-left: scale-px(2px);
+      &:first-child {
+        margin-left: 0;
+      }
+      .nut-icon {
+        height: scale-font-px(12px);
+        width: scale-font-px(12px);
+      }
+    }
+
+    .nut-rate-item-normal {
+      .nut-icon {
+        height: scale-font-px(16px);
+        width: scale-font-px(16px);
+      }
+    }
+
+    .nut-rate-item-large {
+      .nut-icon {
+        height: scale-font-px(20px);
+        width: scale-font-px(20px);
+      }
+    }
+
+    .nut-rate-label-small {
+      font-size: $font-size-s;
+      margin-right: scale-px(4px);
+    }
+
+    .nut-rate-label-normal {
+      font-size: $font-size-s;
+      margin-right: scale-px(12px);
+    }
+
+    .nut-rate-label-large {
+      font-size: $font-size-base;
+      margin-right: scale-px(12px);
+    }
+
+    .nut-rate-score-small {
+      padding-left: scale-px(4px);
+      font-size: $font-size-s;
       line-height: $line-height-s;
     }
 
-    &-large {
-      font-size: $rate-font-size-large;
-      line-height: $line-height-xl;
-      padding-left: calc($rate-item-margin * 2);
+    .nut-rate-score-normal {
+      padding-left: scale-px(12px);
+      font-size: $font-size-s;
+      line-height: $line-height-s;
     }
 
-    &-small {
-      font-size: $rate-font-size-small;
-      line-height: $line-height-xxs;
-      padding-left: calc($rate-item-margin / 2);
+    .nut-rate-score-large {
+      padding-left: scale-px(12px);
+      font-size: $font-size-base;
+      line-height: $line-height-base;
     }
+  }
 
-    &-disabled {
-      color: $rate-icon-inactive-color;
+  // vertical layout
+  &-vertical {
+    .nut-rate-list {
+      justify-content: center;
+      width: 100%;
+    }
+
+    .nut-rate-item {
+      margin-left: $rate-item-margin;
+      &:first-child {
+        margin-left: 0;
+      }
+    }
+
+    .nut-rate-item-small,
+    .nut-rate-item-normal {
+      .nut-icon {
+        height: scale-font-px(20px);
+        width: scale-font-px(20px);
+      }
+    }
+
+    .nut-rate-item-large {
+      flex: 1;
+      justify-content: center;
+
+      .nut-icon {
+        height: scale-font-px(28px);
+        width: scale-font-px(28px);
+      }
+    }
+
+    .nut-rate-label-small,
+    .nut-rate-label-normal {
+      font-size: $font-size-xs;
+      margin-top: scale-px(6px);
+    }
+
+    .nut-rate-label-large {
+      font-size: $font-size-s;
+      margin-top: scale-px(8px);
+    }
+
+    .nut-rate-labels {
+      width: 100%;
+    }
+
+    .nut-rate-labels-small,
+    .nut-rate-labels-normal {
+      margin-top: scale-px(6px);
+
+      .nut-rate-labels-item {
+        font-size: $font-size-xs;
+      }
+    }
+
+    .nut-rate-labels-large {
+      margin-top: scale-px(8px);
+
+      .nut-rate-labels-item {
+        font-size: $font-size-s;
+      }
+    }
+
+    .nut-rate-score-small,
+    .nut-rate-score-normal {
+      font-size: $font-size-xs;
+      line-height: $line-height-xs;
+      margin-top: scale-px(6px);
+    }
+
+    .nut-rate-score-large {
+      font-size: $font-size-s;
+      line-height: $line-height-s;
+      margin-top: scale-px(8px);
     }
   }
 }
 
+@keyframes nut-rate-bounce {
+  0% {
+    transform: scale(1);
+  }
+  50% {
+    transform: scale(1.25);
+  }
+  100% {
+    transform: scale(1);
+  }
+}
+
 [dir='rtl'] .nut-rate,
 .nut-rtl .nut-rate {
-  &-item {
-    margin-left: 0;
-    &:first-child {
+  &-horizontal {
+    .nut-rate-item {
+      margin-left: 0;
+      margin-right: $rate-item-margin;
+
+      &:first-child {
+        margin-right: 0;
+      }
+    }
+
+    .nut-rate-item-small {
+      margin-left: 0;
+      margin-right: scale-px(2px);
+
+      &:first-child {
+        margin-right: 0;
+      }
+    }
+
+    .nut-rate-label {
       margin-right: 0;
     }
 
-    &-normal {
-      margin-right: $rate-item-margin;
+    .nut-rate-label-small {
+      margin-left: scale-px(4px);
     }
 
-    &-large {
-      margin-right: calc($rate-item-margin * 2);
+    .nut-rate-label-normal {
+      margin-left: scale-px(12px);
     }
 
-    &-small {
-      margin-right: calc($rate-item-margin - scale-px(2px));
+    .nut-rate-label-large {
+      margin-left: scale-px(12px);
     }
 
-    &:last-child {
-      margin-left: 0;
+    .nut-rate-score {
+      padding-left: 0;
     }
 
-    &-half {
-      left: auto;
-      right: 0;
+    .nut-rate-score-small {
+      padding-right: scale-px(4px);
     }
 
-    &-icon {
-      &.nut-rate-item-icon.nut-rate-item-icon-half {
-        left: auto;
-        right: 0;
-      }
+    .nut-rate-score-normal {
+      padding-right: scale-px(12px);
+    }
 
-      &.nut-rate-item-icon::before {
-        left: auto;
-        right: auto;
-      }
+    .nut-rate-score-large {
+      padding-right: scale-px(12px);
     }
   }
 
-  &-score {
-    padding-left: 0;
+  &-vertical {
+    .nut-rate-item {
+      margin-left: 0;
+      margin-right: $rate-item-margin;
 
-    &-large {
-      padding-right: calc($rate-item-margin * 2);
+      &:first-child {
+        margin-right: 0;
+      }
     }
+  }
 
-    &-normal {
-      padding-right: $rate-item-margin;
+  &-item-half {
+    left: auto;
+    right: 0;
+  }
+
+  &-item-icon {
+    &.nut-rate-item-icon.nut-rate-item-icon-half {
+      left: auto;
+      right: 0;
     }
 
-    &-small {
-      padding-right: calc($rate-item-margin - scale-px(2px));
+    &.nut-rate-item-icon::before {
+      left: auto;
+      right: auto;
     }
   }
 }