callage des élément dans la page de ressources

This commit is contained in:
armansansd
2021-06-28 19:53:18 +02:00
parent 2dceaa7394
commit 91cb62aaf9
4 changed files with 150 additions and 76 deletions

View File

@@ -8,11 +8,23 @@
form{
display: grid;
grid-template-columns: 10% repeat(4, 20%);
column-gap: 1rem;
grid-template-columns: calc(10% - 3em) repeat(4, 20%);
&>div:first-child{
grid-column-start: 2;
}
select{
.form-item-combine{
grid-row: 1 / span 1 ;
grid-column-start: 2;
}
.form-item-programme{
grid-column-start: 2;
}
.form-item-items-per-page{
grid-column-start: 2;
}
select, input{
display: inline-block;
width: auto;
width: 100%;
@@ -23,20 +35,48 @@
div{
display: inline-block;
width: auto;
padding: .5rem 1rem;
// padding: .5rem 1rem;
}
.form-actions{
grid-column: 4 / span 2;
display: grid;
grid-template-columns: 1fr 1fr;
align-items: center;
column-gap: 1rem;
input{
background-color: white;
border: solid 1px black;
box-shadow: none;
&:first-child{
// margin-right: .5rem;
}
&:last-child{
// margin-left: .5rem;
}
}
}
}
.views-view-grid{
margin-top: 3rem;
.views-row{
display: grid;
grid-template-columns: 10% 20% 20% 20% 20% 10%;
column-gap: 1rem;
row-gap: 1rem;
grid-template-columns: calc(10% - 3em) repeat(4, 20%);
.views-col:first-child{
grid-column-start: 2;
}
}
.views-col{
display: grid;
grid-template-columns: 20% 80%;
align-items: stretch;
a{
text-decoration: none;
&:hover{
text-decoration: underline;
}
}
background-color: rgb(255, 255, 255);
background-clip: content-box;
@@ -45,34 +85,54 @@
.views-field:not(:first-child){
padding: 0 0 0 .4rem;
}
.views-field-field-image{
grid-row: 2 / span 2;
}
.views-field-field-programme{
font-weight: 600;
display: inline-block;
width: auto;
color: white;
background: red;
padding: .15rem .3rem;
margin-bottom: 1rem;
grid-row: 1 / span 1;
grid-column: 1 / span 2;
.field-content{
font-weight: 600;
display: inline-block;
width: auto;
color: white;
background: red;
padding: .15rem .3rem;
margin-bottom: 1rem;
}
}
.views-field-field-type-de-ressource{
text-transform: uppercase;
font-size: 600;
margin-bottom: .5rem;
font-size: $font-small;
grid-row: 2 / span 1;
grid-column: 2 / span 1;
}
.views-field-title{
font-style: italic;
grid-row: 3 / span 1;
grid-column: 2 / span 1;
}
.views-field-field-sous-titre{
margin-bottom: 1rem;
grid-row: 4 / span 1;
grid-column: 2 / span 1;
}
.views-field-field-theme{
grid-row: 5 / span 1;
grid-column: 1 / span 2;
font-size: $font-small;
}
}
}
}