mirror_css/bootstrap
1
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-08-25 14:30:46 +02:00
Code Issues Releases Wiki Activity

Remove add(), subtract(), and divide() functions for calc() and Sass math.div()

Browse Source
This commit is contained in:
Mark Otto
2025-02-21 23:05:07 -08:00
parent eb3622e4ce
commit 125651adbd
8 changed files with 24 additions and 106 deletions
Download Patch File Download Diff File Expand all files Collapse all files

88
scss/_functions.scss
View File

@@ -1,3 +1,4 @@
@use "sass:math";
@use "config" as *;
// Bootstrap functions
@@ -176,7 +177,7 @@ $_luminance-list: .0008 .001 .0011 .0013 .0015 .0017 .002 .0022 .0025 .0027 .003
$l1: luminance($background);
$l2: luminance(opaque($background, $foreground));
@return if($l1 > $l2, divide($l1 + .05, $l2 + .05), divide($l2 + .05, $l1 + .05));
@return if($l1 > $l2, math.div($l1 + .05, $l2 + .05), math.div($l2 + .05, $l1 + .05));
}
// Return WCAG2.2 relative luminance
@@ -190,7 +191,7 @@ $_luminance-list: .0008 .001 .0011 .0013 .0015 .0017 .002 .0022 .0025 .0027 .003
);
@each $name, $value in $rgb {
$value: if(divide($value, 255) < .04045, divide(divide($value, 255), 12.92), nth($_luminance-list, $value + 1));
$value: if(math.div($value, 255) < .04045, math.div(math.div($value, 255), 12.92), nth($_luminance-list, $value + 1));
$rgb: map-merge($rgb, ($name: $value));
}
@@ -219,86 +220,3 @@ $_luminance-list: .0008 .001 .0011 .0013 .0015 .0017 .002 .0022 .0025 .0027 .003
@return if($weight > 0, shade-color($color, $weight), tint-color($color, -$weight));
}
// 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) {
$sign: if($dividend > 0 and $divisor > 0 or $dividend < 0 and $divisor < 0, 1, -1);
$dividend: abs($dividend);
$divisor: abs($divisor);
@if $dividend == 0 {
@return 0;
}
@if $divisor == 0 {
@error "Cannot divide by 0";
}
$remainder: $dividend;
$result: 0;
$factor: 10;
@while ($remainder > 0 and $precision >= 0) {
$quotient: 0;
@while ($remainder >= $divisor) {
$remainder: $remainder - $divisor;
$quotient: $quotient + 1;
}
$result: $result * 10 + $quotient;
$factor: $factor * .1;
$remainder: $remainder * 10;
$precision: $precision - 1;
@if ($precision < 0 and $remainder >= $divisor * 5) {
$result: $result + 1;
}
}
$result: $result * $factor * $sign;
$dividend-unit: unit($dividend);
$divisor-unit: unit($divisor);
$unit-map: (
"px": 1px,
"rem": 1rem,
"em": 1em,
"%": 1%
);
@if ($dividend-unit != $divisor-unit and map-has-key($unit-map, $dividend-unit)) {
$result: $result * map-get($unit-map, $dividend-unit);
}
@return $result;
}

20
scss/_variables.scss
View File

