fix(toolbar): color and background color state

opentiny · Dec 27, 2024 · d81dc81 · d81dc81
1 parent 24be218
commit d81dc81
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 26 deletions.
diff --git 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
@@ -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 {