javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-11-08 15:51:16 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(searchbar): clear button has focus indicator (#25828)

Browse Source
This commit is contained in:
Liam DeBeasi
2022-08-26 14:35:58 -05:00
committed by GitHub
parent c270756356
commit 373b4ffe21
2 changed files with 18 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
core/src/components/input/input.scss
View File

@ -147,6 +147,13 @@
appearance: none; appearance: none;
} }
/**
* Normally, we would not want to use :focus
* here because that would mean tapping the button
* on mobile would focus it (and keep it focused).
* However, the clear button always disappears after
* being activated, so we never get to that state.
*/
.input-clear-icon:focus { .input-clear-icon:focus {
opacity: 0.5; opacity: 0.5;
} }

11
core/src/components/searchbar/searchbar.scss
View File

@ -145,6 +145,17 @@
appearance: none; appearance: none;
} }
/**
* Normally, we would not want to use :focus
* here because that would mean tapping the button
* on mobile would focus it (and keep it focused).
* However, the clear button always disappears after
* being activated, so we never get to that state.
*/
.searchbar-clear-button:focus {
opacity: 0.5;
}
:host(.searchbar-has-value.searchbar-should-show-clear) .searchbar-clear-button { :host(.searchbar-has-value.searchbar-should-show-clear) .searchbar-clear-button {
display: block; display: block;
} }