@@ -631,13 +631,13 @@ $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-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-quarter: add($input-line-height * .25em, $input-padding-y * .5) !default;
$input-height-inner: calc($input-line-height * 1em + ($input-padding-y * 2)) !default;
$input-height-inner-half: calc($input-line-height * .5em + ($input-padding-y)) !default;
$input-height-inner-quarter: calc($input-line-height * .25em + ($input-padding-y * .5)) !default;
$input-height: add($input-line-height * 1em, add($input-padding-y * 2, $input-height-border, false)) !default;
$input-height-sm: add($input-line-height * 1em, add($input-padding-y-sm * 2, $input-height-border, false)) !default;
$input-height-lg: add($input-line-height * 1em, add($input-padding-y-lg * 2, $input-height-border, false)) !default;
$input-height: calc($input-line-height * 1em + (($input-padding-y * 2) + $input-height-border)) !default;
$input-height-sm: calc($input-line-height * 1em + (($input-padding-y-sm * 2) + $input-height-border)) !default;
$input-height-lg: calc($input-line-height * 1em + (($input-padding-y-lg * 2) + $input-height-border)) !default;
$input-transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out !default;
@@ -777,7 +777,7 @@ $form-file-button-hover-bg: var(--#{$prefix}secondary-bg) !default;
// scss-docs-end form-file-variables
// scss-docs-start form-floating-variables
$form-floating-height: add(3.5rem, $input-height-border) !default;
$form-floating-height: calc(3.5rem + #{$input-height-border}) !default;
$form-floating-line-height: 1.25 !default;
$form-floating-padding-x: $input-padding-x !default;
$form-floating-padding-y: 1rem !default;
@@ -1057,7 +1057,7 @@ $card-border-width: var(--#{$prefix}border-width) !default;
$card-border-color: var(--#{$prefix}border-color-translucent) !default;
$card-border-radius: var(--#{$prefix}border-radius) !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-x: $card-spacer-x !default;
$card-cap-bg: rgba(var(--#{$prefix}body-color-rgb), .03) !default;
@@ -1079,7 +1079,7 @@ $accordion-bg: var(--#{$prefix}body-bg) !default;
$accordion-border-width: var(--#{$prefix}border-width) !default;
$accordion-border-color: var(--#{$prefix}border-color) !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-x: $accordion-padding-x !default;
@@ -1221,7 +1221,7 @@ $modal-content-bg: var(--#{$prefix}body-bg) !default;
$modal-content-border-color: var(--#{$prefix}border-color-translucent) !default;
$modal-content-border-width: var(--#{$prefix}border-width) !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-sm-up: var(--#{$prefix}box-shadow) !default;

2
scss/forms/_form-range.scss
View File

@@ -14,7 +14,7 @@
@layer forms {
.form-range {
width: 100%;
height: add($form-range-thumb-height, $form-range-thumb-focus-box-shadow-width * 2);
height: calc($form-range-thumb-height + ($form-range-thumb-focus-box-shadow-width * 2));
padding: 0; // Need to reset padding
appearance: none;
background-color: transparent;

12
scss/forms/_labels.scss
View File

@@ -17,8 +17,8 @@
// For use with horizontal and inline forms, when you need the label (or legend)
// text to align with the form controls.
.col-form-label {
padding-top: add($input-padding-y, $input-border-width);
padding-bottom: add($input-padding-y, $input-border-width);
padding-top: calc($input-padding-y + $input-border-width);
padding-bottom: calc($input-padding-y + $input-border-width);
margin-bottom: 0; // Override the `<legend>` default
@include font-size(inherit); // Override the `<legend>` default
font-style: $form-label-font-style;
@@ -28,14 +28,14 @@
}
.col-form-label-lg {
padding-top: add($input-padding-y-lg, $input-border-width);
padding-bottom: add($input-padding-y-lg, $input-border-width);
padding-top: calc($input-padding-y-lg + $input-border-width);
padding-bottom: calc($input-padding-y-lg + $input-border-width);
@include font-size($input-font-size-lg);
}
.col-form-label-sm {
padding-top: add($input-padding-y-sm, $input-border-width);
padding-bottom: add($input-padding-y-sm, $input-border-width);
padding-top: calc($input-padding-y-sm + $input-border-width);
padding-bottom: calc($input-padding-y-sm + $input-border-width);
@include font-size($input-font-size-sm);
}
}

2
scss/forms/_validation.scss
View File

@@ -132,7 +132,7 @@
.form-control-color {
@include form-validation-state-selector($state) {
@if $enable-validation-icons {
width: add($form-color-width, $input-height-inner);
width: calc($form-color-width + $input-height-inner);
}
}
}

2
scss/mixins/_forms.scss
View File

@@ -118,7 +118,7 @@
.form-control-color {
@include form-validation-state-selector($state) {
@if $enable-validation-icons {
width: add($form-color-width, $input-height-inner);
width: calc($form-color-width + $input-height-inner);
}
}
}

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

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

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

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