From 631a3e6ccbf14c9757dc4fd454b3a159acbdcd91 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fe=CC=81lix=20Pe=CC=81ault?= <hello@flayks.com>
Date: Sat, 29 Feb 2020 10:46:41 +0100
Subject: [PATCH] Rethink buttons hover transitions

---
 src/atoms/Button.svelte              | 14 ++++----
 src/atoms/LinkTranslate.svelte       |  4 +--
 src/style/atoms/_button-outline.scss | 39 ++++++++++----------
 src/style/atoms/_button.scss         | 53 +++++++++++++---------------
 4 files changed, 55 insertions(+), 55 deletions(-)

diff --git a/src/atoms/Button.svelte b/src/atoms/Button.svelte
index 8507b47..4ed08cf 100644
--- a/src/atoms/Button.svelte
+++ b/src/atoms/Button.svelte
@@ -2,19 +2,21 @@
     export let href = '#'
     export let type = 'a'
     export let text = ''
-
-    const hasSlot = arguments[1].$$slots !== undefined
 </script>
 
 {#if type === 'button'}
-<button class={$$props.class ? $$props.class : 'button'} class:button-icon={hasSlot} data-text={text} on:click>
+<button class={$$props.class ? $$props.class : 'button'} on:click>
     <slot></slot>
-    <span>{text}</span>
+    <div class="text" data-text={text}>
+        <span>{text}</span>
+    </div>
 </button>
 
 {:else}
-<a {href} class={$$props.class ? $$props.class : 'button'} class:button-icon={hasSlot} data-text={text} on:click>
+<a {href} class={$$props.class ? $$props.class : 'button'} on:click>
     <slot></slot>
-    <span>{text}</span>
+    <div class="text" data-text={text}>
+        <span>{text}</span>
+    </div>
 </a>
 {/if}
diff --git a/src/atoms/LinkTranslate.svelte b/src/atoms/LinkTranslate.svelte
index 64dafcc..e5c35b0 100644
--- a/src/atoms/LinkTranslate.svelte
+++ b/src/atoms/LinkTranslate.svelte
@@ -1,13 +1,13 @@
 <script>
     import * as fn from '../functions'
 
-    export let href = ''
+    export let href = '/'
     export let text = ''
     export let target = ''
     export let rel = ''
 </script>
 
-<a {href} class="link-translate" {target} {rel}>
+<a class="link-translate" {href} {target} {rel}>
     <slot />
     <div class="text" data-text={text}>
         <span>{text}</span>
diff --git a/src/style/atoms/_button-outline.scss b/src/style/atoms/_button-outline.scss
index b66c707..27423db 100644
--- a/src/style/atoms/_button-outline.scss
+++ b/src/style/atoms/_button-outline.scss
@@ -23,26 +23,29 @@
         font-size: rem(18px);
     }
 
-    span {
-        display: block;
-    }
 
     // Second text
-    &:after {
-        opacity: 0;
-        content: attr(data-text);
-        position: absolute;
-        display: block;
-        text-align: center;
-        top: 50%;
-        left: 0;
-        right: 0;
-        transform: translateY(-120%);
-    }
+    .text {
+        span {
+            display: block;
+        }
 
-    span, &:after {
-        transition: transform 275ms $ease-cubic, opacity 275ms $ease-cubic;
-        will-change: transform, opacity;
+        &:after {
+            opacity: 0;
+            content: attr(data-text);
+            position: absolute;
+            display: block;
+            text-align: center;
+            top: 50%;
+            left: 0;
+            right: 0;
+            transform: translateY(-120%);
+        }
+
+        span, &:after {
+            transition: transform 275ms $ease-cubic, opacity 275ms $ease-cubic;
+            will-change: transform, opacity;
+        }
     }
 
     // Disabled
@@ -60,7 +63,7 @@
             opacity: 0;
             transform: translateY(100%);
         }
-        &:after {
+        .text:after {
             opacity: 1;
             transform: translateY(-50%);
         }
diff --git a/src/style/atoms/_button.scss b/src/style/atoms/_button.scss
index f9df53e..09c9651 100644
--- a/src/style/atoms/_button.scss
+++ b/src/style/atoms/_button.scss
@@ -48,33 +48,30 @@
     }
 
     // Text
+    .text {
+        position: relative;
+        overflow: hidden;
+
+        &:after {
+            content: attr(data-text);
+            opacity: 0;
+            display: block;
+            position: absolute;
+            top: 50%;
+            left: 0;
+            width: 100%;
+            transform: translateY(-120%);
+        }
+    }
+
     span {
         display: block;
     }
-    &:after {
-        opacity: 0;
-        content: attr(data-text);
-        position: absolute;
-        display: block;
-        top: 50%;
-        left: 0;
-        width: 100%;
-        transform: translateY(-120%);
-    }
-    span, &:after {
+    span, .text:after {
         transition: transform 275ms $ease-cubic, opacity 275ms $ease-cubic;
         will-change: transform, opacity;
     }
 
-    // Button has an icon (offset the hovered text)
-    &-icon:after {
-        left: 13px;
-
-        @include breakpoint (sm) {
-            left: 19px;
-        }
-    }
-
     // Hover
     &:hover {
         color: #fff;
@@ -86,15 +83,13 @@
         .anim {
             animation-play-state: running;
         }
-        span {
-            opacity: 0;
-            transform: translateY(100%);
-        }
-        &:after {
-            opacity: 1;
-            transform: translateY(-47%);
-
-            @include breakpoint (sm) {
+        .text {
+            span {
+                opacity: 0;
+                transform: translateY(100%);
+            }
+            &:after {
+                opacity: 1;
                 transform: translateY(-50%);
             }
         }