bachir/drupal-quartiersdedemain
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

/lesprojets pictos sur nodesites clean css

Browse Source
This commit is contained in:
Ouidade Soussi Chiadmi
2025-11-07 16:19:58 +01:00
parent 59e4008541
commit b6f1de83ff
2 changed files with 45 additions and 217 deletions
Download Patch File Download Diff File Expand all files Collapse all files

111
web/themes/custom/quartiers_de_demain/dist/assets/css/bundle.css vendored
View File

@@ -4859,135 +4859,58 @@ main {
font-size: 0.4rem; font-size: 0.4rem;
position: relative; position: relative;
} }
#lesprojets .content_container .views-element-container .views-row .views-field-group.marseille::before { #lesprojets .content_container .views-element-container .views-row .views-field-group::before {
content: ""; content: "";
position: absolute; position: absolute;
top: -1rem; top: -1rem;
left: -1rem; left: -1rem;
width: 3rem; width: 3rem;
height: 3rem; height: 3rem;
background-image: url("../img/pictos_sites/marseille.svg");
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: center; background-position: center;
background-size: contain; background-size: contain;
pointer-events: none; pointer-events: none;
opacity: 0;
}
#lesprojets .content_container .views-element-container .views-row .views-field-group.marseille::before {
background-image: url("../img/pictos_sites/marseille.svg");
opacity: 1;
} }
#lesprojets .content_container .views-element-container .views-row .views-field-group.sedan::before { #lesprojets .content_container .views-element-container .views-row .views-field-group.sedan::before {
content: "";
position: absolute;
top: -1rem;
left: -1rem;
width: 3rem;
height: 3rem;
background-image: url("../img/pictos_sites/sedan.svg"); background-image: url("../img/pictos_sites/sedan.svg");
background-repeat: no-repeat; opacity: 1;
background-position: center;
background-size: contain;
pointer-events: none;
} }
#lesprojets .content_container .views-element-container .views-row .views-field-group.lodève::before { #lesprojets .content_container .views-element-container .views-row .views-field-group.lodève::before {
content: "";
position: absolute;
top: -1rem;
left: -1rem;
width: 3rem;
height: 3rem;
background-image: url("../img/pictos_sites/lodeve.svg"); background-image: url("../img/pictos_sites/lodeve.svg");
background-repeat: no-repeat; opacity: 1;
background-position: center;
background-size: contain;
pointer-events: none;
} }
#lesprojets .content_container .views-element-container .views-row .views-field-group.colmar::before { #lesprojets .content_container .views-element-container .views-row .views-field-group.colmar::before {
content: "";
position: absolute;
top: -1rem;
left: -1rem;
width: 3rem;
height: 3rem;
background-image: url("../img/pictos_sites/colmar.svg"); background-image: url("../img/pictos_sites/colmar.svg");
background-repeat: no-repeat; opacity: 1;
background-position: center;
background-size: contain;
pointer-events: none;
} }
#lesprojets .content_container .views-element-container .views-row .views-field-group.manosque::before { #lesprojets .content_container .views-element-container .views-row .views-field-group.manosque::before {
content: "";
position: absolute;
top: -1rem;
left: -1rem;
width: 3rem;
height: 3rem;
background-image: url("../img/pictos_sites/manosque.svg"); background-image: url("../img/pictos_sites/manosque.svg");
background-repeat: no-repeat; opacity: 1;
background-position: center;
background-size: contain;
pointer-events: none;
} }
#lesprojets .content_container .views-element-container .views-row .views-field-group.pessac::before { #lesprojets .content_container .views-element-container .views-row .views-field-group.pessac::before {
content: "";
position: absolute;
top: -1rem;
left: -1rem;
width: 3rem;
height: 3rem;
background-image: url("../img/pictos_sites/pessac.svg"); background-image: url("../img/pictos_sites/pessac.svg");
background-repeat: no-repeat; opacity: 1;
background-position: center;
background-size: contain;
pointer-events: none;
} }
#lesprojets .content_container .views-element-container .views-row .views-field-group.corbeil-essones::before { #lesprojets .content_container .views-element-container .views-row .views-field-group.corbeil-essonnes::before {
content: ""; background-image: url("../img/pictos_sites/corbeil-essonnes.svg");
position: absolute; opacity: 1;
top: -1rem;
left: -1rem;
width: 3rem;
height: 3rem;
background-image: url("../img/pictos_sites/corbeil-essones.svg");
background-repeat: no-repeat;
background-position: center;
background-size: contain;
pointer-events: none;
} }
#lesprojets .content_container .views-element-container .views-row .views-field-group.caen::before { #lesprojets .content_container .views-element-container .views-row .views-field-group.caen::before {
content: "";
position: absolute;
top: -1rem;
left: -1rem;
width: 3rem;
height: 3rem;
background-image: url("../img/pictos_sites/caen.svg"); background-image: url("../img/pictos_sites/caen.svg");
background-repeat: no-repeat; opacity: 1;
background-position: center;
background-size: contain;
pointer-events: none;
} }
#lesprojets .content_container .views-element-container .views-row .views-field-group.le-mans::before { #lesprojets .content_container .views-element-container .views-row .views-field-group.le-mans::before {
content: "";
position: absolute;
top: -1rem;
left: -1rem;
width: 3rem;
height: 3rem;
background-image: url("../img/pictos_sites/le-mans.svg"); background-image: url("../img/pictos_sites/le-mans.svg");
background-repeat: no-repeat; opacity: 1;
background-position: center;
background-size: contain;
pointer-events: none;
} }
#lesprojets .content_container .views-element-container .views-row .views-field-group.coulommiers::before { #lesprojets .content_container .views-element-container .views-row .views-field-group.coulommiers::before {
content: "";
position: absolute;
top: -1rem;
left: -1rem;
width: 3rem;
height: 3rem;
background-image: url("../img/pictos_sites/coulommiers.svg"); background-image: url("../img/pictos_sites/coulommiers.svg");
background-repeat: no-repeat; opacity: 1;
background-position: center;
background-size: contain;
pointer-events: none;
} }
#lesprojets .content_container .views-element-container .views-row .views-field-group .views-field-title h2 { #lesprojets .content_container .views-element-container .views-row .views-field-group .views-field-title h2 {
margin: 0; margin: 0;

