From fe2abe7dc5c41dd593c7f95239ff94a2d9ee2fe1 Mon Sep 17 00:00:00 2001
From: Dominik Korsa <dominik.korsa@gmail.com>
Date: Mon, 4 Mar 2019 19:28:03 +0100
Subject: [PATCH] Update button hover and focus effects

---
 src/components/HomeMainHeader.vue | 24 ++++++++++++++++++++++++
 1 file changed, 24 insertions(+)

diff --git a/src/components/HomeMainHeader.vue b/src/components/HomeMainHeader.vue
index 0df13f5..7f1c03f 100644
--- a/src/components/HomeMainHeader.vue
+++ b/src/components/HomeMainHeader.vue
@@ -157,6 +157,18 @@ export default {
           0px 4px 5px 0px rgba(0, 0, 0, 0.14),
           0px 1px 10px 0px rgba(0, 0, 0, 0.12);
           border-radius: 8px;
+        transition: box-shadow 150ms;
+      }
+
+      &:focus {
+        outline: none;
+      }
+
+      &:hover img, &:focus img {
+        box-shadow:
+          0px 11px 15px -7px rgba(0, 0, 0, 0.2),
+          0px 24px 38px 3px rgba(0, 0, 0, 0.14),
+          0px 9px 46px 8px rgba(0, 0, 0, 0.12);
       }
     }
 
@@ -179,6 +191,18 @@ export default {
         0px 2px 4px -1px rgba(0, 0, 0, 0.2),
         0px 4px 5px 0px rgba(0, 0, 0, 0.14),
         0px 1px 10px 0px rgba(0, 0, 0, 0.12);
+      transition: box-shadow 150ms;
+
+      &:focus {
+        outline: none;
+      }
+
+      &:focus, &:hover {
+        box-shadow:
+          0px 11px 15px -7px rgba(0, 0, 0, 0.2),
+          0px 24px 38px 3px rgba(0, 0, 0, 0.14),
+          0px 9px 46px 8px rgba(0, 0, 0, 0.12);
+      }
 
       @media screen and (max-width: 550px) {
         margin-left: 0;