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

Add form section

Browse source
This commit is contained in:
Paul Nicoué 2023-01-20 18:08:51 +01:00
parent c6705914e0
commit 2a4cf52465
33 changed files with 1031 additions and 311 deletions
Download patch file Download diff file Expand all files Collapse all files

43
components/AppError.vue
View file

@ -7,7 +7,7 @@
<div class="error__emoticon" aria-hidden="true">¯\(°_o)/¯</div>
<button class="error__button" @click="$emit('handleError')">
<span class="error__button-text">Retourner à la page d'accueil</span>
<svg class="error__button-icon" 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">
<svg class="error__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">
<path d="M 2 8.7 L 12 1 L 22 8.7 L 22 20.8 C 22 22.016 21.006 23 19.778 23 L 4.222 23 C 2.995 23 2 22.016 2 20.8 L 2 8.7 Z"/>
<polyline points="8.667 23 8.667 12 15.333 12 15.333 23"/>
</svg>
@ -35,11 +35,11 @@
<style lang="scss" scoped>
// --------------------------------------------------
// ERROR STYLE
// STYLE
// --------------------------------------------------
main {
padding: 4rem 2rem;
padding: 2rem;
}
.error {
@ -67,6 +67,7 @@
&__emoticon {
opacity: 0;
margin: 0 2rem;
font-family: var(--title-font-family);
font-size: var(--h1-font-size);
font-weight: var(--medium-font-weight);
animation: fade-in-from-top 400ms ease-in-out 600ms forwards;
@ -87,41 +88,7 @@
.error {
&__button {
display: flex;
justify-content: center;
align-items: center;
&-text {
transform: translateX(calc((0.8rem + var(--small-icon-size)) / 2));
transition: transform 200ms ease-in-out;
}
&-icon {
display: inherit;
flex-shrink: 0;
opacity: 0;
width: var(--small-icon-size);
height: var(--small-icon-size);
margin: 0 0 0 0.8rem;
transform: translateX(calc((0.8rem + var(--small-icon-size)) / 2));
transition:
opacity 200ms ease-in-out,
transform 200ms ease-in-out;
}
&:hover,
&:focus,
&:active {
.error__button-text {
transform: translateX(0);
}
.error__button-icon {
opacity: 1;
transform: translateX(0);
}
}
@include button-with-icon;
}
}
}