host/paulnicoue
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Edit projects section

Browse source
This commit is contained in:
Paul Nicoué 2023-03-03 12:00:04 +01:00
parent 6c9c179283
commit 51fe86d804
13 changed files with 380 additions and 208 deletions
Download patch file Download diff file Expand all files Collapse all files

18
components/ContactFormValidation.vue
View file

@ -2,8 +2,8 @@
<div class="contact-form-validation">
<button class="contact-form-validation__button" @click="$emit('sendEmail')">
<span class="contact-form-validation__button-text">Envoyer</span>
<svg class="contact-form-validation__button-icon" aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg">
<span>Envoyer</span>
<svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg">
<line x1="23" y1="1" x2="10.9" y2="13.1"/>
<polygon points="23 1 15.3 23 10.9 13.1 1 8.7 23 1"/>
</svg>
@ -13,8 +13,8 @@
</Transition>
<Transition name="fade-in-expand-height">
<div class="contact-form-validation__message" v-show="isValidated" v-click-outside="hideValidationMessage">
<p class="contact-form-validation__message-success" v-if="isSuccessful">Votre message a bien été envoyé !</p>
<p class="contact-form-validation__message-error" v-else>Une erreur est survenue... Vérifiez les champs saisis ou contactez-moi à l'adresse e-mail contact@paulnicoue.com</p>
<p class="contact-form-validation__success" v-if="isSuccessful">Votre message a bien été envoyé !</p>
<p class="contact-form-validation__error" v-else>Une erreur est survenue... Vérifiez les champs saisis ou contactez-moi à l'adresse e-mail contact@paulnicoue.com</p>
</div>
</Transition>
</div>
@ -89,8 +89,8 @@
place-self: center end;
width: 2.5rem;
height: 2.5rem;
border-top: 2px solid var(--accent-color);
border-right: 2px solid var(--accent-color);
border-top: 2px solid var(--primary-accent-color);
border-right: 2px solid var(--primary-accent-color);
border-bottom: 2px solid transparent;
border-radius: 50%;
animation: rotate-360 800ms linear infinite;
@ -98,10 +98,10 @@
&__message {
grid-area: message;
}
&-error {
color: var(--error-color);
}
&__error {
color: var(--secondary-accent-color);
}
}