mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-11-07 23:16:52 +08:00
28caeff459
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>
76 lines
2.1 KiB
SCSS
76 lines
2.1 KiB
SCSS
@use "../../themes/ionic/ionic.globals.scss" as globals;
|
|
@use "./select-modal.common";
|
|
|
|
// Ionic Select Modal
|
|
// --------------------------------------------------
|
|
|
|
// Item
|
|
// ----------------------------------------------------------------
|
|
|
|
ion-item {
|
|
--border-width: 0;
|
|
}
|
|
|
|
ion-item.ion-focused::part(native)::after {
|
|
// Your styles for the ::after pseudo element when ion-item is focused
|
|
border: none;
|
|
}
|
|
|
|
// Toolbar
|
|
// ----------------------------------------------------------------
|
|
|
|
ion-toolbar {
|
|
@include globals.typography(globals.$ion-heading-h6-medium);
|
|
}
|
|
|
|
// Radio
|
|
// ----------------------------------------------------------------
|
|
|
|
ion-list ion-radio::part(container) {
|
|
display: none;
|
|
}
|
|
|
|
ion-list ion-radio::part(label) {
|
|
@include globals.margin(0);
|
|
}
|
|
|
|
// Radio and Checkbox: Label
|
|
// ----------------------------------------------------------------
|
|
|
|
ion-list ion-radio::part(label),
|
|
ion-list ion-checkbox::part(label) {
|
|
@include globals.typography(globals.$ion-body-lg-medium);
|
|
}
|
|
|
|
// Radio and Checkbox: Checked
|
|
// ----------------------------------------------------------------
|
|
|
|
.item-radio-checked,
|
|
.item-checkbox-checked {
|
|
--background: #{globals.$ion-semantics-primary-100};
|
|
--border-radius: #{globals.$ion-border-radius-400};
|
|
}
|
|
|
|
// Content
|
|
// ----------------------------------------------------------------
|
|
|
|
ion-content {
|
|
/**
|
|
* The important is needed to override the padding set
|
|
* for modal sheet by the `core.ionic.scss` file.
|
|
* The modal sheet within the select does not match the
|
|
* padding of the modal sheet in the core.
|
|
*/
|
|
/* stylelint-disable-next-line declaration-no-important */
|
|
--padding-start: #{globals.$ion-space-400} !important;
|
|
/* stylelint-disable-next-line declaration-no-important */
|
|
--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;
|
|
}
|
|
}
|