flayks/housesof
2
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Add hover on Newsletter module links

Browse Source
This commit is contained in:
Félix Péault
2021-10-18 23:57:31 +02:00
parent 1d6a3b9a93
commit 1aaa12f435
3 changed files with 19 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/molecules/EmailForm.svelte
View File

@@ -33,7 +33,7 @@
<div class="newsletter-form__bottom"> <div class="newsletter-form__bottom">
{#if past} {#if past}
<a href="/subscribe" class="past-issues"> <a href="/subscribe" class="past-issues">
<svg width="20" height="16" viewBox="0 0 20 16" fill="#333" xmlns="http://www.w3.org/2000/svg" aria-label="Newsletter icon"> <svg width="20" height="16" viewBox="0 0 20 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg" aria-label="Newsletter icon">
<path fill-rule="evenodd" clip-rule="evenodd" d="M18 2.346H2a.5.5 0 0 0-.5.5v11.102a.5.5 0 0 0 .5.5h16a.5.5 0 0 0 .5-.5V2.846a.5.5 0 0 0-.5-.5ZM2 .846a2 2 0 0 0-2 2v11.102a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V2.846a2 2 0 0 0-2-2H2Zm13.75 4.25h-2v3h2v-3Zm-2-1a1 1 0 0 0-1 1v3a1 1 0 0 0 1 1h2a1 1 0 0 0 1-1v-3a1 1 0 0 0-1-1h-2ZM3.5 6.5a.5.5 0 0 0 0 1h6a.5.5 0 0 0 0-1h-6Zm.25 3a.5.5 0 0 1 .5-.5h6a.5.5 0 0 1 0 1h-6a.5.5 0 0 1-.5-.5Zm1.25 2a.5.5 0 0 0 0 1h6a.5.5 0 1 0 0-1H5Z" /> <path fill-rule="evenodd" clip-rule="evenodd" d="M18 2.346H2a.5.5 0 0 0-.5.5v11.102a.5.5 0 0 0 .5.5h16a.5.5 0 0 0 .5-.5V2.846a.5.5 0 0 0-.5-.5ZM2 .846a2 2 0 0 0-2 2v11.102a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V2.846a2 2 0 0 0-2-2H2Zm13.75 4.25h-2v3h2v-3Zm-2-1a1 1 0 0 0-1 1v3a1 1 0 0 0 1 1h2a1 1 0 0 0 1-1v-3a1 1 0 0 0-1-1h-2ZM3.5 6.5a.5.5 0 0 0 0 1h6a.5.5 0 0 0 0-1h-6Zm.25 3a.5.5 0 0 1 .5-.5h6a.5.5 0 0 1 0 1h-6a.5.5 0 0 1-.5-.5Zm1.25 2a.5.5 0 0 0 0 1h6a.5.5 0 1 0 0-1H5Z" />
</svg> </svg>
<span>See past issues</span> <span>See past issues</span>

5
src/style/molecules/_newsletter-form.scss
View File

@@ -53,7 +53,7 @@
} }
// States // States
&.is-focused { &.is-focused, &:hover {
box-shadow: inset 0 0 0 4px $color-secondary; box-shadow: inset 0 0 0 4px $color-secondary;
} }
} }
@@ -78,6 +78,9 @@
text-decoration: none; text-decoration: none;
color: $color-text; color: $color-text;
&, span {
transition: color 0.2s, border-color 0.2s;
}
span { span {
display: block; display: block;
padding-bottom: 2px; padding-bottom: 2px;

15
src/style/organisms/_newsletter.scss
View File

@@ -33,9 +33,22 @@
margin-bottom: 40px; margin-bottom: 40px;
} }
} }
.past-issues {
&:hover {
&, span {
color: $color-secondary;
}
span {
border-color: $color-secondary;
}
}
}
} }
// Variants
/*
** Variants
*/
// Default color // Default color
&--default { &--default {
background: $color-tertiary 50% 0 / cover url(#{$dir-img}/newsletter-beige.jpg) no-repeat; background: $color-tertiary 50% 0 / cover url(#{$dir-img}/newsletter-beige.jpg) no-repeat;