Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix(list): remove uneeded border radius from items in inset list #28830

Merged
merged 1 commit into from
Jan 16, 2024
Merged
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
22 changes: 1 addition & 21 deletions core/src/components/list/list.md.scss
Original file line number Diff line number Diff line change
Expand Up @@ -23,25 +23,9 @@
@include border-radius($list-inset-md-border-radius);
}

/**
* These selectors ensure the first item in the list
* has the correct radius.
* We need to consider the following scenarios:
1. The first item in a list as long as it is not the only item.
2. The item in the first item-sliding in a list.
* Note that we do not select "ion-item-sliding ion-item:first-of-type"
* because that will cause the borders to disappear on
* items in an item-sliding when the item is the first
* element in the item-sliding container.
*/
.list-md.list-inset ion-item:not(:only-of-type):first-of-type,
.list-md.list-inset ion-item-sliding:first-of-type ion-item {
--border-radius: #{$list-inset-md-border-radius $list-inset-md-border-radius 0 0};
}

/**
* These selectors ensure the last item in the list
* has the correct radius and border.
* has the correct border.
* We need to consider the following scenarios:
1. The last item in a list as long as it is not the only item.
2. The item in the last item-sliding in a list.
Expand All @@ -52,21 +36,17 @@
*/
.list-md.list-inset ion-item:not(:only-of-type):last-of-type,
.list-md.list-inset ion-item-sliding:last-of-type ion-item {
--border-radius: #{0 0 $list-inset-md-border-radius $list-inset-md-border-radius};
--border-width: 0;
--inner-border-width: 0;
}

/**
* The only item in a list should have a border radius
* on all corners.
* We target :only-child instead of :only-of-type
* otherwise borders will disappear on items inside of
* ion-item-sliding because the item will be the only
* one of its type inside of the ion-item-sliding group.
*/
.list-md.list-inset ion-item:only-child {
--border-radius: #{$list-inset-md-border-radius};
--border-width: 0;
--inner-border-width: 0;
}
Expand Down
Loading