diff --git a/core/src/components/item/item.ionic.scss b/core/src/components/item/item.ionic.scss index 8fdd61663dc..665f5346c69 100644 --- a/core/src/components/item/item.ionic.scss +++ b/core/src/components/item/item.ionic.scss @@ -71,7 +71,6 @@ slot[name="end"]::slotted(*) { // Item: Focused // -------------------------------------------------- - :host(.ion-focused) .item-native::after { @include globals.border-radius(inherit); @include globals.position(0, 0, 0, 0); @@ -112,3 +111,14 @@ slot[name="end"]::slotted(*) { :host(.item-lines-none) { --inner-border-width: #{globals.$ion-border-size-0}; } + +// Item in Select Modal +// -------------------------------------------------- +:host(.in-select-modal) { + --background-focused: #{globals.$ion-bg-neutral-subtlest-press}; + --background-focused-opacity: 0; +} + +:host(.in-select-modal.ion-focused) .item-native { + --border-radius: #{globals.$ion-border-radius-400}; +} diff --git a/core/src/components/item/item.tsx b/core/src/components/item/item.tsx index e7c95b4ade9..97459b92add 100644 --- a/core/src/components/item/item.tsx +++ b/core/src/components/item/item.tsx @@ -407,6 +407,7 @@ export class Item implements ComponentInterface, AnchorInterface, ButtonInterfac 'item-control-needs-pointer-cursor': firstInteractiveNeedsPointerCursor, 'item-disabled': disabled, 'in-list': inList, + 'in-select-modal': hostContext('ion-select-modal', this.el), 'item-multiple-inputs': this.multipleInputs, 'ion-activatable': canActivate, 'ion-focusable': this.focusable, diff --git a/core/src/components/item/test/states/item.e2e.ts-snapshots/item-states-diff-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/item/test/states/item.e2e.ts-snapshots/item-states-diff-ionic-md-ltr-light-Mobile-Chrome-linux.png index 12eb06e6ed3..698d86126b5 100644 Binary files a/core/src/components/item/test/states/item.e2e.ts-snapshots/item-states-diff-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/item/test/states/item.e2e.ts-snapshots/item-states-diff-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/item/test/states/item.e2e.ts-snapshots/item-states-diff-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/item/test/states/item.e2e.ts-snapshots/item-states-diff-ionic-md-ltr-light-Mobile-Firefox-linux.png index 76007713d03..8bdf277b7dd 100644 Binary files a/core/src/components/item/test/states/item.e2e.ts-snapshots/item-states-diff-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/item/test/states/item.e2e.ts-snapshots/item-states-diff-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/item/test/states/item.e2e.ts-snapshots/item-states-diff-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/item/test/states/item.e2e.ts-snapshots/item-states-diff-ionic-md-ltr-light-Mobile-Safari-linux.png index ae8b0a3014f..d9b875195cd 100644 Binary files a/core/src/components/item/test/states/item.e2e.ts-snapshots/item-states-diff-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/item/test/states/item.e2e.ts-snapshots/item-states-diff-ionic-md-ltr-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/select-modal/select-modal.ionic.scss b/core/src/components/select-modal/select-modal.ionic.scss index 6a53e9dbb8d..cd0df6ce3a9 100644 --- a/core/src/components/select-modal/select-modal.ionic.scss +++ b/core/src/components/select-modal/select-modal.ionic.scss @@ -67,4 +67,9 @@ ion-content { --padding-end: #{globals.$ion-space-400} !important; /* stylelint-disable-next-line declaration-no-important */ --padding-bottom: #{globals.$ion-space-1200} !important; + + // Set the background to the focused element within a radio group only when there is a checked radio + &:has(.radio-checked) .ion-focused:not(.item-radio-checked) { + --background-focused-opacity: 1; + } }