fix(pro:tag-select): modify tag edit panel style (#1904)

1. add divider under delete button 2. selected color item hover color doesn't change 3. add hover and active bg color to delete button
IDuxFE · Apr 24, 2024 · 3a87226 · 3a87226
1 parent 2aebaec
commit 3a87226
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 2 deletions.
diff --git a/packages/pro/tag-select/src/content/TagDataEditPanel.tsx b/packages/pro/tag-select/src/content/TagDataEditPanel.tsx
@@ -111,6 +111,9 @@ export default defineComponent({
             <IxIcon class={`${prefixCls}-delete-icon`} name="delete" />
             <span class={`${prefixCls}-delete-label`}>{locale.remove}</span>
           </div>
+          <div class={`${prefixCls}-divider`}>
+            <div class={`${prefixCls}-divider-line`}></div>
+          </div>
           <div class={`${prefixCls}-colors`}>
             {mergedTagSelectColors.value.map(color => renderColorItem(`${prefixCls}-colors`, color))}
           </div>

diff --git a/packages/pro/tag-select/style/index.less b/packages/pro/tag-select/style/index.less
@@ -99,6 +99,24 @@
         color: var(--ix-color-icon);
         margin-right: var(--ix-margin-size-sm);
       }
+
+      &:hover {
+        background-color: var(--ix-color-container-bg-hover);
+      }
+      &:active,
+      &:hover:active {
+        background-color: var(--ix-color-container-bg-active);
+      }
+    }
+    &-divider {
+      width: 100%;
+      margin: var(--ix-margin-size-xs) 0;
+      padding: 0 var(--ix-padding-size-sm);
+      &-line {
+        width: calc(100%);
+        height: var(--ix-line-width);
+        background-color: var(--ix-color-separator);
+      }
     }
     &-colors {
       display: flex;
@@ -115,8 +133,8 @@
         padding: 0 var(--ix-padding-size-md);
         display: flex;
         align-items: center;
-        &:hover,
-        &-selected:hover {
+        cursor: pointer;
+        &:not(&-selected):hover {
           background-color: var(--ix-color-container-bg-hover);
         }
         &-selected {