mirror of
https://github.com/bitwarden/browser
synced 2025-12-15 15:53:27 +00:00
a74e95fbfe
* bb/pm-19497/replace default reset button to enable it in more browsers * address feedback: add ngClass; improve accessibility * add signals for form hover and input focus; compute showResetButton * fix(style): [CL-601] Improve CSS per reviewer comments Signed-off-by: Ben Brooks <bbrooks@bitwarden.com> * fix: [CL-601] add ngForm; remove standalone attributes Signed-off-by: Ben Brooks <bbrooks@bitwarden.com> * fix: [CL-601] add translation strings Signed-off-by: Ben Brooks <bbrooks@bitwarden.com> * fix: [CL-601] Use message key in aria label Signed-off-by: Ben Brooks <bbrooks@bitwarden.com> * fix: [CL-601] Remove unnecessary aria-hidden attribute Signed-off-by: Ben Brooks <bbrooks@bitwarden.com> * fix: [CL-601] Remove unecessary ngForm attributes Signed-off-by: Ben Brooks <bbrooks@bitwarden.com> * fix: [CL-601] Add storybook description Signed-off-by: Ben Brooks <bbrooks@bitwarden.com> * fix: [CL-601] Match main for recent signal input changs Signed-off-by: Ben Brooks <bbrooks@bitwarden.com> --------- Signed-off-by: Ben Brooks <bbrooks@bitwarden.com>
18 lines
561 B
CSS
18 lines
561 B
CSS
/**
|
|
* Tailwind doesn't have a good way to style search-cancel-button.
|
|
* Hide the default reset button that only appears in some browsers.
|
|
*/
|
|
bit-search input[type="search"]::-webkit-search-cancel-button {
|
|
-webkit-appearance: none;
|
|
appearance: none;
|
|
}
|
|
|
|
/**
|
|
* Style our custom reset button that works in all common browsers.
|
|
* Tailwind CSS does not natively support mask-image or -webkit-mask-image utilities (but can be extended if needed).
|
|
*/
|
|
.bw-reset-btn {
|
|
mask-image: url("./close-button.svg");
|
|
-webkit-mask-image: url("./close-button.svg");
|
|
}
|