1
0
Fork 0
mirror of https://github.com/betagouv/mon-entreprise synced 2025-02-09 01:45:03 +00:00
mon-entreprise/source/components/Sondage.css
Johan Girod 74a41fa5c4 Change la manière dont on récolte les retour utilisateurs
Les retours peuvent maintenant etre récolté à deux moments. Soit
juste après le calcul de la première estimation, soit lorsque
l'utilisateur a terminé la simulation et répondu à toutes les
question. Le choix est determiné au hasard (jet d'une piece).

De plus, au lieu d'un simple champs texte, on a maintenant un
formulaire typeforme contenant avec des textes plus riches.

Enfin, les boutons de retours apparaissent en bas de l'écran
avec une petite animation qui attire l'oeil.
2018-05-04 15:03:16 +02:00

57 lines
1.2 KiB
CSS

.sondage {
background: white;
display: inline-block;
color: rgb(41, 117, 209);
padding: 1em;
border: 2px solid rgb(41, 117, 209);
box-shadow: 0px 1px 9px 0px rgba(0, 0, 0, 0.45);
border-bottom: none;
border-radius: 0.3em;
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}
.sondage__container {
position: fixed;
left: 0;
right: 0;
text-align: center;
bottom: 0;
}
.sondage__closeButton {
margin-left: 0.5em;
}
.sondage__text {
margin-right: 1em;
}
.slide-blurred-bottom-enter {
animation: slide-in-blurred-bottom 0.8s cubic-bezier(0.23, 1, 0.32, 1) both;
animation-delay: 2s;
transform: translateY(1000px) scaleY(2.5) scaleX(0.2);
transform-origin: 50% 100%;
filter: blur(40px);
opacity: 0;
}
.slide-blurred-bottom-leave {
animation: slide-in-blurred-bottom 0.3s cubic-bezier(0.32, 1, 0.23, 1) both
reverse;
}
/**
* ----------------------------------------
* animation slide-in-blurred-bottom
* ----------------------------------------
*/
@keyframes slide-in-blurred-bottom {
0% {
transform: translateY(1000px) scaleY(2.5) scaleX(0.2);
transform-origin: 50% 100%;
filter: blur(40px);
opacity: 0;
}
100% {
transform: translateY(0) scaleY(1) scaleX(1);
transform-origin: 50% 50%;
filter: blur(0);
opacity: 1;
}
}