From 5950458faaad1492124aa6e841acfca875ca35f0 Mon Sep 17 00:00:00 2001
From: drewcassidy <drewcassidy@me.com>
Date: Fri, 24 Nov 2017 22:16:50 -0800
Subject: [PATCH] animate the flags

---
 _sass/_sidebar.scss | 84 +++++++++++++++++++++++++++++----------------
 1 file changed, 55 insertions(+), 29 deletions(-)

diff --git a/_sass/_sidebar.scss b/_sass/_sidebar.scss
index c22ad14..26a2691 100644
--- a/_sass/_sidebar.scss
+++ b/_sass/_sidebar.scss
@@ -1,7 +1,7 @@
-@import 'colors';
 @import 'fonts';
 
 $flag-shadow: rgba(black, 0.2);
+$animate-time: 0.03s;
 
 ul#sidebar {
     flex-shrink: 0;
@@ -46,15 +46,23 @@ ul#sidebar {
         mask-image: url('../svg/fold.svg');
     }
 
+
+
     .flagButton {
         display: block;
         float: left;
-        left: 0;
+
         height: 50px;
         width: 160px;
 
         border-radius: 0 5px 5px 0;
 
+        transition: {
+            duration: $animate-time;
+            property: width, border-radius;
+            timing-function: ease-out;
+        }
+
         .flagText {
             font: {
                 family: $sidebar-font;
@@ -86,38 +94,30 @@ ul#sidebar {
         width: 160px;
         background-color: $flag-shadow;
         border-radius: 0 5px 5px 0;
-    }
-}
 
-.flag:hover {
-
-    .flagButton {
-        width: 170px;
-        border-radius: 0;
-    }
-
-    .flagButton::after{
-        width: 170px;
-        border-radius: 0;
+        transition: {
+            duration: $animate-time;
+            property: width, border-radius;
+            timing-function: ease-out;
+        }
     }
 
     .flagPoint{
         position: absolute;
         width: 0; 
         height: 0;
+        left: 160px;
         border-top: 25px solid transparent; 
         border-bottom: 25px solid transparent;
-        border-left-width: 20px; 
+        border-left-width: 0px; 
         border-left-style: solid;
         background-color: transparent;
-        // display: block;
-        // position: absolute;
-        // left:170px;
-        // width: 20px;
-        // height: 50px;
-        // -webkit-mask-image: url('../svg/flag.svg');
-        // mask-image: url('../svg/flag.svg');
-        // //@include prefix(filter, $flag-shadow, o ms moz webkit);
+
+        transition: {
+            duration: $animate-time;
+            property: left, border-left-width;
+            timing-function: ease-out;
+        }
     }
 
     .flagPoint.blue {
@@ -142,13 +142,39 @@ ul#sidebar {
         height: 0;
         border-top: 25px solid transparent; 
         border-bottom: 25px solid transparent;
-        border-left: 20px solid $flag-shadow; 
-         z-index: -1;
-         content: " ";
-         left: -20 + 3px;
-         top: -25 + 4px;
+        border-left: 0px solid $flag-shadow; 
+        z-index: -1;
+        content: " ";
+        left: -20 + 3px;
+        top: -25 + 4px;
 
-     }
+        transition: {
+            duration: $animate-time;
+            property: border-left-width;
+            timing-function: ease-out;
+        }
+    }
+}
+
+.flag:hover {
+
+    .flagButton {
+        width: 170px;
+        border-radius: 0;
+    }
+
+    .flagButton::after{
+        width: 170px;
+        border-radius: 0;
+    }
+
+    .flagPoint {
+        left: 170px;
+        border-left-width: 20px;
+    }
+    .flagPoint::after{
+        border-left-width: 20px;
+    }
 }