aboutsummaryrefslogtreecommitdiff
path: root/scss
diff options
context:
space:
mode:
Diffstat (limited to 'scss')
-rw-r--r--scss/_functions.scss37
-rw-r--r--scss/_modal.scss16
-rw-r--r--scss/_popover.scss8
-rw-r--r--scss/_variables.scss23
-rw-r--r--scss/forms/_form-range.scss2
-rw-r--r--scss/forms/_labels.scss12
6 files changed, 68 insertions, 30 deletions
diff --git a/scss/_functions.scss b/scss/_functions.scss
index 79f988feb..930232950 100644
--- a/scss/_functions.scss
+++ b/scss/_functions.scss
@@ -108,3 +108,40 @@
@function shade-color($color, $level) {
@return mix(black, $color, $level * $theme-color-interval);
}
+
+// 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} + #{$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;
+ }
+
+ @return if($return-calc == true, calc(#{$value1} - #{$value2}), #{$value1} - #{$value2});
+}
diff --git a/scss/_modal.scss b/scss/_modal.scss
index 381b0685e..421e3e640 100644
--- a/scss/_modal.scss
+++ b/scss/_modal.scss
@@ -57,10 +57,10 @@
.modal-dialog-scrollable {
display: flex; // IE10/11
- max-height: calc(100% - #{$modal-dialog-margin * 2});
+ max-height: subtract(100%, $modal-dialog-margin * 2);
.modal-content {
- max-height: calc(100vh - #{$modal-dialog-margin * 2}); // IE10/11
+ max-height: subtract(100vh, $modal-dialog-margin * 2); // IE10/11
overflow: hidden;
}
@@ -77,12 +77,12 @@
.modal-dialog-centered {
display: flex;
align-items: center;
- min-height: calc(100% - #{$modal-dialog-margin * 2});
+ min-height: subtract(100%, $modal-dialog-margin * 2);
// Ensure `modal-dialog-centered` extends the full height of the view (IE10/11)
&::before {
display: block; // IE10
- height: calc(100vh - #{$modal-dialog-margin * 2});
+ height: subtract(100vh, $modal-dialog-margin * 2);
content: "";
}
@@ -204,18 +204,18 @@
}
.modal-dialog-scrollable {
- max-height: calc(100% - #{$modal-dialog-margin-y-sm-up * 2});
+ max-height: subtract(100%, $modal-dialog-margin-y-sm-up * 2);
.modal-content {
- max-height: calc(100vh - #{$modal-dialog-margin-y-sm-up * 2});
+ max-height: subtract(100vh, $modal-dialog-margin-y-sm-up * 2);
}
}
.modal-dialog-centered {
- min-height: calc(100% - #{$modal-dialog-margin-y-sm-up * 2});
+ min-height: subtract(100%, $modal-dialog-margin-y-sm-up * 2);
&::before {
- height: calc(100vh - #{$modal-dialog-margin-y-sm-up * 2});
+ height: subtract(100vh, $modal-dialog-margin-y-sm-up * 2);
}
}
diff --git a/scss/_popover.scss b/scss/_popover.scss
index 512a25fb3..6ebb2c3de 100644
--- a/scss/_popover.scss
+++ b/scss/_popover.scss
@@ -39,7 +39,7 @@
margin-bottom: $popover-arrow-height;
> .popover-arrow {
- bottom: calc((#{$popover-arrow-height} + #{$popover-border-width}) * -1);
+ bottom: subtract(-$popover-arrow-height, $popover-border-width);
&::before {
bottom: 0;
@@ -59,7 +59,7 @@
margin-left: $popover-arrow-height;
> .popover-arrow {
- left: calc((#{$popover-arrow-height} + #{$popover-border-width}) * -1);
+ left: subtract(-$popover-arrow-height, $popover-border-width);
width: $popover-arrow-height;
height: $popover-arrow-width;
margin: $popover-border-radius 0; // make sure the arrow does not touch the popover's rounded corners
@@ -82,7 +82,7 @@
margin-top: $popover-arrow-height;
> .popover-arrow {
- top: calc((#{$popover-arrow-height} + #{$popover-border-width}) * -1);
+ top: subtract(-$popover-arrow-height, $popover-border-width);
&::before {
top: 0;
@@ -114,7 +114,7 @@
margin-right: $popover-arrow-height;
> .popover-arrow {
- right: calc((#{$popover-arrow-height} + #{$popover-border-width}) * -1);
+ right: subtract(-$popover-arrow-height, $popover-border-width);
width: $popover-arrow-height;
height: $popover-arrow-width;
margin: $popover-border-radius 0; // make sure the arrow does not touch the popover's rounded corners
diff --git a/scss/_variables.scss b/scss/_variables.scss
index 2fe147874..b0c60e63f 100644
--- a/scss/_variables.scss
+++ b/scss/_variables.scss
@@ -616,13 +616,13 @@ $input-plaintext-color: $body-color !default;
$input-height-border: $input-border-width * 2 !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 / 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-quarter: add($input-line-height * .25em, $input-padding-y / 2) !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-btn-padding-y-sm * 2} + #{$input-height-border}) !default;
-$input-height-lg: calc(#{$input-line-height * 1em} + #{$input-btn-padding-y-lg * 2} + #{$input-height-border}) !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-btn-padding-y-sm * 2, $input-height-border, false)) !default;
+$input-height-lg: add($input-line-height * 1em, add($input-btn-padding-y-lg * 2, $input-height-border, false)) !default;
$input-transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out !default;
@@ -706,7 +706,8 @@ $form-select-indicator: url("data:image/svg+xml,<svg xmlns='http://w
$form-select-background: no-repeat right $form-select-padding-x center / $form-select-bg-size !default; // Used so we can have multiple background elements (e.g., arrow and feedback icon)
-$form-select-feedback-icon-padding-right: calc((1em + #{2 * $form-select-padding-y}) * 3 / 4 + #{$form-select-padding-x + $form-select-indicator-padding}) !default;
+// stylelint-disable-next-line function-blacklist
+$form-select-feedback-icon-padding-right: calc(#{add((#{add(1em, 2 * $form-select-padding-y, false)}) * 3 / 4, $form-select-padding-x + $form-select-indicator-padding, false)}) !default;
$form-select-feedback-icon-position: center right ($form-select-padding-x + $form-select-indicator-padding) !default;
$form-select-feedback-icon-size: $input-height-inner-half $input-height-inner-half !default;
@@ -881,7 +882,7 @@ $dropdown-bg: $white !default;
$dropdown-border-color: rgba($black, .15) !default;
$dropdown-border-radius: $border-radius !default;
$dropdown-border-width: $border-width !default;
-$dropdown-inner-border-radius: calc(#{$dropdown-border-radius} - #{$dropdown-border-width}) !default;
+$dropdown-inner-border-radius: subtract($dropdown-border-radius, $dropdown-border-width) !default;
$dropdown-divider-bg: $gray-200 !default;
$dropdown-divider-margin-y: $spacer / 2 !default;
$dropdown-box-shadow: $box-shadow !default;
@@ -940,7 +941,7 @@ $card-spacer-x: 1.25rem !default;
$card-border-width: $border-width !default;
$card-border-radius: $border-radius !default;
$card-border-color: rgba($black, .125) !default;
-$card-inner-border-radius: calc(#{$card-border-radius} - #{$card-border-width}) !default;
+$card-inner-border-radius: subtract($card-border-radius, $card-border-width) !default;
$card-cap-bg: rgba($black, .03) !default;
$card-cap-color: null !default;
$card-height: null !default;
@@ -986,7 +987,7 @@ $popover-max-width: 276px !default;
$popover-border-width: $border-width !default;
$popover-border-color: rgba($black, .2) !default;
$popover-border-radius: $border-radius-lg !default;
-$popover-inner-border-radius: calc(#{$popover-border-radius} - #{$popover-border-width}) !default;
+$popover-inner-border-radius: subtract($popover-border-radius, $popover-border-width) !default;
$popover-box-shadow: $box-shadow !default;
$popover-header-bg: darken($popover-bg, 3%) !default;
@@ -1051,7 +1052,7 @@ $modal-content-bg: $white !default;
$modal-content-border-color: rgba($black, .2) !default;
$modal-content-border-width: $border-width !default;
$modal-content-border-radius: $border-radius-lg !default;
-$modal-content-inner-border-radius: calc(#{$modal-content-border-radius} - #{$modal-content-border-width}) !default;
+$modal-content-inner-border-radius: subtract($modal-content-border-radius, $modal-content-border-width) !default;
$modal-content-box-shadow-xs: $box-shadow-sm !default;
$modal-content-box-shadow-sm-up: $box-shadow !default;
diff --git a/scss/forms/_form-range.scss b/scss/forms/_form-range.scss
index 847229813..13fb98117 100644
--- a/scss/forms/_form-range.scss
+++ b/scss/forms/_form-range.scss
@@ -6,7 +6,7 @@
.form-range {
width: 100%;
- height: calc(#{$form-range-thumb-height} + #{$form-range-thumb-focus-box-shadow-width * 2});
+ height: add($form-range-thumb-height, $form-range-thumb-focus-box-shadow-width * 2);
padding: 0; // Need to reset padding
background-color: transparent;
appearance: none;
diff --git a/scss/forms/_labels.scss b/scss/forms/_labels.scss
index b4ccfa804..a3184b7d7 100644
--- a/scss/forms/_labels.scss
+++ b/scss/forms/_labels.scss
@@ -5,21 +5,21 @@
// 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: calc(#{$input-padding-y} + #{$input-border-width});
- padding-bottom: calc(#{$input-padding-y} + #{$input-border-width});
+ padding-top: add($input-padding-y, $input-border-width);
+ padding-bottom: add($input-padding-y, $input-border-width);
margin-bottom: 0; // Override the `<label>/<legend>` default
@include font-size(inherit); // Override the `<legend>` default
line-height: $input-line-height;
}
.col-form-label-lg {
- padding-top: calc(#{$input-padding-y-lg} + #{$input-border-width});
- padding-bottom: calc(#{$input-padding-y-lg} + #{$input-border-width});
+ padding-top: add($input-padding-y-lg, $input-border-width);
+ padding-bottom: add($input-padding-y-lg, $input-border-width);
@include font-size($input-font-size-lg);
}
.col-form-label-sm {
- padding-top: calc(#{$input-padding-y-sm} + #{$input-border-width});
- padding-bottom: calc(#{$input-padding-y-sm} + #{$input-border-width});
+ padding-top: add($input-padding-y-sm, $input-border-width);
+ padding-bottom: add($input-padding-y-sm, $input-border-width);
@include font-size($input-font-size-sm);
}
generated by cgit v1.2.3 (git 2.25.1) at 2026-06-06 05:09:28 +0000