diff --git a/src/styles/components/ion-list.scss b/src/styles/components/ion-list.scss index da546b4..2733e31 100644 --- a/src/styles/components/ion-list.scss +++ b/src/styles/components/ion-list.scss @@ -16,9 +16,12 @@ ion-list.list-inset.ios:not(.ios26-disabled) { display: block; } - $groups: ion-item-group, ion-reorder-group, ion-accordion-group, ion-radio-group; + ion-radio-group > .radio-group-top { + padding-inline-start: calc(var(--ion-safe-area-left, 0) + 20px); + padding-inline-end: calc(var(--ion-safe-area-right, 0) + 20px); + } - :is(#{$groups}):not(:is(#{$groups}) :is(#{$groups})) { + :is(#{structured-list.$groups}):not(:is(#{structured-list.$groups}) :is(#{structured-list.$groups})) { ion-item { // To draw lines inside --inner-padding-end: 0; diff --git a/src/styles/md-ion-list-inset.scss b/src/styles/md-ion-list-inset.scss index 08acc4f..371a447 100644 --- a/src/styles/md-ion-list-inset.scss +++ b/src/styles/md-ion-list-inset.scss @@ -5,7 +5,7 @@ ion-list.md { &.list-inset { @include structured-list.layout(8px, 16px); - ion-item-group > ion-item { + :is(#{structured-list.$groups}) ion-item { & > ion-input[labelplacement='floating'] { transition: transform 200ms ease; diff --git a/src/styles/utils/structured-list.scss b/src/styles/utils/structured-list.scss index bdabc9a..b3867e2 100644 --- a/src/styles/utils/structured-list.scss +++ b/src/styles/utils/structured-list.scss @@ -1,3 +1,5 @@ +$groups: ion-item-group, ion-reorder-group, ion-accordion-group, ion-radio-group; + @mixin support-text() { ion-item { &:has(ion-input.input-fill-outline), @@ -9,7 +11,6 @@ --inner-padding-bottom: 4px; } - ion-select .select-bottom:not(:has(> :is(.helper-text:not(:empty), .error-text:not(:empty)))), ion-input .input-bottom:not(:has(> :is(.helper-text:not(:empty), .error-text:not(:empty)))), ion-textarea .textarea-bottom:not(:has(> :is(.helper-text:not(:empty), .error-text:not(:empty)))) { display: none; @@ -74,9 +75,8 @@ } } - $groups: ion-item-group, ion-reorder-group, ion-accordion-group, ion-radio-group; - :is(#{$groups}):not(:is(#{$groups}) :is(#{$groups})) { + display: block; border-radius: $group-border-radius; overflow: hidden; @@ -90,8 +90,6 @@ order: 1; font-size: 0.9rem; padding-block-start: 8px; - padding-inline-start: calc(var(--ion-safe-area-left, 0) + 20px); - padding-inline-end: calc(var(--ion-safe-area-right, 0) + 20px); } > ion-item:first-of-type {