Files
d9-eql/web/themes/custom/eql/scss/pages/_lesprojets.scss
T
2024-10-04 10:16:43 +02:00

400 lines
20 KiB
SCSS

.path-projets{
.region-content{
#block-contenudelapageprincipale{
span{
padding-top: 3rem;
padding-bottom: 3rem;
vertical-align: middle;
h2{
margin: 0;
padding-top: 2rem;
height: 4rem;
color: $white;
font-family: "Source Code Pro";
text-transform: uppercase;
background: $blue-light;
padding-left: 13%;
}
}
.layout--onecol{
.block-region-content{
display: grid;
grid-template-columns: 1fr repeat(7, 1fr) 1fr;
@media (max-width: 810px){
display: flex;
flex-direction: column;
}
/// carte
.block-views-blockprojets-block-2{
grid-column: 1 / span 10;
}
//texte de présentation
.block-config-pages-block{
grid-column: 3 / span 5;
// width: 60%;
margin: auto;
span h2{
display: none;
}
.config_pages--type--les-projets{
.field--name-field-introduction{
p:nth-of-type(1){
font-size: 1.5rem;
}
}
}
@media (max-width: 810px){
padding: 2rem;
}
}
// bouton projets incubés
.block-block-contentaffaf220-dd27-4c9d-ae02-8044c2662220{
grid-column: 8 / span 9;
margin-top: 4rem;
background-color: $blue-light;
height: fit-content;
width: 60%;
margin-left: 2rem;
grid-row: 2;
.display{
display: block;
}
.field--name-field-lien{
display: flex;
flex-direction: column;
margin-top: 2rem;
margin-bottom: 2rem;
margin-left: 1.5rem;
margin-right: 1.5rem;
text-align: center;
a{
font-weight: 800;
color: $white;
font-size: 1.3rem;
}
&:after{
margin-left: auto;
padding-top: 1rem;
display: block;
content:url("../images/pictos/noun_Arrow_3771902.svg")
}
}
@media (max-width: 810px){
margin: auto;
}
}
//partie projets
.block-views-blockprojets-block-1{
grid-column: 2 / span 7;
// width: 80%;
@media (max-width: 810px){
padding: 2rem;
}
.view-projets{
// width: 80%;
margin: auto;
//filtres
.view-filters{
margin-top: 4rem;
display: flex;
flex-direction: row;
@media (max-width: 479px){
flex-direction: column;
padding-bottom: 3rem;
}
&::before{
content: 'Filtrer par :';
margin-right: 2rem;
margin-bottom: 1rem;
// width: 160px;
min-width: fit-content;
@media (max-width: 479px){
padding-bottom: 1rem;
}
}
#views-exposed-form-projets-block-1{
display: flex;
flex-direction: row;
flex-wrap: wrap;
position: relative;
align-content: center;
.form-item{
margin-right: 1rem;
margin-bottom: 1rem;
display: flex;
align-content: center;
@media (max-width: 550px) {
width: 100%;
margin: auto;
}
}
select, input{
padding: 0.3rem;
margin:0.5rem;
}
input, label{
margin: 0.5rem;
}
#edit-field-neuf-rehabilitation-value--wrapper{
legend{display: none;}
.js-form-item-field-neuf-rehabilitation-value:first-of-type{
display: none;
}
@media (max-width: 479px){
padding-bottom: 1rem;
padding-top: 1rem;
margin-inline-start: 0px;
}
}
#edit-field-encours-fini-value--wrapper{
legend{display: none;}
.js-form-item-field-encours-fini-value:first-of-type{
display: none;
}
@media (max-width: 479px){
padding-bottom: 1rem;
margin-inline-start: 0px;
}
}
#edit-field-etape-du-projet-value{
@media (max-width: 479px){
max-width: 60vw;
}
}
.js-form-type-textfield{
label{display: none;}
}
input[type="radio"]{
display: none;
}
input[type="radio"] + label::before{
content:"";
display:inline-block;
width: 15px;
height: 15px;
background:#fff;
border-radius:0px;
border-color: rgba($color: #000000, $alpha: 1);
border-style: solid;
border-width: 1px;
margin-right: 0.5rem;
}
input[type="radio"]:checked + label::before{
background:$blue-light;
}
label{
padding-right: 1rem;
}
#edit-submit-projets{
// display: inline-block;
background-color: $blue-light;
color: white;
text-transform: uppercase;
border: none;
padding: 0.3rem 0.7rem;
// margin-left: 2rem;
@media (max-width: 479px){
margin-left: 0rem;
margin-right: 2rem;
}
@media (min-width:1495px) {
// margin-left: 0;
// position: absolute;
// right: 150px;
// // justify-content: flex-end;
// margin-left: auto;
}
}
#edit-reset{
background-color: $blue-light;
color: white;
text-transform: uppercase;
border: none;
padding: 0.3rem 0.7rem;
margin-left: 1rem;
@media (min-width:1495px) {
position: absolute;
right: 0px;
}
}
input[type="checkbox"]{
display: none;
}
input[type="checkbox"] + label::before{
content:"";
display:inline-block;
width: 15px;
height: 15px;
background:#fff;
border-radius:0px;
border-color: rgba($color: #000000, $alpha: 1);
border-style: solid;
border-width: 1px;
margin-right: 0.5rem;
}
input[type="checkbox"]:checked + label::before{
background:$blue-light;
}
@media (max-width: 479px){
flex-direction: column;
#edit-actions{
width: 100%;
margin: auto;
}
}
}
}
//grille de projets
.view-content{
margin-top: 2rem;
display: flex;
flex-direction: row;
flex-wrap: wrap;
@media (max-width: 810px){
flex-direction: column;
}
.views-row{
width: 25%;
// flex: 0 0 25%;
@media (max-width: 810px){
width: 100%;
}
}
}
.node-type-projet{
color: $blue-dark;
line-height: 1.5rem;
padding: 0.5rem;
padding-right: 1rem;
padding-left: 1rem;
@media (max-width: 479px){
padding-left: 0rem;
padding-right: 0rem;
padding-top: 2rem;
}
div:first-child{
display: flex;
flex-direction: column;
a{
color: $blue-dark;
}
.field--name-field-photo {
order:1;
.field__item{
display:none;
}
.field__item:first-child{
display:block;
}
img{
width: 100%;
max-height: 175px;
object-fit: cover;
}
&::after{
display: block;
content:url('data:image/svg+xml,<svg width="160" height="25" xmlns="http://www.w3.org/2000/svg" version="1.1"> <line x1="0" x2="80" y1="20" y2="20" stroke-linecap="cube" stroke="rgb(9,57,139)" stroke-width="2.5"/></svg>');
}
}
.field--name-field-adresse{
order:2;
display: flex;
text-transform: uppercase;
font-size: 0.9rem;
font-weight: 800;
margin-top: 0.8rem;
line-height: 0.6rem;
.address{
display: flex;
flex-direction: row;
margin: 0;
.locality{
padding-top: 0 !important;
padding-bottom: 0 !important;
&::after{
content:",";
margin-right: 0.3rem;
}
}
.country{
padding-top: 0 !important;
padding-bottom: 0 !important;
} }
}
.field--name-field-sous-titre{
margin-top: 0.5rem;
font-size: 0.9rem;
font-weight: 800;
order: 4;
}
.field--name-title{
order: 3;
margin-top: 0.5rem;
font-size: 0.9rem;
font-weight: 800;
h2{margin: 0;}
}
.field--name-field-incube{
order:4;
color: red;
margin-top: 0.8rem;
font-size: 0.7rem;
}
.field--name-field-region{
display: none;
}
.field--name-field-type-de-moa{
display: none;
}
.field--name-field-type-de-projet{
display: none;
}
.field--name-field-etape-du-projet{
display: none;
}
}
}
}
}
}
}
}
}
}