Merge branch 'comments-pending'

* comments-pending:
  #128 remove submit input btn--transparent class
  #128 add isSubmitting class and simplify .btn[disabled] style

src/assets/css/src/2.blocks.button.css

@@ -30,14 +30,12 @@
 
 .btn[disabled] {
   cursor: not-allowed;
-  --btn-background: var(--color-black-10);
+  opacity: .6;
-  --btn-color: var(--color-black-20) !important;
-  --icon-color: var(--color-black-20) !important;
 }
 .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  }
+}

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"