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 12:49:39 +02:00
commit 7bb792ac18
6 changed files with 87 additions and 94 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -286,12 +286,6 @@ button:disabled {
background: var(--arriere-plan-points);
outline-color: transparent;
}
@media (hover: hover) {
button:hover {
color: var(--couleur-blanc);
background: var(--couleur-gris-fonce);
}
}
button {
/* Particularismes. */
}
@ -355,6 +349,12 @@ button.bouton-retour-haut[data-actif] {
background: var(--couleur-gris-fond);
}
}
@media (hover: hover) {
button:hover {
color: var(--couleur-blanc);
background: var(--couleur-gris-fonce);
}
}
dialog {
z-index: 999;
@ -947,17 +947,14 @@ body:has(#menu-mobile:not([aria-hidden="true"])) {
/*
* Le menu avec les Catégories de Produits pour une navigation rapide.
*
* 1. Applique une marge supérieure égale à la hauteur de l'en-tête pour qu'elle puisse s'afficher
* correctement.
*/
#menu-categories-produits {
/* Dimensions */
--menu-entree-longueur-minimale: 13ch;
--menu-section-marges-bloc-debut: var(--en-tete-hauteur); /* 1 */
--menu-section-marges-bloc-debut: var(--en-tete-hauteur);
--menu-entree-marges-internes-ligne: var(--espace-m);
position: relative;
margin-top: var(--menu-section-marges-bloc-debut); /* 1 */
margin-top: var(--menu-section-marges-bloc-debut);
}
#menu-categories-produits[data-entrees-presentes-debut] svg:first-of-type {
opacity: 100%;
@ -969,8 +966,8 @@ body:has(#menu-mobile:not([aria-hidden="true"])) {
pointer-events: none;
position: absolute;
bottom: calc(17.59px - 0.35rem);
width: 0.8rem;
height: 0.8rem;
inline-size: 0.8rem;
block-size: 0.8rem;
opacity: 0%;
mix-blend-mode: exclusion;
shape-rendering: geometricprecision;
@ -1002,13 +999,10 @@ body:has(#menu-mobile:not([aria-hidden="true"])) {
repeat(auto-fit, minmax(var(--menu-entree-longueur-minimale), 1fr)); /* 1 */
gap: 1px;
place-items: center;
/*
* 1. Force chaque entrée à occuper tout l'espace alloué par grid.
*/
}
#menu-categories-produits ul li {
width: 100%; /* 1 */
font-weight: 450;
inline-size: 100%;
font-weight: 500;
font-style: italic;
color: var(--couleur-gris);
text-align: center;
@ -1016,37 +1010,38 @@ body:has(#menu-mobile:not([aria-hidden="true"])) {
letter-spacing: var(--espacement-inter-lettres-etendu-m);
background: var(--couleur-noir);
}
#menu-categories-produits ul li.categorie-courante a {
font-weight: 600;
color: var(--couleur-noir);
background: var(--couleur-gris-fonce);
}
@media (hover: hover) {
#menu-categories-produits ul li.categorie-courante a:hover {
color: var(--couleur-noir);
}
}
#menu-categories-produits ul li {
/*
* 1. Permet de créer des marges verticales.
* 2. Hérite de la longueur du conteneur.
* 3. Surchargement de styles pour les liens.
*/
#menu-categories-produits ul li:hover {
background: var(--couleur-gris);
}
#menu-categories-produits ul li a {
display: inline-block; /* 1 */
width: inherit; /* 2 */
display: inline-block;
inline-size: inherit;
padding: var(--menu-entree-marges-internes-ligne) 0;
text-decoration: none;
outline: initial; /* 3 */
}
#menu-categories-produits ul li a:focus-visible {
color: var(--couleur-gris-fonce);
outline: initial; /* 3 */
outline-color: var(--couleur-blanc);
}
@media (hover: hover) {
#menu-categories-produits ul li a:hover {
background: var(--couleur-gris-fonce);
color: var(--couleur-noir);
background: var(--arriere-plan-points);
}
}
#menu-categories-produits ul li.categorie-courante {
background: var(--couleur-gris);
}
#menu-categories-produits ul li.categorie-courante a {
font-weight: 600;
color: var(--couleur-noir);
background: var(--arriere-plan-points);
}
#menu-categories-produits ul li.categorie-courante a:focus-visible {
outline-color: var(--couleur-noir);
}
@media (hover: hover) {
#menu-categories-produits ul li.categorie-courante a:hover {
background: var(--arriere-plan-points);
}
}
@media (width <= 1000px) {
@ -1058,10 +1053,10 @@ body:has(#menu-mobile:not([aria-hidden="true"])) {
}
#menu-categories-produits ul li {
flex-grow: 1;
width: min(140px, 100%);
inline-size: min(140px, 100%);
}
#menu-categories-produits ul li a {
width: 100%;
inline-size: 100%;
border: initial;
}
}
@ -1072,8 +1067,8 @@ body:has(#menu-mobile:not([aria-hidden="true"])) {
flex-flow: row nowrap;
}
#menu-categories-produits ul li {
width: initial;
min-width: 140px;
inline-size: initial;
min-inline-size: 140px;
}
}

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

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

