From a9263e38fdfde6fe866223d0e9e3e532f68657c2 Mon Sep 17 00:00:00 2001
From: Shohei Yoshida <ysds.code@gmail.com>
Date: Fri, 14 Feb 2020 15:40:07 +0900
Subject: [PATCH] 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>
---
scss/mixins/_border-radius.scss | 39 ++++++++++++++++++++++-----------
1 file 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);
}
}
--
GitLab