refactor(rate): rate popover

Tencent · Apr 4, 2023 · ff46a4e · ff46a4e
1 parent f50d47c
commit ff46a4e
Show file tree

Hide file tree

Showing 2 changed files with 48 additions and 0 deletions.
diff --git a/style/mobile/components/rate/v2/_index.less b/style/mobile/components/rate/v2/_index.less
@@ -85,4 +85,47 @@
       line-height: 20px;
     }
   }
+
+  &--popover {
+    position: absolute;
+    z-index: 2;
+    border-radius: 6px;
+    padding: 4px;
+    background: @rate-popover-item-bg-color;
+    box-shadow: @rate-popover-shadow;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    transform: translate(-50%, -100%);
+
+    &-item {
+      width: 32px;
+      height: 44px;
+      border-radius: 3px;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      flex-direction: column;
+
+      & + &--popover-item {
+        margin-left: 4px;
+      }
+
+      &-is-active {
+        background: @rate-popover-item-active-bg-color;
+      }
+
+      &-content {
+        position: relative;
+      }
+
+      &-text {
+        color: @rate-popover-item-text-color;
+        font-weight: @rate-popover-item-font-weight;
+        text-align: center;
+        font-size: 12px;
+        line-height: 20px;
+      }
+    }
+  }
 }
diff --git a/style/mobile/components/rate/v2/_var.less b/style/mobile/components/rate/v2/_var.less
@@ -5,3 +5,8 @@
 @rate-unselected-color: var(--td-rate-unselected-color, @bg-color-secondarycomponent);
 @rate-text-active-font-weight: var(--td-rate-text-active-font-weight, 600);
 @rate-icon-scale: var(--td-rate-icon-scale, 1.33);
+@rate-popover-shadow: var(--td-rate-popover-shadow, @shadow-1);
+@rate-popover-item-bg-color: var(--td-rate-popover-item-bg-color, @font-white-1);
+@rate-popover-item-active-bg-color: var(--td-rate-popover-item-active-bg-color, @gray-color-1);
+@rate-popover-item-font-weight: var(--td-rate-popover-item-font-weight, 400);
+@rate-popover-item-text-color: var(--td-rate-popover-item-text-color, @font-gray-1);