From 04e5ea01f2472aec6b6e14f0f9b15c3702a6dce3 Mon Sep 17 00:00:00 2001
From: Kazhnuz <antoine@sortilege.net>
Date: Sun, 14 Oct 2018 16:50:55 +0200
Subject: [PATCH] style: use shadow variables for box-shadow

---
 css/style.css   | 14 +++++++-------
 scss/style.scss | 32 ++++++++++++++++----------------
 2 files changed, 23 insertions(+), 23 deletions(-)

diff --git a/css/style.css b/css/style.css
index 7115c5a..e0587de 100644
--- a/css/style.css
+++ b/css/style.css
@@ -31,13 +31,13 @@ header h1 {
   text-align: center; }
 
 .navbar {
-  box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.3);
+  box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.3);
   border-width: 1px 0px 1px 0px;
   border-style: solid;
   border-color: rgba(0, 0, 0, 0.3); }
 
 .dropdown-menu {
-  box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.2), inset 0px -2px 0px rgba(0, 0, 0, 0.2); }
+  box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.3), inset 0px -2px 0px rgba(0, 0, 0, 0.2); }
 
 /* ------------------ FOOTER ------------------- */
 footer {
@@ -69,12 +69,12 @@ a.social-link:hover {
 
 /* ------------------ CARDS ------------------- */
 .card {
-  box-shadow: 0px 2px 12px rgba(0, 0, 0, 0.3);
+  box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.3);
   border-width: 0px;
   margin-bottom: 1.2em; }
 
 .card-shadow {
-  box-shadow: 0px 2px 12px rgba(0, 0, 0, 0.3), inset 0px -2px 0px rgba(0, 0, 0, 0.2); }
+  box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.3), inset 0px -2px 0px rgba(0, 0, 0, 0.2); }
 
 /* header and titles */
 .card-header {
@@ -194,7 +194,7 @@ a.list-group-item:hover {
   border-width: 1px;
   border-color: rgba(0, 0, 0, 0.3);
   color: rgba(0, 0, 0, 0.7);
-  box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.3); }
+  box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.3); }
 
 .alert a, .alert-link {
   color: rgba(0, 0, 0, 0.7);
@@ -202,7 +202,7 @@ a.list-group-item:hover {
 
 /* ------------------ BREADCRUMB ------------------- */
 .breadcrumb {
-  box-shadow: 0px 2px 12px rgba(0, 0, 0, 0.3), inset 0px -2px 0px rgba(0, 0, 0, 0.2);
+  box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.3), inset 0px -2px 0px rgba(0, 0, 0, 0.2);
   border-color: rgba(0, 0, 0, 0.3);
   border-width: 1px;
   background-color: #eeeeec;
@@ -237,7 +237,7 @@ a.list-group-item:hover {
 .card-preview {
   width: 100%;
   margin: auto;
-  box-shadow: 0px 2px 12px rgba(0, 0, 0, 0.3), inset 0px -2px 0px rgba(0, 0, 0, 0.2); }
+  box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.3), inset 0px -2px 0px rgba(0, 0, 0, 0.2); }
 
 .preview-link:hover {
   text-decoration: none !important; }
diff --git a/scss/style.scss b/scss/style.scss
index ce98f0c..ce44954 100644
--- a/scss/style.scss
+++ b/scss/style.scss
@@ -41,14 +41,14 @@ header h1 {
 }
 
 .navbar {
-  box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.3);
+  box-shadow: $large-shadow;
   border-width: 1px 0px 1px 0px;
   border-style: solid;
   border-color: rgba(0,0,0,0.3)
 }
 
 .dropdown-menu {
-  box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.2), inset 0px -2px 0px rgba(0, 0, 0, 0.2);
+  box-shadow: $narrow-shadow, $inset-shadow;
 }
 
 
