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

Margin and padding shim for bootstrap 5 migration #13625

Merged
merged 5 commits into from
Jan 5, 2023

Conversation

hellcp-work
Copy link
Contributor

This is a part of #13602, updating all existing margin and padding to use s and e instead of l and r

@github-actions github-actions bot added the Frontend Things related to the OBS RoR app label Jan 4, 2023
@hellcp-work
Copy link
Contributor Author

@hellcp-work hellcp-work changed the title Margin shim for bootstrap 5 migration Margin and padding shim for bootstrap 5 migration Jan 4, 2023
$infix: breakpoint-infix($breakpoint, $grid-breakpoints);

@each $prop, $abbrev in (margin: m, padding: p) {
@each $size, $length in $spacers {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

As a reference, $spacers is defined here.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

With bootstrap 5, those will have to be updated to 861f819, but that's not needed here

@@ -0,0 +1,16 @@
@each $breakpoint in map-keys($grid-breakpoints) {
@include media-breakpoint-up($breakpoint) {
$infix: breakpoint-infix($breakpoint, $grid-breakpoints);
Copy link
Contributor

@dmarcoux dmarcoux Jan 4, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

breakpoint-infix is defined upstream in Bootstrap.

@dmarcoux
Copy link
Contributor

dmarcoux commented Jan 4, 2023

In the commits, it would be nice to link to the Bootstrap documentation where those changes are mentioned: https://getbootstrap.com/docs/5.0/migration/#utilities

@@ -0,0 +1,16 @@
@each $breakpoint in map-keys($grid-breakpoints) {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

How did you come up with this Sass code? It looks like something from upstream which was slightly adapted. I'm asking to understand and also to compare with how Bootstrap does this.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Indeed I just copied over code from https://github.com/twbs/bootstrap/blob/v4-dev/scss/utilities/_spacing.scss and modified it to replace r and l to e and s

@dmarcoux
Copy link
Contributor

dmarcoux commented Jan 4, 2023

This PR will need to be rebased to fix conflicts.

@hellcp-work hellcp-work force-pushed the bs5-margin branch 5 times, most recently from cb44445 to f387ce7 Compare January 5, 2023 14:53
@hellcp-work hellcp-work merged commit 19545db into openSUSE:master Jan 5, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Frontend Things related to the OBS RoR app
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants