diff options
author | Martijn Cuppens <martijn.cuppens@gmail.com> | 2019-11-01 12:32:21 +0300 |
---|---|---|
committer | XhmikosR <xhmikosr@gmail.com> | 2019-11-01 21:22:37 +0300 |
commit | b0b8d3c982ef5fedd720a0038f3f4546217a7e5b (patch) | |
tree | e06c93832810b60bd88e59b9a3bf832b7b59677f /scss | |
parent | 90d4b72e069798040e6fccf07d427bb1bb55a736 (diff) |
Convert v4-dev calc() left overs to add/subtract functions
Diffstat (limited to 'scss')
-rw-r--r-- | scss/_custom-forms.scss | 6 | ||||
-rw-r--r-- | scss/_forms.scss | 12 | ||||
-rw-r--r-- | scss/_variables.scss | 4 |
3 files changed, 11 insertions, 11 deletions
diff --git a/scss/_custom-forms.scss b/scss/_custom-forms.scss index 8b3a74bc0b..7df1688fec 100644 --- a/scss/_custom-forms.scss +++ b/scss/_custom-forms.scss @@ -183,8 +183,8 @@ } &::after { - top: calc(#{(($font-size-base * $line-height-base - $custom-control-indicator-size) / 2)} + #{$custom-control-indicator-border-width * 2}); - left: calc(#{-($custom-switch-width + $custom-control-gutter)} + #{$custom-control-indicator-border-width * 2}); + top: add(($font-size-base * $line-height-base - $custom-control-indicator-size) / 2, $custom-control-indicator-border-width * 2); + left: add(-($custom-switch-width + $custom-control-gutter), $custom-control-indicator-border-width * 2); width: $custom-switch-indicator-size; height: $custom-switch-indicator-size; background-color: $custom-control-indicator-border-color; @@ -378,7 +378,7 @@ .custom-range { width: 100%; - height: calc(#{$custom-range-thumb-height} + #{$custom-range-thumb-focus-box-shadow-width * 2}); + height: add($custom-range-thumb-height, $custom-range-thumb-focus-box-shadow-width * 2); padding: 0; // Need to reset padding background-color: transparent; appearance: none; diff --git a/scss/_forms.scss b/scss/_forms.scss index 7a9a653e45..f91789d656 100644 --- a/scss/_forms.scss +++ b/scss/_forms.scss @@ -86,23 +86,23 @@ select.form-control { // 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); line-height: $input-line-height-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); line-height: $input-line-height-sm; } diff --git a/scss/_variables.scss b/scss/_variables.scss index 8be63c6733..eabe960df8 100644 --- a/scss/_variables.scss +++ b/scss/_variables.scss @@ -567,7 +567,7 @@ $custom-radio-indicator-icon-checked: url("data:image/svg+xml,<svg xml $custom-switch-width: $custom-control-indicator-size * 1.75 !default; $custom-switch-indicator-border-radius: $custom-control-indicator-size / 2 !default; -$custom-switch-indicator-size: calc(#{$custom-control-indicator-size} - #{$custom-control-indicator-border-width * 4}) !default; +$custom-switch-indicator-size: subtract($custom-control-indicator-size, $custom-control-indicator-border-width * 4) !default; $custom-select-padding-y: $input-padding-y !default; $custom-select-padding-x: $input-padding-x !default; @@ -586,7 +586,7 @@ $custom-select-indicator-color: $gray-800 !default; $custom-select-indicator: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='4' height='5' viewBox='0 0 4 5'><path fill='#{$custom-select-indicator-color}' d='M2 0L0 2h4zm0 5L0 3h4z'/></svg>") !default; $custom-select-background: escape-svg($custom-select-indicator) no-repeat right $custom-select-padding-x center / $custom-select-bg-size !default; // Used so we can have multiple background elements (e.g., arrow and feedback icon) -$custom-select-feedback-icon-padding-right: calc((1em + #{2 * $custom-select-padding-y}) * 3 / 4 + #{$custom-select-padding-x + $custom-select-indicator-padding}) !default; +$custom-select-feedback-icon-padding-right: add(1em * .75, (2 * $custom-select-padding-y * .75) + $custom-select-padding-x + $custom-select-indicator-padding) !default; $custom-select-feedback-icon-position: center right ($custom-select-padding-x + $custom-select-indicator-padding) !default; $custom-select-feedback-icon-size: $input-height-inner-half $input-height-inner-half !default; |