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;
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: "";
position: absolute;
top: -1rem;
left: -1rem;
width: 3rem;
height: 3rem;
background-image: url("../img/pictos_sites/marseille.svg");
background-repeat: no-repeat;
background-position: center;
background-size: contain;
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 {
content: "";
position: absolute;
top: -1rem;
left: -1rem;
width: 3rem;
height: 3rem;
background-image: url("../img/pictos_sites/sedan.svg");
background-repeat: no-repeat;
background-position: center;
background-size: contain;
pointer-events: none;
opacity: 1;
}
#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-repeat: no-repeat;
background-position: center;
background-size: contain;
pointer-events: none;
opacity: 1;
}
#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-repeat: no-repeat;
background-position: center;
background-size: contain;
pointer-events: none;
opacity: 1;
}
#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-repeat: no-repeat;
background-position: center;
background-size: contain;
pointer-events: none;
opacity: 1;
}
#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-repeat: no-repeat;
background-position: center;
background-size: contain;
pointer-events: none;
opacity: 1;
}
#lesprojets .content_container .views-element-container .views-row .views-field-group.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;
#lesprojets .content_container .views-element-container .views-row .views-field-group.corbeil-essonnes::before {
background-image: url("../img/pictos_sites/corbeil-essonnes.svg");
opacity: 1;
}
#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-repeat: no-repeat;
background-position: center;
background-size: contain;
pointer-events: none;
opacity: 1;
}
#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-repeat: no-repeat;
background-position: center;
background-size: contain;
pointer-events: none;
opacity: 1;
}
#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-repeat: no-repeat;
background-position: center;
background-size: contain;
pointer-events: none;
opacity: 1;
}
#lesprojets .content_container .views-element-container .views-row .views-field-group .views-field-title h2 {
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;
margin-left: 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%;
margin-bottom: 2rem;
font-size: 0.4rem;
position: relative; // important pour positionner le ::before
&.marseille::before {
position: relative;
&::before {
content: "";
position: absolute;
top: -1rem;
left: -1rem;
width: 3rem;
height: 3rem;
background-image: url("../img/pictos_sites/marseille.svg");
background-repeat: no-repeat;
background-position: center;
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: "";
position: absolute;
top: -1rem;
left: -1rem;
width: 3rem;
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
// Pour chaque site, on applique juste le bon pictogramme
@each $name, $file in $sites-pictos {
&.#{$name}::before {
background-image: url("../img/pictos_sites/#{$file}");
opacity: 1;
}
}
.views-field-title{
h2{
margin: 0;