List-group-item margin-top is offset when importing sass in a nested class
Created by: hadouin
Prerequisites
-
I have searched for duplicate or closed issues -
I have validated any HTML to avoid common problems -
I have read the contributing guidelines
Describe the issue
Context
When using list-groups nested inside another class for exemple:
.darkmode
@import 'bootstrap/scss/list-group';
The list-group-items do not behave correctly especially for borders (see code pen)
Cause
This is due to .list-group-item
using a & + &
selector. exemple:
.darkmode
.list-group-item
& + &
border-top-width: 0px
compiles to:
.darkmode .list-group-item + .darkmode .list-group-item {
border-top-width: 0px;
}
What we want
I propose we change the &
in scss/_list-group-item.scss
to .list-group-item
// ...
& + & { // The Issue would be here to change the second "&" to ".list-group-item"
border-top-width: 0;
&.active {
margin-top: calc(var(--#{$prefix}list-group-border-width) * -1); // stylelint-disable-line function-disallowed-list
border-top-width: var(--#{$prefix}list-group-border-width);
}
}
compiled
.darkmode .list-group-item + .list-group-item {
border-top-width: 0px;
}
Reduced test cases
https://codepen.io/Hadouin/pen/KKopyrW
What operating system(s) are you seeing the problem on?
Windows
What browser(s) are you seeing the problem on?
Chrome
What version of Bootstrap are you using?
v5.2.0-beta1