EVOgeek
/
Vmeda.Online
1
0
Fork 1
Code Issues Pull Requests Packages Projects Releases Wiki Activity

MOBILE-4065 styles: Fix items with input focus styles

main
Pau Ferrer Ocaña 2023-02-02 13:24:28 +01:00
parent e75fb3404b
commit a2788e2e80
1 changed files with 16 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
src/theme/theme.base.scss
View File

@ -1518,20 +1518,24 @@ ion-item.item-input.item-multiple-inputs {
} }
// Focus highlight for accessibility. // Focus highlight for accessibility.
ion-item.item-input.ion-focused:not(:focus), .ion-focused:not(.item-multiple-inputs):not(:focus),
.ion-focused,
ion-item.ion-activatable.ion-focused:not(:focus),
ion-input.has-focus, ion-input.has-focus,
.ion-focused ion-toggle:focus-within,
.ion-focused ion-select:focus-within,
.ion-focused ion-checkbox:focus-within,
.ion-focused ion-radio:focus-within,
ion-card:focus { ion-card:focus {
@include core-focus(); @include core-focus();
} }
.ion-focused.item-multiple-inputs,
.ion-focused.ion-activatable {
ion-toggle:focus-within,
ion-select:focus-within,
ion-checkbox:focus-within,
ion-radio:focus-within {
@include core-focus();
}
}
// Treat cases where there's a focusable element inside an item, like a button. // Treat cases where there's a focusable element inside an item, like a button.
ion-item.ion-focused:not(:focus), ion-item.item-input:not(.item-multiple-inputs):not(:focus),
ion-item.item-has-focus:not(.item-multiple-inputs):not(:focus),
ion-item.item-input ion-input.has-focus { ion-item.item-input ion-input.has-focus {
position: relative; position: relative;
&::after { &::after {
@ -1588,6 +1592,10 @@ textarea, button, select, input, a, .clickable {
} }
} }
.ion-focused:not(.item-multiple-inputs):not(:focus) .clickable:focus {
box-shadow: none;
}
ion-loading:focus-visible, ion-loading:focus-visible,
ion-alert:focus-visible, ion-alert:focus-visible,
ion-popover:focus-visible, ion-popover:focus-visible,