From 0f3960cffaf80eccc2b85e4f5d2d8558dfc633f6 Mon Sep 17 00:00:00 2001
From: Clement Ho <ClemMakesApps@gmail.com>
Date: Thu, 29 Sep 2016 14:28:33 -0500
Subject: Replace unique keyframes mixin with specific keyframe animation names

---
 app/assets/stylesheets/framework/logo.scss | 78 ++++++++++++++----------------
 1 file changed, 36 insertions(+), 42 deletions(-)

(limited to 'app/assets/stylesheets/framework/logo.scss')

diff --git a/app/assets/stylesheets/framework/logo.scss b/app/assets/stylesheets/framework/logo.scss
index 3ee3fb4cee5..c214eabcad7 100644
--- a/app/assets/stylesheets/framework/logo.scss
+++ b/app/assets/stylesheets/framework/logo.scss
@@ -1,15 +1,3 @@
-@mixin unique-keyframes {
-  $animation-name: unique-id();
-  @include webkit-prefix(animation-name, $animation-name);
-
-  @-webkit-keyframes #{$animation-name} {
-    @content;
-  }
-  @keyframes #{$animation-name} {
-    @content;
-  }
-}
-
 @mixin tanuki-logo-colors($path-color) {
   fill: $path-color;
   transition: all 0.8s;
@@ -20,28 +8,6 @@
   }
 }
 
-@mixin tanuki-second-highlight-animations($tanuki-color) {
-  @include unique-keyframes {
-    10%, 80% {
-      fill: #{$tanuki-color}
-    }
-    20%, 90% {
-      fill: lighten($tanuki-color, 25%);
-    }
-  }
-}
-
-@mixin tanuki-forth-highlight-animations($tanuki-color) {
-  @include unique-keyframes {
-    30%, 60% {
-      fill: #{$tanuki-color};
-    }
-    40%, 70% {
-      fill: lighten($tanuki-color, 25%);
-    }
-  }
-}
-
 .tanuki-logo {
 
   .tanuki-left-ear,
@@ -67,7 +33,7 @@
     }
 
     .tanuki-left-cheek {
-      @include unique-keyframes {
+      @include include-keyframes(animate-tanuki-left-cheek) {
         0%, 10%, 100% {
           fill: lighten($tanuki-yellow, 25%);
         }
@@ -78,15 +44,29 @@
     }
 
     .tanuki-left-eye {
-      @include tanuki-second-highlight-animations($tanuki-orange);
+      @include include-keyframes(animate-tanuki-left-eye) {
+        10%, 80% {
+          fill: $tanuki-orange;
+        }
+        20%, 90% {
+          fill: lighten($tanuki-orange, 25%);
+        }
+      }
     }
 
     .tanuki-left-ear {
-      @include tanuki-second-highlight-animations($tanuki-red);
+      @include include-keyframes(animate-tanuki-left-ear) {
+        10%, 80% {
+          fill: $tanuki-red;
+        }
+        20%, 90% {
+          fill: lighten($tanuki-red, 25%);
+        }
+      }
     }
 
     .tanuki-nose {
-      @include unique-keyframes {
+      @include include-keyframes(animate-tanuki-nose) {
         20%, 70% {
           fill: $tanuki-red;
         }
@@ -97,15 +77,29 @@
     }
 
     .tanuki-right-eye {
-      @include tanuki-forth-highlight-animations($tanuki-orange);
+      @include include-keyframes(animate-tanuki-right-eye) {
+        30%, 60% {
+          fill: $tanuki-orange;
+        }
+        40%, 70% {
+          fill: lighten($tanuki-orange, 25%);
+        }
+      }
     }
 
     .tanuki-right-ear {
-      @include tanuki-forth-highlight-animations($tanuki-red);
+      @include include-keyframes(animate-tanuki-right-ear) {
+        30%, 60% {
+          fill: $tanuki-red;
+        }
+        40%, 70% {
+          fill: lighten($tanuki-red, 25%);
+        }
+      }
     }
 
     .tanuki-right-cheek {
-      @include unique-keyframes {
+      @include include-keyframes(animate-tanuki-right-cheek) {
         40% {
           fill: $tanuki-yellow;
         }
@@ -115,4 +109,4 @@
       }
     }
   }
-}
\ No newline at end of file
+}
-- 
cgit v1.2.1