mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-11-09 08:09:32 +08:00
fix(select): remove item focus style when there are no selected items only at ionic mode (#30750)
Issue number: resolves # --------- This PR introduces improvements to the visual focus styling of Ionic items when inside a select modal. ## What is the current behavior? - The CSS variables `--background-focused` and `--background-focused-opacity` were missing from `item.ionic.scss`, which resulted in the native default outline focus style being applied to focused items. - When no item is selected, the focus style is currently applied to the first list item by default, which we intend to change. ## What is the new behavior? - Added missing focus css variables - Hide the default focus style when there is no item selected ## NOTE - This change will require an additional interaction to observe the focus behavior when navigating through keyboard, since tap-based navigation does not rely on focus styling. ## Does this introduce a breaking change? - [ ] Yes - [X] No <!-- If this introduces a breaking change: 1. Describe the impact and migration path for existing applications below. 2. Update the BREAKING.md file with the breaking change. 3. Add "BREAKING CHANGE: [...]" to the commit description when merging. See https://github.com/ionic-team/ionic-framework/blob/main/docs/CONTRIBUTING.md#footer for more information. --> ## Other information <!-- Any other information that is important to this PR such as screenshots of how the component looks before and after the change. --> --------- Co-authored-by: ionitron <hi@ionicframework.com> Co-authored-by: Maria Hutt <thetaPC@users.noreply.github.com>
This commit is contained in:
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user