Erroneous `border-radius` inside Pagination
Created by: tysongach
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
I just upgraded to v5.2 and am seeing an issue with border-radius
being applied to Pagination page-item
s:
As a gut check, I looked at the compiled CSS on the Bootstrap v5.2 doc website, which has…
.page-item:not(:first-child) .page-link {
margin-left: -1px;
}
.page-item:first-child .page-link {
border-top-left-radius: var(--bs-pagination-border-radius);
border-bottom-left-radius: var(--bs-pagination-border-radius);
}
.page-item:last-child .page-link {
border-top-right-radius: var(--bs-pagination-border-radius);
border-bottom-right-radius: var(--bs-pagination-border-radius);
}
…whereas my compiled CSS has:
.page-item:not(:first-child) .page-link {
margin-left: -1px;
}
.page-item .page-link {
border-radius: var(--bs-pagination-border-radius);
}
That makes me suspicious of this line, which was recently changed:
This appears to be evaluating to false
for me.
Reduced test cases
I’ve tried to create a reduced test case here: https://www.sassmeister.com/gist/eeae55c689cbaba226ec9ef0d148f315 (note that this is using Dart Sass v1.32.12)
If that test case is valid, it seems as though the compiled version of Bootstrap 5.2 differs from (at least some…) consumer-compiled versions.
It makes me wonder if this is a variation between Sass compilers or versions. I’m in a Rails app, using the sass-rails
and bootstrap
gems. I believe sass-rails
is a wrapper around LibSass. I’m not sure which Sass was used to build the distributed CSS files for Bootstrap 5.2.
Any help greatly appreciated! Let me know if I can provide anything else. Thanks!
What operating system(s) are you seeing the problem on?
macOS
What browser(s) are you seeing the problem on?
Chrome, Safari, Firefox
What version of Bootstrap are you using?
v5.2.0