gcch/haiku-atelier-2024
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Compare commits

base: gcch:70b534573dcf3f9ca311f43fe96decfd2d4dbedf
Branches Tags
gcch:principale
gcch:wip-effect
gcch:production
gcch:gleam
...
compare: gcch:c8600583f2f99b0a4013f456a34939cf51d12d8e
Branches Tags
gcch:wip-effect
gcch:production
gcch:principale
gcch:gleam

1 commit
70b534573d ... c8600583f2

Author SHA1 Message Date
gcch
c8600583f2 wip 2026-04-27 18:47:44 +02:00
21 changed files with 196 additions and 196 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -91,10 +91,10 @@
:root { :root {
/* Couleurs */ /* Couleurs */
--couleur-blanc: oklch(100% 0 0deg / 100%); --couleur-blanc: oklch(100% 0 0deg / 100%);
--couleur-blanc-fond: oklch(1 0 0 / 90%); --couleur-blanc-fond: oklch(100% 0 0deg / 80%);
--couleur-gris: oklch(93.89% 0.0025 345.21deg / 100%); --couleur-gris: oklch(93.89% 0.0025 345.21deg / 100%);
--couleur-gris-fond: oklch(93.89% 0.0025 345.21deg / 80%); --couleur-gris-fond: oklch(93.89% 0.0025 345.21deg / 80%);
--couleur-gris-fond-extra: oklch(93.89% 0.0025 345.21deg / 50%); --couleur-gris-fond-extra: oklch(93.89% 0.0025 345.21deg / 60%);
--couleur-gris-fonce: oklch(59.99% 0 0deg / 100%); --couleur-gris-fonce: oklch(59.99% 0 0deg / 100%);
--couleur-gris-fonce-fond: oklch(59.99% 0 0deg / 80%); --couleur-gris-fonce-fond: oklch(59.99% 0 0deg / 80%);
--couleur-noir: oklch(24.35% 0 0deg / 100%); --couleur-noir: oklch(24.35% 0 0deg / 100%);
@ -140,6 +140,7 @@
*/ */
html { html {
box-sizing: border-box; /* 1 */ box-sizing: border-box; /* 1 */
scrollbar-gutter: stable;
} }
/* /*
@ -263,32 +264,30 @@ code {
*/ */
button { button {
all: initial; all: initial;
font: inherit;
cursor: pointer; cursor: pointer;
box-sizing: border-box; box-sizing: border-box;
font-family: Lato;
text-align: center; text-align: center;
letter-spacing: inherit; letter-spacing: inherit;
outline: 2px dashed transparent; outline: 2px dashed transparent;
outline-offset: -2px; outline-offset: -2px;
transition: 0.2s background, 0.2s color, 0.2s outline-color; transition: 0.2s background, 0.2s color, 0.2s outline-color;
} }
button:not[disabled]:focus-visible { button:not(button:disabled):focus-visible {
z-index: 5; z-index: 5;
outline-color: var(--couleur-noir); outline-color: var(--couleur-noir);
} }
button:not[disabled]:active { button:not(button:disabled):active {
color: var(--couleur-blanc) !important; background: var(--arriere-plan-points);
background: var(--couleur-noir) !important;
} }
@media (hover: hover) { @media (hover: hover) {
button:not[disabled]:hover { button:not(button:disabled):hover {
color: var(--couleur-noir); color: var(--couleur-blanc);
background: var(--couleur-gris-fonce); background: var(--couleur-gris-fonce);
} }
} }
button:disabled, button[disabled] { button:disabled {
background: repeating-conic-gradient(var(--couleur-noir) 0% 25%, transparent 0% 100%) 1px background: var(--arriere-plan-points);
0.5px/2px 2px;
outline-color: transparent; outline-color: transparent;
} }
button.bouton-case-pleine { button.bouton-case-pleine {
@ -300,14 +299,36 @@ button.bouton-case-pleine.bouton-blanc-sur-noir {
text-transform: uppercase; text-transform: uppercase;
letter-spacing: var(--espacement-inter-lettres-etendu-m); letter-spacing: var(--espacement-inter-lettres-etendu-m);
} }
button.bouton-case-pleine.bouton-blanc-sur-noir:focus-visible { button.bouton-case-pleine.bouton-blanc-sur-noir:not(
color: var(--couleur-noir); button.bouton-case-pleine.bouton-blanc-sur-noir:disabled
background: var(--couleur-gris-fonce); ):active {
color: var(--couleur-blanc);
}
@media (hover: hover) {
button.bouton-case-pleine.bouton-blanc-sur-noir:not(
button.bouton-case-pleine.bouton-blanc-sur-noir:disabled
):hover {
background: var(--couleur-gris-fonce);
color: var(--couleur-blanc);
}
} }
button.bouton-blanc-sur-noir { button.bouton-blanc-sur-noir {
color: var(--couleur-blanc); color: var(--couleur-blanc);
background: var(--couleur-noir); background: var(--couleur-noir);
} }
button.bouton-blanc-sur-noir:not(button.bouton-blanc-sur-noir:disabled):focus-visible {
outline-color: var(--couleur-blanc);
}
button.bouton-blanc-sur-noir:not(button.bouton-blanc-sur-noir:disabled):active {
color: var(--couleur-noir);
background: var(--arriere-plan-points);
}
@media (hover: hover) {
button.bouton-blanc-sur-noir:not(button.bouton-blanc-sur-noir:disabled):hover {
background: var(--couleur-gris);
color: var(--couleur-noir);
}
}
@media (hover: hover) { @media (hover: hover) {
button.bouton-fleche { button.bouton-fleche {
background: initial; background: initial;
@ -335,12 +356,12 @@ button.bouton-retour-haut img {
} }
button.bouton-retour-haut[data-actif] { button.bouton-retour-haut[data-actif] {
visibility: visible; visibility: visible;
opacity: 60%; opacity: 50%;
} }
@media (hover: hover) { @media (hover: hover) {
button.bouton-retour-haut[data-actif]:hover { button.bouton-retour-haut[data-actif]:hover {
opacity: 100%; opacity: 100%;
background: var(--couleur-jaune-fond); background: var(--couleur-gris-fond);
} }
} }
@ -405,24 +426,18 @@ input, select, textarea {
} }
input:focus-visible, input:focus-visible,
input:focus-within, input:focus-within,
input:active,
select:focus-visible, select:focus-visible,
select:focus-within, select:focus-within,
select:active,
textarea:focus-visible, textarea:focus-visible,
textarea:focus-within, textarea:focus-within {
textarea:active {
z-index: 10; z-index: 10;
outline: 2px dashed var(--couleur-noir); outline: 2px dashed var(--couleur-noir);
} }
input:disabled, input:active, select:active, textarea:active {
input[disabled], background: var(--arriere-plan-points);
select:disabled, }
select[disabled], input:disabled, select:disabled, textarea:disabled {
textarea:disabled, background: var(--arriere-plan-points);
textarea[disabled] {
background: repeating-conic-gradient(var(--couleur-noir) 0% 25%, transparent 0% 100%) 1px
0.5px/2px 2px;
outline-color: transparent; outline-color: transparent;
} }
@ -435,7 +450,9 @@ input:is([type="email"], [type="text"], [type="tel"])::selection, textarea::sele
background: var(--couleur-noir); background: var(--couleur-noir);
} }
input:is([type="email"], [type="text"], [type="tel"]):user-valid, textarea:user-valid { input:is([type="email"], [type="text"], [type="tel"]):user-valid, textarea:user-valid {
background: var(--couleur-gris-fonce); background: var(--arriere-plan-points);
color: var(--couleur-noir);
font-weight: 500;
} }
input:is([type="email"], [type="text"], [type="tel"]):user-invalid, textarea:user-invalid { input:is([type="email"], [type="text"], [type="tel"]):user-invalid, textarea:user-invalid {
background: var(--couleur-gris); background: var(--couleur-gris);
@ -455,6 +472,7 @@ input[type="checkbox"], input[type="radio"] {
} }
input[type="checkbox"]:checked, input[type="radio"]:checked { input[type="checkbox"]:checked, input[type="radio"]:checked {
background: var(--couleur-gris-fonce); background: var(--couleur-gris-fonce);
color: var(--couleur-blanc);
} }
input[type="checkbox"]:checked::before, input[type="radio"]:checked::before { input[type="checkbox"]:checked::before, input[type="radio"]:checked::before {
content: "x"; content: "x";
@ -870,6 +888,9 @@ body:has(#menu-mobile:not([aria-hidden="true"])) {
display: none; display: none;
} }
} }
#en-tete {
/* * Bouton du compte de Produits dans le Panier. */
}
#en-tete .compte-panier { #en-tete .compte-panier {
display: flex; display: flex;
flex-flow: row nowrap; flex-flow: row nowrap;
@ -877,32 +898,30 @@ body:has(#menu-mobile:not([aria-hidden="true"])) {
place-items: center; place-items: center;
text-align: center; text-align: center;
} }
#en-tete .compte-panier a:hover,
#en-tete .compte-panier a:active,
#en-tete .compte-panier a:focus-within {
background: var(--couleur-gris-fond) !important;
}
#en-tete .compte-panier[disabled] { #en-tete .compte-panier[disabled] {
background: repeating-conic-gradient(var(--couleur-noir) 0% 25%, transparent 0% 100%) 1px background: var(--arriere-plan-points);
0.5px/2px 2px;
} }
#en-tete .compte-panier[disabled] a:hover, #en-tete .compte-panier[disabled] a:hover,
#en-tete .compte-panier[disabled] a:active, #en-tete .compte-panier[disabled] a:active,
#en-tete .compte-panier[disabled] a:focus-within { #en-tete .compte-panier[disabled] a:focus-within {
border: 1px solid var(--couleur-noir); border: 1px solid var(--couleur-noir);
background: initial;
} }
#en-tete .compte-panier a { #en-tete .compte-panier a {
padding-block: var(--espace-2xs); padding-block: var(--espace-2xs);
padding-inline: var(--espace-s); padding-inline: var(--espace-s);
text-transform: lowercase; text-transform: lowercase;
background: var(--couleur-gris); background: transparent;
}
#en-tete .compte-panier a.lien-compte {
border-color: transparent;
} }
#en-tete .compte-panier a[data-contient-articles="true"] { #en-tete .compte-panier a[data-contient-articles="true"] {
background: var(--couleur-gris-fonce); background: var(--couleur-gris-fond);
}
#en-tete .compte-panier a:hover, #en-tete .compte-panier a:focus-within {
color: var(--couleur-blanc);
background: var(--couleur-gris-fonce-fond);
}
#en-tete .compte-panier a:active {
color: var(--couleur-noir);
background: var(--arriere-plan-points);
} }
#en-tete .conteneur { #en-tete .conteneur {
display: flex; display: flex;
@ -919,6 +938,11 @@ body:has(#menu-mobile:not([aria-hidden="true"])) {
image-rendering: crisp-edges; image-rendering: crisp-edges;
shape-rendering: geometricprecision; shape-rendering: geometricprecision;
} }
@media (hover: hover) {
#en-tete .bouton-menu-mobile:hover {
background: initial !important;
}
}
@media (width <= 1000px) { @media (width <= 1000px) {
#en-tete .bouton-menu-mobile { #en-tete .bouton-menu-mobile {
display: block; display: block;
@ -1350,7 +1374,7 @@ body:has(#menu-mobile:not([aria-hidden="true"])) {
} }
@supports selector(:user-valid) { @supports selector(:user-valid) {
.resume-produit .selecteur-produit__attribut-variation select:user-valid { .resume-produit .selecteur-produit__attribut-variation select:user-valid {
background: var(--couleur-jaune-fond); background: var(--couleur-gris-fond);
} }
} }
.resume-produit .selecteur-produit__attribut-variation option { .resume-produit .selecteur-produit__attribut-variation option {
@ -1361,34 +1385,11 @@ body:has(#menu-mobile:not([aria-hidden="true"])) {
} }
.resume-produit .selecteur-produit__attribut-variation__selecteurs { .resume-produit .selecteur-produit__attribut-variation__selecteurs {
position: relative; position: relative;
/* Icône de flèche descendante */ display: flex;
} flex-flow: row wrap;
.resume-produit .selecteur-produit__attribut-variation__selecteurs::after { place-items: center;
pointer-events: none; place-content: center;
content: " "; gap: var(--espace-m);
position: absolute;
top: 7px;
right: 0.4rem;
display: inline-block;
width: 0.9rem;
height: 0.9rem;
text-align: center;
visibility: visible;
opacity: 100%;
background: url("/app/themes/haiku-atelier-2024/assets/img/icons/arrow.svg") no-repeat;
transition: opacity 0.2s, visibility 0.2s;
}
@supports not selector(:user-valid) {
.resume-produit .selecteur-produit__attribut-variation__selecteurs:has(select:valid)::after {
visibility: hidden;
opacity: 0%;
}
}
@supports selector(:user-valid) {
.resume-produit .selecteur-produit__attribut-variation__selecteurs:has(select:user-valid)::after {
visibility: hidden;
opacity: 0%;
}
} }
.resume-produit .selecteur-produit__prix { .resume-produit .selecteur-produit__prix {
font-style: initial; font-style: initial;
@ -1483,13 +1484,11 @@ body:has(#menu-mobile:not([aria-hidden="true"])) {
text-transform: uppercase; text-transform: uppercase;
transition: 0.2s color, 0.2s background, 0.2s font-weight; transition: 0.2s color, 0.2s background, 0.2s font-weight;
} }
.details-produit__actions button:hover {
color: var(--couleur-blanc);
background: var(--couleur-gris-fonce-fond);
}
@media (hover: hover) { @media (hover: hover) {
.details-produit__actions button:not([disabled]):hover { .details-produit__actions button:not([disabled]):hover {
font-weight: 600; font-weight: 600;
color: var(--couleur-blanc);
background: var(--couleur-gris-fonce-fond);
} }
} }

2
web/app/themes/haiku-atelier-2024/assets/css/main.css.map
View file

File diff suppressed because one or more lines are too long

2
web/app/themes/haiku-atelier-2024/assets/css/main.min.css vendored
View file

File diff suppressed because one or more lines are too long

5
web/app/themes/haiku-atelier-2024/assets/css/pages/page-panier.css
View file

@ -379,7 +379,6 @@
} }
#panneau-informations-client .panneau__pied-de-page { #panneau-informations-client .panneau__pied-de-page {
align-content: center; align-content: center;
padding: var(--espace-l) 0;
font-size: 1.25rem; font-size: 1.25rem;
font-style: italic; font-style: italic;
color: var(--couleur-blanc); color: var(--couleur-blanc);
@ -389,9 +388,7 @@
background: var(--couleur-noir); background: var(--couleur-noir);
} }
#panneau-informations-client .panneau__pied-de-page button { #panneau-informations-client .panneau__pied-de-page button {
font: inherit; padding: var(--espace-l) 0;
color: inherit;
text-transform: inherit;
} }
@media (width <= 500px) { @media (width <= 500px) {
#panneau-informations-client .panneau__formulaires { #panneau-informations-client .panneau__formulaires {

2
web/app/themes/haiku-atelier-2024/assets/css/pages/page-panier.css.map
View file

@ -1 +1 @@
{"version":3,"sourceRoot":"","sources":["../../../src/sass/layouts/_panneau-panier.scss","../../../src/sass/layouts/_panneau-informations-client.scss","../../../src/sass/pages/page-panier.scss"],"names":[],"mappings":";AAEA;EACE;;AAEA;EACE;;AAIF;EACE;EACA;;AAEA;EACE;EACA;EACA;EACA;;AAGA;EACE;;AAEA;EACE;EACA;;AAGF;EACE;EACA;;AAMN;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;;AAIJ;EACE;EACA;;AAIF;EACE;EACA;EACA;EACA;EACA;AAEA;;AACA;EACE;EACA;EACA;EACA;EACA;;AAbJ;AAgBE;AAAA;AAAA;AAAA;;AAIA;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;;AA9BN;AAkCE;;AACA;EACE;EACA;EACA;EACA;EACA;;AAxCJ;AA2CE;;AACA;EACE;EACA;EACA;EACA;EACA;;AAOR;EACE;EACA;EACA;EACA;AAEA;AAAA;AAAA;AAAA;;AAIA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;AAEA;AAAA;AAAA;;AAGA;EACE;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;;AAKN;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAKA;EACE;;AAEA;EACE;;AAMR;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;;AAMJ;EACE;EACA;EACA;EACA;EACA;;AAKJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAIJ;EACE;IACE;;EAGF;IACE;;EAEA;IACE;;EAIJ;IACE;;EAGE;IACE;;EAKN;IACE;;;;ACpRN;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAIF;EAEE;EACA;EACA;EAGA;EAEA;EACA;;AAEA;EACE;EACA;;AAIF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAGF;EACE;;AAMN;EACE;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAKF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAGE;EACE;;AAMR;EACE;EACA;EACA;;AAIJ;EACE;EACA;;AAEA;EACE;;AAGF;EACE;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAKN;EACE;EACA;EACA;;AAEA;EACE;;AAIJ;EACE;;AAKJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;;AAIJ;EACE;IACE;;;;ACpKN;AAAA;AAAA;AAAA;AAIA;AACE;EACA;AAEA;EACA;EAEA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;;AAGA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;;AAKN;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAGF;EACE;EACA;EACA;;AAKF;EACE;;AAGF;EACE","file":"page-panier.css"} {"version":3,"sourceRoot":"","sources":["../../../src/sass/layouts/_panneau-panier.scss","../../../src/sass/layouts/_panneau-informations-client.scss","../../../src/sass/pages/page-panier.scss"],"names":[],"mappings":";AAEA;EACE;;AAEA;EACE;;AAIF;EACE;EACA;;AAEA;EACE;EACA;EACA;EACA;;AAGA;EACE;;AAEA;EACE;EACA;;AAGF;EACE;EACA;;AAMN;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;;AAIJ;EACE;EACA;;AAIF;EACE;EACA;EACA;EACA;EACA;AAEA;;AACA;EACE;EACA;EACA;EACA;EACA;;AAbJ;AAgBE;AAAA;AAAA;AAAA;;AAIA;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;;AA9BN;AAkCE;;AACA;EACE;EACA;EACA;EACA;EACA;;AAxCJ;AA2CE;;AACA;EACE;EACA;EACA;EACA;EACA;;AAOR;EACE;EACA;EACA;EACA;AAEA;AAAA;AAAA;AAAA;;AAIA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;AAEA;AAAA;AAAA;;AAGA;EACE;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;;AAKN;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAKA;EACE;;AAEA;EACE;;AAMR;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;;AAMJ;EACE;EACA;EACA;EACA;EACA;;AAKJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAIJ;EACE;IACE;;EAGF;IACE;;EAEA;IACE;;EAIJ;IACE;;EAGE;IACE;;EAKN;IACE;;;;ACpRN;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAIF;EAEE;EACA;EACA;EAGA;EAEA;EACA;;AAEA;EACE;EACA;;AAIF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAGF;EACE;;AAMN;EACE;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAKF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAGE;EACE;;AAMR;EACE;EACA;EACA;;AAIJ;EACE;EACA;;AAEA;EACE;;AAGF;EACE;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAKN;EACE;EACA;EACA;;AAEA;EACE;;AAIJ;EACE;;AAKJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAIJ;EACE;IACE;;;;ACjKN;AAAA;AAAA;AAAA;AAIA;AACE;EACA;AAEA;EACA;EAEA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;;AAGA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;;AAKN;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAGF;EACE;EACA;EACA;;AAKF;EACE;;AAGF;EACE","file":"page-panier.css"}

2
web/app/themes/haiku-atelier-2024/assets/css/pages/page-panier.min.css vendored
View file

File diff suppressed because one or more lines are too long

4
web/app/themes/haiku-atelier-2024/assets/img/icons/cloud-penche-gris.svg
View file

@ -1,6 +1,6 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="2.433 9.473 85.134 70.17"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="2.433 9.473 85.134 70.17">
<path <path
fill="transparent" stroke="oklch(59.99% 0 0deg / 100%)" fill="transparent" stroke="oklch(59.99% 0 0deg / 80%)"
stroke-width="2px" d="M84.857 38.272c-2.238-3.079-6.335-4.365-11.182-3.978 6.131-6.94 8.302-14.885 4.751-19.772-4.576-6.298-16.933-5.12-27.595 2.63-2.749 1.998-5.11 4.235-7.031 6.565l-.041-.06c-4.577-6.299-16.937-5.12-27.597 2.632C5.498 34.041.565 45.429 5.143 51.729c2.068 2.845 5.73 4.16 10.101 4.038-5.506 6.701-7.337 14.156-3.945 18.821 4.577 6.3 16.935 5.12 27.596-2.63 2.666-1.939 4.974-4.103 6.866-6.36.147.255.303.504.478.745 4.578 6.301 16.935 5.121 27.596-2.628 10.667-7.755 15.599-19.146 11.022-25.443" stroke-width="1px" d="M84.857 38.272c-2.238-3.079-6.335-4.365-11.182-3.978 6.131-6.94 8.302-14.885 4.751-19.772-4.576-6.298-16.933-5.12-27.595 2.63-2.749 1.998-5.11 4.235-7.031 6.565l-.041-.06c-4.577-6.299-16.937-5.12-27.597 2.632C5.498 34.041.565 45.429 5.143 51.729c2.068 2.845 5.73 4.16 10.101 4.038-5.506 6.701-7.337 14.156-3.945 18.821 4.577 6.3 16.935 5.12 27.596-2.63 2.666-1.939 4.974-4.103 6.866-6.36.147.255.303.504.478.745 4.578 6.301 16.935 5.121 27.596-2.628 10.667-7.755 15.599-19.146 11.022-25.443"
/> />
</svg> </svg>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 674 B

After

Width:  |  Height:  |  Size: 673 B

Before After
Before After

4
web/app/themes/haiku-atelier-2024/src/sass/abstracts/_variables.scss
View file

@ -3,10 +3,10 @@
:root { :root {
/* Couleurs */ /* Couleurs */
--couleur-blanc: oklch(100% 0 0deg / 100%); --couleur-blanc: oklch(100% 0 0deg / 100%);
--couleur-blanc-fond: oklch(1 0 0 / 90%); --couleur-blanc-fond: oklch(100% 0 0deg / 80%);
--couleur-gris: oklch(93.89% 0.0025 345.21deg / 100%); --couleur-gris: oklch(93.89% 0.0025 345.21deg / 100%);
--couleur-gris-fond: oklch(93.89% 0.0025 345.21deg / 80%); --couleur-gris-fond: oklch(93.89% 0.0025 345.21deg / 80%);
--couleur-gris-fond-extra: oklch(93.89% 0.0025 345.21deg / 50%); --couleur-gris-fond-extra: oklch(93.89% 0.0025 345.21deg / 60%);
--couleur-gris-fonce: oklch(59.99% 0 0deg / 100%); --couleur-gris-fonce: oklch(59.99% 0 0deg / 100%);
--couleur-gris-fonce-fond: oklch(59.99% 0 0deg / 80%); --couleur-gris-fonce-fond: oklch(59.99% 0 0deg / 80%);
--couleur-noir: oklch(24.35% 0 0deg / 100%); --couleur-noir: oklch(24.35% 0 0deg / 100%);

1
web/app/themes/haiku-atelier-2024/src/sass/base/_base.scss
View file

@ -7,6 +7,7 @@
*/ */
html { html {
box-sizing: border-box; /* 1 */ box-sizing: border-box; /* 1 */
scrollbar-gutter: stable;
} }
/* /*

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

@ -5,37 +5,35 @@
*/ */
button { button {
all: initial; all: initial;
font: inherit;
cursor: pointer; cursor: pointer;
box-sizing: border-box; box-sizing: border-box;
font-family: Lato;
text-align: center; text-align: center;
letter-spacing: inherit; letter-spacing: inherit;
outline: 2px dashed transparent; outline: 2px dashed transparent;
outline-offset: -2px; outline-offset: -2px;
transition: 0.2s background, 0.2s color, 0.2s outline-color; transition: 0.2s background, 0.2s color, 0.2s outline-color;
&:not[disabled] { &:not(&:disabled) {
&:focus-visible { &:focus-visible {
z-index: 5; z-index: 5;
outline-color: var(--couleur-noir); outline-color: var(--couleur-noir);
} }
&:active { &:active {
color: var(--couleur-blanc) !important; background: var(--arriere-plan-points);
background: var(--couleur-noir) !important;
} }
@media (hover: hover) { @media (hover: hover) {
&:hover { &:hover {
color: var(--couleur-noir); color: var(--couleur-blanc);
background: var(--couleur-gris-fonce); background: var(--couleur-gris-fonce);
} }
} }
} }
&:disabled, &[disabled] { &:disabled {
background: repeating-conic-gradient(var(--couleur-noir) 0% 25%, transparent 0% 100%) 1px 0.5px background: var(--arriere-plan-points);
/ 2px 2px;
outline-color: transparent; outline-color: transparent;
} }
@ -49,9 +47,17 @@ button {
text-transform: uppercase; text-transform: uppercase;
letter-spacing: var(--espacement-inter-lettres-etendu-m); letter-spacing: var(--espacement-inter-lettres-etendu-m);
&:focus-visible { &:not(&:disabled) {
color: var(--couleur-noir); &:active {
background: var(--couleur-gris-fonce); color: var(--couleur-blanc);
}
@media (hover: hover) {
&:hover {
background: var(--couleur-gris-fonce);
color: var(--couleur-blanc);
}
}
} }
} }
} }
@ -59,6 +65,23 @@ button {
&.bouton-blanc-sur-noir { &.bouton-blanc-sur-noir {
color: var(--couleur-blanc); color: var(--couleur-blanc);
background: var(--couleur-noir); background: var(--couleur-noir);
&:not(&:disabled) {
&:focus-visible {
outline-color: var(--couleur-blanc);
}
&:active {
color: var(--couleur-noir);
background: var(--arriere-plan-points);
}
@media (hover: hover) {
&:hover {
background: var(--couleur-gris);
color: var(--couleur-noir);
}
}
}
} }
&.bouton-fleche { &.bouton-fleche {
@ -90,12 +113,12 @@ button {
&[data-actif] { &[data-actif] {
visibility: visible; visibility: visible;
opacity: 60%; opacity: 50%;
@media (hover: hover) { @media (hover: hover) {
&:hover { &:hover {
opacity: 100%; opacity: 100%;
background: var(--couleur-jaune-fond); background: var(--couleur-gris-fond);
} }
} }
} }

20
web/app/themes/haiku-atelier-2024/src/sass/base/elements/_formulaires.scss
View file

@ -15,14 +15,17 @@ input, select, textarea {
background: var(--couleur-gris); background: var(--couleur-gris);
transition: 0.2s background; transition: 0.2s background;
&:focus-visible, &:focus-within, &:active { &:focus-visible, &:focus-within {
z-index: 10; z-index: 10;
outline: 2px dashed var(--couleur-noir); outline: 2px dashed var(--couleur-noir);
} }
&:disabled, &[disabled] { &:active {
background: repeating-conic-gradient(var(--couleur-noir) 0% 25%, transparent 0% 100%) 1px 0.5px background: var(--arriere-plan-points);
/ 2px 2px; }
&:disabled {
background: var(--arriere-plan-points);
outline-color: transparent; outline-color: transparent;
} }
} }
@ -39,16 +42,14 @@ input:is([type="email"], [type="text"], [type="tel"]), textarea {
} }
&:user-valid { &:user-valid {
background: var(--couleur-gris-fonce); background: var(--arriere-plan-points);
color: var(--couleur-noir);
font-weight: 500;
} }
&:user-invalid { &:user-invalid {
background: var(--couleur-gris); background: var(--couleur-gris);
} }
// &:user-invalid {
// border-color: red;
// }
} }
input, label, select, textarea { input, label, select, textarea {
@ -66,6 +67,7 @@ input[type="checkbox"], input[type="radio"] {
&:checked { &:checked {
background: var(--couleur-gris-fonce); background: var(--couleur-gris-fonce);
color: var(--couleur-blanc);
// TODO: Utiliser un SVG plutôt qu'un « x » ? // TODO: Utiliser un SVG plutôt qu'un « x » ?
&::before { &::before {

33
web/app/themes/haiku-atelier-2024/src/sass/layouts/_en-tete.scss
View file

@ -115,6 +115,7 @@
} }
} }
/* * Bouton du compte de Produits dans le Panier. */
.compte-panier { .compte-panier {
display: flex; display: flex;
flex-flow: row nowrap; flex-flow: row nowrap;
@ -122,17 +123,11 @@
place-items: center; place-items: center;
text-align: center; text-align: center;
a:hover, a:active, a:focus-within {
background: var(--couleur-gris-fond) !important;
}
&[disabled] { &[disabled] {
background: repeating-conic-gradient(var(--couleur-noir) 0% 25%, transparent 0% 100%) 1px background: var(--arriere-plan-points);
0.5px / 2px 2px;
a:hover, a:active, a:focus-within { a:hover, a:active, a:focus-within {
border: 1px solid var(--couleur-noir); border: 1px solid var(--couleur-noir);
background: initial;
} }
} }
@ -140,14 +135,20 @@
padding-block: var(--espace-2xs); padding-block: var(--espace-2xs);
padding-inline: var(--espace-s); padding-inline: var(--espace-s);
text-transform: lowercase; text-transform: lowercase;
background: var(--couleur-gris); background: transparent;
&.lien-compte {
border-color: transparent;
}
&[data-contient-articles="true"] { &[data-contient-articles="true"] {
background: var(--couleur-gris-fonce); background: var(--couleur-gris-fond);
}
&:hover, &:focus-within {
color: var(--couleur-blanc);
background: var(--couleur-gris-fonce-fond);
}
&:active {
color: var(--couleur-noir);
background: var(--arriere-plan-points);
} }
} }
} }
@ -170,6 +171,12 @@
shape-rendering: geometricprecision; shape-rendering: geometricprecision;
} }
@media (hover: hover) {
&:hover {
background: initial !important;
}
}
// Affiche sur petites tailles d'écran. // Affiche sur petites tailles d'écran.
@media (width <= 1000px) { @media (width <= 1000px) {
display: block; display: block;

1
web/app/themes/haiku-atelier-2024/src/sass/layouts/_grille-produits.scss
View file

@ -23,6 +23,7 @@
grid-auto-rows: 1fr; grid-auto-rows: 1fr;
grid-template-columns: grid-template-columns:
repeat(auto-fit, minmax(var(--carte-produit-longueur-minimale), 1fr)); /* 1 */ repeat(auto-fit, minmax(var(--carte-produit-longueur-minimale), 1fr)); /* 1 */
gap: 1px; /* 2 */ gap: 1px; /* 2 */
min-height: var(--grille-produits-hauteur-minimale); min-height: var(--grille-produits-hauteur-minimale);

49
web/app/themes/haiku-atelier-2024/src/sass/layouts/_informations-produit.scss
View file

@ -83,7 +83,7 @@
@supports selector(:user-valid) { @supports selector(:user-valid) {
&:user-valid { &:user-valid {
background: var(--couleur-jaune-fond); background: var(--couleur-gris-fond);
} }
} }
} }
@ -95,41 +95,11 @@
/* Conteneur des sélecteurs */ /* Conteneur des sélecteurs */
&__selecteurs { &__selecteurs {
position: relative; position: relative;
display: flex;
/* Icône de flèche descendante */ flex-flow: row wrap;
&::after { place-items: center;
pointer-events: none; place-content: center;
content: " "; gap: var(--espace-m);
position: absolute;
top: 7px;
right: 0.4rem;
display: inline-block;
width: 0.9rem;
height: 0.9rem;
text-align: center;
visibility: visible;
opacity: 100%;
background: url("/app/themes/haiku-atelier-2024/assets/img/icons/arrow.svg") no-repeat;
transition: opacity 0.2s, visibility 0.2s;
}
@supports not selector(:user-valid) {
&:has(select:valid) {
&::after {
visibility: hidden;
opacity: 0%;
}
}
}
@supports selector(:user-valid) {
&:has(select:user-valid) {
&::after {
visibility: hidden;
opacity: 0%;
}
}
}
} }
} }
@ -245,16 +215,13 @@
text-transform: uppercase; text-transform: uppercase;
transition: 0.2s color, 0.2s background, 0.2s font-weight; transition: 0.2s color, 0.2s background, 0.2s font-weight;
&:hover {
color: var(--couleur-blanc);
background: var(--couleur-gris-fonce-fond);
}
// Change la casse de la police au survol quand le Bouton n'est pas désactivé // Change la casse de la police au survol quand le Bouton n'est pas désactivé
&:not([disabled]) { &:not([disabled]) {
@media (hover: hover) { @media (hover: hover) {
&:hover { &:hover {
font-weight: 600; font-weight: 600;
color: var(--couleur-blanc);
background: var(--couleur-gris-fonce-fond);
} }
} }
} }

