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

ref(styles) wip harmonisation des Boutons

Browse source
This commit is contained in:
gcch 2026-04-30 10:56:01 +02:00
commit 94a9a6773d
15 changed files with 61 additions and 40 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -292,9 +292,12 @@ button {
button.bouton-case-pleine {
width: 100%;
height: 100%;
font-style: italic;
text-transform: uppercase;
letter-spacing: var(--espacement-inter-lettres-etendu-m);
}
@media (hover: hover) {
button.bouton-case-pleine:hover {
button.bouton-case-pleine:not(:disabled):hover {
color: var(--couleur-noir);
background: var(--arriere-plan-points);
}
@ -314,7 +317,7 @@ button.bouton-inverse:disabled {
color: var(--couleur-blanc);
}
@media (hover: hover) {
button.bouton-inverse:hover {
button.bouton-inverse:not(:disabled):hover {
color: var(--couleur-noir);
background: var(--arriere-plan-points);
}
@ -344,13 +347,13 @@ button.bouton-retour-haut[data-actif] {
opacity: 50%;
}
@media (hover: hover) {
button.bouton-retour-haut[data-actif]:hover {
button.bouton-retour-haut[data-actif]:not(:disabled):hover {
opacity: 100%;
background: var(--couleur-gris-fond);
}
}
@media (hover: hover) {
button:hover {
button:not(:disabled):hover {
color: var(--couleur-blanc);
background: var(--couleur-gris-fonce);
}
@ -462,8 +465,8 @@ input[type="checkbox"], input[type="radio"] {
transition: 0.2s background;
}
input[type="checkbox"]:checked, input[type="radio"]:checked {
color: var(--couleur-blanc);
background: var(--couleur-gris-fonce);
color: var(--couleur-noir);
background: var(--arriere-plan-points);
}
input[type="checkbox"]:checked::before, input[type="radio"]:checked::before {
content: "x";
@ -492,7 +495,7 @@ input[type="radio"] + label {
}
@media (hover: hover) {
input[type="checkbox"]:hover, input[type="radio"]:hover {
background: var(--couleur-gris-fonce);
background: var(--arriere-plan-points);
}
}
@ -1474,8 +1477,6 @@ body:has(#menu-mobile:not([aria-hidden="true"])) {
}
.details-produit__actions button {
padding: var(--section-marges-internes);
font-style: italic;
text-transform: uppercase;
}
@media (hover: hover) {
.details-produit__actions button:not([disabled]):hover {

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-boutique.css
View file

@ -4,12 +4,7 @@
text-align: center;
}
#page-boutique .actions button {
height: initial;
margin: auto;
padding: var(--espace-xl) 0;
font-style: italic;
text-transform: uppercase;
letter-spacing: var(--espacement-inter-lettres-etendu-m);
}
/* # 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;EACA;EACA;EACA","file":"page-boutique.css"}
{"version":3,"sourceRoot":"","sources":["../../../src/sass/pages/page-boutique.scss"],"names":[],"mappings":"AAGE;EACE;EACA;EACA;;AAEA;EACE","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;text-transform:uppercase;letter-spacing:var(--espacement-inter-lettres-etendu-m);margin:auto;font-style:italic}
#page-boutique .actions{text-align:center;align-content:center;width:100%}#page-boutique .actions button{padding:var(--espace-xl) 0}

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

@ -385,11 +385,23 @@
text-align: center;
text-transform: uppercase;
letter-spacing: 2px;
background: var(--couleur-noir);
border-block: 1px solid var(--couleur-noir);
border-block-end: 0;
background: var(--arriere-plan-points);
}
#panneau-informations-client .panneau__pied-de-page:has(button[disabled]) {
background: var(--couleur-gris-fond);
}
#panneau-informations-client .panneau__pied-de-page button {
padding: var(--espace-l) 0;
}
@media (hover: hover) {
#panneau-informations-client .panneau__pied-de-page button:not([disabled]):hover {
font-weight: 600;
color: var(--couleur-blanc);
background: var(--couleur-gris-fonce-fond);
}
}
@media (width <= 500px) {
#panneau-informations-client .panneau__formulaires {
padding: var(--espace-xl) 0;

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;;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"}
{"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;EACA;;AAGA;EACE;;AAGF;EACE;;AAGE;EACE;IACE;IACA;IACA;;;AAOV;EACE;IACE;;;;AClLN;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

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

@ -31,13 +31,16 @@ button {
/* Particularismes. */
// Bouton prenant toute l'espace disponible.
// Bouton occuputant tout l'espace disponible.
&.bouton-case-pleine {
width: 100%;
height: 100%;
font-style: italic;
text-transform: uppercase;
letter-spacing: var(--espacement-inter-lettres-etendu-m);
@media (hover: hover) {
&:hover {
&:not(:disabled):hover {
color: var(--couleur-noir);
background: var(--arriere-plan-points);
}
@ -63,7 +66,7 @@ button {
}
@media (hover: hover) {
&:hover {
&:not(:disabled):hover {
color: var(--couleur-noir);
background: var(--arriere-plan-points);
}
@ -97,7 +100,7 @@ button {
opacity: 50%;
@media (hover: hover) {
&:hover {
&:not(:disabled):hover {
opacity: 100%;
background: var(--couleur-gris-fond);
}
@ -106,7 +109,7 @@ button {
}
@media (hover: hover) {
&:hover {
&:not(:disabled):hover {
color: var(--couleur-blanc);
background: var(--couleur-gris-fonce);
}

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

@ -66,8 +66,8 @@ input[type="checkbox"], input[type="radio"] {
transition: 0.2s background;
&:checked {
color: var(--couleur-blanc);
background: var(--couleur-gris-fonce);
color: var(--couleur-noir);
background: var(--arriere-plan-points);
// TODO: Utiliser un SVG plutôt qu'un « x » ?
&::before {
@ -98,7 +98,7 @@ input[type="checkbox"], input[type="radio"] {
@media (hover: hover) {
&:hover {
background: var(--couleur-gris-fonce);
background: var(--arriere-plan-points);
}
}
}

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

@ -216,17 +216,15 @@
background: var(--arriere-plan-points);
transition: 0.2s background;
// Indique un Bouton désactivé avec un fond gris en-dessous du fond à motif
// Indique un Bouton désactivé avec un fond gris en-dessous du fond à motif.
&:has(button[disabled]) {
background: var(--couleur-gris-fond);
}
button {
padding: var(--section-marges-internes);
font-style: italic;
text-transform: uppercase;
// 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]) {
@media (hover: hover) {
&:hover {

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

@ -155,10 +155,27 @@
text-align: center;
text-transform: uppercase;
letter-spacing: 2px;
background: var(--couleur-noir);
border-block: 1px solid var(--couleur-noir);
border-block-end: 0;
background: var(--arriere-plan-points);
// Indique un Bouton désactivé avec un fond gris en-dessous du fond à motif
&:has(button[disabled]) {
background: var(--couleur-gris-fond);
}
button {
padding: var(--espace-l) 0;
&:not([disabled]) {
@media (hover: hover) {
&:hover {
font-weight: 600;
color: var(--couleur-blanc);
background: var(--couleur-gris-fonce-fond);
}
}
}
}
}

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

@ -7,12 +7,7 @@
text-align: center;
button {
height: initial;
margin: auto;
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/parts/pages/panier/panneau-informations-client.twig
View file

@ -260,7 +260,7 @@
<footer class="panneau__pied-de-page">
<button
class="bouton-case-pleine bouton-inverse" form="formulaire-commande"
class="bouton-case-pleine" form="formulaire-commande"
type="submit"
>
Calculate shipping