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

MOBILE-3947 styles: Fix focus inside another

main
Pau Ferrer Ocaña 2023-11-21 15:59:08 +01:00
parent daecc555e2
commit ce5cfeb3af
1 changed files with 41 additions and 40 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1585,37 +1585,6 @@ ion-item.item-input.item-multiple-inputs {
} }
} }
// Focus highlight for accessibility.
.ion-focused:not(.item-multiple-inputs):not(:focus),
ion-input.has-focus,
ion-card: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.
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 {
position: relative;
&::after {
box-shadow: revert;
opacity: revert;
z-index: revert;
}
.item-highlight, .item-inner-highlight {
position: unset;
}
}
ion-item-divider.item, ion-item-divider.item,
ion-item.item.divider { ion-item.item.divider {
min-height: var(--min-height); min-height: var(--min-height);
@ -1653,6 +1622,42 @@ ion-item.item {
outline: none; outline: none;
} }
// Focus highlight for accessibility.
.ion-focused:not(.item-multiple-inputs):not(:focus),
ion-input.has-focus,
ion-card:focus {
@include core-focus();
:focus-visible,
.clickable:focus {
box-shadow: none;
}
}
.ion-focused.item-multiple-inputs {
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.
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 {
position: relative;
&::after {
box-shadow: revert;
opacity: revert;
z-index: revert;
}
.item-highlight, .item-inner-highlight {
position: unset;
}
}
textarea, button, select, input, a, .clickable { textarea, button, select, input, a, .clickable {
&:focus { &:focus {
@include core-focus-style(); @include core-focus-style();
@ -1660,10 +1665,6 @@ 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,
@ -1672,11 +1673,6 @@ ion-modal:focus-visible {
border-radius: 0; border-radius: 0;
} }
input {
--placeholder-color: var(--ion-placeholder-color);
--placeholder-opacity: .85;
}
ion-input .native-input { ion-input .native-input {
&:focus, &:focus-visible { &:focus, &:focus-visible {
box-shadow: none; box-shadow: none;
@ -1684,6 +1680,11 @@ ion-input .native-input {
} }
} }
input {
--placeholder-color: var(--ion-placeholder-color);
--placeholder-opacity: .85;
}
// Disable scroll on parent ion contents to enabled PTR on the ones inside the splitview. See split-view component for more info. // Disable scroll on parent ion contents to enabled PTR on the ones inside the splitview. See split-view component for more info.
ion-content.disable-scroll-y::part(scroll) { ion-content.disable-scroll-y::part(scroll) {
touch-action: auto; touch-action: auto;