mirror_css/bootstrap
1
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-09-25 12:59:05 +02:00
Code Issues Releases Wiki Activity

v6: Don't disallow calc (#41681)

Browse Source 
* Don't disallow calc()

* Remove disables that aren't needed

* Remove custom subtract and add functions

* Remove more disables

* keep it here
This commit is contained in:
Mark Otto
2025-08-26 21:34:58 -07:00
committed by Mark Otto
parent 8d9e3d122e
commit f9052f47c6
21 changed files with 55 additions and 101 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
.stylelintrc.json
View File

@@ -13,7 +13,6 @@
"outline": "none" "outline": "none"
}, },
"function-disallowed-list": [ "function-disallowed-list": [
"calc",
"lighten", "lighten",
"darken" "darken"
], ],

2
scss/_accordion.scss
View File

@@ -46,7 +46,7 @@
&:not(.collapsed) { &:not(.collapsed) {
color: var(--#{$prefix}accordion-active-color); color: var(--#{$prefix}accordion-active-color);
background-color: var(--#{$prefix}accordion-active-bg); 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 { &::after {
background-image: var(--#{$prefix}accordion-btn-active-icon); background-image: var(--#{$prefix}accordion-btn-active-icon);

4
scss/_button-group.scss
View File

@@ -39,7 +39,7 @@
// Prevent double borders when buttons are next to each other // Prevent double borders when buttons are next to each other
> :not(.btn-check:first-child) + .btn, > :not(.btn-check:first-child) + .btn,
> .btn-group:not(:first-child) { > .btn-group:not(:first-child) {
margin-left: calc(-1 * #{$btn-border-width}); // stylelint-disable-line function-disallowed-list margin-left: calc(-1 * #{$btn-border-width});
} }
// Reset rounded corners // Reset rounded corners
@@ -126,7 +126,7 @@
> .btn:not(:first-child), > .btn:not(:first-child),
> .btn-group:not(:first-child) { > .btn-group:not(:first-child) {
margin-top: calc(-1 * #{$btn-border-width}); // stylelint-disable-line function-disallowed-list margin-top: calc(-1 * #{$btn-border-width});
} }
// Reset rounded corners // Reset rounded corners

12
scss/_card.scss
View File

@@ -80,7 +80,7 @@
} }
.card-subtitle { .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; margin-bottom: 0;
color: var(--#{$prefix}card-subtitle-color); color: var(--#{$prefix}card-subtitle-color);
} }
@@ -132,9 +132,9 @@
// //
.card-header-tabs { .card-header-tabs {
margin-right: 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)); // stylelint-disable-line function-disallowed-list margin-bottom: calc(-1 * var(--#{$prefix}card-cap-padding-y));
margin-left: calc(-.5 * var(--#{$prefix}card-cap-padding-x)); // stylelint-disable-line function-disallowed-list margin-left: calc(-.5 * var(--#{$prefix}card-cap-padding-x));
border-bottom: 0; border-bottom: 0;
.nav-link.active { .nav-link.active {
@@ -144,8 +144,8 @@
} }
.card-header-pills { .card-header-pills {
margin-right: 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)); // stylelint-disable-line function-disallowed-list margin-left: calc(-.5 * var(--#{$prefix}card-cap-padding-x));
} }
// Card image // Card image

41
scss/_functions.scss
View File

@@ -218,47 +218,6 @@ $_luminance-list: .0008 .001 .0011 .0013 .0015 .0017 .002 .0022 .0025 .0027 .003
} }
// scss-docs-end color-functions // scss-docs-end color-functions
// Return valid calc
@function add($value1, $value2, $return-calc: true) {
@if $value1 == null {
@return $value2;
}
@if $value2 == null {
@return $value1;
}
@if type-of($value1) == number and type-of($value2) == number and comparable($value1, $value2) {
@return $value1 + $value2;
}
@return if($return-calc == true, calc(#{$value1} + #{$value2}), $value1 + unquote(" + ") + $value2);
}
@function subtract($value1, $value2, $return-calc: true) {
@if $value1 == null and $value2 == null {
@return null;
}
@if $value1 == null {
@return -$value2;
}
@if $value2 == null {
@return $value1;
}
@if type-of($value1) == number and type-of($value2) == number and comparable($value1, $value2) {
@return $value1 - $value2;
}
@if type-of($value2) != number {
$value2: unquote("(") + $value2 + unquote(")");
}
@return if($return-calc == true, calc(#{$value1} - #{$value2}), $value1 + unquote(" - ") + $value2);
}
@function divide($dividend, $divisor, $precision: 10) { @function divide($dividend, $divisor, $precision: 10) {
$sign: if($dividend > 0 and $divisor > 0 or $dividend < 0 and $divisor < 0, 1, -1); $sign: if($dividend > 0 and $divisor > 0 or $dividend < 0 and $divisor < 0, 1, -1);
$dividend: abs($dividend); $dividend: abs($dividend);

4
scss/_list-group.scss
View File

@@ -84,7 +84,7 @@
border-top-width: 0; border-top-width: 0;
&.active { &.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); border-top-width: var(--#{$prefix}list-group-border-width);
} }
} }
@@ -148,7 +148,7 @@
border-left-width: 0; border-left-width: 0;
&.active { &.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); border-left-width: var(--#{$prefix}list-group-border-width);
} }
} }

2
scss/_modal.scss
View File

@@ -1,5 +1,3 @@
// stylelint-disable function-disallowed-list
// .modal-open - body class for killing the scroll // .modal-open - body class for killing the scroll
// .modal - container to scroll within // .modal - container to scroll within
// .modal-dialog - positioning shell for the actual modal // .modal-dialog - positioning shell for the actual modal

4
scss/_nav.scss
View File

@@ -70,7 +70,7 @@
border-bottom: var(--#{$prefix}nav-tabs-border-width) solid var(--#{$prefix}nav-tabs-border-color); border-bottom: var(--#{$prefix}nav-tabs-border-width) solid var(--#{$prefix}nav-tabs-border-color);
.nav-link { .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; border: var(--#{$prefix}nav-tabs-border-width) solid transparent;
@include border-top-radius(var(--#{$prefix}nav-tabs-border-radius)); @include border-top-radius(var(--#{$prefix}nav-tabs-border-radius));
@@ -91,7 +91,7 @@
.dropdown-menu { .dropdown-menu {
// Make dropdown border overlap tab border // 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 // Remove the top rounded corners here since there is a hard edge above the menu
@include border-top-radius(0); @include border-top-radius(0);
} }

2
scss/_offcanvas.scss
View File

@@ -1,5 +1,3 @@
// stylelint-disable function-disallowed-list
%offcanvas-css-vars { %offcanvas-css-vars {
// scss-docs-start offcanvas-css-vars // scss-docs-start offcanvas-css-vars
--#{$prefix}offcanvas-zindex: #{$zindex-offcanvas}; --#{$prefix}offcanvas-zindex: #{$zindex-offcanvas};

18
scss/_popover.scss
View File

@@ -56,11 +56,11 @@
.bs-popover-top { .bs-popover-top {
> .popover-arrow { > .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, &::before,
&::after { &::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 { &::before {
@@ -78,13 +78,13 @@
/* rtl:begin:ignore */ /* rtl:begin:ignore */
.bs-popover-end { .bs-popover-end {
> .popover-arrow { > .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); width: var(--#{$prefix}popover-arrow-height);
height: var(--#{$prefix}popover-arrow-width); height: var(--#{$prefix}popover-arrow-width);
&::before, &::before,
&::after { &::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 { &::before {
@@ -103,11 +103,11 @@
.bs-popover-bottom { .bs-popover-bottom {
> .popover-arrow { > .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, &::before,
&::after { &::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 { &::before {
@@ -128,7 +128,7 @@
left: 50%; left: 50%;
display: block; display: block;
width: var(--#{$prefix}popover-arrow-width); 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: ""; content: "";
border-bottom: var(--#{$prefix}popover-border-width) solid var(--#{$prefix}popover-header-bg); border-bottom: var(--#{$prefix}popover-border-width) solid var(--#{$prefix}popover-header-bg);
} }
@@ -137,13 +137,13 @@
/* rtl:begin:ignore */ /* rtl:begin:ignore */
.bs-popover-start { .bs-popover-start {
> .popover-arrow { > .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); width: var(--#{$prefix}popover-arrow-height);
height: var(--#{$prefix}popover-arrow-width); height: var(--#{$prefix}popover-arrow-width);
&::before, &::before,
&::after { &::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 { &::before {

2
scss/_tables.scss
View File

@@ -49,7 +49,7 @@
} }
.table-group-divider { .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;
} }
// //

2
scss/_toasts.scss
View File

@@ -62,7 +62,7 @@
@include border-top-radius(calc(var(--#{$prefix}toast-border-radius) - var(--#{$prefix}toast-border-width))); @include border-top-radius(calc(var(--#{$prefix}toast-border-radius) - var(--#{$prefix}toast-border-width)));
.btn-close { .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); margin-left: var(--#{$prefix}toast-padding-x);
} }
} }

16
scss/_tooltip.scss
View File

@@ -44,24 +44,24 @@
} }
.bs-tooltip-top .tooltip-arrow { .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 { &::before {
top: -1px; 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); border-top-color: var(--#{$prefix}tooltip-bg);
} }
} }
/* rtl:begin:ignore */ /* rtl:begin:ignore */
.bs-tooltip-end .tooltip-arrow { .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); width: var(--#{$prefix}tooltip-arrow-height);
height: var(--#{$prefix}tooltip-arrow-width); height: var(--#{$prefix}tooltip-arrow-width);
&::before { &::before {
right: -1px; 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); border-right-color: var(--#{$prefix}tooltip-bg);
} }
} }
@@ -69,24 +69,24 @@
/* rtl:end:ignore */ /* rtl:end:ignore */
.bs-tooltip-bottom .tooltip-arrow { .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 { &::before {
bottom: -1px; 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); border-bottom-color: var(--#{$prefix}tooltip-bg);
} }
} }
/* rtl:begin:ignore */ /* rtl:begin:ignore */
.bs-tooltip-start .tooltip-arrow { .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); width: var(--#{$prefix}tooltip-arrow-height);
height: var(--#{$prefix}tooltip-arrow-width); height: var(--#{$prefix}tooltip-arrow-width);
&::before { &::before {
left: -1px; 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); border-left-color: var(--#{$prefix}tooltip-bg);
} }
} }

16
scss/_variables.scss
View File

@@ -586,7 +586,6 @@ $transition-collapse: height .35s ease !default;
$transition-collapse-width: width .35s ease !default; $transition-collapse-width: width .35s ease !default;
// scss-docs-end collapse-transition // scss-docs-end collapse-transition
// stylelint-disable function-disallowed-list
// scss-docs-start aspect-ratios // scss-docs-start aspect-ratios
$aspect-ratios: ( $aspect-ratios: (
"1x1": 100%, "1x1": 100%,
@@ -595,7 +594,6 @@ $aspect-ratios: (
"21x9": calc(9 / 21 * 100%) "21x9": calc(9 / 21 * 100%)
) !default; ) !default;
// scss-docs-end aspect-ratios // scss-docs-end aspect-ratios
// stylelint-enable function-disallowed-list
// Typography // Typography
// //
@@ -920,7 +918,7 @@ $input-focus-box-shadow: $input-btn-focus-box-shadow !default;
$input-placeholder-color: var(--#{$prefix}secondary-color) !default; $input-placeholder-color: var(--#{$prefix}secondary-color) !default;
$input-plaintext-color: var(--#{$prefix}body-color) !default; $input-plaintext-color: var(--#{$prefix}body-color) !default;
$input-height-border: calc(#{$input-border-width} * 2) !default; // stylelint-disable-line function-disallowed-list $input-height-border: calc(#{$input-border-width} * 2) !default;
$input-height-inner: add($input-line-height * 1em, $input-padding-y * 2) !default; $input-height-inner: add($input-line-height * 1em, $input-padding-y * 2) !default;
$input-height-inner-half: add($input-line-height * .5em, $input-padding-y) !default; $input-height-inner-half: add($input-line-height * .5em, $input-padding-y) !default;
@@ -1245,7 +1243,7 @@ $dropdown-bg: var(--#{$prefix}body-bg) !default;
$dropdown-border-color: var(--#{$prefix}border-color-translucent) !default; $dropdown-border-color: var(--#{$prefix}border-color-translucent) !default;
$dropdown-border-radius: var(--#{$prefix}border-radius) !default; $dropdown-border-radius: var(--#{$prefix}border-radius) !default;
$dropdown-border-width: var(--#{$prefix}border-width) !default; $dropdown-border-width: var(--#{$prefix}border-width) !default;
$dropdown-inner-border-radius: calc(#{$dropdown-border-radius} - #{$dropdown-border-width}) !default; // stylelint-disable-line function-disallowed-list $dropdown-inner-border-radius: calc(#{$dropdown-border-radius} - #{$dropdown-border-width}) !default;
$dropdown-divider-bg: $dropdown-border-color !default; $dropdown-divider-bg: $dropdown-border-color !default;
$dropdown-divider-margin-y: $spacer * .5 !default; $dropdown-divider-margin-y: $spacer * .5 !default;
$dropdown-box-shadow: var(--#{$prefix}box-shadow) !default; $dropdown-box-shadow: var(--#{$prefix}box-shadow) !default;
@@ -1302,7 +1300,7 @@ $pagination-color: var(--#{$prefix}link-color) !default;
$pagination-bg: var(--#{$prefix}body-bg) !default; $pagination-bg: var(--#{$prefix}body-bg) !default;
$pagination-border-radius: var(--#{$prefix}border-radius) !default; $pagination-border-radius: var(--#{$prefix}border-radius) !default;
$pagination-border-width: var(--#{$prefix}border-width) !default; $pagination-border-width: var(--#{$prefix}border-width) !default;
$pagination-margin-start: calc(-1 * #{$pagination-border-width}) !default; // stylelint-disable-line function-disallowed-list $pagination-margin-start: calc(-1 * #{$pagination-border-width}) !default;
$pagination-border-color: var(--#{$prefix}border-color) !default; $pagination-border-color: var(--#{$prefix}border-color) !default;
$pagination-focus-color: var(--#{$prefix}link-hover-color) !default; $pagination-focus-color: var(--#{$prefix}link-hover-color) !default;
@@ -1348,7 +1346,7 @@ $card-border-width: var(--#{$prefix}border-width) !default;
$card-border-color: var(--#{$prefix}border-color-translucent) !default; $card-border-color: var(--#{$prefix}border-color-translucent) !default;
$card-border-radius: var(--#{$prefix}border-radius) !default; $card-border-radius: var(--#{$prefix}border-radius) !default;
$card-box-shadow: null !default; $card-box-shadow: null !default;
$card-inner-border-radius: subtract($card-border-radius, $card-border-width) !default; $card-inner-border-radius: calc(#{$card-border-radius} - #{$card-border-width}) !default;
$card-cap-padding-y: $card-spacer-y * .5 !default; $card-cap-padding-y: $card-spacer-y * .5 !default;
$card-cap-padding-x: $card-spacer-x !default; $card-cap-padding-x: $card-spacer-x !default;
$card-cap-bg: rgba(var(--#{$prefix}body-color-rgb), .03) !default; $card-cap-bg: rgba(var(--#{$prefix}body-color-rgb), .03) !default;
@@ -1370,7 +1368,7 @@ $accordion-bg: var(--#{$prefix}body-bg) !default;
$accordion-border-width: var(--#{$prefix}border-width) !default; $accordion-border-width: var(--#{$prefix}border-width) !default;
$accordion-border-color: var(--#{$prefix}border-color) !default; $accordion-border-color: var(--#{$prefix}border-color) !default;
$accordion-border-radius: var(--#{$prefix}border-radius) !default; $accordion-border-radius: var(--#{$prefix}border-radius) !default;
$accordion-inner-border-radius: subtract($accordion-border-radius, $accordion-border-width) !default; $accordion-inner-border-radius: calc(#{$accordion-border-radius} - #{$accordion-border-width}) !default;
$accordion-body-padding-y: $accordion-padding-y !default; $accordion-body-padding-y: $accordion-padding-y !default;
$accordion-body-padding-x: $accordion-padding-x !default; $accordion-body-padding-x: $accordion-padding-x !default;
@@ -1438,7 +1436,7 @@ $popover-max-width: 276px !default;
$popover-border-width: var(--#{$prefix}border-width) !default; $popover-border-width: var(--#{$prefix}border-width) !default;
$popover-border-color: var(--#{$prefix}border-color-translucent) !default; $popover-border-color: var(--#{$prefix}border-color-translucent) !default;
$popover-border-radius: var(--#{$prefix}border-radius-lg) !default; $popover-border-radius: var(--#{$prefix}border-radius-lg) !default;
$popover-inner-border-radius: calc(#{$popover-border-radius} - #{$popover-border-width}) !default; // stylelint-disable-line function-disallowed-list $popover-inner-border-radius: calc(#{$popover-border-radius} - #{$popover-border-width}) !default;
$popover-box-shadow: var(--#{$prefix}box-shadow) !default; $popover-box-shadow: var(--#{$prefix}box-shadow) !default;
$popover-header-font-size: $font-size-base !default; $popover-header-font-size: $font-size-base !default;
@@ -1512,7 +1510,7 @@ $modal-content-bg: var(--#{$prefix}body-bg) !default;
$modal-content-border-color: var(--#{$prefix}border-color-translucent) !default; $modal-content-border-color: var(--#{$prefix}border-color-translucent) !default;
$modal-content-border-width: var(--#{$prefix}border-width) !default; $modal-content-border-width: var(--#{$prefix}border-width) !default;
$modal-content-border-radius: var(--#{$prefix}border-radius-lg) !default; $modal-content-border-radius: var(--#{$prefix}border-radius-lg) !default;
$modal-content-inner-border-radius: subtract($modal-content-border-radius, $modal-content-border-width) !default; $modal-content-inner-border-radius: calc(#{$modal-content-border-radius} - #{$modal-content-border-width}) !default;
$modal-content-box-shadow-xs: var(--#{$prefix}box-shadow-sm) !default; $modal-content-box-shadow-xs: var(--#{$prefix}box-shadow-sm) !default;
$modal-content-box-shadow-sm-up: var(--#{$prefix}box-shadow) !default; $modal-content-box-shadow-sm-up: var(--#{$prefix}box-shadow) !default;

2
scss/forms/_input-group.scss
View File

@@ -121,7 +121,7 @@
} }
> :not(:first-child):not(.dropdown-menu)#{$validation-messages} { > :not(:first-child):not(.dropdown-menu)#{$validation-messages} {
margin-left: calc(-1 * #{$input-border-width}); // stylelint-disable-line function-disallowed-list margin-left: calc(-1 * #{$input-border-width});
@include border-start-radius(0); @include border-start-radius(0);
} }

4
scss/mixins/_container.scss
View File

@@ -4,8 +4,8 @@
--#{$prefix}gutter-x: #{$gutter}; --#{$prefix}gutter-x: #{$gutter};
--#{$prefix}gutter-y: 0; --#{$prefix}gutter-y: 0;
width: 100%; width: 100%;
padding-right: calc(var(--#{$prefix}gutter-x) * .5); // stylelint-disable-line function-disallowed-list padding-right: calc(var(--#{$prefix}gutter-x) * .5);
padding-left: calc(var(--#{$prefix}gutter-x) * .5); // stylelint-disable-line function-disallowed-list padding-left: calc(var(--#{$prefix}gutter-x) * .5);
margin-right: auto; margin-right: auto;
margin-left: auto; margin-left: auto;
} }

10
scss/mixins/_grid.scss
View File

@@ -8,9 +8,9 @@
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
// TODO: Revisit calc order after https://github.com/react-bootstrap/react-bootstrap/issues/6039 is fixed // TODO: Revisit calc order after https://github.com/react-bootstrap/react-bootstrap/issues/6039 is fixed
margin-top: calc(-1 * var(--#{$prefix}gutter-y)); // stylelint-disable-line function-disallowed-list margin-top: calc(-1 * var(--#{$prefix}gutter-y));
margin-right: calc(-.5 * var(--#{$prefix}gutter-x)); // stylelint-disable-line function-disallowed-list margin-right: calc(-.5 * var(--#{$prefix}gutter-x));
margin-left: calc(-.5 * var(--#{$prefix}gutter-x)); // stylelint-disable-line function-disallowed-list margin-left: calc(-.5 * var(--#{$prefix}gutter-x));
} }
@mixin make-col-ready() { @mixin make-col-ready() {
@@ -22,8 +22,8 @@
flex-shrink: 0; flex-shrink: 0;
width: 100%; width: 100%;
max-width: 100%; // Prevent `.col-auto`, `.col` (& responsive variants) from breaking out the grid max-width: 100%; // Prevent `.col-auto`, `.col` (& responsive variants) from breaking out the grid
padding-right: calc(var(--#{$prefix}gutter-x) * .5); // stylelint-disable-line function-disallowed-list padding-right: calc(var(--#{$prefix}gutter-x) * .5);
padding-left: calc(var(--#{$prefix}gutter-x) * .5); // stylelint-disable-line function-disallowed-list padding-left: calc(var(--#{$prefix}gutter-x) * .5);
margin-top: var(--#{$prefix}gutter-y); margin-top: var(--#{$prefix}gutter-y);
} }

4
site/src/scss/_component-examples.scss
View File

@@ -93,13 +93,13 @@
.fixed-top, .fixed-top,
.sticky-top { .sticky-top {
position: static; position: static;
margin: calc(-1 * var(--bd-example-padding)) calc(-1 * var(--bd-example-padding)) 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);
} }
.fixed-bottom, .fixed-bottom,
.sticky-bottom { .sticky-bottom {
position: static; position: static;
margin: var(--bd-example-padding) calc(-1 * var(--bd-example-padding)) calc(-1 * var(--bd-example-padding)); // stylelint-disable-line function-disallowed-list margin: var(--bd-example-padding) calc(-1 * var(--bd-example-padding)) calc(-1 * var(--bd-example-padding));
} }

2
site/src/scss/_sidebar.scss
View File

@@ -5,7 +5,7 @@
// Override collapse behaviors // Override collapse behaviors
// stylelint-disable-next-line declaration-no-important // stylelint-disable-next-line declaration-no-important
display: block !important; display: block !important;
height: subtract(100vh, 6rem); height: calc(100vh - 6rem);
// Prevent focus styles to be cut off: // Prevent focus styles to be cut off:
padding-left: .25rem; padding-left: .25rem;
margin-left: -.25rem; margin-left: -.25rem;

2
site/src/scss/_toc.scss
View File

@@ -9,7 +9,7 @@
top: 5rem; top: 5rem;
right: 0; right: 0;
z-index: 2; z-index: 2;
height: subtract(100vh, 7rem); height: calc(100vh - 7rem);
overflow-y: auto; overflow-y: auto;
} }

6
site/src/scss/_variables.scss
View File

@@ -1,7 +1,9 @@
// stylelint-disable function-disallowed-list
// Local docs variables // Local docs variables
$bd-purple: #4c0bce; $bd-purple: #4c0bce;
$bd-violet: lighten(saturate($bd-purple, 5%), 15%); // stylelint-disable-line function-disallowed-list $bd-violet: lighten(saturate($bd-purple, 5%), 15%);
$bd-purple-light: lighten(saturate($bd-purple, 5%), 45%); // stylelint-disable-line function-disallowed-list $bd-purple-light: lighten(saturate($bd-purple, 5%), 45%);
$bd-accent: #ffe484; $bd-accent: #ffe484;
$bd-gutter-x: 3rem; $bd-gutter-x: 3rem;