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

wip

Browse source
This commit is contained in:
gcch 2026-04-28 11:23:31 +02:00
commit 0478744a71
12 changed files with 568 additions and 384 deletions
Download patch file Download diff file Expand all files Collapse all files

1177
mago-schema.json
View file

File diff suppressed because it is too large Load diff

1
mago.toml
View file

@ -67,6 +67,7 @@ threads = 0
disjunction-complexity-threshold = 8192 disjunction-complexity-threshold = 8192
formula-size-threshold = 1024 formula-size-threshold = 1024
integer-combination-threshold = 256 integer-combination-threshold = 256
loop-assignment-depth-threshold = 2
negation-complexity-threshold = 8192 negation-complexity-threshold = 8192
saturation-complexity-threshold = 16384 saturation-complexity-threshold = 16384
string-combination-threshold = 256 string-combination-threshold = 256

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

@ -4,16 +4,66 @@
font-weight: 100 900; font-weight: 100 900;
font-style: normal; font-style: normal;
font-display: swap; font-display: swap;
src: url("/app/themes/haiku-atelier-2024/assets/fonts/lato/lato-variable-webfont.woff2") format(woff2) tech(variations), url("/app/themes/haiku-atelier-2024/assets/fonts/lato/lato-variable-webfont.woff2") format("woff2-variations"), url("/app/themes/haiku-atelier-2024/assets/fonts/lato/lato-variable-webfont.woff2") format("woff2"), url("/app/themes/haiku-atelier-2024/assets/fonts/lato/lato-variable-webfont.ttf") format("truetype"); src:
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; url("/app/themes/haiku-atelier-2024/assets/fonts/lato/lato-variable-webfont.woff2")
format(woff2) tech(variations),
url("/app/themes/haiku-atelier-2024/assets/fonts/lato/lato-variable-webfont.woff2")
format("woff2-variations"),
url("/app/themes/haiku-atelier-2024/assets/fonts/lato/lato-variable-webfont.woff2")
format("woff2"),
url("/app/themes/haiku-atelier-2024/assets/fonts/lato/lato-variable-webfont.ttf")
format("truetype");
unicode-range:
U+0000-00FF,
U+0131,
U+0152-0153,
U+02BB-02BC,
U+02C6,
U+02DA,
U+02DC,
U+2000-206F,
U+2074,
U+20AC,
U+2122,
U+2191,
U+2193,
U+2212,
U+2215,
U+FEFF,
U+FFFD;
} }
@font-face { @font-face {
font-family: Lato; font-family: Lato;
font-weight: 100 900; font-weight: 100 900;
font-style: italic; font-style: italic;
font-display: swap; font-display: swap;
src: url("/app/themes/haiku-atelier-2024/assets/fonts/lato/lato-variable-italic-webfont.woff2") format(woff2) tech(variations), url("/app/themes/haiku-atelier-2024/assets/fonts/lato/lato-variable-italic-webfont.woff2") format("woff2-variations"), url("/app/themes/haiku-atelier-2024/assets/fonts/lato/lato-variable-italic-webfont.woff2") format("woff2"), url("/app/themes/haiku-atelier-2024/assets/fonts/lato/lato-variable-italic-webfont.ttf") format("truetype"); src:
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; url("/app/themes/haiku-atelier-2024/assets/fonts/lato/lato-variable-italic-webfont.woff2")
format(woff2) tech(variations),
url("/app/themes/haiku-atelier-2024/assets/fonts/lato/lato-variable-italic-webfont.woff2")
format("woff2-variations"),
url("/app/themes/haiku-atelier-2024/assets/fonts/lato/lato-variable-italic-webfont.woff2")
format("woff2"),
url("/app/themes/haiku-atelier-2024/assets/fonts/lato/lato-variable-italic-webfont.ttf")
format("truetype");
unicode-range:
U+0000-00FF,
U+0131,
U+0152-0153,
U+02BB-02BC,
U+02C6,
U+02DA,
U+02DC,
U+2000-206F,
U+2074,
U+20AC,
U+2122,
U+2191,
U+2193,
U+2212,
U+2215,
U+FEFF,
U+FFFD;
} }
@font-face { @font-face {
font-family: Myriad; font-family: Myriad;
@ -21,7 +71,10 @@
font-style: normal; font-style: normal;
font-display: swap; font-display: swap;
font-stretch: 70% 110%; font-stretch: 70% 110%;
src: url("/app/themes/haiku-atelier-2024/assets/fonts/myriad/myriad-variable.woff2") format("woff2"), url("/app/themes/haiku-atelier-2024/assets/fonts/myriad/myriad-variable.ttf") format("truetype"); src:
url("/app/themes/haiku-atelier-2024/assets/fonts/myriad/myriad-variable.woff2") format("woff2"),
url("/app/themes/haiku-atelier-2024/assets/fonts/myriad/myriad-variable.ttf")
format("truetype");
} }
@font-face { @font-face {
font-family: Myriad; font-family: Myriad;
@ -29,7 +82,11 @@
font-style: italic; font-style: italic;
font-display: swap; font-display: swap;
font-stretch: 70% 110%; font-stretch: 70% 110%;
src: url("/app/themes/haiku-atelier-2024/assets/fonts/myriad/myriad-variable-italic.woff2") format("woff2"), url("/app/themes/haiku-atelier-2024/assets/fonts/myriad/myriad-variable-italic.ttf") format("truetype"); src:
url("/app/themes/haiku-atelier-2024/assets/fonts/myriad/myriad-variable-italic.woff2")
format("woff2"),
url("/app/themes/haiku-atelier-2024/assets/fonts/myriad/myriad-variable-italic.ttf")
format("truetype");
} }
:root { :root {
/* Couleurs */ /* Couleurs */
@ -178,7 +235,8 @@ button, input, select, textarea {
html { html {
font: 1rem/var(--hauteur-ligne-classique) Lato; font: 1rem/var(--hauteur-ligne-classique) Lato;
font-optical-sizing: auto; font-optical-sizing: auto;
font-variant-ligatures: common-ligatures no-discretionary-ligatures no-historical-ligatures contextual; font-variant-ligatures: common-ligatures no-discretionary-ligatures no-historical-ligatures
contextual;
font-kerning: normal; font-kerning: normal;
color: var(--couleur-noir); color: var(--couleur-noir);
text-decoration-skip-ink: auto; text-decoration-skip-ink: auto;
@ -228,6 +286,12 @@ button:disabled {
background: var(--arriere-plan-points); background: var(--arriere-plan-points);
outline-color: transparent; outline-color: transparent;
} }
@media (hover: hover) {
button:hover {
color: var(--couleur-blanc);
background: var(--couleur-gris-fonce);
}
}
button { button {
/* Particularismes. */ /* Particularismes. */
} }
@ -235,6 +299,12 @@ button.bouton-case-pleine {
width: 100%; width: 100%;
height: 100%; height: 100%;
} }
@media (hover: hover) {
button.bouton-case-pleine:hover {
color: var(--couleur-noir);
background: var(--arriere-plan-points);
}
}
button.bouton-inverse { button.bouton-inverse {
color: var(--couleur-blanc); color: var(--couleur-blanc);
background: var(--couleur-noir); background: var(--couleur-noir);
@ -252,7 +322,7 @@ button.bouton-inverse:disabled {
@media (hover: hover) { @media (hover: hover) {
button.bouton-inverse:hover { button.bouton-inverse:hover {
color: var(--couleur-noir); color: var(--couleur-noir);
background: var(--couleur-gris); background: var(--arriere-plan-points);
} }
} }
button.bouton-retour-haut { button.bouton-retour-haut {
@ -285,12 +355,6 @@ button.bouton-retour-haut[data-actif] {
background: var(--couleur-gris-fond); background: var(--couleur-gris-fond);
} }
} }
@media (hover: hover) {
button:hover {
color: var(--couleur-blanc);
background: var(--couleur-gris-fonce);
}
}
dialog { dialog {
z-index: 999; z-index: 999;
@ -351,7 +415,12 @@ input, select, textarea {
background: var(--couleur-gris); background: var(--couleur-gris);
transition: 0.2s background; transition: 0.2s background;
} }
input:focus-visible, input:focus-within, select:focus-visible, select:focus-within, textarea:focus-visible, textarea:focus-within { input:focus-visible,
input:focus-within,
select:focus-visible,
select:focus-within,
textarea:focus-visible,
textarea:focus-within {
z-index: 10; z-index: 10;
outline: 2px dashed var(--couleur-noir); outline: 2px dashed var(--couleur-noir);
} }
@ -363,20 +432,20 @@ input:disabled, select:disabled, textarea:disabled {
outline-color: transparent; outline-color: transparent;
} }
input:is([type=email], [type=text], [type=tel])::placeholder, textarea::placeholder { input:is([type="email"], [type="text"], [type="tel"])::placeholder, textarea::placeholder {
text-transform: lowercase; text-transform: lowercase;
letter-spacing: var(--espacement-inter-lettres-etendu-s); letter-spacing: var(--espacement-inter-lettres-etendu-s);
} }
input:is([type=email], [type=text], [type=tel])::selection, textarea::selection { input:is([type="email"], [type="text"], [type="tel"])::selection, textarea::selection {
color: var(--couleur-blanc); color: var(--couleur-blanc);
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 {
font-weight: 500; font-weight: 500;
color: var(--couleur-noir); color: var(--couleur-noir);
background: var(--arriere-plan-points); background: var(--arriere-plan-points);
} }
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);
} }
@ -384,7 +453,7 @@ input, label, select, textarea {
cursor: pointer; cursor: pointer;
} }
input[type=checkbox], input[type=radio] { input[type="checkbox"], input[type="radio"] {
width: var(--espace-l); width: var(--espace-l);
height: var(--espace-l); height: var(--espace-l);
padding: initial; padding: initial;
@ -392,49 +461,51 @@ input[type=checkbox], input[type=radio] {
appearance: none; appearance: none;
transition: 0.2s background; transition: 0.2s background;
} }
input[type=checkbox]:checked, input[type=radio]:checked { input[type="checkbox"]:checked, input[type="radio"]:checked {
color: var(--couleur-blanc); color: var(--couleur-blanc);
background: var(--couleur-gris-fonce); background: var(--couleur-gris-fonce);
} }
input[type=checkbox]:checked::before, input[type=radio]:checked::before { input[type="checkbox"]:checked::before, input[type="radio"]:checked::before {
content: "x"; content: "x";
position: relative; position: relative;
bottom: 0.1rem; bottom: 0.1rem;
left: 0.35rem; left: 0.35rem;
} }
@media (hover: hover) { @media (hover: hover) {
input[type=checkbox]:checked:hover, input[type=radio]:checked:hover { input[type="checkbox"]:checked:hover, input[type="radio"]:checked:hover {
color: var(--couleur-noir); color: var(--couleur-noir);
} }
} }
input[type=checkbox]:not(:checked):user-valid, input[type=radio]:not(:checked):user-valid { input[type="checkbox"]:not(:checked):user-valid, input[type="radio"]:not(:checked):user-valid {
background: initial; background: initial;
} }
input[type=checkbox], input[type=radio] { input[type="checkbox"], input[type="radio"] {
/* /*
* 1. Pour un alignement parfait du label avec la case à cocher. * 1. Pour un alignement parfait du label avec la case à cocher.
*/ */
} }
label:has(~ input[type=checkbox], ~ input[type=radio]), input[type=checkbox] + label, input[type=radio] + label { label:has(~ input[type="checkbox"], ~ input[type="radio"]),
input[type="checkbox"] + label,
input[type="radio"] + label {
padding-top: 1px; /* 1 */ padding-top: 1px; /* 1 */
font-size: 0.9rem; font-size: 0.9rem;
} }
@media (hover: hover) { @media (hover: hover) {
input[type=checkbox]:hover, input[type=radio]:hover { input[type="checkbox"]:hover, input[type="radio"]:hover {
background: var(--couleur-gris-fonce); background: var(--couleur-gris-fonce);
} }
} }
input[type=radio] { input[type="radio"] {
border-radius: 100%; border-radius: 100%;
appearance: initial; appearance: initial;
} }
input[type=radio]:checked { input[type="radio"]:checked {
display: inline-flex; display: inline-flex;
place-content: center; place-content: center;
place-items: center; place-items: center;
} }
input[type=radio]:checked::before { input[type="radio"]:checked::before {
content: " "; content: " ";
inset: initial; inset: initial;
display: inline-block; display: inline-block;
@ -476,7 +547,14 @@ a {
text-decoration: underline; /* 1 */ text-decoration: underline; /* 1 */
text-decoration-color: transparent; /* 1 */ text-decoration-color: transparent; /* 1 */
text-decoration-skip-ink: auto; /* 1 */ text-decoration-skip-ink: auto; /* 1 */
transition: 0.2s background, 0.2s border-color, 0.2s color, 0.2s font-weight, 0.2s outline-color, 0.2s letter-spacing, 0.2s text-decoration-color; /* 3 */ transition:
0.2s background,
0.2s border-color,
0.2s color,
0.2s font-weight,
0.2s outline-color,
0.2s letter-spacing,
0.2s text-decoration-color; /* 3 */
text-decoration-skip: edges; /* 1 */ text-decoration-skip: edges; /* 1 */
/* Change les couleurs de l'arrière-plan et du contour pour marquer le focus. */ /* Change les couleurs de l'arrière-plan et du contour pour marquer le focus. */
} }
@ -562,7 +640,9 @@ ul.avec-puce-cercle {
} }
ul.avec-puce-cercle a { ul.avec-puce-cercle a {
padding-left: var(--liste-puce-cercle-lien-marges-internes-ligne-debut); /* 1 */ padding-left: var(--liste-puce-cercle-lien-marges-internes-ligne-debut); /* 1 */
background: no-repeat var(--liste-puce-cercle-puce-position-horizontale) center/var(--liste-puce-cercle-puce-taille) url("/app/themes/haiku-atelier-2024/assets/img/icons/dot.svg"); /* 2 */ background: no-repeat var(--liste-puce-cercle-puce-position-horizontale) center/var(
--liste-puce-cercle-puce-taille
) url("/app/themes/haiku-atelier-2024/assets/img/icons/dot.svg"); /* 2 */
} }
video { video {
@ -618,7 +698,7 @@ video {
transform: translateX(-100%); transform: translateX(-100%);
} }
} }
body:has(#menu-mobile:not([aria-hidden=true])) { body:has(#menu-mobile:not([aria-hidden="true"])) {
touch-action: none; touch-action: none;
overflow: hidden; overflow: hidden;
} }
@ -638,11 +718,11 @@ body:has(#menu-mobile:not([aria-hidden=true])) {
transition: display 400ms allow-discrete; transition: display 400ms allow-discrete;
-webkit-overflow-scrolling: none; -webkit-overflow-scrolling: none;
} }
#menu-mobile[aria-hidden=true] { #menu-mobile[aria-hidden="true"] {
display: none; display: none;
animation: fade-out 400ms both; animation: fade-out 400ms both;
} }
#menu-mobile[aria-hidden=true] .menu-modale__fond { #menu-mobile[aria-hidden="true"] .menu-modale__fond {
animation: fade-out 400ms both; animation: fade-out 400ms both;
} }
#menu-mobile .menu-modale__fond { #menu-mobile .menu-modale__fond {
@ -775,11 +855,13 @@ body:has(#menu-mobile:not([aria-hidden=true])) {
/* Dispositions */ /* Dispositions */
--liste-puce-cercle-puce-position-horizontale: 3.5ch; /* 3 */ --liste-puce-cercle-puce-position-horizontale: 3.5ch; /* 3 */
} }
#en-tete .menu-navigation__entree:has(a[aria-current=page]) { #en-tete .menu-navigation__entree:has(a[aria-current="page"]) {
background: url("/app/themes/haiku-atelier-2024/assets/img/icons/cloud-penche-gris.svg") bottom/auto 90% no-repeat; background: url("/app/themes/haiku-atelier-2024/assets/img/icons/cloud-penche-gris.svg")
bottom/auto 90% no-repeat;
} }
#en-tete .menu-navigation__entree--courante { #en-tete .menu-navigation__entree--courante {
background: url("/app/themes/haiku-atelier-2024/assets/img/icons/cloud-penche-gris.svg") bottom/auto 90% no-repeat; background: url("/app/themes/haiku-atelier-2024/assets/img/icons/cloud-penche-gris.svg")
bottom/auto 90% no-repeat;
} }
#en-tete .menu-navigation__entree a { #en-tete .menu-navigation__entree a {
display: inline-block; /* 1 */ display: inline-block; /* 1 */
@ -788,7 +870,8 @@ body:has(#menu-mobile:not([aria-hidden=true])) {
} }
@media (hover: hover) { @media (hover: hover) {
#en-tete .menu-navigation__entree:hover { #en-tete .menu-navigation__entree:hover {
background: url("/app/themes/haiku-atelier-2024/assets/img/icons/cloud-penche-gris.svg") bottom/auto 90% no-repeat; background: url("/app/themes/haiku-atelier-2024/assets/img/icons/cloud-penche-gris.svg")
bottom/auto 90% no-repeat;
} }
} }
@media (width <= 1000px) { @media (width <= 1000px) {
@ -809,7 +892,9 @@ body:has(#menu-mobile:not([aria-hidden=true])) {
#en-tete .compte-panier[disabled] { #en-tete .compte-panier[disabled] {
background: var(--arriere-plan-points); background: var(--arriere-plan-points);
} }
#en-tete .compte-panier[disabled] a:hover, #en-tete .compte-panier[disabled] a:active, #en-tete .compte-panier[disabled] a:focus-within { #en-tete .compte-panier[disabled] a:hover,
#en-tete .compte-panier[disabled] a:active,
#en-tete .compte-panier[disabled] a:focus-within {
border: 1px solid var(--couleur-noir); border: 1px solid var(--couleur-noir);
} }
#en-tete .compte-panier a { #en-tete .compte-panier a {
@ -818,7 +903,7 @@ body:has(#menu-mobile:not([aria-hidden=true])) {
text-transform: lowercase; text-transform: lowercase;
background: transparent; background: transparent;
} }
#en-tete .compte-panier a[data-contient-articles=true] { #en-tete .compte-panier a[data-contient-articles="true"] {
background: var(--couleur-gris-fond); background: var(--couleur-gris-fond);
} }
#en-tete .compte-panier a:hover, #en-tete .compte-panier a:focus-within { #en-tete .compte-panier a:hover, #en-tete .compte-panier a:focus-within {
@ -913,7 +998,8 @@ body:has(#menu-mobile:not([aria-hidden=true])) {
} }
#menu-categories-produits ul { #menu-categories-produits ul {
display: grid; display: grid;
grid-template-columns: repeat(auto-fit, minmax(var(--menu-entree-longueur-minimale), 1fr)); /* 1 */ grid-template-columns:
repeat(auto-fit, minmax(var(--menu-entree-longueur-minimale), 1fr)); /* 1 */
gap: 1px; gap: 1px;
place-items: center; place-items: center;
/* /*
@ -1023,7 +1109,9 @@ body:has(#menu-mobile:not([aria-hidden=true])) {
top: var(--colonne-gauche-position-haut); top: var(--colonne-gauche-position-haut);
height: var(--colonne-gauche-photo-hauteur); height: var(--colonne-gauche-photo-hauteur);
} }
.photos-produit .colonne.colonne-gauche figure, .photos-produit .colonne.colonne-gauche picture, .photos-produit .colonne.colonne-gauche img { .photos-produit .colonne.colonne-gauche figure,
.photos-produit .colonne.colonne-gauche picture,
.photos-produit .colonne.colonne-gauche img {
height: 100%; height: 100%;
} }
.photos-produit .colonne.colonne-droite img { .photos-produit .colonne.colonne-droite img {
@ -1098,7 +1186,8 @@ body:has(#menu-mobile:not([aria-hidden=true])) {
--carte-produit-longueur-maximale: 1000px; --carte-produit-longueur-maximale: 1000px;
display: grid; display: grid;
grid-auto-rows: 1fr; grid-auto-rows: 1fr;
grid-template-columns: repeat(auto-fit, minmax(var(--carte-produit-longueur-minimale), 1fr)); /* 1 */ grid-template-columns:
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);
} }
@ -1340,7 +1429,9 @@ body:has(#menu-mobile:not([aria-hidden=true])) {
.details-produit__textes .section-textuelle:not(:last-of-type) { .details-produit__textes .section-textuelle:not(:last-of-type) {
border-block-end: 1px solid var(--couleur-noir); border-block-end: 1px solid var(--couleur-noir);
} }
.details-produit__textes .section-textuelle:has(button[aria-expanded=false]) .section-textuelle__contenu { .details-produit__textes
.section-textuelle:has(button[aria-expanded="false"])
.section-textuelle__contenu {
display: none; display: none;
} }
.details-produit__textes .section-textuelle h3 { .details-produit__textes .section-textuelle h3 {
@ -1449,7 +1540,10 @@ body:has(#menu-mobile:not([aria-hidden=true])) {
position: relative; position: relative;
} }
@media (hover: hover) { @media (hover: hover) {
.produits-similaires .grille-produits-similaires article figure a:hover .produit__illustration__survol { .produits-similaires
.grille-produits-similaires
article figure a:hover
.produit__illustration__survol {
visibility: visible; visibility: visible;
opacity: 100%; opacity: 100%;
transition: 0.3s opacity, 0.3s visibility; transition: 0.3s opacity, 0.3s visibility;

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

3
web/app/themes/haiku-atelier-2024/assets/css/pages/page-boutique.css
View file

@ -7,6 +7,9 @@
height: initial; height: initial;
margin: auto; margin: auto;
padding: var(--espace-xl) 0; padding: var(--espace-xl) 0;
font-style: italic;
text-transform: uppercase;
letter-spacing: var(--espacement-inter-lettres-etendu-m);
} }
/* # sourceMappingURL=page-boutique.css.map */ /* # sourceMappingURL=page-boutique.css.map */

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

@ -1 +1 @@
{"version":3,"sourceRoot":"","sources":["../../../src/sass/pages/page-boutique.scss"],"names":[],"mappings":"AAGE;EACE;EACA;EACA;;AAEA;EACE;EACA;EACA","file":"page-boutique.css"} {"version":3,"sourceRoot":"","sources":["../../../src/sass/pages/page-boutique.scss"],"names":[],"mappings":"AAGE;EACE;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA","file":"page-boutique.css"}

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

@ -1 +1 @@
#page-boutique .actions{text-align:center;align-content:center;width:100%}#page-boutique .actions button{height:initial;padding:var(--espace-xl) 0;margin:auto} #page-boutique .actions{text-align:center;align-content:center;width:100%}#page-boutique .actions button{height:initial;padding:var(--espace-xl) 0;text-transform:uppercase;letter-spacing:var(--espacement-inter-lettres-etendu-m);margin:auto;font-style:italic}

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

@ -29,12 +29,26 @@ button {
outline-color: transparent; outline-color: transparent;
} }
@media (hover: hover) {
&:hover {
color: var(--couleur-blanc);
background: var(--couleur-gris-fonce);
}
}
/* Particularismes. */ /* Particularismes. */
// Bouton prenant toute l'espace disponible. // Bouton prenant toute l'espace disponible.
&.bouton-case-pleine { &.bouton-case-pleine {
width: 100%; width: 100%;
height: 100%; height: 100%;
@media (hover: hover) {
&:hover {
color: var(--couleur-noir);
background: var(--arriere-plan-points);
}
}
} }
// Bouton avec les couleurs inversées. // Bouton avec les couleurs inversées.
@ -58,7 +72,7 @@ button {
@media (hover: hover) { @media (hover: hover) {
&:hover { &:hover {
color: var(--couleur-noir); color: var(--couleur-noir);
background: var(--couleur-gris); background: var(--arriere-plan-points);
} }
} }
} }
@ -97,11 +111,4 @@ button {
} }
} }
} }
@media (hover: hover) {
&:hover {
color: var(--couleur-blanc);
background: var(--couleur-gris-fonce);
}
}
} }

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

