fix: DTL card btn

close #102

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

@@ -97,6 +97,11 @@ input[type="checkbox"]:checked + .btn--primary {
   --btn-border-color: var(--color-white-20);
 }
 
+.btn--xs {
+  padding: .3rem var(--space-12) .35rem;
+  border-radius: var(--rounded-md);
+  max-height: var(--space-32);
+}
 .btn--sm {
   padding: .375rem var(--space-12) .5rem;
   border-radius: var(--rounded-md);
@@ -179,10 +184,8 @@ input[type="checkbox"]:checked + .btn--primary {
   }
 }
 
-.btn:focus-visible {
+.btn--dtl {
-  
+  order: 9999;
-}
+  --btn-background: var(--color-dtl-15);
-
+  --btn-color: var(--color-dtl);
-.btn:active {
-  
 }

src/components/project/cards/Document.vue

@@ -31,7 +31,7 @@
         }}
       </router-link>
     </footer>
-    <div v-if="isDesignToLightStep(step)">Design to light</div>
+    <div class="btn btn--xs btn--dtl | mt-16" v-if="isDesignToLightStep(step)" data-icon="leaf" lang="en">Design to Light</div>
   </article>
 </template>
 <script setup>

src/components/project/cards/Images.vue

@@ -16,15 +16,15 @@
         <div v-else class="card__images" data-icon="document"></div>
       </template>
     </figure>
-    <!-- <footer
+    <footer
       v-if="images[0]?.comments?.length > 0"
       class="order-last | text-sm text-primary font-medium"
     >
       {{ images[0].comments.length }} commentaire{{
         images[0].comments.length > 1 ? "s" : ""
       }}
-    </footer> -->
+    </footer>
-    <div v-if="isDesignToLightStep(step)">Design to light</div>
+    <div class="btn btn--xs btn--dtl | mt-16" v-if="isDesignToLightStep(step)" data-icon="leaf" lang="en">Design to Light</div>
   </article>
 </template>
 <script setup>