From d32ac02f261689575ab6c299604efbece143ebae Mon Sep 17 00:00:00 2001
From: Alicia Sykes <sykes.alicia@gmail.com>
Date: Mon, 1 Mar 2021 18:57:00 +0000
Subject: [PATCH] Makes the border-radius universable editable

---
 src/components/Collapsable.vue | 7 ++++---
 src/components/Item.vue        | 4 ++--
 src/components/ItemGroup.vue   | 3 ++-
 src/styles/constants.scss      | 5 +++++
 4 files changed, 13 insertions(+), 6 deletions(-)
 create mode 100644 src/styles/constants.scss

diff --git a/src/components/Collapsable.vue b/src/components/Collapsable.vue
index dda36ec9..9c9e350e 100644
--- a/src/components/Collapsable.vue
+++ b/src/components/Collapsable.vue
@@ -71,12 +71,13 @@ export default {
 <style scoped lang="scss">
 
 @import '../../src/styles/color-pallet.scss';
+@import '../../src/styles/constants.scss';
 
 .collapsable {
     // width: 310px;
     padding: 5px;
     margin: 10px;
-    border-radius: 10px;
+    border-radius: $curve-factor;
     background: $ascent;
     // background: -webkit-linear-gradient(to left top, #9F86FF, #1CA8DD, #007AE1);
     // background: linear-gradient(to left top, #9F86FF, #1CA8DD, #007AE1);
@@ -104,7 +105,7 @@ export default {
         display: block;
         padding: 0.25rem;
         cursor: pointer;
-        border-radius: 7px;
+        border-radius: $curve-factor;
         transition: all 0.25s ease-out;
         text-align: left;
         color:$bg-with-opacity;
@@ -142,7 +143,7 @@ export default {
         overflow: hidden;
         transition: max-height .25s ease-in-out;
         background: $bg-with-opacity;
-        border-radius: 0 0 10px 10px;
+        border-radius: 0 0 $inner-radius $inner-radius;
     }
 
     .toggle:checked + .lbl-toggle + .collapsible-content {
diff --git a/src/components/Item.vue b/src/components/Item.vue
index 137bd28b..ce46be87 100644
--- a/src/components/Item.vue
+++ b/src/components/Item.vue
@@ -59,6 +59,7 @@ export default {
 
 <style scoped lang="scss">
 @import '../../src/styles/color-pallet.scss';
+@import '../../src/styles/constants.scss';
 
 .item {
     flex-grow: 1;
@@ -70,7 +71,7 @@ export default {
     text-align: center;
     padding: 2px;
     border: 2px solid transparent;
-    border-radius: 10px;
+    border-radius: $curve-factor;
     box-shadow: 1px 1px 2px #373737;
     cursor: pointer;
     &:hover {
@@ -82,7 +83,6 @@ export default {
         outline: none;
     }
     &.short {
-        border-radius: 30px;
         height: 18px;
     }
 }
diff --git a/src/components/ItemGroup.vue b/src/components/ItemGroup.vue
index 6d3368e8..15c111b0 100644
--- a/src/components/ItemGroup.vue
+++ b/src/components/ItemGroup.vue
@@ -40,6 +40,7 @@ export default {
 
 <style scoped lang="scss">
 @import '../../src/styles/color-pallet.scss';
+@import '../../src/styles/constants.scss';
 
 .no-items {
     width: 100px;
@@ -47,7 +48,7 @@ export default {
     padding: 0.8rem;
     text-align: center;
     cursor: default;
-    border-radius: 10px;
+    border-radius: $curve-factor;
     background: #607d8b33;
     color: $ascent;
     box-shadow: 1px 1px 2px #373737;
diff --git a/src/styles/constants.scss b/src/styles/constants.scss
new file mode 100644
index 00000000..b4ae00be
--- /dev/null
+++ b/src/styles/constants.scss
@@ -0,0 +1,5 @@
+
+// Used as constant border radius
+$curve-factor: 5px;
+
+$inner-radius: $curve-factor - 2;
\ No newline at end of file