From b54eef74e890a2029cf8b3a3d6f30162036ac52c Mon Sep 17 00:00:00 2001
From: timotheegoguely <timothee@goguely.com>
Date: Wed, 19 Feb 2025 11:02:41 +0100
Subject: [PATCH 1/2] #128 add isSubmitting class and simplify .btn[disabled]
 style

---
 src/assets/css/src/2.blocks.button.css | 17 +++++++++++++----
 1 file changed, 13 insertions(+), 4 deletions(-)

diff --git a/src/assets/css/src/2.blocks.button.css b/src/assets/css/src/2.blocks.button.css
index 4fb07bc..5153fc6 100644
--- a/src/assets/css/src/2.blocks.button.css
+++ b/src/assets/css/src/2.blocks.button.css
@@ -30,14 +30,12 @@
 
 .btn[disabled] {
   cursor: not-allowed;
-  --btn-background: var(--color-black-10);
-  --btn-color: var(--color-black-20) !important;
-  --icon-color: var(--color-black-20) !important;
+  opacity: .6;
 }
 .btn--white[disabled] {
   --btn-background: var(--color-white);
   --btn-color: var(--color-grey-700) !important;
-  opacity: .5;
+  opacity: .6;
 }
 
 .btn.active,
@@ -213,3 +211,14 @@ input[type="checkbox"]:checked + .btn--primary {
   --btn-background: var(--color-dtl-15);
   --btn-color: var(--color-dtl);
 }
+
+.btn.isSubmitting {
+  mask-image: linear-gradient(to right, rgba(0, 0, 0, 1) 25%, rgba(0, 0, 0, .75), rgba(0, 0, 0, 1) 50%);
+  mask-size: 400% 100%;
+  animation: clip-slide 2s infinite cubic-bezier(0.25, 1, 0.5, 1) both;
+}
+
+@keyframes clip-slide {
+  from { mask-position: right }
+  to   { mask-position: left  }
+}

From a9679af2564eac704f99f46da4c49b54b45d524b Mon Sep 17 00:00:00 2001
From: timotheegoguely <timothee@goguely.com>
Date: Wed, 19 Feb 2025 11:04:13 +0100
Subject: [PATCH 2/2] #128 remove submit input btn--transparent class

---
 src/components/comments/Comments.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/comments/Comments.vue b/src/components/comments/Comments.vue
index 3e5544f..02c3912 100644
--- a/src/components/comments/Comments.vue
+++ b/src/components/comments/Comments.vue
@@ -97,7 +97,7 @@
       <footer class="flex">
         <input
           type="submit"
-          class="btn btn--tranparent"
+          class="btn"
           :class="{ submitting: isSubmitting }"
           :value="isSubmitting ? 'En cours' : undefined"
           :disabled="isSubmitting ? true : undefined"