diff --git a/src/components/molecules/EmailForm.svelte b/src/components/molecules/EmailForm.svelte index ee98ee0..e22b15d 100644 --- a/src/components/molecules/EmailForm.svelte +++ b/src/components/molecules/EmailForm.svelte @@ -33,7 +33,7 @@
{#if past} - + See past issues diff --git a/src/style/molecules/_newsletter-form.scss b/src/style/molecules/_newsletter-form.scss index 3e5bbce..19fff99 100644 --- a/src/style/molecules/_newsletter-form.scss +++ b/src/style/molecules/_newsletter-form.scss @@ -53,7 +53,7 @@ } // States - &.is-focused { + &.is-focused, &:hover { box-shadow: inset 0 0 0 4px $color-secondary; } } @@ -78,6 +78,9 @@ text-decoration: none; color: $color-text; + &, span { + transition: color 0.2s, border-color 0.2s; + } span { display: block; padding-bottom: 2px; diff --git a/src/style/organisms/_newsletter.scss b/src/style/organisms/_newsletter.scss index 38a3113..3060a34 100644 --- a/src/style/organisms/_newsletter.scss +++ b/src/style/organisms/_newsletter.scss @@ -33,9 +33,22 @@ margin-bottom: 40px; } } + .past-issues { + &:hover { + &, span { + color: $color-secondary; + } + span { + border-color: $color-secondary; + } + } + } } - // Variants + + /* + ** Variants + */ // Default color &--default { background: $color-tertiary 50% 0 / cover url(#{$dir-img}/newsletter-beige.jpg) no-repeat;