From 07f60d48a7a31ef215ecfc848487f1c1bee1d19d Mon Sep 17 00:00:00 2001
From: Melvin Valster <melvin.valster@gmail.com>
Date: Mon, 22 Jul 2019 23:12:39 +0200
Subject: [PATCH] Calculate :active state using lighten()

---
 src/components/Icon.scss | 6 ++++--
 src/sass/_config.scss    | 1 +
 2 files changed, 5 insertions(+), 2 deletions(-)

diff --git a/src/components/Icon.scss b/src/components/Icon.scss
index 486b58b..7790e25 100644
--- a/src/components/Icon.scss
+++ b/src/components/Icon.scss
@@ -1,3 +1,5 @@
+@import "../sass/_config";
+
 .icon {
   position: relative;
   background-position: center;
@@ -7,13 +9,13 @@
   
   &:hover {
     .icon__bg {
-      box-shadow: inset 0px 0px 6px 3px rgba(99, 150, 214, .8);
+      box-shadow: inset 0px 0px 6px 3px rgba($color-icon-overlay, .8);
     }
   }
 
   &:active {
     .icon__bg {
-      box-shadow: inset 0px 0px 6px 3px rgba(99, 150, 214, 1);
+      box-shadow: inset 0px 0px 6px 3px rgba(lighten($color-icon-overlay, 20%), .8);
     }
   }
 
diff --git a/src/sass/_config.scss b/src/sass/_config.scss
index 6188427..e1fb684 100644
--- a/src/sass/_config.scss
+++ b/src/sass/_config.scss
@@ -11,3 +11,4 @@ $color-yellow: #ffd100;
 $color-green: #1eff00;
 $color-dark-green: #40bf40;
 $color-subtle: #9d9d9d;
+$color-icon-overlay: #6396d6;
\ No newline at end of file