wip
This commit is contained in:
parent
2d4caefd26
commit
0478744a71
12 changed files with 568 additions and 384 deletions
|
|
@ -4,16 +4,66 @@
|
|||
font-weight: 100 900;
|
||||
font-style: normal;
|
||||
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");
|
||||
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;
|
||||
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");
|
||||
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-family: Lato;
|
||||
font-weight: 100 900;
|
||||
font-style: italic;
|
||||
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");
|
||||
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;
|
||||
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");
|
||||
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-family: Myriad;
|
||||
|
|
@ -21,7 +71,10 @@
|
|||
font-style: normal;
|
||||
font-display: swap;
|
||||
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-family: Myriad;
|
||||
|
|
@ -29,7 +82,11 @@
|
|||
font-style: italic;
|
||||
font-display: swap;
|
||||
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 {
|
||||
/* Couleurs */
|
||||
|
|
@ -178,7 +235,8 @@ button, input, select, textarea {
|
|||
html {
|
||||
font: 1rem/var(--hauteur-ligne-classique) Lato;
|
||||
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;
|
||||
color: var(--couleur-noir);
|
||||
text-decoration-skip-ink: auto;
|
||||
|
|
@ -228,6 +286,12 @@ 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. */
|
||||
}
|
||||
|
|
@ -235,6 +299,12 @@ button.bouton-case-pleine {
|
|||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
@media (hover: hover) {
|
||||
button.bouton-case-pleine:hover {
|
||||
color: var(--couleur-noir);
|
||||
background: var(--arriere-plan-points);
|
||||
}
|
||||
}
|
||||
button.bouton-inverse {
|
||||
color: var(--couleur-blanc);
|
||||
background: var(--couleur-noir);
|
||||
|
|
@ -252,7 +322,7 @@ button.bouton-inverse:disabled {
|
|||
@media (hover: hover) {
|
||||
button.bouton-inverse:hover {
|
||||
color: var(--couleur-noir);
|
||||
background: var(--couleur-gris);
|
||||
background: var(--arriere-plan-points);
|
||||
}
|
||||
}
|
||||
button.bouton-retour-haut {
|
||||
|
|
@ -285,12 +355,6 @@ 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;
|
||||
|
|
@ -351,7 +415,12 @@ input, select, textarea {
|
|||
background: var(--couleur-gris);
|
||||
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;
|
||||
outline: 2px dashed var(--couleur-noir);
|
||||
}
|
||||
|
|
@ -363,20 +432,20 @@ input:disabled, select:disabled, textarea:disabled {
|
|||
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;
|
||||
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);
|
||||
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;
|
||||
color: var(--couleur-noir);
|
||||
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);
|
||||
}
|
||||
|
||||
|
|
@ -384,7 +453,7 @@ input, label, select, textarea {
|
|||
cursor: pointer;
|
||||
}
|
||||
|
||||
input[type=checkbox], input[type=radio] {
|
||||
input[type="checkbox"], input[type="radio"] {
|
||||
width: var(--espace-l);
|
||||
height: var(--espace-l);
|
||||
padding: initial;
|
||||
|
|
@ -392,49 +461,51 @@ input[type=checkbox], input[type=radio] {
|
|||
appearance: none;
|
||||
transition: 0.2s background;
|
||||
}
|
||||
input[type=checkbox]:checked, input[type=radio]:checked {
|
||||
input[type="checkbox"]:checked, input[type="radio"]:checked {
|
||||
color: var(--couleur-blanc);
|
||||
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";
|
||||
position: relative;
|
||||
bottom: 0.1rem;
|
||||
left: 0.35rem;
|
||||
}
|
||||
@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);
|
||||
}
|
||||
}
|
||||
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;
|
||||
}
|
||||
input[type=checkbox], input[type=radio] {
|
||||
input[type="checkbox"], input[type="radio"] {
|
||||
/*
|
||||
* 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 */
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
@media (hover: hover) {
|
||||
input[type=checkbox]:hover, input[type=radio]:hover {
|
||||
input[type="checkbox"]:hover, input[type="radio"]:hover {
|
||||
background: var(--couleur-gris-fonce);
|
||||
}
|
||||
}
|
||||
|
||||
input[type=radio] {
|
||||
input[type="radio"] {
|
||||
border-radius: 100%;
|
||||
appearance: initial;
|
||||
}
|
||||
input[type=radio]:checked {
|
||||
input[type="radio"]:checked {
|
||||
display: inline-flex;
|
||||
place-content: center;
|
||||
place-items: center;
|
||||
}
|
||||
input[type=radio]:checked::before {
|
||||
input[type="radio"]:checked::before {
|
||||
content: " ";
|
||||
inset: initial;
|
||||
display: inline-block;
|
||||
|
|
@ -476,7 +547,14 @@ a {
|
|||
text-decoration: underline; /* 1 */
|
||||
text-decoration-color: transparent; /* 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 */
|
||||
/* 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 {
|
||||
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 {
|
||||
|
|
@ -618,7 +698,7 @@ video {
|
|||
transform: translateX(-100%);
|
||||
}
|
||||
}
|
||||
body:has(#menu-mobile:not([aria-hidden=true])) {
|
||||
body:has(#menu-mobile:not([aria-hidden="true"])) {
|
||||
touch-action: none;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
|
@ -638,11 +718,11 @@ body:has(#menu-mobile:not([aria-hidden=true])) {
|
|||
transition: display 400ms allow-discrete;
|
||||
-webkit-overflow-scrolling: none;
|
||||
}
|
||||
#menu-mobile[aria-hidden=true] {
|
||||
#menu-mobile[aria-hidden="true"] {
|
||||
display: none;
|
||||
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;
|
||||
}
|
||||
#menu-mobile .menu-modale__fond {
|
||||
|
|
@ -775,11 +855,13 @@ body:has(#menu-mobile:not([aria-hidden=true])) {
|
|||
/* Dispositions */
|
||||
--liste-puce-cercle-puce-position-horizontale: 3.5ch; /* 3 */
|
||||
}
|
||||
#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;
|
||||
#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;
|
||||
}
|
||||
#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 {
|
||||
display: inline-block; /* 1 */
|
||||
|
|
@ -788,7 +870,8 @@ body:has(#menu-mobile:not([aria-hidden=true])) {
|
|||
}
|
||||
@media (hover: 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) {
|
||||
|
|
@ -809,7 +892,9 @@ body:has(#menu-mobile:not([aria-hidden=true])) {
|
|||
#en-tete .compte-panier[disabled] {
|
||||
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);
|
||||
}
|
||||
#en-tete .compte-panier a {
|
||||
|
|
@ -818,7 +903,7 @@ body:has(#menu-mobile:not([aria-hidden=true])) {
|
|||
text-transform: lowercase;
|
||||
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);
|
||||
}
|
||||
#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 {
|
||||
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;
|
||||
place-items: center;
|
||||
/*
|
||||
|
|
@ -1023,7 +1109,9 @@ body:has(#menu-mobile:not([aria-hidden=true])) {
|
|||
top: var(--colonne-gauche-position-haut);
|
||||
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%;
|
||||
}
|
||||
.photos-produit .colonne.colonne-droite img {
|
||||
|
|
@ -1098,7 +1186,8 @@ body:has(#menu-mobile:not([aria-hidden=true])) {
|
|||
--carte-produit-longueur-maximale: 1000px;
|
||||
display: grid;
|
||||
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 */
|
||||
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) {
|
||||
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;
|
||||
}
|
||||
.details-produit__textes .section-textuelle h3 {
|
||||
|
|
@ -1449,7 +1540,10 @@ body:has(#menu-mobile:not([aria-hidden=true])) {
|
|||
position: relative;
|
||||
}
|
||||
@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;
|
||||
opacity: 100%;
|
||||
transition: 0.3s opacity, 0.3s visibility;
|
||||
|
|
@ -1522,4 +1616,4 @@ body:has(#menu-mobile:not([aria-hidden=true])) {
|
|||
text-align: right;
|
||||
}
|
||||
|
||||
/*# sourceMappingURL=main.css.map */
|
||||
/* # sourceMappingURL=main.css.map */
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -7,6 +7,9 @@
|
|||
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 */
|
||||
|
|
|
|||
|
|
@ -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"}
|
||||
|
|
@ -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}
|
||||
|
|
@ -29,12 +29,26 @@ button {
|
|||
outline-color: transparent;
|
||||
}
|
||||
|
||||
@media (hover: hover) {
|
||||
&:hover {
|
||||
color: var(--couleur-blanc);
|
||||
background: var(--couleur-gris-fonce);
|
||||
}
|
||||
}
|
||||
|
||||
/* Particularismes. */
|
||||
|
||||
// Bouton prenant toute l'espace disponible.
|
||||
&.bouton-case-pleine {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
@media (hover: hover) {
|
||||
&:hover {
|
||||
color: var(--couleur-noir);
|
||||
background: var(--arriere-plan-points);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Bouton avec les couleurs inversées.
|
||||
|
|
@ -58,7 +72,7 @@ button {
|
|||
@media (hover: hover) {
|
||||
&:hover {
|
||||
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);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -27,6 +27,7 @@
|
|||
gap: 1px; /* 2 */
|
||||
min-height: var(--grille-produits-hauteur-minimale);
|
||||
|
||||
// Carte d'un Produit.
|
||||
article {
|
||||
max-width: var(--carte-produit-longueur-maximale);
|
||||
box-shadow: 0 0 0 1px var(--couleur-noir); /* 2 */
|
||||
|
|
|
|||
|
|
@ -10,6 +10,9 @@
|
|||
height: initial;
|
||||
margin: auto;
|
||||
padding: var(--espace-xl) 0;
|
||||
font-style: italic;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: var(--espacement-inter-lettres-etendu-m);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -24,7 +24,7 @@ const _etats = {
|
|||
|
||||
<div class="actions">
|
||||
<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"
|
||||
>
|
||||
Show more
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue