ref(css) corrige et remanie le CSS
This commit is contained in:
parent
452b2f5238
commit
73c376dad4
16 changed files with 156 additions and 108 deletions
|
|
@ -34,6 +34,7 @@
|
|||
:root {
|
||||
/* Couleurs */
|
||||
--couleur-blanc: #ffffff;
|
||||
--couleur-blanc-fond: rgb(255 255 255 / 90%);
|
||||
--couleur-gris: #eceaeb;
|
||||
--couleur-gris-fonce: #808080;
|
||||
--couleur-gris-fonce-fond: rgb(128 128 128 / 80%);
|
||||
|
|
@ -365,7 +366,7 @@ body:has(#menu-mobile:not([aria-hidden=true])) {
|
|||
z-index: 997;
|
||||
inset: var(--en-tete-hauteur) 0 0 0;
|
||||
overflow: hidden;
|
||||
overscroll-behavior: none;
|
||||
overscroll-behavior: contain;
|
||||
display: flex;
|
||||
width: 100vw;
|
||||
height: var(--menu-mobile-hauteur);
|
||||
|
|
@ -418,6 +419,11 @@ body:has(#menu-mobile:not([aria-hidden=true])) {
|
|||
padding-top: var(--espace-m);
|
||||
padding-bottom: var(--espace-m);
|
||||
}
|
||||
@media (width >= 1000px) {
|
||||
#menu-mobile {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes fade-in {
|
||||
to {
|
||||
|
|
@ -619,7 +625,7 @@ body:has(#menu-mobile:not([aria-hidden=true])) {
|
|||
--menu-entree-marges-internes-ligne: var(--espace-s);
|
||||
display: flex;
|
||||
flex-flow: row wrap;
|
||||
font-size: 0.9rem;
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
#menu-categories-produits ul li {
|
||||
flex-grow: 1;
|
||||
|
|
@ -686,7 +692,6 @@ body:has(#menu-mobile:not([aria-hidden=true])) {
|
|||
* collapse »).
|
||||
*/
|
||||
.grille-produits {
|
||||
/* Dimensions */
|
||||
--grille-produits-hauteur-minimale: var(--contenu-page-hauteur-minimale);
|
||||
--aucun-produit-hauteur: var(--contenu-page-hauteur-minimale);
|
||||
--carte-produit-longueur-minimale: 448px;
|
||||
|
|
@ -776,26 +781,28 @@ body:has(#menu-mobile:not([aria-hidden=true])) {
|
|||
*
|
||||
* 1. Flotte toujours en bas de la page et s'arrête avant les Produits de la même collection.
|
||||
* 2. Conteneur existant pour que le flottement sticky fonctionne ; n'a pas de dimensions.
|
||||
* 3. Permet de mieux discerner le texte sur le fond transparent.
|
||||
*/
|
||||
.informations-produit {
|
||||
--boite-couleur-fond: rgb(255 255 255 / 90%);
|
||||
--boite-position-basse: var(--espace-m);
|
||||
--boite-longueur: 70ch;
|
||||
--section-marges-internes: var(--espace-m);
|
||||
--onglet-marges-internes: var(--espace-xl);
|
||||
position: sticky; /* 1 */
|
||||
bottom: var(--boite-position-basse); /* 1 */
|
||||
overflow: visible;
|
||||
width: 0; /* 2 */
|
||||
height: 0; /* 2 */
|
||||
font-weight: 450; /* 3 */
|
||||
/* Nom du Produit, sélecteur de variation et prix du Produit */
|
||||
/* Bouton « Ajouter au Panier » */
|
||||
}
|
||||
.informations-produit__conteneur {
|
||||
position: relative;
|
||||
transform: translate(calc(50vw - var(--boite-longueur) / 2), -100%);
|
||||
display: grid;
|
||||
width: var(--boite-longueur);
|
||||
max-width: var(--boite-longueur);
|
||||
border: 1px solid var(--couleur-noir);
|
||||
/*
|
||||
* Définis les apparence et comportement de toutes les sections de la boîte.
|
||||
*/
|
||||
|
|
@ -805,7 +812,7 @@ body:has(#menu-mobile:not([aria-hidden=true])) {
|
|||
flex-flow: row nowrap;
|
||||
height: 100%;
|
||||
padding: var(--section-marges-internes);
|
||||
background: var(--boite-couleur-fond);
|
||||
background: var(--couleur-blanc-fond);
|
||||
}
|
||||
.informations-produit__conteneur > section + section {
|
||||
border-top: 1px solid var(--couleur-noir);
|
||||
|
|
@ -817,10 +824,25 @@ body:has(#menu-mobile:not([aria-hidden=true])) {
|
|||
padding: initial;
|
||||
}
|
||||
.informations-produit .onglets-details-produit > section {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
transform: translateY(-100%);
|
||||
overflow-y: auto;
|
||||
grid-column: span 3;
|
||||
padding: var(--section-marges-internes);
|
||||
font-weight: 350;
|
||||
padding: var(--onglet-marges-internes);
|
||||
visibility: visible;
|
||||
opacity: 1;
|
||||
background: inherit;
|
||||
border-color: var(--couleur-noir);
|
||||
border-style: solid;
|
||||
border-width: 1px 1px 0;
|
||||
transition: 0.2s opacity, 0.2s visibility;
|
||||
}
|
||||
.informations-produit .onglets-details-produit > section[hidden] {
|
||||
display: initial !important;
|
||||
visibility: hidden;
|
||||
opacity: 0;
|
||||
}
|
||||
.informations-produit .onglets-details-produit > section ul {
|
||||
list-style: disc;
|
||||
|
|
@ -843,10 +865,8 @@ body:has(#menu-mobile:not([aria-hidden=true])) {
|
|||
}
|
||||
.informations-produit .onglets-details-produit > ul li:first-of-type a {
|
||||
border-right-color: transparent;
|
||||
border-left-color: transparent;
|
||||
}
|
||||
.informations-produit .onglets-details-produit > ul li:last-of-type a {
|
||||
border-right-color: transparent;
|
||||
border-left-color: transparent;
|
||||
}
|
||||
.informations-produit .onglets-details-produit > ul li a {
|
||||
|
|
@ -854,7 +874,7 @@ body:has(#menu-mobile:not([aria-hidden=true])) {
|
|||
width: 100%;
|
||||
height: 100%;
|
||||
padding: var(--espace-xs) 0;
|
||||
border-top: 1px solid transparent;
|
||||
border-top: 1px solid var(--couleur-noir);
|
||||
border-right: 1px solid var(--couleur-noir);
|
||||
border-left: 1px solid var(--couleur-noir);
|
||||
/* Quand l'onglet est sélectionné */
|
||||
|
|
@ -874,12 +894,17 @@ body:has(#menu-mobile:not([aria-hidden=true])) {
|
|||
column-gap: var(--espace-xl);
|
||||
place-items: center;
|
||||
justify-content: space-between;
|
||||
font-size: 1.25rem;
|
||||
font-weight: 500;
|
||||
font-style: italic;
|
||||
line-height: var(--hauteur-ligne-rapprochee);
|
||||
border-color: var(--couleur-noir);
|
||||
border-style: solid;
|
||||
border-width: 1px;
|
||||
}
|
||||
.informations-produit .selecteur-produit__nom {
|
||||
letter-spacing: 1px;
|
||||
font-weight: 500;
|
||||
letter-spacing: var(--espacement-inter-lettres-etendu-m);
|
||||
}
|
||||
.informations-produit .selecteur-produit__selection-variation {
|
||||
display: flex;
|
||||
|
|
@ -930,16 +955,16 @@ body:has(#menu-mobile:not([aria-hidden=true])) {
|
|||
padding: var(--espace-s) var(--espace-xl);
|
||||
text-align: center;
|
||||
appearance: none;
|
||||
background: rgba(236, 234, 235, 0.9);
|
||||
background: var(--couleur-fond);
|
||||
border: 1px solid var(--couleur-noir);
|
||||
}
|
||||
@supports selector(:user-valid) {
|
||||
.informations-produit .selecteur-produit__selection-variation select:user-valid {
|
||||
background: rgba(235, 255, 184, 0.9);
|
||||
background: var(--couleur-jaune-fond);
|
||||
}
|
||||
}
|
||||
.informations-produit .selecteur-produit__selection-variation option {
|
||||
background: rgba(236, 234, 235, 0.9);
|
||||
background: var(--couleur-fond);
|
||||
}
|
||||
.informations-produit .selecteur-produit__prix {
|
||||
font-style: initial;
|
||||
|
|
@ -953,7 +978,7 @@ body:has(#menu-mobile:not([aria-hidden=true])) {
|
|||
/* Indique que le Bouton est désactivé en utilisant un fond gris */
|
||||
}
|
||||
.informations-produit .actions-produit:has(button[disabled]) {
|
||||
background: rgba(236, 234, 235, 0.9);
|
||||
background: var(--couleur-fond);
|
||||
}
|
||||
.informations-produit .actions-produit button {
|
||||
height: initial;
|
||||
|
|
@ -972,11 +997,13 @@ body:has(#menu-mobile:not([aria-hidden=true])) {
|
|||
}
|
||||
@media (width <= 700px) {
|
||||
.informations-produit {
|
||||
--section-marges-internes: var(--espace-xl);
|
||||
--section-marges-internes: var(--espace-l);
|
||||
--onglet-marges-internes: var(--espace-l);
|
||||
position: relative;
|
||||
bottom: initial;
|
||||
width: initial;
|
||||
bottom: var(--espace-xl);
|
||||
width: min(var(--boite-longueur), 100%);
|
||||
height: initial;
|
||||
margin: auto;
|
||||
}
|
||||
.informations-produit__conteneur {
|
||||
transform: initial;
|
||||
|
|
@ -987,17 +1014,9 @@ body:has(#menu-mobile:not([aria-hidden=true])) {
|
|||
}
|
||||
}
|
||||
|
||||
@media (hover: hover) {
|
||||
.selecteur-personnalise {
|
||||
display: block !important;
|
||||
}
|
||||
.selecteur-natif:focus + .selecteur-personnalise {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
.produits-similaires {
|
||||
/* Dimensions */
|
||||
--carte-produit-longueur-minimale: 448px;
|
||||
--carte-produit-longueur-maximale: 900px;
|
||||
display: grid;
|
||||
grid-template-areas: "en-tete en-tete en-tete" "produits produits produits";
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
|
|
@ -1029,6 +1048,7 @@ body:has(#menu-mobile:not([aria-hidden=true])) {
|
|||
width: 100%;
|
||||
}
|
||||
.produits-similaires .grille-produits-similaires article {
|
||||
max-width: var(--carte-produit-longueur-maximale);
|
||||
box-shadow: 0 0 0 1px var(--couleur-noir);
|
||||
}
|
||||
.produits-similaires .grille-produits-similaires article figure {
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -261,7 +261,7 @@
|
|||
width: fit-content;
|
||||
margin: auto;
|
||||
margin-bottom: var(--espace-m);
|
||||
font-size: 0.9rem;
|
||||
font-size: 0.8rem;
|
||||
font-style: italic;
|
||||
}
|
||||
#panneau-informations-client .panneau__formulaires .panneau__formulaires__separation-adresses label {
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -3,6 +3,7 @@
|
|||
:root {
|
||||
/* Couleurs */
|
||||
--couleur-blanc: #ffffff;
|
||||
--couleur-blanc-fond: rgb(255 255 255 / 90%);
|
||||
--couleur-gris: #eceaeb;
|
||||
--couleur-gris-fonce: #808080;
|
||||
--couleur-gris-fonce-fond: rgb(128 128 128 / 80%);
|
||||
|
|
|
|||
|
|
@ -13,7 +13,7 @@
|
|||
* collapse »).
|
||||
*/
|
||||
.grille-produits {
|
||||
/* Dimensions */
|
||||
// Dimensions
|
||||
--grille-produits-hauteur-minimale: var(--contenu-page-hauteur-minimale);
|
||||
--aucun-produit-hauteur: var(--contenu-page-hauteur-minimale);
|
||||
--carte-produit-longueur-minimale: 448px;
|
||||
|
|
|
|||
|
|
@ -6,30 +6,32 @@
|
|||
*
|
||||
* 1. Flotte toujours en bas de la page et s'arrête avant les Produits de la même collection.
|
||||
* 2. Conteneur existant pour que le flottement sticky fonctionne ; n'a pas de dimensions.
|
||||
* 3. Permet de mieux discerner le texte sur le fond transparent.
|
||||
*/
|
||||
.informations-produit {
|
||||
// Couleurs
|
||||
--boite-couleur-fond: rgb(255 255 255 / 90%);
|
||||
|
||||
// Dimensions et positions
|
||||
--boite-position-basse: var(--espace-m);
|
||||
--boite-longueur: 70ch;
|
||||
|
||||
// Marges
|
||||
--section-marges-internes: var(--espace-m);
|
||||
--onglet-marges-internes: var(--espace-xl);
|
||||
|
||||
position: sticky; /* 1 */
|
||||
bottom: var(--boite-position-basse); /* 1 */
|
||||
overflow: visible;
|
||||
width: 0; /* 2 */
|
||||
height: 0; /* 2 */
|
||||
font-weight: 450; /* 3 */
|
||||
|
||||
&__conteneur {
|
||||
position: relative;
|
||||
transform: translate(calc(50vw - var(--boite-longueur) / 2), -100%);
|
||||
display: grid;
|
||||
width: var(--boite-longueur);
|
||||
max-width: var(--boite-longueur);
|
||||
border: 1px solid var(--couleur-noir);
|
||||
|
||||
// border: 1px solid var(--couleur-noir);
|
||||
|
||||
/*
|
||||
* Définis les apparence et comportement de toutes les sections de la boîte.
|
||||
|
|
@ -39,7 +41,7 @@
|
|||
flex-flow: row nowrap;
|
||||
height: 100%;
|
||||
padding: var(--section-marges-internes);
|
||||
background: var(--boite-couleur-fond);
|
||||
background: var(--couleur-blanc-fond);
|
||||
|
||||
+ section {
|
||||
border-top: 1px solid var(--couleur-noir);
|
||||
|
|
@ -54,10 +56,26 @@
|
|||
padding: initial;
|
||||
|
||||
> section {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
transform: translateY(-100%);
|
||||
overflow-y: auto;
|
||||
grid-column: span 3;
|
||||
padding: var(--section-marges-internes);
|
||||
font-weight: 350;
|
||||
padding: var(--onglet-marges-internes);
|
||||
visibility: visible;
|
||||
opacity: 1;
|
||||
background: inherit;
|
||||
border-color: var(--couleur-noir);
|
||||
border-style: solid;
|
||||
border-width: 1px 1px 0;
|
||||
transition: 0.2s opacity, 0.2s visibility;
|
||||
|
||||
&[hidden] {
|
||||
display: initial !important;
|
||||
visibility: hidden;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
ul {
|
||||
list-style: disc;
|
||||
|
|
@ -83,11 +101,9 @@
|
|||
|
||||
&:first-of-type a {
|
||||
border-right-color: transparent;
|
||||
border-left-color: transparent;
|
||||
}
|
||||
|
||||
&:last-of-type a {
|
||||
border-right-color: transparent;
|
||||
border-left-color: transparent;
|
||||
}
|
||||
|
||||
|
|
@ -96,7 +112,7 @@
|
|||
width: 100%;
|
||||
height: 100%;
|
||||
padding: var(--espace-xs) 0;
|
||||
border-top: 1px solid transparent;
|
||||
border-top: 1px solid var(--couleur-noir);
|
||||
border-right: 1px solid var(--couleur-noir);
|
||||
border-left: 1px solid var(--couleur-noir);
|
||||
|
||||
|
|
@ -128,12 +144,17 @@
|
|||
column-gap: var(--espace-xl);
|
||||
place-items: center;
|
||||
justify-content: space-between;
|
||||
font-size: 1.25rem;
|
||||
font-weight: 500;
|
||||
font-style: italic;
|
||||
line-height: var(--hauteur-ligne-rapprochee);
|
||||
border-color: var(--couleur-noir);
|
||||
border-style: solid;
|
||||
border-width: 1px;
|
||||
|
||||
&__nom {
|
||||
letter-spacing: 1px;
|
||||
font-weight: 500;
|
||||
letter-spacing: var(--espacement-inter-lettres-etendu-m);
|
||||
}
|
||||
|
||||
&__selection-variation {
|
||||
|
|
@ -194,18 +215,18 @@
|
|||
padding: var(--espace-s) var(--espace-xl);
|
||||
text-align: center;
|
||||
appearance: none;
|
||||
background: rgb(236 234 235 / 90%);
|
||||
background: var(--couleur-fond);
|
||||
border: 1px solid var(--couleur-noir);
|
||||
|
||||
@supports selector(:user-valid) {
|
||||
&:user-valid {
|
||||
background: rgb(235 255 184 / 90%);
|
||||
background: var(--couleur-jaune-fond);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
option {
|
||||
background: rgb(236 234 235 / 90%);
|
||||
background: var(--couleur-fond);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -224,7 +245,7 @@
|
|||
|
||||
/* Indique que le Bouton est désactivé en utilisant un fond gris */
|
||||
&:has(button[disabled]) {
|
||||
background: rgb(236 234 235 / 90%);
|
||||
background: var(--couleur-fond);
|
||||
}
|
||||
|
||||
button {
|
||||
|
|
@ -248,12 +269,14 @@
|
|||
}
|
||||
|
||||
@media (width <= 700px) {
|
||||
--section-marges-internes: var(--espace-xl);
|
||||
--section-marges-internes: var(--espace-l);
|
||||
--onglet-marges-internes: var(--espace-l);
|
||||
|
||||
position: relative;
|
||||
bottom: initial;
|
||||
width: initial;
|
||||
bottom: var(--espace-xl);
|
||||
width: min(var(--boite-longueur), 100%);
|
||||
height: initial;
|
||||
margin: auto;
|
||||
|
||||
&__conteneur {
|
||||
transform: initial;
|
||||
|
|
@ -264,13 +287,3 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (hover: hover) {
|
||||
.selecteur-personnalise {
|
||||
display: block !important;
|
||||
}
|
||||
|
||||
.selecteur-natif:focus + .selecteur-personnalise {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -87,7 +87,7 @@
|
|||
|
||||
display: flex;
|
||||
flex-flow: row wrap;
|
||||
font-size: 0.9rem;
|
||||
font-size: 0.8rem;
|
||||
|
||||
li {
|
||||
flex-grow: 1;
|
||||
|
|
|
|||
|
|
@ -14,7 +14,7 @@ body:has(#menu-mobile:not([aria-hidden="true"])) {
|
|||
z-index: 997;
|
||||
inset: var(--en-tete-hauteur) 0 0 0;
|
||||
overflow: hidden;
|
||||
overscroll-behavior: none;
|
||||
overscroll-behavior: contain;
|
||||
display: flex;
|
||||
width: 100vw;
|
||||
height: var(--menu-mobile-hauteur);
|
||||
|
|
@ -74,6 +74,10 @@ body:has(#menu-mobile:not([aria-hidden="true"])) {
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (width >= 1000px) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes fade-in {
|
||||
|
|
|
|||
|
|
@ -59,7 +59,7 @@
|
|||
width: fit-content;
|
||||
margin: auto;
|
||||
margin-bottom: var(--espace-m);
|
||||
font-size: 0.9rem;
|
||||
font-size: 0.8rem;
|
||||
font-style: italic;
|
||||
|
||||
label {
|
||||
|
|
|
|||
|
|
@ -1,8 +1,9 @@
|
|||
// Styles pour la section des Produits similaires (de la même Collection)
|
||||
|
||||
.produits-similaires {
|
||||
/* Dimensions */
|
||||
// Dimensions
|
||||
--carte-produit-longueur-minimale: 448px;
|
||||
--carte-produit-longueur-maximale: 900px;
|
||||
|
||||
display: grid;
|
||||
grid-template-areas:
|
||||
|
|
@ -39,6 +40,7 @@
|
|||
width: 100%;
|
||||
|
||||
article {
|
||||
max-width: var(--carte-produit-longueur-maximale);
|
||||
box-shadow: 0 0 0 1px var(--couleur-noir);
|
||||
|
||||
figure {
|
||||
|
|
|
|||
|
|
@ -9,7 +9,9 @@
|
|||
<picture>
|
||||
<img
|
||||
alt="Haiku Atelier's Logo"
|
||||
decoding="async"
|
||||
height="25.6"
|
||||
loading="eager"
|
||||
src="{{ site.theme.link }}/assets/img/logos/logo-lines.svg"
|
||||
width="80"
|
||||
/>
|
||||
|
|
@ -25,61 +27,64 @@
|
|||
id="menu-navigation-en-tete"
|
||||
>
|
||||
<ul>
|
||||
<span
|
||||
<li
|
||||
class="{{ page_courante == pages.home.lien ? 'menu-navigation__entree menu-navigation__entree--courante' : "menu-navigation__entree" }}"
|
||||
>
|
||||
<li>
|
||||
<span>
|
||||
<a
|
||||
class="lien-menu"
|
||||
href="{{ pages.home.lien }}"
|
||||
>
|
||||
{{ pages.home.nom }}
|
||||
</a>
|
||||
</li>
|
||||
</span>
|
||||
<span
|
||||
</span>
|
||||
</li>
|
||||
<li
|
||||
class="{{ page_courante == pages.about.lien ? 'menu-navigation__entree menu-navigation__entree--courante' : "menu-navigation__entree" }}"
|
||||
>
|
||||
<li>
|
||||
<span>
|
||||
<a
|
||||
class="lien-menu"
|
||||
href="{{ pages.about.lien }}"
|
||||
>
|
||||
{{ pages.about.nom }}
|
||||
</a>
|
||||
</li>
|
||||
</span>
|
||||
<span
|
||||
</span>
|
||||
</li>
|
||||
|
||||
<li
|
||||
class="{{ est_page_boutique ? 'menu-navigation__entree menu-navigation__entree--courante' : "menu-navigation__entree" }}"
|
||||
>
|
||||
<li>
|
||||
<span>
|
||||
<a
|
||||
class="lien-menu"
|
||||
href="{{ pages.shop.lien }}"
|
||||
>
|
||||
{{ pages.shop.nom }}
|
||||
</a>
|
||||
</li>
|
||||
</span>
|
||||
<span
|
||||
</span>
|
||||
</li>
|
||||
<li
|
||||
class="{{ page_courante == pages.contact.lien ? 'menu-navigation__entree menu-navigation__entree--courante' : "menu-navigation__entree" }}"
|
||||
>
|
||||
<li>
|
||||
<span>
|
||||
<a
|
||||
class="lien-menu"
|
||||
href="{{ pages.contact.lien }}"
|
||||
>
|
||||
{{ pages.contact.nom }}
|
||||
</a>
|
||||
</li>
|
||||
</span>
|
||||
</span>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
{# Bouton « Panier » avec l'indicateur de quantité de Produits #}
|
||||
<section class="compte-panier" disabled>
|
||||
<section
|
||||
class="compte-panier"
|
||||
disabled
|
||||
>
|
||||
<a
|
||||
{# href="{{ pages.cart.lien }}" #}
|
||||
class="lien-bouton"
|
||||
data-contient-articles="{{ articles_presents }}"
|
||||
disabled
|
||||
|
|
@ -109,54 +114,57 @@
|
|||
id="menu-navigation-mobile"
|
||||
>
|
||||
<ul>
|
||||
<span
|
||||
<li
|
||||
class="{{ page_courante == pages.home.lien ? 'menu-navigation__entree menu-navigation__entree--courante' : "menu-navigation__entree" }}"
|
||||
>
|
||||
<li>
|
||||
<span>
|
||||
<a
|
||||
class="lien-menu"
|
||||
href="{{ pages.home.lien }}"
|
||||
>
|
||||
{{ pages.home.nom }}
|
||||
</a>
|
||||
</li>
|
||||
</span>
|
||||
<span
|
||||
</span>
|
||||
</li>
|
||||
|
||||
<li
|
||||
class="{{ page_courante == pages.about.lien ? 'menu-navigation__entree menu-navigation__entree--courante' : "menu-navigation__entree" }}"
|
||||
>
|
||||
<li>
|
||||
<span>
|
||||
<a
|
||||
class="lien-menu"
|
||||
href="{{ pages.about.lien }}"
|
||||
>
|
||||
{{ pages.about.nom }}
|
||||
</a>
|
||||
</li>
|
||||
</span>
|
||||
<span
|
||||
</span>
|
||||
</li>
|
||||
|
||||
<li
|
||||
class="{{ est_page_boutique ? 'menu-navigation__entree menu-navigation__entree--courante' : "menu-navigation__entree" }}"
|
||||
>
|
||||
<li>
|
||||
<span>
|
||||
<a
|
||||
class="lien-menu"
|
||||
href="{{ pages.shop.lien }}"
|
||||
>
|
||||
{{ pages.shop.nom }}
|
||||
</a>
|
||||
</li>
|
||||
</span>
|
||||
<span
|
||||
</span>
|
||||
</li>
|
||||
|
||||
<li
|
||||
class="{{ page_courante == pages.contact.lien ? 'menu-navigation__entree menu-navigation__entree--courante' : "menu-navigation__entree" }}"
|
||||
>
|
||||
<li>
|
||||
<span>
|
||||
<a
|
||||
class="lien-menu"
|
||||
href="{{ pages.contact.lien }}"
|
||||
>
|
||||
{{ pages.contact.nom }}
|
||||
</a>
|
||||
</li>
|
||||
</span>
|
||||
</span>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
#}
|
||||
|
||||
<aside
|
||||
aria-label="Product's details, size and quantity selection"
|
||||
aria-label="Product's details and variation selection"
|
||||
class="informations-produit"
|
||||
>
|
||||
<div class="informations-produit__conteneur">
|
||||
|
|
@ -40,10 +40,10 @@
|
|||
<ul role="tablist">
|
||||
<li role="presentation">
|
||||
<a
|
||||
role="tab"
|
||||
aria-selected="false"
|
||||
href="#details-produit"
|
||||
id="label-details-produit"
|
||||
aria-selected="false"
|
||||
role="tab"
|
||||
>
|
||||
Details
|
||||
</a>
|
||||
|
|
@ -51,10 +51,10 @@
|
|||
|
||||
<li role="presentation">
|
||||
<a
|
||||
role="tab"
|
||||
aria-selected="false"
|
||||
href="#conditions-livraison"
|
||||
id="label-conditions-livraison"
|
||||
aria-selected="false"
|
||||
role="tab"
|
||||
>
|
||||
Shipping
|
||||
</a>
|
||||
|
|
@ -62,10 +62,10 @@
|
|||
|
||||
<li role="presentation">
|
||||
<a
|
||||
role="tab"
|
||||
aria-selected="false"
|
||||
href="#entretien-produit"
|
||||
id="label-entretien-produit"
|
||||
aria-selected="false"
|
||||
role="tab"
|
||||
>
|
||||
Care
|
||||
</a>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue