mirror of
https://github.com/bitwarden/browser.git
synced 2024-11-25 12:15:18 +01:00
[PM-2194] Tweak the CL search inputs reset button (#5409)
This commit is contained in:
parent
cd6868feee
commit
0d9345db8f
3
libs/components/src/search/close-button-white.svg
Normal file
3
libs/components/src/search/close-button-white.svg
Normal 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>
|
After Width: | Height: | Size: 573 B |
19
libs/components/src/search/search.component.css
Normal file
19
libs/components/src/search/search.component.css
Normal 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));
|
||||
}
|
@ -79,3 +79,5 @@
|
||||
|
||||
--tw-ring-offset-color: #1f242e;
|
||||
}
|
||||
|
||||
@import "./search/search.component.css";
|
||||
|
Loading…
Reference in New Issue
Block a user