diff options
author | ysds <ysds.code@gmail.com> | 2019-09-03 20:18:44 +0300 |
---|---|---|
committer | XhmikosR <xhmikosr@gmail.com> | 2019-11-01 21:22:37 +0300 |
commit | 7bd70e54f2c02e0885b9da5d87a5caac5d963fae (patch) | |
tree | 6163fa05ab9689cd13f99f2174d6555abb3abfd8 | |
parent | ed4a4e60812ad2170d792493ea579c7019484923 (diff) |
Add add and subtract function
-rw-r--r-- | scss/_functions.scss | 37 | ||||
-rw-r--r-- | scss/_modal.scss | 16 | ||||
-rw-r--r-- | scss/_popover.scss | 8 | ||||
-rw-r--r-- | scss/_variables.scss | 20 | ||||
-rw-r--r-- | site/docs/4.3/getting-started/theming.md | 38 |
5 files changed, 97 insertions, 22 deletions
diff --git a/scss/_functions.scss b/scss/_functions.scss index 930b7f8972..fc789ac258 100644 --- a/scss/_functions.scss +++ b/scss/_functions.scss @@ -95,3 +95,40 @@ @return mix($color-base, $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 bc08617c95..9a036883a0 100644 --- a/scss/_modal.scss +++ b/scss/_modal.scss @@ -52,10 +52,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; } @@ -72,12 +72,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: ""; } @@ -200,18 +200,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 c9b11e94e8..0ad76af3ee 100644 --- a/scss/_popover.scss +++ b/scss/_popover.scss @@ -39,7 +39,7 @@ margin-bottom: $popover-arrow-height; > .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; > .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; > .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; > .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 be3a0f7985..8be63c6733 100644 --- a/scss/_variables.scss +++ b/scss/_variables.scss @@ -495,13 +495,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-sm * 1em} + #{$input-btn-padding-y-sm * 2} + #{$input-height-border}) !default; -$input-height-lg: calc(#{$input-line-height-lg * 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-sm * 1em, add($input-btn-padding-y-sm * 2, $input-height-border, false)) !default; +$input-height-lg: add($input-line-height-lg * 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; @@ -766,7 +766,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: $nav-divider-margin-y !default; $dropdown-box-shadow: 0 .5rem 1rem rgba($black, .175) !default; @@ -831,7 +831,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; @@ -881,7 +881,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: 0 .25rem .5rem rgba($black, .2) !default; $popover-header-bg: darken($popover-bg, 3%) !default; @@ -953,7 +953,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: 0 .25rem .5rem rgba($black, .5) !default; $modal-content-box-shadow-sm-up: 0 .5rem 1rem rgba($black, .5) !default; diff --git a/site/docs/4.3/getting-started/theming.md b/site/docs/4.3/getting-started/theming.md index 198a55da3a..ecc5895b13 100644 --- a/site/docs/4.3/getting-started/theming.md +++ b/site/docs/4.3/getting-started/theming.md @@ -227,6 +227,44 @@ You can also specify a base color with our color map functions: We use the `escape-svg` function to escape the `<`, `>` and `#` characters for SVG background images. These characters need to be escaped to properly render the background images in IE. +## Add and Subtract function + +We use the `add` and `subtract` functions instead of the CSS `calc` function. The primary purpose of these functions is to avoid errors when "unitless" 0 is given to the `calc` expression. + +Example where the calc is valid: + +{{< highlight scss >}} +$border-radius: .25rem; +$border-width: 1px; + +.element { + // Output calc(.25rem - 1px) is valid + border-radius: calc($border-radius - $border-width); +} + +.element { + // Output the same calc(.25rem - 1px) as above + border-radius: subtract($border-radius, $border-width); +} +{{< /highlight >}} + +Example where the calc is invalid: + +{{< highlight scss >}} +$border-radius: .25rem; +$border-width: 0; + +.element { + // Output calc(.25rem - 0) is invalid + border-radius: calc($border-radius - $border-width); +} + +.element { + // Output .25rem + border-radius: subtract($border-radius, $border-width); +} +{{< /highlight >}} + ## Sass options Customize Bootstrap 4 with our built-in custom variables file and easily toggle global CSS preferences with new `$enable-*` Sass variables. Override a variable's value and recompile with `npm run test` as needed. |