2024-11-10

web/app/themes/haiku-atelier-2024/assets/css/main.css

@@ -181,6 +181,24 @@ button {
   outline: 2px solid transparent;
   transition: 0.2s background, 0.2s color;
 }
+button:focus-visible {
+  z-index: 5;
+  outline: 2px solid var(--couleur-noir);
+}
+button:disabled, button[disabled] {
+  background: repeating-conic-gradient(var(--couleur-noir) 0% 25%, transparent 0% 100%) 1px 0.5px/2px 2px;
+  outline-color: transparent;
+}
+button:active {
+  color: var(--couleur-blanc) !important;
+  background: var(--couleur-noir) !important;
+}
+@media (hover: hover) {
+  button:hover {
+    color: var(--couleur-noir);
+    background: var(--couleur-jaune);
+  }
+}
 button.bouton-case-pleine {
   width: 100%;
   height: 100%;
@@ -198,22 +216,9 @@ button.bouton-blanc-sur-noir {
   color: var(--couleur-blanc);
   background: var(--couleur-noir);
 }
-button:focus-visible {
-  z-index: 5;
-  outline: 2px solid var(--couleur-noir);
-}
-button:disabled, button[disabled] {
-  background: repeating-conic-gradient(var(--couleur-noir) 0% 25%, transparent 0% 100%) 1px 0.5px/2px 2px;
-  outline-color: transparent;
-}
-button:active {
-  color: var(--couleur-blanc) !important;
-  background: var(--couleur-noir) !important;
-}
 @media (hover: hover) {
-  button:hover {
-    color: var(--couleur-noir);
-    background: var(--couleur-jaune);
+  button.bouton-fleche {
+    background: initial;
   }
 }
 
@@ -741,14 +746,14 @@ body:has(#menu-mobile:not([aria-hidden=true])) {
   position: absolute;
   z-index: 5;
   bottom: calc(var(--position-y-fleches) / 2 - var(--espace-l) / 2);
-  width: var(--espace-l);
-  height: var(--espace-l);
-  padding: var(--espace-s);
+  width: 3rem;
+  height: 3rem;
   visibility: hidden;
   opacity: 0;
   border-radius: 100%;
   mix-blend-mode: difference;
   shape-rendering: geometricprecision;
+  padding: var(--espace-s);
   transition: 0.2s opacity, 0.2s visibility;
 }
 .fleches-defilement__bouton:first-of-type {
@@ -757,10 +762,6 @@ body:has(#menu-mobile:not([aria-hidden=true])) {
 .fleches-defilement__bouton:last-of-type {
   right: var(--espace-l);
 }
-.fleches-defilement__bouton svg {
-  width: inherit;
-  height: inherit;
-}
 .fleches-defilement[data-images-presentes-debut] .fleches-defilement__bouton:first-of-type {
   cursor: pointer;
   opacity: 1;

web/app/themes/haiku-atelier-2024/assets/img/icons/fleche-droite.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 15 15"><path d="M8.293 2.293a1 1 0 0 1 1.414 0l4.5 4.5a1 1 0 0 1 0 1.414l-4.5 4.5a1 1 0 0 1-1.414-1.414L11 8.5H1.5a1 1 0 0 1 0-2H11L8.293 3.707a1 1 0 0 1 0-1.414" fill="red"/></svg>
+<svg xmlns="http://www.w4.org/2000/svg" width="15" height="15" viewBox="0 0 15 15"><path d="M8.293 2.293a1 1 0 0 1 1.414 0l4.5 4.5a1 1 0 0 1 0 1.414l-4.5 4.5a1 1 0 0 1-1.414-1.414L11 8.5H1.5a1 1 0 0 1 0-2H11L8.293 3.707a1 1 0 0 1 0-1.414" fill="red"/></svg>

web/app/themes/haiku-atelier-2024/src/sass/base/elements/_boutons.scss

@@ -13,27 +13,6 @@ button {
   outline: 2px solid transparent;
   transition: 0.2s background, 0.2s color;
 
-  &.bouton-case-pleine {
-    width: 100%;
-    height: 100%;
-
-    &--blanc-sur-noir {
-      font-style: italic;
-      text-transform: uppercase;
-      letter-spacing: var(--espacement-inter-lettres-etendu-m);
-
-      &:focus-visible {
-        color: var(--couleur-noir);
-        background: var(--couleur-jaune);
-      }
-    }
-  }
-
-  &.bouton-blanc-sur-noir {
-    color: var(--couleur-blanc);
-    background: var(--couleur-noir);
-  }
-
   &:focus-visible {
     z-index: 5;
     outline: 2px solid var(--couleur-noir);
@@ -56,4 +35,32 @@ button {
       background: var(--couleur-jaune);
     }
   }
+
+  // Particularismes
+  &.bouton-case-pleine {
+    width: 100%;
+    height: 100%;
+
+    &--blanc-sur-noir {
+      font-style: italic;
+      text-transform: uppercase;
+      letter-spacing: var(--espacement-inter-lettres-etendu-m);
+
+      &:focus-visible {
+        color: var(--couleur-noir);
+        background: var(--couleur-jaune);
+      }
+    }
+  }
+
+  &.bouton-blanc-sur-noir {
+    color: var(--couleur-blanc);
+    background: var(--couleur-noir);
+  }
+
+  &.bouton-fleche {
+    @media (hover: hover) {
+      background: initial;
+    }
+  }
 }

web/app/themes/haiku-atelier-2024/src/sass/layouts/_colonnes-photos.scss

@@ -16,14 +16,14 @@
     position: absolute;
     z-index: 5;
     bottom: calc(var(--position-y-fleches) / 2 - var(--espace-l) / 2);
-    width: var(--espace-l);
-    height: var(--espace-l);
-    padding: var(--espace-s);
+    width: 3rem;
+    height: 3rem;
     visibility: hidden;
     opacity: 0;
     border-radius: 100%;
     mix-blend-mode: difference;
     shape-rendering: geometricprecision;
+    padding: var(--espace-s);
     transition: 0.2s opacity, 0.2s visibility;
 
     &:first-of-type {
@@ -33,11 +33,6 @@
     &:last-of-type {
       right: var(--espace-l);
     }
-
-    svg {
-      width: inherit;
-      height: inherit;
-    }
   }
 
   &[data-images-presentes-debut] {

web/app/themes/haiku-atelier-2024/views/parts/en-tete.twig

@@ -80,7 +80,7 @@
   </nav>
 
   {# Bouton « Panier » avec l'indicateur de quantité de Produits #}
-  <section class="compte-panier">
+  <section class="compte-panier" hidden>
     <a
       class="lien-bouton"
       data-contient-articles="{{ articles_presents }}"

web/app/themes/haiku-atelier-2024/views/parts/pages/produit/informations-produit.twig

@@ -137,7 +137,7 @@
       <p class="selecteur-produit__prix">{{ produit.prix }}€</p>
     </section>
 
-    <section class="actions-produit">
+    <section class="actions-produit" hidden>
       <button
         class="bouton-case-pleine"
         disabled

web/app/themes/haiku-atelier-2024/views/parts/pages/produit/photos-produit.twig

@@ -1,13 +1,13 @@
 <div class="fleches-defilement">
   <button
-    class="fleches-defilement__bouton"
+    class="fleches-defilement__bouton bouton-fleche"
     type="button"
   >
     <svg
-      height="15"
+      height="2rem"
       transform="scale(-1 1)"
       viewBox="0 0 15 15"
-      width="15"
+      width="2rem"
       xmlns="http://www.w3.org/2000/svg"
     >
       <path
@@ -18,13 +18,13 @@
   </button>
 
   <button
-    class="fleches-defilement__bouton"
+    class="fleches-defilement__bouton bouton-fleche"
     type="button"
   >
     <svg
-      height="15"
+      height="2rem"
       viewBox="0 0 15 15"
-      width="15"
+      width="2rem"
       xmlns="http://www.w3.org/2000/svg"
     >
       <path