From 595f92c6ebc6320cb6a93f5ab50f791ef9dc4fff Mon Sep 17 00:00:00 2001
From: wswidzinski <swidzinskiw@gmail.com>
Date: Tue, 16 Jan 2018 03:03:23 +0100
Subject: [PATCH] Add hover animation

---
 src/hbs/partials/components/button.hbs       |  9 +--------
 src/hbs/partials/components/get-involved.hbs |  1 -
 src/hbs/partials/components/hero.hbs         |  1 -
 src/hbs/partials/components/introduction.hbs |  1 -
 src/hbs/partials/components/structure.hbs    | 14 ++++++--------
 src/styles/components/_button.scss           | 15 ++++++++++++++-
 src/styles/components/_project.scss          |  4 ++++
 src/styles/components/_structure.scss        |  6 +++++-
 8 files changed, 30 insertions(+), 21 deletions(-)

diff --git a/src/hbs/partials/components/button.hbs b/src/hbs/partials/components/button.hbs
index 9ced7ae..70806c2 100644
--- a/src/hbs/partials/components/button.hbs
+++ b/src/hbs/partials/components/button.hbs
@@ -4,14 +4,7 @@
   <div
     class="button__wrapper js-parallax"
     data-rellax-speed="{{ternary rellax-speed rellax-speed 0}}"
-    style="
-    {{#if outlineColor }}
-      color: {{ outlineColor }};
-    {{/if}}
-    {{#if backgroundColor }}
-      background-color: {{ backgroundColor }};
-    {{/if}}
-  "
+    style="{{#if backgroundColor }} background-color: {{ backgroundColor }}; {{/if}}"
   >
     {{#if icon}}
       <div class="button__icon">
diff --git a/src/hbs/partials/components/get-involved.hbs b/src/hbs/partials/components/get-involved.hbs
index 06e1de5..917f4ec 100644
--- a/src/hbs/partials/components/get-involved.hbs
+++ b/src/hbs/partials/components/get-involved.hbs
@@ -16,7 +16,6 @@
           {{#each getInvolved.buttons as |button|}}
             {{> components/button
               class="get-involved__button"
-              outlineColor="#fff"
               label=button.label
               icon=(svg button.icon)
             }}
diff --git a/src/hbs/partials/components/hero.hbs b/src/hbs/partials/components/hero.hbs
index c8d2307..c751f2b 100644
--- a/src/hbs/partials/components/hero.hbs
+++ b/src/hbs/partials/components/hero.hbs
@@ -29,7 +29,6 @@
 
     {{> components/button
       label=hero.button.label
-      outlineColor="#FFF"
       class="hero__button"
       icon=(svg hero.button.icon width="24px" height="24px")
     }}
diff --git a/src/hbs/partials/components/introduction.hbs b/src/hbs/partials/components/introduction.hbs
index 0075e78..9bd11a0 100644
--- a/src/hbs/partials/components/introduction.hbs
+++ b/src/hbs/partials/components/introduction.hbs
@@ -33,7 +33,6 @@
       <div class="introduction__button">
         {{> components/button
           label=introduction.button.label
-          outlineColor="#fff"
           backgroundColor="#000"
           rellax-speed="0.5"
         }}
diff --git a/src/hbs/partials/components/structure.hbs b/src/hbs/partials/components/structure.hbs
index 63bade8..d941db2 100644
--- a/src/hbs/partials/components/structure.hbs
+++ b/src/hbs/partials/components/structure.hbs
@@ -8,14 +8,12 @@
 
       <div class="structure__image"></div>
 
-      <div class="structure__button">
-        {{> components/button
-          label=structure.button.label
-          outlineColor="#ff3a00"
-          backgroundColor="#000"
-          icon=(svg structure.button.icon)
-        }}
-      </div>
+      {{> components/button
+        label=structure.button.label
+        class="structure__button"
+        backgroundColor="#000"
+        icon=(svg structure.button.icon)
+      }}
     </div>
 
     <div class="structure__details">
diff --git a/src/styles/components/_button.scss b/src/styles/components/_button.scss
index cefc7aa..8e787d7 100644
--- a/src/styles/components/_button.scss
+++ b/src/styles/components/_button.scss
@@ -1,10 +1,21 @@
+$_button_transition: all .25s ease-in-out;
+
 .button {
   width: 100%;
   font-family: 'Work Sans';
   font-size: 14px;
   font-weight: 600;
-  color: white;
+  color: $color-white;
   text-transform: uppercase;
+  transition: $_button_transition;
+
+  &:hover {
+    color: $color-orange;
+  }
+
+  &:hover &__icon {
+    transform: scale(1);
+  }
 
   &__wrapper {
     display: inline-flex;
@@ -17,6 +28,8 @@
 
   &__icon {
     margin-right: 10px;
+    transform: scale(.8);
+    transition: $_button_transition;
   }
 
   @media #{$screen-sm} {
diff --git a/src/styles/components/_project.scss b/src/styles/components/_project.scss
index 2b0d5b0..08f5cba 100644
--- a/src/styles/components/_project.scss
+++ b/src/styles/components/_project.scss
@@ -134,6 +134,10 @@
   &__button {
     margin: 10px 0;
 
+    &:hover {
+      color: $color-blue !important;
+    }
+
     @media #{$screen-only-xs}, #{$screen-only-sm} {
       .js-parallax {
         @include disableTransform();
diff --git a/src/styles/components/_structure.scss b/src/styles/components/_structure.scss
index 8110d8c..f84cba6 100644
--- a/src/styles/components/_structure.scss
+++ b/src/styles/components/_structure.scss
@@ -78,7 +78,11 @@
 
   &__button {
     margin-top: 10px;
-    color: $color-scarlet;
+    color: $color-scarlet !important;
+
+    &:hover {
+      color: $color-blue !important;
+    }
 
     @media #{$screen-sm} {
       position: absolute;