GuerillaStudio/compteur-de-greve
1
0
Fork 0
mirror of https://github.com/GuerillaStudio/compteur-de-greve.git synced 2024-10-09 05:19:02 +00:00
Code Issues Activity

Add badge to success message

Browse source
This commit is contained in:
Tixie 2023-03-02 07:50:54 +01:00
parent e885b903cd
commit 32b52e8ec5
2 changed files with 8 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
src/css/2-components/_notifications.scss
View file

@ -60,5 +60,10 @@ $notif-error: $color-red;
.notif--successPlusOne::before {
position: absolute;
top: -4rem;
left: -4rem;
width: 8.4rem;
height: 8.4rem;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='84' height='84' fill='none'%3E%3Cpath fill='%2341DB6D' d='m35.2 8.3 7.2 6.6 7-6.7 3.9 9 9.1-3.4-.1 9.8 9.7.7-4 8.9 8.6 4.6-7.4 6.4 6 7.7-9.3 3 2.3 9.4-9.7-1.1-1.7 9.6-8.4-5-5.5 8-5.6-8L29 73l-2-9.6-9.6 1.4 2.2-9.6-9.4-2.7 5.8-7.8-7.4-6.3 8.5-4.8-4.2-8.8 9.7-.8-.3-9.8 9.2 3.2 3.7-9Z'/%3E%3Cpath fill='%23fff' d='M33.4 53.2 30 38l4.6-1 3.3 15-4.5 1ZM26.9 49l-1-4.6L41 41.2l1 4.5-15 3.4ZM53.3 29.8l4.6 21-5.7 1.2-3.5-15.7-4 3.8-1.1-4.8L48 31l5.3-1.2Z'/%3E%3C/svg%3E%0A");
content: "";
}

6
src/index.njk
View file

@ -24,13 +24,13 @@ permalink:
<h2 class="title-1 mt0">Et <span class="highlighter-underline">vous</span>&nbsp;?</h2>
<div class="flex flex-col">
<div class="notif notif--error" x-bind="error" x-cloak>Message d'erreur à faire</div>
<div class="gridstack">
<div class="gridstack mb15">
<form action="/" method="post" x-bind="form">
<button class="btn btn--big btn--icoYellow w100 mb15" x-bind="button">
<button class="btn btn--big btn--icoYellow w100" x-bind="button">
{% include 'icons/plus-one.svg' %} Je fais grève
</button>
</form>
<div class="notif notif--success" x-bind="thanks" x-cloak>
<div class="notif notif--success notif--successPlusOne" x-bind="thanks" x-cloak>
<strong class="block text-bold text-big mb1">Merci pour votre participation&nbsp;!&nbsp;✨</strong>
<span aria-hidden="true">↓</span>&nbsp;Nous avons <strong class="text-bold">besoin de vous</strong> pour faire du <em class="text-bold">7 mars</em> une journée de mobilisation qui restera dans les mémoires&nbsp;!
</div>