From ac672095359d24eb69b47416fb2a3f23c097518e Mon Sep 17 00:00:00 2001
From: Seifeldin Mahjoub <seifsayed@gmail.com>
Date: Mon, 7 Sep 2020 02:11:51 +0200
Subject: [PATCH] fix: border styles

---
 src/components/_buttons.scss  | 17 +++++------------
 src/components/_forms.scss    |  9 ++++++---
 src/components/_navbar.scss   |  3 ++-
 src/components/_popovers.scss |  3 ++-
 src/utilities/_borders.scss   |  6 ++++--
 5 files changed, 19 insertions(+), 19 deletions(-)

diff --git a/src/components/_buttons.scss b/src/components/_buttons.scss
index 1146581..24b40cd 100644
--- a/src/components/_buttons.scss
+++ b/src/components/_buttons.scss
@@ -9,7 +9,8 @@ button,
   @include color('background-color', 'main-background');
   align-self: center;
   background-image: none;
-  border: 2px solid;
+  border-style: solid;
+  border-width: 2px;
   cursor: pointer;
   display: inline-block;
   font-size: 1rem;
@@ -46,7 +47,8 @@ button,
 
   &:focus {
     @include color('border-color', 'secondary');
-    border: 2px solid;
+    border-style: solid;
+    border-width: 2px;
     box-shadow: 2px 8px 4px -6px hsla(0, 0%, 0%, 0.3);
   }
 
@@ -63,16 +65,7 @@ button,
 }
 
 a {
-  @include color('color', 'secondary');
-  background-image: linear-gradient (
-    5deg,
-    transparent 65%,
-    $secondary 80%,
-    transparent 90%
-  ),
-    linear-gradient(165deg, transparent 5%, $secondary 15%, transparent 25%),
-    linear-gradient(165deg, transparent 45%, $secondary 55%, transparent 65%),
-    linear-gradient(15deg, transparent 25%, $secondary 35%, transparent 50%);
+  background-image: linear-gradient(5deg, transparent 65%, $secondary 80%, transparent 90%), linear-gradient(165deg, transparent 5%, $secondary 15%, transparent 25%), linear-gradient(165deg, transparent 45%, $secondary 55%, transparent 65%), linear-gradient(15deg, transparent 25%, $secondary 35%, transparent 50%);
   background-position: 0 90%;
   background-repeat: repeat-x;
   background-size: 4px 3px;
diff --git a/src/components/_forms.scss b/src/components/_forms.scss
index a8ca631..1471fc6 100644
--- a/src/components/_forms.scss
+++ b/src/components/_forms.scss
@@ -81,7 +81,8 @@ select {
 
         &::before {
           @include color('border-color', 'primary');
-          border: 2px solid;
+          border-style: solid;
+          border-width: 2px;
           content: '';
           display: inline-block;
           height: 1rem;
@@ -167,11 +168,12 @@ select {
 
     .paper-switch-slider {
       @include color('border-color', 'primary');
-      border: 2px solid;
       border-bottom-left-radius: 15px 255px;
       border-bottom-right-radius: 225px 15px;
+      border-style: solid;
       border-top-left-radius: 255px 15px;
       border-top-right-radius: 15px 225px;
+      border-width: 2px;
       bottom: 0;
       cursor: pointer;
       left: 0;
@@ -196,11 +198,12 @@ select {
 
     .paper-switch-slider.round {
       @include color('border-color', 'primary');
-      border: 2px solid;
       border-bottom-left-radius: 0.7rem 1rem;
       border-bottom-right-radius: 1rem 0.9rem;
+      border-style: solid;
       border-top-left-radius: 1rem 1rem;
       border-top-right-radius: 1rem 0.6rem;
+      border-width: 2px;
 
       &::before {
         background: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A//www.w3.org/2000/svg'%20viewBox%3D'0%200%20100%20100'%3E%3Cpath%20fill%3D'%230071de'%20d%3D'M49.346,46.341c-3.79-2.005,3.698-10.294,7.984-8.89%20c8.713,2.852,4.352,20.922-4.901,20.269c-4.684-0.33-12.616-7.405-14.38-11.818c-2.375-5.938,7.208-11.688,11.624-13.837%20c9.078-4.42,18.403-3.503,22.784,6.651c4.049,9.378,6.206,28.09-1.462,36.276c-7.091,7.567-24.673,2.277-32.357-1.079%20c-11.474-5.01-24.54-19.124-21.738-32.758c3.958-19.263,28.856-28.248,46.044-23.244c20.693,6.025,22.012,36.268,16.246,52.826%20c-5.267,15.118-17.03,26.26-33.603,21.938c-11.054-2.883-20.984-10.949-28.809-18.908C9.236,66.096,2.704,57.597,6.01,46.371%20c3.059-10.385,12.719-20.155,20.892-26.604C40.809,8.788,58.615,1.851,75.058,12.031c9.289,5.749,16.787,16.361,18.284,27.262%20c0.643,4.698,0.646,10.775-3.811,13.746'%3E%3C/path%3E%3C/svg%3E") left center no-repeat;
diff --git a/src/components/_navbar.scss b/src/components/_navbar.scss
index d3b83c5..63cfce3 100644
--- a/src/components/_navbar.scss
+++ b/src/components/_navbar.scss
@@ -82,7 +82,8 @@ nav {
 
   a:hover {
     @include color('border-color', 'primary-light');
-    border-bottom: 5px solid;
+    border-bottom-style: solid;
+    border-bottom-width: 5px;
   }
 
   ul.inline li a {
diff --git a/src/components/_popovers.scss b/src/components/_popovers.scss
index c37e6b6..8e03459 100644
--- a/src/components/_popovers.scss
+++ b/src/components/_popovers.scss
@@ -20,7 +20,8 @@
     @include transition(opacity);
     @include color('background-color', 'light-dark');
     @include color('border-color', 'primary');
-    border: 2px solid;
+    border-style: solid;
+    border-width: 2px;
     color: $white;
     font-size: 0.7em;
     left: 50%;
diff --git a/src/utilities/_borders.scss b/src/utilities/_borders.scss
index 430ada0..2acb241 100644
--- a/src/utilities/_borders.scss
+++ b/src/utilities/_borders.scss
@@ -1,6 +1,7 @@
 .border {
   @include color('border-color','primary' );
-  border: 2px solid;
+  border-style: solid;
+  border-width: 2px;
 }
 
 .border,
@@ -36,7 +37,8 @@
 
 .child-borders>* {
   @include color('border-color', 'primary');
-  border: 2px solid;
+  border-style: solid;
+  border-width: 2px;
 }
 
 .border-white {