Merge pull request #38 from incuna/away

get the float-away and sink-away icon mixins working
incuna · Aug 1, 2016 · b2e6923 · b2e6923
2 parents 711ff22 + dbbc6b9
commit b2e6923
Show file tree

Hide file tree

Showing 5 changed files with 49 additions and 27 deletions.
diff --git a/hover/effects/icon-transitions/_icon-float-away.sass b/hover/effects/icon-transitions/_icon-float-away.sass
@@ -1,3 +1,5 @@
+// This mixin requires that 2 identical icons to be present in the html
+
 // Icon Float Away
 @include keyframes(#{$nameSpace}-icon-float-away)
     0%
@@ -12,12 +14,15 @@
     @include icon-setup($icon-size, $position, $spacing-inner, $spacing-outer)
 
     .inline-svg
-        @include prefixed(animation-duration, #{$slowDuration})
-        @include prefixed(animation-fill-mode, forwards)
         padding: 0 1px
-        opacity: 0
+
+        &:nth-of-type(2)
+            @include prefixed(animation-duration, #{$slowDuration})
+            @include prefixed(animation-fill-mode, forwards)
+            opacity: 0
 
     #{$hover-states}
         .inline-svg
-            @include prefixed(animation-name, #{$nameSpace}-icon-float-away)
-            @include prefixed(animation-timing-function, ease-out)
+            &:nth-of-type(2)
+                @include prefixed(animation-name, #{$nameSpace}-icon-float-away)
+                @include prefixed(animation-timing-function, ease-out)
diff --git a/hover/effects/icon-transitions/_icon-sink-away.sass b/hover/effects/icon-transitions/_icon-sink-away.sass
@@ -1,3 +1,5 @@
+// This mixin requires that 2 identical icons to be present in the html
+
 // Icon Sink Away
 @include keyframes(#{$nameSpace}-icon-sink-away)
     0%
@@ -12,15 +14,17 @@
     @include icon-setup($icon-size, $position, $spacing-inner, $spacing-outer)
 
     .inline-svg
-        @include prefixed(transform, translateZ(0))
-        padding: 0 1px
+        &:first-of-type
+            @include prefixed(transform, translateZ(0))
+            padding: 0 1px
 
-    .inline-svg
-        @include prefixed(animation-duration, #{$slowDuration})
-        @include prefixed(animation-fill-mode, forwards)
-        opacity: 0
+        &:nth-of-type(2)
+            @include prefixed(animation-duration, #{$slowDuration})
+            @include prefixed(animation-fill-mode, forwards)
+            opacity: 0
 
     #{$hover-states}
         .inline-svg
-            @include prefixed(animation-name, #{$nameSpace}-icon-sink-away)
-            @include prefixed(animation-timing-function, ease-out)
+            &:nth-of-type(2)
+                @include prefixed(animation-name, #{$nameSpace}-icon-sink-away)
+                @include prefixed(animation-timing-function, ease-out)
diff --git a/index.html b/index.html
@@ -228,6 +228,9 @@ <h4>Icon Transitions</h4>
                         <svg class="inline-svg upload">
                             <use xlink:href="#svg-upload"></use>
                         </svg>
+                        <svg class="inline-svg upload">
+                            <use xlink:href="#svg-upload"></use>
+                        </svg>
                     </button>
                     <button class="example-button icon-float">
                         <span>icon-float</span>
@@ -303,8 +306,11 @@ <h4>Icon Transitions</h4>
                     </button>
                     <button class="example-button icon-sink-away">
                         <span>icon-sink-away</span>
-                        <svg class="inline-svg arrow-left">
-                            <use xlink:href="#svg-arrow-left"></use>
+                        <svg class="inline-svg download">
+                            <use xlink:href="#svg-download"></use>
+                        </svg>
+                        <svg class="inline-svg download">
+                            <use xlink:href="#svg-download"></use>
                         </svg>
                     </button>
                     <button class="example-button icon-sink">

diff --git a/index.html.template b/index.html.template
@@ -206,6 +206,9 @@
                         <svg class="inline-svg upload">
                             <use xlink:href="#svg-upload"></use>
                         </svg>
+                        <svg class="inline-svg upload">
+                            <use xlink:href="#svg-upload"></use>
+                        </svg>
                     </button>
                     <button class="example-button icon-float">
                         <span>icon-float</span>
@@ -281,8 +284,11 @@
                     </button>
                     <button class="example-button icon-sink-away">
                         <span>icon-sink-away</span>
-                        <svg class="inline-svg arrow-left">
-                            <use xlink:href="#svg-arrow-left"></use>
+                        <svg class="inline-svg download">
+                            <use xlink:href="#svg-download"></use>
+                        </svg>
+                        <svg class="inline-svg download">
+                            <use xlink:href="#svg-download"></use>
                         </svg>
                     </button>
                     <button class="example-button icon-sink">

diff --git a/stylesheets/main.css b/stylesheets/main.css