From c536836aa89e4d6a3f9003d3f7252fcb1a5be9bf Mon Sep 17 00:00:00 2001 From: Grimalkin <187265388+feral-grimalkin@users.noreply.github.com> Date: Wed, 18 Dec 2024 09:51:19 +0100 Subject: [PATCH] CSS: consistent approach for `calc` with negative values (#41004) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-authored-by: Louis-Maxime Piton Co-authored-by: Julien Déramond --- scss/_button-group.scss | 4 ++-- scss/_pagination.scss | 2 +- scss/_variables.scss | 2 +- scss/forms/_input-group.scss | 2 +- site/assets/scss/_component-examples.scss | 4 ++-- 5 files changed, 7 insertions(+), 7 deletions(-) diff --git a/scss/_button-group.scss b/scss/_button-group.scss index dcd2a858ed93..78e125224f93 100644 --- a/scss/_button-group.scss +++ b/scss/_button-group.scss @@ -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(-1 * #{$btn-border-width}); // stylelint-disable-line function-disallowed-list } // Reset rounded corners @@ -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 + margin-top: calc(-1 * #{$btn-border-width}); // stylelint-disable-line function-disallowed-list } // Reset rounded corners diff --git a/scss/_pagination.scss b/scss/_pagination.scss index f275a62eb4dd..9f09694c30ec 100644 --- a/scss/_pagination.scss +++ b/scss/_pagination.scss @@ -75,7 +75,7 @@ margin-left: $pagination-margin-start; } - @if $pagination-margin-start == calc(#{$pagination-border-width} * -1) { + @if $pagination-margin-start == calc(-1 * #{$pagination-border-width}) { &:first-child { .page-link { @include border-start-radius(var(--#{$prefix}pagination-border-radius)); diff --git a/scss/_variables.scss b/scss/_variables.scss index 9db91c73a159..176e63513297 100644 --- a/scss/_variables.scss +++ b/scss/_variables.scss @@ -1302,7 +1302,7 @@ $pagination-color: var(--#{$prefix}link-color) !default; $pagination-bg: var(--#{$prefix}body-bg) !default; $pagination-border-radius: var(--#{$prefix}border-radius) !default; $pagination-border-width: var(--#{$prefix}border-width) !default; -$pagination-margin-start: calc(#{$pagination-border-width} * -1) !default; // stylelint-disable-line function-disallowed-list +$pagination-margin-start: calc(-1 * #{$pagination-border-width}) !default; // stylelint-disable-line function-disallowed-list $pagination-border-color: var(--#{$prefix}border-color) !default; $pagination-focus-color: var(--#{$prefix}link-hover-color) !default; diff --git a/scss/forms/_input-group.scss b/scss/forms/_input-group.scss index 58e4d409c027..8078ebb151ab 100644 --- a/scss/forms/_input-group.scss +++ b/scss/forms/_input-group.scss @@ -121,7 +121,7 @@ } > :not(:first-child):not(.dropdown-menu)#{$validation-messages} { - margin-left: calc(#{$input-border-width} * -1); // stylelint-disable-line function-disallowed-list + margin-left: calc(-1 * #{$input-border-width}); // stylelint-disable-line function-disallowed-list @include border-start-radius(0); } diff --git a/site/assets/scss/_component-examples.scss b/site/assets/scss/_component-examples.scss index fde8b7f4164a..177836fcd8b9 100644 --- a/site/assets/scss/_component-examples.scss +++ b/site/assets/scss/_component-examples.scss @@ -93,13 +93,13 @@ .fixed-top, .sticky-top { position: static; - margin: calc(var(--bd-example-padding) * -1) calc(var(--bd-example-padding) * -1) var(--bd-example-padding); // stylelint-disable-line function-disallowed-list + margin: calc(-1 * var(--bd-example-padding)) calc(-1 * var(--bd-example-padding)) var(--bd-example-padding); // stylelint-disable-line function-disallowed-list } .fixed-bottom, .sticky-bottom { position: static; - margin: var(--bd-example-padding) calc(var(--bd-example-padding) * -1) calc(var(--bd-example-padding) * -1); // stylelint-disable-line function-disallowed-list + margin: var(--bd-example-padding) calc(-1 * var(--bd-example-padding)) calc(-1 * var(--bd-example-padding)); // stylelint-disable-line function-disallowed-list }