@ -85,6 +85,7 @@ button, input, select, textarea {
/*
* Désactive les animations pour les Utilisateurs n'en souhaitant pas.
*/
/* @media (prefers-reduced-motion) {
*, *::before, *::after {
scroll-behavior: auto !important;

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

@ -29,13 +29,6 @@ button {
outline-color: transparent;
}
@media (hover: hover) {
&:hover {
color: var(--couleur-blanc);
background: var(--couleur-gris-fonce);
}
}
/* Particularismes. */
// Bouton prenant toute l'espace disponible.
@ -111,4 +104,11 @@ button {
}
}
}
@media (hover: hover) {
&:hover {
color: var(--couleur-blanc);
background: var(--couleur-gris-fonce);
}
}
}

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

@ -2,22 +2,17 @@
/*
* Le menu avec les Catégories de Produits pour une navigation rapide.
*
* 1. Applique une marge supérieure égale à la hauteur de l'en-tête pour qu'elle puisse s'afficher
* correctement.
*/
#menu-categories-produits {
/* Dimensions */
--menu-entree-longueur-minimale: 13ch;
// Marges
--menu-section-marges-bloc-debut: var(--en-tete-hauteur); /* 1 */
--menu-section-marges-bloc-debut: var(--en-tete-hauteur);
--menu-entree-marges-internes-ligne: var(--espace-m);
// height: var(--menu-section-hauteur);
position: relative;
margin-top: var(--menu-section-marges-bloc-debut); /* 1 */
margin-top: var(--menu-section-marges-bloc-debut);
&[data-entrees-presentes-debut] {
svg:first-of-type {
@ -35,8 +30,8 @@
pointer-events: none;
position: absolute;
bottom: calc(35.18px / 2 - 0.35rem);
width: 0.8rem;
height: 0.8rem;
inline-size: 0.8rem;
block-size: 0.8rem;
opacity: 0%;
mix-blend-mode: exclusion;
shape-rendering: geometricprecision;
@ -71,12 +66,9 @@
gap: 1px;
place-items: center;
/*
* 1. Force chaque entrée à occuper tout l'espace alloué par grid.
*/
li {
width: 100%; /* 1 */
font-weight: 450;
inline-size: 100%;
font-weight: 500;
font-style: italic;
color: var(--couleur-gris);
text-align: center;
@ -84,40 +76,45 @@
letter-spacing: var(--espacement-inter-lettres-etendu-m);
background: var(--couleur-noir);
&:hover {
background: var(--couleur-gris);
}
a {
display: inline-block;
inline-size: inherit;
padding: var(--menu-entree-marges-internes-ligne) 0;
text-decoration: none;
&:focus-visible {
outline-color: var(--couleur-blanc);
}
@media (hover: hover) {
&:hover {
color: var(--couleur-noir);
background: var(--arriere-plan-points);
}
}
}
// Entrée de la Catégorie courante.
&.categorie-courante {
background: var(--couleur-gris);
a {
font-weight: 600;
color: var(--couleur-noir);
background: var(--couleur-gris-fonce);
@media (hover: hover) {
&:hover {
color: var(--couleur-noir);
}
}
}
}
/*
* 1. Permet de créer des marges verticales.
* 2. Hérite de la longueur du conteneur.
* 3. Surchargement de styles pour les liens.
*/
a {
display: inline-block; /* 1 */
width: inherit; /* 2 */
padding: var(--menu-entree-marges-internes-ligne) 0;
text-decoration: none;
outline: initial; /* 3 */
background: var(--arriere-plan-points);
&:focus-visible {
color: var(--couleur-gris-fonce);
outline: initial; /* 3 */
outline-color: var(--couleur-noir);
}
@media (hover: hover) {
&:hover {
background: var(--couleur-gris-fonce);
background: var(--arriere-plan-points);
}
}
}
}
@ -132,10 +129,10 @@
li {
flex-grow: 1;
width: min(140px, 100%);
inline-size: min(140px, 100%);
a {
width: 100%;
inline-size: 100%;
border: initial;
}
}
@ -148,8 +145,8 @@
flex-flow: row nowrap;
li {
width: initial;
min-width: 140px;
inline-size: initial;
min-inline-size: 140px;
}
}
}