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.

Sign up for GitHub

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

Jump to bottom

calc() it up — use Sass calculations more #39606

Open
wants to merge 2 commits into
base: main
Choose a base branch
from
Open

calc() it up — use Sass calculations more #39606

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
34043af
Consistently use `calc()`/`add()`/`subtract()`
wlib Jan 19, 2024
1aff5e4
Use `with-unit()` instead of `add()`/`subtract()`
wlib Jan 25, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
1 change: 0 additions & 1 deletion .stylelintrc.json
View file
Open in desktop
Expand Up @@ -13,7 +13,6 @@
"outline": "none"
},
"function-disallowed-list": [
"calc",
"lighten",
"darken"
],
Expand Down
2 changes: 1 addition & 1 deletion scss/_accordion.scss
View file
Open in desktop
Expand Up @@ -47,7 +47,7 @@
&:not(.collapsed) {
color: var(--#{$prefix}accordion-active-color);
background-color: var(--#{$prefix}accordion-active-bg);
box-shadow: inset 0 calc(-1 * var(--#{$prefix}accordion-border-width)) 0 var(--#{$prefix}accordion-border-color); // stylelint-disable-line function-disallowed-list
box-shadow: inset 0 calc(-1 * var(--#{$prefix}accordion-border-width)) 0 var(--#{$prefix}accordion-border-color);

&::after {
background-image: var(--#{$prefix}accordion-btn-active-icon);
Expand Down
4 changes: 2 additions & 2 deletions scss/_alert.scss
View file
Open in desktop
Expand Up @@ -49,8 +49,8 @@
position: absolute;
top: 0;
right: 0;
z-index: $stretched-link-z-index + 1;
padding: $alert-padding-y * 1.25 $alert-padding-x;
z-index: calc($stretched-link-z-index + 1);
padding: calc($alert-padding-y * 1.25) $alert-padding-x;
}
}

Expand Down
16 changes: 8 additions & 8 deletions scss/_button-group.scss
View file
Open in desktop
Expand Up @@ -39,7 +39,7 @@
// Prevent double borders when buttons are next to each other
> :not(.btn-check:first-child) + .btn,
> .btn-group:not(:first-child) {
margin-left: calc(#{$btn-border-width} * -1); // stylelint-disable-line function-disallowed-list
margin-left: calc($btn-border-width * -1);
}

// Reset rounded corners
Expand Down Expand Up @@ -73,8 +73,8 @@
//

.dropdown-toggle-split {
padding-right: $btn-padding-x * .75;
padding-left: $btn-padding-x * .75;
padding-right: calc($btn-padding-x * .75);
padding-left: calc($btn-padding-x * .75);

&::after,
.dropup &::after,
Expand All @@ -88,13 +88,13 @@
}

.btn-sm + .dropdown-toggle-split {
padding-right: $btn-padding-x-sm * .75;
padding-left: $btn-padding-x-sm * .75;
padding-right: calc($btn-padding-x-sm * .75);
padding-left: calc($btn-padding-x-sm * .75);
}

.btn-lg + .dropdown-toggle-split {
padding-right: $btn-padding-x-lg * .75;
padding-left: $btn-padding-x-lg * .75;
padding-right: calc($btn-padding-x-lg * .75);
padding-left: calc($btn-padding-x-lg * .75);
}


Expand Down Expand Up @@ -126,7 +126,7 @@

> .btn:not(:first-child),
> .btn-group:not(:first-child) {
margin-top: calc(#{$btn-border-width} * -1); // stylelint-disable-line function-disallowed-list
Copy link
Member

Choose a reason for hiding this comment

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

You'll have to interpolate the Sass variables across all of these calc() functions.

Copy link
Author

Choose a reason for hiding this comment

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

oof... it looks like that is a requirement for node-sass in the failed CI, which uses LibSass (both deprecated in favor of Dart Sass).

See https://sass-lang.com/documentation/syntax/special-functions/#element-progid-and-expression

LibSass, Ruby Sass, and versions of Dart Sass prior to 1.40.0 parse calc() as special syntactic function like element().
Dart Sass versions 1.40.0 and later parse calc() as a calculation.

Does Bootstrap support LibSass builds in v5? I know that it was internally dropped but I mean for when people import and build the Sass themselves.

Copy link
Member

Choose a reason for hiding this comment

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

Yeah, v5 still supports it. We'll drop it in v6 I imagine.

Copy link
Author

Choose a reason for hiding this comment

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

This would probably have to hold off until then, because the calc simplification only happens when the variables are not interpolated. Switching everything to calc would probably make the output too large in most cases.

Copy link
Member

Choose a reason for hiding this comment

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

We could actually consider dropping LibSass in v5.4 or like a special v5.5. We'll be moving onto v6 dev at some point but TBD on actual timeline.

Copy link
Member

Choose a reason for hiding this comment

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

I agree in terms of realistic timeline that we could consider dropping LibSass in v5.4/v5.5. I hope, however, that it wouldn't trigger a semver comments war.

margin-top: calc($btn-border-width * -1);
}

// Reset rounded corners
Expand Down
12 changes: 6 additions & 6 deletions scss/_card.scss
View file
Open in desktop
Expand Up @@ -80,7 +80,7 @@
}

.card-subtitle {
margin-top: calc(-.5 * var(--#{$prefix}card-title-spacer-y)); // stylelint-disable-line function-disallowed-list
margin-top: calc(-.5 * var(--#{$prefix}card-title-spacer-y));
margin-bottom: 0;
color: var(--#{$prefix}card-subtitle-color);
}
Expand Down Expand Up @@ -132,9 +132,9 @@
//

.card-header-tabs {
margin-right: calc(-.5 * var(--#{$prefix}card-cap-padding-x)); // stylelint-disable-line function-disallowed-list
margin-bottom: calc(-1 * var(--#{$prefix}card-cap-padding-y)); // stylelint-disable-line function-disallowed-list
margin-left: calc(-.5 * var(--#{$prefix}card-cap-padding-x)); // stylelint-disable-line function-disallowed-list
margin-right: calc(-.5 * var(--#{$prefix}card-cap-padding-x));
margin-bottom: calc(-1 * var(--#{$prefix}card-cap-padding-y));
margin-left: calc(-.5 * var(--#{$prefix}card-cap-padding-x));
border-bottom: 0;

.nav-link.active {
Expand All @@ -144,8 +144,8 @@
}

.card-header-pills {
margin-right: calc(-.5 * var(--#{$prefix}card-cap-padding-x)); // stylelint-disable-line function-disallowed-list
margin-left: calc(-.5 * var(--#{$prefix}card-cap-padding-x)); // stylelint-disable-line function-disallowed-list
margin-right: calc(-.5 * var(--#{$prefix}card-cap-padding-x));
margin-left: calc(-.5 * var(--#{$prefix}card-cap-padding-x));
}

// Card image
Expand Down
4 changes: 2 additions & 2 deletions scss/_carousel.scss
View file
Open in desktop
Expand Up @@ -198,9 +198,9 @@

.carousel-caption {
position: absolute;
right: (100% - $carousel-caption-width) * .5;
right: calc((100% - with-unit($carousel-caption-width)) * .5);
bottom: $carousel-caption-spacer;
left: (100% - $carousel-caption-width) * .5;
left: calc((100% - with-unit($carousel-caption-width)) * .5);
padding-top: $carousel-caption-padding-y;
padding-bottom: $carousel-caption-padding-y;
color: $carousel-caption-color;
Expand Down
12 changes: 12 additions & 0 deletions scss/_functions.scss
View file
Open in desktop
Expand Up @@ -218,6 +218,18 @@ $_luminance-list: .0008 .001 .0011 .0013 .0015 .0017 .002 .0022 .0025 .0027 .003
}
// scss-docs-end color-functions

// Ensure that the value has a unit
// Useful for `calc()` with addition or subtraction with potentially `null` or unitless values
@function with-unit($value, $fallback: 1px) {
@if $value == null {
$value: 0;
}
@if type-of($value) == number and unitless($value) {
$value: calc($value * $fallback);
}
@return $value;
}

// Return valid calc
@function add($value1, $value2, $return-calc: true) {
@if $value1 == null {
Expand Down
2 changes: 1 addition & 1 deletion scss/_images.scss
View file
Open in desktop
Expand Up @@ -32,7 +32,7 @@
}

.figure-img {
margin-bottom: $spacer * .5;
margin-bottom: calc($spacer * .5);
line-height: 1;
}

Expand Down
4 changes: 2 additions & 2 deletions scss/_list-group.scss
View file
Open in desktop
Expand Up @@ -109,7 +109,7 @@
border-top-width: 0;

&.active {
margin-top: calc(-1 * var(--#{$prefix}list-group-border-width)); // stylelint-disable-line function-disallowed-list
margin-top: calc(-1 * var(--#{$prefix}list-group-border-width));
border-top-width: var(--#{$prefix}list-group-border-width);
}
}
Expand Down Expand Up @@ -146,7 +146,7 @@
border-left-width: 0;

&.active {
margin-left: calc(-1 * var(--#{$prefix}list-group-border-width)); // stylelint-disable-line function-disallowed-list
margin-left: calc(-1 * var(--#{$prefix}list-group-border-width));
border-left-width: var(--#{$prefix}list-group-border-width);
}
}
Expand Down
2 changes: 0 additions & 2 deletions scss/_modal.scss
View file
Open in desktop
@@ -1,5 +1,3 @@
// stylelint-disable function-disallowed-list

// .modal-open - body class for killing the scroll
// .modal - container to scroll within
// .modal-dialog - positioning shell for the actual modal
Expand Down
4 changes: 2 additions & 2 deletions scss/_nav.scss
View file
Open in desktop
Expand Up @@ -70,7 +70,7 @@
border-bottom: var(--#{$prefix}nav-tabs-border-width) solid var(--#{$prefix}nav-tabs-border-color);

.nav-link {
margin-bottom: calc(-1 * var(--#{$prefix}nav-tabs-border-width)); // stylelint-disable-line function-disallowed-list
margin-bottom: calc(-1 * var(--#{$prefix}nav-tabs-border-width));
border: var(--#{$prefix}nav-tabs-border-width) solid transparent;
@include border-top-radius(var(--#{$prefix}nav-tabs-border-radius));

Expand All @@ -91,7 +91,7 @@

.dropdown-menu {
// Make dropdown border overlap tab border
margin-top: calc(-1 * var(--#{$prefix}nav-tabs-border-width)); // stylelint-disable-line function-disallowed-list
margin-top: calc(-1 * var(--#{$prefix}nav-tabs-border-width));
// Remove the top rounded corners here since there is a hard edge above the menu
@include border-top-radius(0);
}
Expand Down
2 changes: 0 additions & 2 deletions scss/_offcanvas.scss
View file
Open in desktop
@@ -1,5 +1,3 @@
// stylelint-disable function-disallowed-list

%offcanvas-css-vars {
// scss-docs-start offcanvas-css-vars
--#{$prefix}offcanvas-zindex: #{$zindex-offcanvas};
Expand Down
2 changes: 1 addition & 1 deletion scss/_pagination.scss
View file
Open in desktop
Expand Up @@ -75,7 +75,7 @@
margin-left: $pagination-margin-start;
}

@if $pagination-margin-start == calc(#{$pagination-border-width} * -1) {
@if $pagination-margin-start == calc($pagination-border-width * -1) {
&:first-child {
.page-link {
@include border-start-radius(var(--#{$prefix}pagination-border-radius));
Expand Down
2 changes: 1 addition & 1 deletion scss/_placeholders.scss
View file
Open in desktop
Expand Up @@ -39,7 +39,7 @@
}

.placeholder-wave {
mask-image: linear-gradient(130deg, $black 55%, rgba(0, 0, 0, (1 - $placeholder-opacity-min)) 75%, $black 95%);
mask-image: linear-gradient(130deg, $black 55%, rgba(0, 0, 0, calc(1 - $placeholder-opacity-min)) 75%, $black 95%);
mask-size: 200% 100%;
animation: placeholder-wave 2s linear infinite;
}
Expand Down
18 changes: 9 additions & 9 deletions scss/_popover.scss
View file
Open in desktop
Expand Up @@ -56,11 +56,11 @@

.bs-popover-top {
> .popover-arrow {
bottom: calc(-1 * (var(--#{$prefix}popover-arrow-height)) - var(--#{$prefix}popover-border-width)); // stylelint-disable-line function-disallowed-list
bottom: calc(-1 * var(--#{$prefix}popover-arrow-height) - var(--#{$prefix}popover-border-width));

&::before,
&::after {
border-width: var(--#{$prefix}popover-arrow-height) calc(var(--#{$prefix}popover-arrow-width) * .5) 0; // stylelint-disable-line function-disallowed-list
border-width: var(--#{$prefix}popover-arrow-height) calc(var(--#{$prefix}popover-arrow-width) * .5) 0;
}

&::before {
Expand All @@ -78,13 +78,13 @@
/* rtl:begin:ignore */
.bs-popover-end {
> .popover-arrow {
left: calc(-1 * (var(--#{$prefix}popover-arrow-height)) - var(--#{$prefix}popover-border-width)); // stylelint-disable-line function-disallowed-list
left: calc(-1 * var(--#{$prefix}popover-arrow-height) - var(--#{$prefix}popover-border-width));
width: var(--#{$prefix}popover-arrow-height);
height: var(--#{$prefix}popover-arrow-width);

&::before,
&::after {
border-width: calc(var(--#{$prefix}popover-arrow-width) * .5) var(--#{$prefix}popover-arrow-height) calc(var(--#{$prefix}popover-arrow-width) * .5) 0; // stylelint-disable-line function-disallowed-list
border-width: calc(var(--#{$prefix}popover-arrow-width) * .5) var(--#{$prefix}popover-arrow-height) calc(var(--#{$prefix}popover-arrow-width) * .5) 0;
}

&::before {
Expand All @@ -103,11 +103,11 @@

.bs-popover-bottom {
> .popover-arrow {
top: calc(-1 * (var(--#{$prefix}popover-arrow-height)) - var(--#{$prefix}popover-border-width)); // stylelint-disable-line function-disallowed-list
top: calc(-1 * var(--#{$prefix}popover-arrow-height) - var(--#{$prefix}popover-border-width));

&::before,
&::after {
border-width: 0 calc(var(--#{$prefix}popover-arrow-width) * .5) var(--#{$prefix}popover-arrow-height); // stylelint-disable-line function-disallowed-list
border-width: 0 calc(var(--#{$prefix}popover-arrow-width) * .5) var(--#{$prefix}popover-arrow-height);
}

&::before {
Expand All @@ -128,7 +128,7 @@
left: 50%;
display: block;
width: var(--#{$prefix}popover-arrow-width);
margin-left: calc(-.5 * var(--#{$prefix}popover-arrow-width)); // stylelint-disable-line function-disallowed-list
margin-left: calc(-.5 * var(--#{$prefix}popover-arrow-width));
content: "";
border-bottom: var(--#{$prefix}popover-border-width) solid var(--#{$prefix}popover-header-bg);
}
Expand All @@ -137,13 +137,13 @@
/* rtl:begin:ignore */
.bs-popover-start {
> .popover-arrow {
right: calc(-1 * (var(--#{$prefix}popover-arrow-height)) - var(--#{$prefix}popover-border-width)); // stylelint-disable-line function-disallowed-list
right: calc(-1 * var(--#{$prefix}popover-arrow-height) - var(--#{$prefix}popover-border-width));
width: var(--#{$prefix}popover-arrow-height);
height: var(--#{$prefix}popover-arrow-width);

&::before,
&::after {
border-width: calc(var(--#{$prefix}popover-arrow-width) * .5) 0 calc(var(--#{$prefix}popover-arrow-width) * .5) var(--#{$prefix}popover-arrow-height); // stylelint-disable-line function-disallowed-list
border-width: calc(var(--#{$prefix}popover-arrow-width) * .5) 0 calc(var(--#{$prefix}popover-arrow-width) * .5) var(--#{$prefix}popover-arrow-height);
}

&::before {
Expand Down
2 changes: 1 addition & 1 deletion scss/_spinners.scss
View file
Open in desktop
Expand Up @@ -79,7 +79,7 @@
@media (prefers-reduced-motion: reduce) {
.spinner-border,
.spinner-grow {
--#{$prefix}spinner-animation-speed: #{$spinner-animation-speed * 2};
--#{$prefix}spinner-animation-speed: #{calc($spinner-animation-speed * 2)};
}
}
}
2 changes: 1 addition & 1 deletion scss/_tables.scss
View file
Open in desktop
Expand Up @@ -49,7 +49,7 @@
}

.table-group-divider {
border-top: calc(#{$table-border-width} * 2) solid $table-group-separator-color; // stylelint-disable-line function-disallowed-list
border-top: calc($table-border-width * 2) solid $table-group-separator-color;
}

//
Expand Down
2 changes: 1 addition & 1 deletion scss/_toasts.scss
View file
Open in desktop
Expand Up @@ -62,7 +62,7 @@
@include border-top-radius(calc(var(--#{$prefix}toast-border-radius) - var(--#{$prefix}toast-border-width)));

.btn-close {
margin-right: calc(-.5 * var(--#{$prefix}toast-padding-x)); // stylelint-disable-line function-disallowed-list
margin-right: calc(-.5 * var(--#{$prefix}toast-padding-x));
margin-left: var(--#{$prefix}toast-padding-x);
}
}
Expand Down
16 changes: 8 additions & 8 deletions scss/_tooltip.scss
View file
Open in desktop
Expand Up @@ -44,49 +44,49 @@
}

.bs-tooltip-top .tooltip-arrow {
bottom: calc(-1 * var(--#{$prefix}tooltip-arrow-height)); // stylelint-disable-line function-disallowed-list
bottom: calc(-1 * var(--#{$prefix}tooltip-arrow-height));

&::before {
top: -1px;
border-width: var(--#{$prefix}tooltip-arrow-height) calc(var(--#{$prefix}tooltip-arrow-width) * .5) 0; // stylelint-disable-line function-disallowed-list
border-width: var(--#{$prefix}tooltip-arrow-height) calc(var(--#{$prefix}tooltip-arrow-width) * .5) 0;
border-top-color: var(--#{$prefix}tooltip-bg);
}
}

/* rtl:begin:ignore */
.bs-tooltip-end .tooltip-arrow {
left: calc(-1 * var(--#{$prefix}tooltip-arrow-height)); // stylelint-disable-line function-disallowed-list
left: calc(-1 * var(--#{$prefix}tooltip-arrow-height));
width: var(--#{$prefix}tooltip-arrow-height);
height: var(--#{$prefix}tooltip-arrow-width);

&::before {
right: -1px;
border-width: calc(var(--#{$prefix}tooltip-arrow-width) * .5) var(--#{$prefix}tooltip-arrow-height) calc(var(--#{$prefix}tooltip-arrow-width) * .5) 0; // stylelint-disable-line function-disallowed-list
border-width: calc(var(--#{$prefix}tooltip-arrow-width) * .5) var(--#{$prefix}tooltip-arrow-height) calc(var(--#{$prefix}tooltip-arrow-width) * .5) 0;
border-right-color: var(--#{$prefix}tooltip-bg);
}
}

/* rtl:end:ignore */

.bs-tooltip-bottom .tooltip-arrow {
top: calc(-1 * var(--#{$prefix}tooltip-arrow-height)); // stylelint-disable-line function-disallowed-list
top: calc(-1 * var(--#{$prefix}tooltip-arrow-height));

&::before {
bottom: -1px;
border-width: 0 calc(var(--#{$prefix}tooltip-arrow-width) * .5) var(--#{$prefix}tooltip-arrow-height); // stylelint-disable-line function-disallowed-list
border-width: 0 calc(var(--#{$prefix}tooltip-arrow-width) * .5) var(--#{$prefix}tooltip-arrow-height);
border-bottom-color: var(--#{$prefix}tooltip-bg);
}
}

/* rtl:begin:ignore */
.bs-tooltip-start .tooltip-arrow {
right: calc(-1 * var(--#{$prefix}tooltip-arrow-height)); // stylelint-disable-line function-disallowed-list
right: calc(-1 * var(--#{$prefix}tooltip-arrow-height));
width: var(--#{$prefix}tooltip-arrow-height);
height: var(--#{$prefix}tooltip-arrow-width);

&::before {
left: -1px;
border-width: calc(var(--#{$prefix}tooltip-arrow-width) * .5) 0 calc(var(--#{$prefix}tooltip-arrow-width) * .5) var(--#{$prefix}tooltip-arrow-height); // stylelint-disable-line function-disallowed-list
border-width: calc(var(--#{$prefix}tooltip-arrow-width) * .5) 0 calc(var(--#{$prefix}tooltip-arrow-width) * .5) var(--#{$prefix}tooltip-arrow-height);
border-left-color: var(--#{$prefix}tooltip-bg);
}
}
Expand Down
2 changes: 1 addition & 1 deletion scss/_type.scss
View file
Open in desktop
Expand Up @@ -95,7 +95,7 @@
}

.blockquote-footer {
margin-top: -$blockquote-margin-y;
margin-top: calc(-1 * $blockquote-margin-y);
margin-bottom: $blockquote-margin-y;
@include font-size($blockquote-footer-font-size);
color: $blockquote-footer-color;
Expand Down