feat(searchbar): fix css of delete icon

samply · Apr 15, 2024 · 3af7666 · 3af7666
1 parent a4eaa53
commit 3af7666
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 14 deletions.
diff --git a/packages/demo/src/ccp.css b/packages/demo/src/ccp.css
@@ -307,20 +307,18 @@ lens-search-bar-multiple::part(info-button-dialogue) {
   text-align: left;
 }
 
-lens-search-bar::part(delete-button-icon), 
-lens-search-bar-multiple::part(delete-button-icon) {
-  filter: brightness(0) saturate(100%) invert(12%) sepia(100%) saturate(5657%) hue-rotate(357deg) brightness(90%) contrast(128%);
+lens-search-bar::part(delete-button-icon-item), 
+lens-search-bar-multiple::part(delete-button-icon-item) {
+  filter: invert(41%) sepia(43%) saturate(4610%) hue-rotate(357deg) brightness(96%) contrast(90%);
   transform: translate(-1px, -1px);
-  width: 21px;
-}
-
-lens-search-bar-multiple::part(query-delete-button-item) {
-  border-color: var(--white);
+  width: 20px;
 }
 
-lens-search-bar-multiple::part(query-delete-button-group) {
-  background-color: var(--white);
-  border-color: var(--white);
+lens-search-bar::part(delete-button-icon-group), 
+lens-search-bar-multiple::part(delete-button-icon) {
+  filter: invert(41%) sepia(43%) saturate(4610%) hue-rotate(357deg) brightness(96%) contrast(90%);
+  transform: translate(0px, 2px);
+  width: 20px;
 }
 
 lens-search-button::part(lens-search-button) {
@@ -333,7 +331,6 @@ lens-search-button::part(lens-search-button):hover {
 
 lens-search-button::part(lens-search-button):active {
   background-color: #003d7e;
-  transform: translateX(1px);
 }
 
 /**

diff --git a/packages/lib/src/components/buttons/StoreDeleteButtonComponent.svelte b/packages/lib/src/components/buttons/StoreDeleteButtonComponent.svelte
@@ -40,7 +40,11 @@
     on:click={deleteItem}
 >
     {#if deleteUrl}
-        <img part="delete-button-icon" src={deleteUrl} alt="delete icon" />
+        <img
+            part="delete-button-icon delete-button-icon-{type}"
+            src={deleteUrl}
+            alt="delete icon"
+        />
     {:else}
         &#x2715;
     {/if}

diff --git a/packages/lib/src/styles/searchbars.css b/packages/lib/src/styles/searchbars.css
@@ -204,7 +204,7 @@ lens-search-bar-multiple::part(query-delete-button-item) {
   position: absolute;
   top: -6px;
   right: -10px;
-  border: solid 2px var(--white);
+  border: solid 1px var(--white);
 }
 
 lens-search-bar::part(query-delete-button-group),