From d81dc817aceb3fd704deb493145bf67750f32c78 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=87=A7=E8=B1=AA?= <zanghao0130@163.com>
Date: Fri, 27 Dec 2024 15:15:02 +0800
Subject: [PATCH] fix(toolbar): color and background color state

---
 packages/fluent-editor/src/assets/common.scss | 25 -------------------
 .../fluent-editor/src/assets/toolbar.scss     | 17 ++++++++++++-
 2 files changed, 16 insertions(+), 26 deletions(-)

diff --git a/packages/fluent-editor/src/assets/common.scss b/packages/fluent-editor/src/assets/common.scss
index bbffa33..77f8415 100644
--- a/packages/fluent-editor/src/assets/common.scss
+++ b/packages/fluent-editor/src/assets/common.scss
@@ -210,31 +210,6 @@
   }
 }
 
-// 解决颜色面板高亮问题
-@mixin pickerValue($group, $i) {
-  @if $i>0 {
-    $data-label-value: nth($group, $i);
-
-    .ql-picker-label[data-value='#{""+$data-label-value}'] {
-      & + .ql-picker-options {
-        .ql-picker-item[data-value='#{""+$data-label-value}'] {
-          &::after {
-            margin-left: 5px;
-            margin-top: -3px;
-            content: 'L';
-            font-size: initial;
-            font-family: arial;
-            -ms-transform: scaleX(-1) rotate(-45deg); /* IE 9 */
-            -webkit-transform: scaleX(-1) rotate(-45deg); /* Chrome, Safari, Opera */
-            transform: scaleX(-1) rotate(-45deg);
-          }
-        }
-      }
-    }
-    @include pickerValue($group, $i - 1);
-  }
-}
-
 // 当前颜色下划线指示器
 @mixin currentColorIndicator($group, $i) {
   @if $i>0 {
diff --git a/packages/fluent-editor/src/assets/toolbar.scss b/packages/fluent-editor/src/assets/toolbar.scss
index a1d5151..a0192cb 100644
--- a/packages/fluent-editor/src/assets/toolbar.scss
+++ b/packages/fluent-editor/src/assets/toolbar.scss
@@ -255,7 +255,22 @@ $arrowWidth: 5px; // 下拉框箭头宽度
 
       &.ql-color,
       &.ql-background {
-        @include pickerValue($colorGroup, length($colorGroup));
+        .ql-picker-options {
+          .ql-picker-item {
+            &.ql-selected {
+              &::after {
+                margin-left: 5px;
+                margin-top: -3px;
+                content: 'L';
+                font-size: initial;
+                font-family: arial;
+                -ms-transform: scaleX(-1) rotate(-45deg);
+                -webkit-transform: scaleX(-1) rotate(-45deg);
+                transform: scaleX(-1) rotate(-45deg);
+              }
+            }
+          }
+        }
       }
 
       .ql-picker-item:hover {