1
web/app/themes/haiku-atelier-2024/src/sass/layouts/_menu-categories-produits.scss
View file

@ -67,6 +67,7 @@
display: grid; display: grid;
grid-template-columns: grid-template-columns:
repeat(auto-fit, minmax(var(--menu-entree-longueur-minimale), 1fr)); /* 1 */ repeat(auto-fit, minmax(var(--menu-entree-longueur-minimale), 1fr)); /* 1 */
gap: 1px; gap: 1px;
place-items: center; place-items: center;

5
web/app/themes/haiku-atelier-2024/src/sass/layouts/_panneau-informations-client.scss
View file

@ -149,7 +149,6 @@
// Total de la commande // Total de la commande
.panneau__pied-de-page { .panneau__pied-de-page {
align-content: center; align-content: center;
padding: var(--espace-l) 0;
font-size: 1.25rem; font-size: 1.25rem;
font-style: italic; font-style: italic;
color: var(--couleur-blanc); color: var(--couleur-blanc);
@ -159,9 +158,7 @@
background: var(--couleur-noir); background: var(--couleur-noir);
button { button {
font: inherit; padding: var(--espace-l) 0;
color: inherit;
text-transform: inherit;
} }
} }

24
web/app/themes/haiku-atelier-2024/src/scripts/page-produit/service-dom.ts
View file

@ -95,6 +95,11 @@ class ProductPageDOM extends Context.Service<ProductPageDOM>()(
); );
}); });
const setLoadingState = Effect.fn("setLoadingState")(function*(element: HTMLElement, isLoading: boolean) {
element.toggleAttribute(ATTRIBUT_DESACTIVE, isLoading);
element.toggleAttribute(ATTRIBUT_CHARGEMENT, isLoading);
});
const detailButtonClickHandler = Effect.fn("detailButtonClickHandler")( const detailButtonClickHandler = Effect.fn("detailButtonClickHandler")(
function*(evt: Event) { function*(evt: Event) {
// Empêche la pollution de l'historique de navigation // Empêche la pollution de l'historique de navigation
@ -182,8 +187,7 @@ class ProductPageDOM extends Context.Service<ProductPageDOM>()(
// TODO: Faire une véritable gestion des erreurs. // TODO: Faire une véritable gestion des erreurs.
const recoverFromBackendFailure = Effect.fn("recoverFromBackendFailure")(function*(error: APIError) { const recoverFromBackendFailure = Effect.fn("recoverFromBackendFailure")(function*(error: APIError) {
AddToCartButton.toggleAttribute(ATTRIBUT_DESACTIVE, false); yield* setLoadingState(AddToCartButton, false);
AddToCartButton.toggleAttribute(ATTRIBUT_CHARGEMENT, false);
// Affiche un message d'erreur sommaire à l'utilisateur puis réinitialise le texte. // Affiche un message d'erreur sommaire à l'utilisateur puis réinitialise le texte.
yield* SubscriptionRef.set(AddToCartButtonText, "Error!"); yield* SubscriptionRef.set(AddToCartButtonText, "Error!");
@ -217,26 +221,28 @@ class ProductPageDOM extends Context.Service<ProductPageDOM>()(
), ),
Effect.map(({ id, attributes }) => Effect.map(({ id, attributes }) =>
// Les données ont été validées en amont. // Les données ont été validées en amont.
Schema.decodeSync(CartProduct)({ id: id, quantity: 0, variation: attributes }) Schema.decodeSync(CartProduct)({ id: id, quantity: 1, variation: attributes })
), ),
Effect.tap(body => Console.debug("addToCartButtonClickHandler", "requestBody", body)), Effect.tap(body => Console.debug("addToCartButtonClickHandler", "requestBody", body)),
); );
// Désactive les interactions le temps de la requête. // Désactive les interactions le temps de la requête.
AddToCartButton.toggleAttribute(ATTRIBUT_DESACTIVE, true); yield* setLoadingState(AddToCartButton, true);
AddToCartButton.toggleAttribute(ATTRIBUT_CHARGEMENT, true); yield* SubscriptionRef.set(AddToCartButtonText, "Adding Product...");
// lanceAnimationCycleLoading(AddToCartButton, 500); // lanceAnimationCycleLoading(AddToCartButton, 500);
// Exécute la Requête auprès du backend. // Exécute la Requête auprès du backend.
const newCart = yield* API.AddProductToCart(PageStates.nonce, requestBody); const newCart = yield* API.AddProductToCart(PageStates.nonce, requestBody);
// Met à jour le compteur d'articles du Panier. // Met à jour le compteur d'articles du Panier.
const newItemsCount = WooCommerceCart._itemsCount.get(newCart); const newItemsCount = WooCommerceCart._itemsCount.get(newCart as WooCommerceCart);
emetMessageMajBoutonPanier({ quantiteProduits: newItemsCount }); emetMessageMajBoutonPanier({ quantiteProduits: newItemsCount });
AddToCartButton.toggleAttribute(ATTRIBUT_DESACTIVE, false); // Affiche un message de succès à l'utilisateur.
AddToCartButton.toggleAttribute(ATTRIBUT_CHARGEMENT, false); yield* SubscriptionRef.set(AddToCartButtonText, "OK!");
yield* SubscriptionRef.set(AddToCartButtonText, "Add to cart"); yield* setLoadingState(AddToCartButton, false);
yield* SubscriptionRef.set(AddToCartButtonText, "Add to cart").pipe(Effect.delay("3 seconds"));
}, },
Effect.catchTags({ Effect.catchTags({
APIResponseError: error => recoverFromBackendFailure(error), APIResponseError: error => recoverFromBackendFailure(error),

5
web/app/themes/haiku-atelier-2024/views/parts/pages/panier/panneau-informations-client.twig
View file

@ -259,7 +259,10 @@
</form> </form>
<footer class="panneau__pied-de-page"> <footer class="panneau__pied-de-page">
<button form="formulaire-commande" type="submit"> <button
class="bouton-case-pleine bouton-blanc-sur-noir" form="formulaire-commande"
type="submit"
>
Calculate shipping Calculate shipping
</button> </button>
</footer> </footer>

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

@ -10,9 +10,7 @@
<div class="selecteur-produit__attribut-variation"> <div class="selecteur-produit__attribut-variation">
{% if product.attributes %} {% if product.attributes %}
{% for attribut in product.attributes %} {% for attribut in product.attributes %}
<div class="test"> {{ include('parts/pages/produit/selecteur-attributs-produit.twig') }}
{{ include('parts/pages/produit/selecteur-attributs-produit.twig') }}
</div>
{% endfor %} {% endfor %}
{% endif %} {% endif %}
</div> </div>

2
web/app/themes/haiku-atelier-2024/views/parts/pages/produit/selecteur-attributs-produit.twig
View file

@ -4,7 +4,7 @@
</label> </label>
<select <select
aria-labelledby="label-{{ atribut.slug }}" id="{{ attribut.slug }}" aria-labelledby="label-{{ attribut.slug }}" id="{{ attribut.slug }}"
name="{{ attribut.slug }}" required name="{{ attribut.slug }}" required
> >
<option <option

28
web/app/uploads/script.fish
View file

@ -1,19 +1,17 @@
#!/usr/bin/fish #!/usr/bin/fish
if type --query gm # Vérification de la présence des binaires nécessaires.
else if not type --query gm
echo -e "GraphicsMagick is missing." echo -e "GraphicsMagick is missing."
exit 1 exit 1
end end
if type --query cjxl if not type --query cjxl
else echo -e "A JPEGXL encoder (cjxl) is missing."
echo -e "A JPEGXL encoder (cjxl) is missing." exit 1
exit 1
end end
if type --query avifenc if not type --query avifenc
else echo -e "An AVIF encoder (avifenc) is missing."
echo -e "An AVIF encoder (avifenc) is missing." exit 1
exit 1
end end
for jpg in **/*.{jpg,jpeg} for jpg in **/*.{jpg,jpeg}
@ -40,9 +38,9 @@ for jpg in **/*.{jpg,jpeg}
gm convert "$jpg" -resize 1920x1920\> "$png" >/dev/null gm convert "$jpg" -resize 1920x1920\> "$png" >/dev/null
if ! test -e $jxl if ! test -e $jxl
# Si les dimensions ne sont pas bonnes, convertis l'image PNG en JPEGXL puis reconstruis une image JPEG. # Si les dimensions ne sont pas bonnes, convertis l'image PNG en JPEGXL puis reconstruis une image JPEG.
# C'est une forme de redimensionnement lossless. # C'est une forme de redimensionnement lossless.
if test $a_bonnes_dimensions = false if test $a_bonnes_dimensions = false
cjxl \ cjxl \
--allow_jpeg_reconstruction=1 \ --allow_jpeg_reconstruction=1 \
--brotli_effort=11 \ --brotli_effort=11 \