diff options
author | Shohei Yoshida <ysds.code@gmail.com> | 2020-02-14 09:40:07 +0300 |
---|---|---|
committer | XhmikosR <xhmikosr@gmail.com> | 2020-02-17 22:33:54 +0300 |
commit | c77ec4fb06fcfc7b40ea869eaa56d11d4164048c (patch) | |
tree | 426c648fc9aceb228273b83b85a24d8ae229d04e /scss | |
parent | 4ea685a00161a7ed2f3512e53c94b648cd7e0c82 (diff) |
Avoid border-radius functions return negative values (#30166)
* Avoid border-radius functions return negative values
* Update _border-radius.scss
Co-authored-by: XhmikosR <xhmikosr@gmail.com>
Diffstat (limited to 'scss')
-rw-r--r-- | scss/mixins/_border-radius.scss | 39 |
1 files changed, 26 insertions, 13 deletions
diff --git a/scss/mixins/_border-radius.scss b/scss/mixins/_border-radius.scss index 88aeb37d81..aee9bf3d3e 100644 --- a/scss/mixins/_border-radius.scss +++ b/scss/mixins/_border-radius.scss @@ -1,9 +1,22 @@ // stylelint-disable property-blacklist // Single side border-radius +// Helper function to replace negative values with 0 +@function valid-radius($radius) { + $return: (); + @each $value in $radius { + @if type-of($value) == number { + $return: append($return, max($value, 0)); + } @else { + $return: append($return, $value); + } + } + @return $return; +} + @mixin border-radius($radius: $border-radius, $fallback-border-radius: false) { @if $enable-rounded { - border-radius: $radius; + border-radius: valid-radius($radius); } @else if $fallback-border-radius != false { border-radius: $fallback-border-radius; @@ -12,52 +25,52 @@ @mixin border-top-radius($radius) { @if $enable-rounded { - border-top-left-radius: $radius; - border-top-right-radius: $radius; + border-top-left-radius: valid-radius($radius); + border-top-right-radius: valid-radius($radius); } } @mixin border-right-radius($radius) { @if $enable-rounded { - border-top-right-radius: $radius; - border-bottom-right-radius: $radius; + border-top-right-radius: valid-radius($radius); + border-bottom-right-radius: valid-radius($radius); } } @mixin border-bottom-radius($radius) { @if $enable-rounded { - border-bottom-right-radius: $radius; - border-bottom-left-radius: $radius; + border-bottom-right-radius: valid-radius($radius); + border-bottom-left-radius: valid-radius($radius); } } @mixin border-left-radius($radius) { @if $enable-rounded { - border-top-left-radius: $radius; - border-bottom-left-radius: $radius; + border-top-left-radius: valid-radius($radius); + border-bottom-left-radius: valid-radius($radius); } } @mixin border-top-left-radius($radius) { @if $enable-rounded { - border-top-left-radius: $radius; + border-top-left-radius: valid-radius($radius); } } @mixin border-top-right-radius($radius) { @if $enable-rounded { - border-top-right-radius: $radius; + border-top-right-radius: valid-radius($radius); } } @mixin border-bottom-right-radius($radius) { @if $enable-rounded { - border-bottom-right-radius: $radius; + border-bottom-right-radius: valid-radius($radius); } } @mixin border-bottom-left-radius($radius) { @if $enable-rounded { - border-bottom-left-radius: $radius; + border-bottom-left-radius: valid-radius($radius); } } |