Update additional remove button styles.

- Add hover state to remove button on chip layout. - Update disabled styles to remove button in both layouts (mainly relevant to the editor view).
woocommerce · Aug 16, 2022 · ac6cf01 · ac6cf01
1 parent d487622
commit ac6cf01
Show file tree

Hide file tree

Showing 3 changed files with 8 additions and 5 deletions.
diff --git a/assets/js/base/components/chip/style.scss b/assets/js/base/components/chip/style.scss
@@ -71,11 +71,12 @@ button.wc-block-components-chip:hover > .wc-block-components-chip__remove,
 button.wc-block-components-chip:focus > .wc-block-components-chip__remove,
 .wc-block-components-chip__remove:hover,
 .wc-block-components-chip__remove:focus {
-	fill: $alert-red;
+	fill: #fff;
+	background: #7956ad;
 }
 
 button.wc-block-components-chip:disabled > .wc-block-components-chip__remove,
 .wc-block-components-chip__remove:disabled {
-	fill: $gray-600;
+	fill: #fff;
 	cursor: not-allowed;
 }
diff --git a/assets/js/blocks/active-filters/editor.scss b/assets/js/blocks/active-filters/editor.scss
@@ -2,7 +2,4 @@
 	.wc-block-active-filters__list-item-name {
 		margin-top: 9px;
 	}
-	.wc-block-active-filters__list-item-remove:hover {
-		color: #7956ad;
-	}
 }
diff --git a/assets/js/blocks/active-filters/style.scss b/assets/js/blocks/active-filters/style.scss
@@ -82,6 +82,11 @@
 		&:hover {
 			color: #7956ad;
 		}
+
+		&:disabled {
+			color: $gray-200;
+			cursor: not-allowed;
+		}
 	}
 
 	.wc-block-active-filters__list--chips {