@@ -91,13 +91,13 @@ a.social-link:hover {
 /* ------------------ CARDS ------------------- */
 
 .card {
-	box-shadow: 0px 2px 12px rgba(0, 0, 0, 0.3);
+	box-shadow: $large-shadow;
   border-width:0px;
   margin-bottom:1.2em;
 }
 
 .card-shadow {
-  box-shadow: 0px 2px 12px rgba(0, 0, 0, 0.3), inset 0px -2px 0px rgba(0, 0, 0, 0.2);
+  box-shadow: $large-shadow, $inset-shadow;
 }
 
 /* header and titles */
@@ -111,7 +111,7 @@ a.social-link:hover {
 	border-width:1px;
   border-color:rgba(0,0,0,0.3);
   font-size:1.1em;
-  box-shadow: inset 0px 2px 0px rgba(255, 255, 255, 0.1);
+  box-shadow: $inset-relief;
 	text-shadow: 0px 1px 1px rgba(0,0,0,0.3);
   font-weight:600;
 }
@@ -182,13 +182,13 @@ a.list-group-item:hover {
 	border-style:solid;
 	border-width:1px;
   border-color:rgba(0, 0, 0, 0.3);
-	box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.3), inset 0px -2px 0px rgba(0, 0, 0, 0.2);
+	box-shadow: $large-shadow, $inset-shadow;
 	text-shadow: 0px -1px 0px rgba(0,0,0,0.3);
 }
 
 .btn:hover {
   position:relative;
-	box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.3), inset 0px -2px 0px rgba(0, 0, 0, 0.2);
+	box-shadow: $narrow-shadow, $inset-shadow;
   top:1px;
 	border-style:solid;
 	border-width:1px;
@@ -197,7 +197,7 @@ a.list-group-item:hover {
 
 .btn:active {
   position:relative;
-	box-shadow: inset 0px 2px 0px rgba(0, 0, 0, 0.2);
+	box-shadow: $inset-shadow-inverted;
   top:2px;
 	border-style:solid;
 	border-width:1px;
@@ -205,23 +205,23 @@ a.list-group-item:hover {
 }
 
 .btn-group {
-	box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.3);
+	box-shadow: $large-shadow;
 }
 
 .btn-group .btn {
-	box-shadow: inset 0px -2px 0px rgba(0, 0, 0, 0.2);
+	box-shadow: $inset-shadow;
 }
 
 .btn-group .btn:hover {
   position:relative;
   top:1px;
-	box-shadow: inset 0px -2px 0px rgba(0, 0, 0, 0.2);
+	box-shadow: $inset-shadow;
 }
 
 .btn-group .btn:active, .btn:not(:disabled):not(.disabled):active, .btn:not(:disabled):not(.disabled).active,
 .show > .btn.dropdown-toggle {
   position:relative;
-	box-shadow: inset 0px 2px 0px rgba(0, 0, 0, 0.2)!important;
+	box-shadow: $inset-shadow-inverted!important;
   top:2px;
 	border-style:solid;
 	border-width:1px;
@@ -230,7 +230,7 @@ a.list-group-item:hover {
 
 .btn:focus, .btn-primary:focus, .btn-secondary:focus, .btn-danger:focus, .btn-warning:focus, .btn-success:focus, .btn-info:focus, .btn-dark:focus, .btn-light:focus {
   position:relative;
-	box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.3), inset 0px -2px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 2px rgba(0, 0, 0, 0.3);
+	box-shadow: $narrow-shadow, $inset-shadow, 0px 0px 0px 2px rgba(0, 0, 0, 0.3);
   top:1px;
   outline: none;
 }
@@ -242,7 +242,7 @@ a.list-group-item:hover {
 	border-width:1px;
   border-color:rgba(0, 0, 0, 0.3);
   color:rgba(0, 0, 0, 0.7);
-  box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.3)
+  box-shadow: $large-shadow;
 }
 
 .alert a, .alert-link {
@@ -253,7 +253,7 @@ a.list-group-item:hover {
 /* ------------------ BREADCRUMB ------------------- */
 
 .breadcrumb {
-	box-shadow: 0px 2px 12px rgba(0, 0, 0, 0.3), inset 0px -2px 0px rgba(0, 0, 0, 0.2);
+	box-shadow: $large-shadow, $inset-shadow;
   border-color:rgba(0,0,0,0.3);
   border-width:1px;
   background-color:#eeeeec;
@@ -308,7 +308,7 @@ a.list-group-item:hover {
   width:100%;
   
   margin:auto;
-  box-shadow: 0px 2px 12px rgba(0, 0, 0, 0.3), inset 0px -2px 0px rgba(0, 0, 0, 0.2);
+  box-shadow: $large-shadow, $inset-shadow;
 }
 
 .preview-link:hover {