From 34ee4ed3e941531f333997c43bb07e09c9baf0c0 Mon Sep 17 00:00:00 2001
From: Newton <5769156+iamnewton@users.noreply.github.com>
Date: Fri, 10 Apr 2020 17:32:55 -0700
Subject: [PATCH 1/4] proposal: simplify the border-radius mixin
Just a proposal, but this would greatly simplify the various mixins that continue to grow in this file. Thoughts?
---
scss/mixins/_border-radius.scss | 78 +++++++++------------------------
1 file changed, 21 insertions(+), 57 deletions(-)
diff --git a/scss/mixins/_border-radius.scss b/scss/mixins/_border-radius.scss
index aee9bf3d3e..4c71a17dc5 100644
--- a/scss/mixins/_border-radius.scss
+++ b/scss/mixins/_border-radius.scss
@@ -14,63 +14,27 @@
@return $return;
}
-@mixin border-radius($radius: $border-radius, $fallback-border-radius: false) {
- @if $enable-rounded {
- border-radius: valid-radius($radius);
- }
- @else if $fallback-border-radius != false {
+@mixin border-radius($radius, $direction: null, $fallback-border-radius: false) {
+ $directions: (
+ "bottom": (bottom-right, bottom-left),
+ "bottom-left": (bottom-left),
+ "bottom-right": (bottom-right),
+ "left": (bottom-left, top-left),
+ "right": (bottom-right, top-right),
+ "top": (top-left, top-right),
+ "top-left": (top-left),
+ "top-right": (top-right),
+ );
+
+ @if $enable-rounded {
+ @if index(map-keys($directions), $direction) {
+ @each $side in map-get($directions, $direction) {
+ border-#{$side}-radius: valid-radius($radius);
+ }
+ } @else {
+ border-radius: valid-radius($radius);
+ }
+ } @else if $fallback-border-radius != false {
border-radius: $fallback-border-radius;
}
}
-
-@mixin border-top-radius($radius) {
- @if $enable-rounded {
- 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: valid-radius($radius);
- border-bottom-right-radius: valid-radius($radius);
- }
-}
-
-@mixin border-bottom-radius($radius) {
- @if $enable-rounded {
- 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: valid-radius($radius);
- border-bottom-left-radius: valid-radius($radius);
- }
-}
-
-@mixin border-top-left-radius($radius) {
- @if $enable-rounded {
- border-top-left-radius: valid-radius($radius);
- }
-}
-
-@mixin border-top-right-radius($radius) {
- @if $enable-rounded {
- border-top-right-radius: valid-radius($radius);
- }
-}
-
-@mixin border-bottom-right-radius($radius) {
- @if $enable-rounded {
- border-bottom-right-radius: valid-radius($radius);
- }
-}
-
-@mixin border-bottom-left-radius($radius) {
- @if $enable-rounded {
- border-bottom-left-radius: valid-radius($radius);
- }
-}
--
GitLab
From 3533d50620175c4eb8b18f408a9f311b8f1190bf Mon Sep 17 00:00:00 2001
From: Newton <5769156+iamnewton@users.noreply.github.com>
Date: Fri, 10 Apr 2020 17:37:50 -0700
Subject: [PATCH 2/4] fix: linting issues
---
scss/mixins/_border-radius.scss | 30 +++++++++++++++---------------
1 file changed, 15 insertions(+), 15 deletions(-)
diff --git a/scss/mixins/_border-radius.scss b/scss/mixins/_border-radius.scss
index 4c71a17dc5..0a7e405f91 100644
--- a/scss/mixins/_border-radius.scss
+++ b/scss/mixins/_border-radius.scss
@@ -15,24 +15,24 @@
}
@mixin border-radius($radius, $direction: null, $fallback-border-radius: false) {
- $directions: (
- "bottom": (bottom-right, bottom-left),
- "bottom-left": (bottom-left),
- "bottom-right": (bottom-right),
- "left": (bottom-left, top-left),
- "right": (bottom-right, top-right),
- "top": (top-left, top-right),
- "top-left": (top-left),
- "top-right": (top-right),
- );
+ $directions: (
+ "bottom": (bottom-right, bottom-left),
+ "bottom-left": (bottom-left),
+ "bottom-right": (bottom-right),
+ "left": (bottom-left, top-left),
+ "right": (bottom-right, top-right),
+ "top": (top-left, top-right),
+ "top-left": (top-left),
+ "top-right": (top-right),
+ );
@if $enable-rounded {
- @if index(map-keys($directions), $direction) {
- @each $side in map-get($directions, $direction) {
- border-#{$side}-radius: valid-radius($radius);
+ @if index(map-keys($directions), $direction) {
+ @each $side in map-get($directions, $direction) {
+ border-#{$side}-radius: valid-radius($radius);
}
- } @else {
- border-radius: valid-radius($radius);
+ } @else {
+ border-radius: valid-radius($radius);
}
} @else if $fallback-border-radius != false {
border-radius: $fallback-border-radius;
--
GitLab
From 2df3090cd1b6b50108cfaf5bc8d0e6ef30e1cc33 Mon Sep 17 00:00:00 2001
From: Newton <5769156+iamnewton@users.noreply.github.com>
Date: Fri, 10 Apr 2020 17:38:50 -0700
Subject: [PATCH 3/4] fix: more linting spacing
---
scss/mixins/_border-radius.scss | 12 ++++++------
1 file changed, 6 insertions(+), 6 deletions(-)
diff --git a/scss/mixins/_border-radius.scss b/scss/mixins/_border-radius.scss
index 0a7e405f91..ca7490a823 100644
--- a/scss/mixins/_border-radius.scss
+++ b/scss/mixins/_border-radius.scss
@@ -28,13 +28,13 @@
@if $enable-rounded {
@if index(map-keys($directions), $direction) {
- @each $side in map-get($directions, $direction) {
- border-#{$side}-radius: valid-radius($radius);
- }
+ @each $side in map-get($directions, $direction) {
+ border-#{$side}-radius: valid-radius($radius);
+ }
} @else {
- border-radius: valid-radius($radius);
- }
- } @else if $fallback-border-radius != false {
+ border-radius: valid-radius($radius);
+ }
+ } @else if $fallback-border-radius != false {
border-radius: $fallback-border-radius;
}
}
--
GitLab
From 3f522a8d95ab199c1d18143ddd722cbfd93a15a8 Mon Sep 17 00:00:00 2001
From: Newton <5769156+iamnewton@users.noreply.github.com>
Date: Fri, 10 Apr 2020 17:44:17 -0700
Subject: [PATCH 4/4] fix: more linting
---
scss/mixins/_border-radius.scss | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/scss/mixins/_border-radius.scss b/scss/mixins/_border-radius.scss
index ca7490a823..bc87c15048 100644
--- a/scss/mixins/_border-radius.scss
+++ b/scss/mixins/_border-radius.scss
@@ -34,7 +34,7 @@
} @else {
border-radius: valid-radius($radius);
}
- } @else if $fallback-border-radius != false {
+ } @else if $fallback-border-radius != false {
border-radius: $fallback-border-radius;
}
}
--
GitLab