@ -27,6 +27,7 @@
gap: 1px; /* 2 */ gap: 1px; /* 2 */
min-height: var(--grille-produits-hauteur-minimale); min-height: var(--grille-produits-hauteur-minimale);
// Carte d'un Produit.
article { article {
max-width: var(--carte-produit-longueur-maximale); max-width: var(--carte-produit-longueur-maximale);
box-shadow: 0 0 0 1px var(--couleur-noir); /* 2 */ box-shadow: 0 0 0 1px var(--couleur-noir); /* 2 */

3
web/app/themes/haiku-atelier-2024/src/sass/pages/page-boutique.scss
View file

@ -10,6 +10,9 @@
height: initial; height: initial;
margin: auto; margin: auto;
padding: var(--espace-xl) 0; padding: var(--espace-xl) 0;
font-style: italic;
text-transform: uppercase;
letter-spacing: var(--espacement-inter-lettres-etendu-m);
} }
} }
} }

2
web/app/themes/haiku-atelier-2024/views/boutique.twig
View file

@ -24,7 +24,7 @@ const _etats = {
<div class="actions"> <div class="actions">
<button <button
{{ products|length == 12 ? '' : 'hidden' }} class="bouton-case-pleine bouton-inverse" {{ products|length == 12 ? '' : 'hidden' }} class="bouton-case-pleine"
id="bouton-plus-de-produits" type="button" id="bouton-plus-de-produits" type="button"
> >
Show more Show more