diff --git a/src/atoms/Button.svelte b/src/atoms/Button.svelte index 5489f0c..db01697 100644 --- a/src/atoms/Button.svelte +++ b/src/atoms/Button.svelte @@ -4,20 +4,17 @@ export let className = 'button' export let text = '' - // Wrap string's each letters into a span - // const textSpans = text - // .replace(/(<.*?>)|(.)/g, letter => letter.replace(/./g, '$&')) - // .replace(/ /g, '\u00a0') + const hasSlot = arguments[1].$$slots !== undefined {#if type === 'button'} - {:else} - + {text} diff --git a/src/style/atoms/_button.scss b/src/style/atoms/_button.scss index 6fd1d68..66aea85 100644 --- a/src/style/atoms/_button.scss +++ b/src/style/atoms/_button.scss @@ -5,7 +5,7 @@ align-items: center; height: 40px; overflow: hidden; - padding: 0 16px; + padding: 1px 16px 0; background: #fff; font-family: $font-sans-sb; font-size: rem(14px); @@ -56,14 +56,23 @@ position: absolute; display: block; top: 50%; - left: calc(50% + 19px); + left: 0; width: 100%; - transform: translate3d(-50%, -120%, 0); + transform: translate3d(0, -120%, 0); } span, &:after { transition: opacity 275ms $ease-cubic, transform 275ms $ease-cubic; } + // Button has an icon (offset the hovered text) + &-icon:after { + left: 13px; + + @include breakpoint (sm) { + left: 19px; + } + } + // Hover &:hover { color: #fff; @@ -81,7 +90,11 @@ } &:after { opacity: 1; - transform: translate3d(-50%, -50%, 0); + transform: translate3d(0, -47%, 0); + + @include breakpoint (sm) { + transform: translate3d(0, -50%, 0); + } } } }