Upstream/bitwarden-browser
1
0
Fork 0
mirror of https://github.com/bitwarden/browser.git synced 2024-11-21 11:35:34 +01:00
Code Issues Projects Releases Wiki Activity

[PM-2194] Tweak the CL search inputs reset button (#5409)

Browse Source
This commit is contained in:
Oscar Hinton 2023-05-16 20:23:16 +02:00 committed by GitHub
parent cd6868feee
commit 0d9345db8f
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 24 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
libs/components/src/search/close-button-white.svg Normal file
View File

@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" viewBox="0 0 512 512">
<path fill="#fff" d="m381.1 343.16-87.47-87.76 87.67-86.62a9.24 9.24 0 0 0 0-13.06l-24.93-25.06a9.18 9.18 0 0 0-6.54-2.66c-2.46 0-4.8 1-6.53 2.66l-87.27 86.36-87.4-86.29a9.18 9.18 0 0 0-6.53-2.66c-2.47 0-4.8 1-6.53 2.66L130.7 155.8a9.24 9.24 0 0 0 0 13.06l87.67 86.62-87.4 87.69a9.22 9.22 0 0 0-2.74 6.53c0 2.46.94 4.8 2.74 6.53l24.93 25.05a9.19 9.19 0 0 0 13.07 0l87.06-87.42 87.14 87.36a9.19 9.19 0 0 0 13.06 0l24.94-25.06a9.23 9.23 0 0 0 2.73-6.53 9.55 9.55 0 0 0-2.8-6.46Z"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 573 B

19
libs/components/src/search/search.component.css Normal file
View File

@ -0,0 +1,19 @@
/**
* Tailwind doesn't have a good way to style search-cancel-button.
*/
bit-search input[type="search"]::-webkit-search-cancel-button {
-webkit-appearance: none;
appearance: none;
height: 21px;
width: 21px;
margin: 0;
cursor: pointer;
background-repeat: no-repeat;
mask-image: url("./close-button-white.svg");
-webkit-mask-image: url("./close-button-white.svg");
background-color: rgba(var(--color-text-muted));
}
bit-search input[type="search"]::-webkit-search-cancel-button:hover {
background-color: rgba(var(--color-text-main));
}

2
libs/components/src/tw-theme.css
View File

@ -79,3 +79,5 @@
--tw-ring-offset-color: #1f242e;
}
@import "./search/search.component.css";