151
web/themes/custom/quartiers_de_demain/src/assets/scss/pages/lesprojets.scss
View File

@@ -37,143 +37,48 @@ main{
padding-top: 2rem; padding-top: 2rem;
margin-left: 2rem; margin-left: 2rem;
margin-right: 2rem; margin-right: 2rem;
.views-field-group { $sites-pictos: (
marseille: "marseille.svg",
sedan: "sedan.svg",
lodève: "lodeve.svg",
colmar: "colmar.svg",
manosque: "manosque.svg",
pessac: "pessac.svg",
corbeil-essonnes: "corbeil-essonnes.svg",
caen: "caen.svg",
le-mans: "le-mans.svg",
coulommiers: "coulommiers.svg"
);
.views-field-group {
width: 18%; width: 18%;
margin-bottom: 2rem; margin-bottom: 2rem;
font-size: 0.4rem; font-size: 0.4rem;
position: relative; // important pour positionner le ::before position: relative;
&.marseille::before { &::before {
content: ""; content: "";
position: absolute; position: absolute;
top: -1rem; top: -1rem;
left: -1rem; left: -1rem;
width: 3rem; width: 3rem;
height: 3rem; height: 3rem;
background-image: url("../img/pictos_sites/marseille.svg");
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: center; background-position: center;
background-size: contain; background-size: contain;
pointer-events: none; // si tu ne veux pas bloquer les clics pointer-events: none;
opacity: 0; // par défaut caché
} }
&.sedan::before {
content: ""; // Pour chaque site, on applique juste le bon pictogramme
position: absolute; @each $name, $file in $sites-pictos {
top: -1rem; &.#{$name}::before {
left: -1rem; background-image: url("../img/pictos_sites/#{$file}");
width: 3rem; opacity: 1;
height: 3rem; }
background-image: url("../img/pictos_sites/sedan.svg");
background-repeat: no-repeat;
background-position: center;
background-size: contain;
pointer-events: none; // si tu ne veux pas bloquer les clics
}
&.lodève::before {
content: "";
position: absolute;
top: -1rem;
left: -1rem;
width: 3rem;
height: 3rem;
background-image: url("../img/pictos_sites/lodeve.svg");
background-repeat: no-repeat;
background-position: center;
background-size: contain;
pointer-events: none; // si tu ne veux pas bloquer les clics
}
&.colmar::before {
content: "";
position: absolute;
top: -1rem;
left: -1rem;
width: 3rem;
height: 3rem;
background-image: url("../img/pictos_sites/colmar.svg");
background-repeat: no-repeat;
background-position: center;
background-size: contain;
pointer-events: none; // si tu ne veux pas bloquer les clics
}
&.manosque::before {
content: "";
position: absolute;
top: -1rem;
left: -1rem;
width: 3rem;
height: 3rem;
background-image: url("../img/pictos_sites/manosque.svg");
background-repeat: no-repeat;
background-position: center;
background-size: contain;
pointer-events: none; // si tu ne veux pas bloquer les clics
}
&.pessac::before {
content: "";
position: absolute;
top: -1rem;
left: -1rem;
width: 3rem;
height: 3rem;
background-image: url("../img/pictos_sites/pessac.svg");
background-repeat: no-repeat;
background-position: center;
background-size: contain;
pointer-events: none; // si tu ne veux pas bloquer les clics
}
&.corbeil-essones::before {
content: "";
position: absolute;
top: -1rem;
left: -1rem;
width: 3rem;
height: 3rem;
background-image: url("../img/pictos_sites/corbeil-essones.svg");
background-repeat: no-repeat;
background-position: center;
background-size: contain;
pointer-events: none; // si tu ne veux pas bloquer les clics
}
&.caen::before {
content: "";
position: absolute;
top: -1rem;
left: -1rem;
width: 3rem;
height: 3rem;
background-image: url("../img/pictos_sites/caen.svg");
background-repeat: no-repeat;
background-position: center;
background-size: contain;
pointer-events: none; // si tu ne veux pas bloquer les clics
}
&.le-mans::before {
content: "";
position: absolute;
top: -1rem;
left: -1rem;
width: 3rem;
height: 3rem;
background-image: url("../img/pictos_sites/le-mans.svg");
background-repeat: no-repeat;
background-position: center;
background-size: contain;
pointer-events: none; // si tu ne veux pas bloquer les clics
}
&.coulommiers::before {
content: "";
position: absolute;
top: -1rem;
left: -1rem;
width: 3rem;
height: 3rem;
background-image: url("../img/pictos_sites/coulommiers.svg");
background-repeat: no-repeat;
background-position: center;
background-size: contain;
pointer-events: none; // si tu ne veux pas bloquer les clics
} }
.views-field-title{ .views-field-title{
h2{ h2{
margin: 0; margin: 0;