css filters

This commit is contained in:
2025-05-15 13:18:47 +02:00
parent 4d6f2e4ca1
commit 1010858e14
2 changed files with 150 additions and 18 deletions
@@ -113,20 +113,25 @@
order: 3;
}
.view-base-de-donnees{
// display: flex;
// flex-direction: row;
display: grid;
grid-template-columns: 20% 75%;
gap: 2rem;
.view-filters{
position: sticky;
align-self: start;
top: 13rem;
left: 0;
width: 15%;
background-color: $white;
margin-top: 2rem;
// margin-left: 1rem;
margin-bottom: 5rem;
padding: 1rem;
padding-left: 2rem;
padding-right: 3rem;
@media (max-width: 810px) {
position: static;
margin-bottom: 2rem;
}
@media (max-width: 479px) {
margin-left: 0;
}
@@ -148,13 +153,75 @@
@media (max-width: 479px){
justify-content: center;
}
.js-form-item{
display: flex;
flex-direction: column;
max-width: 100%;
margin-bottom: 1rem;
padding: 0.5rem;
align-items: baseline;
border: solid black 0.5px ;
@media(max-width: 810px){
display: flex;
flex-direction: row;
justify-content: space-between;
}
label{
flex: 2 1 auto;
}
input{
flex: 2 1 auto;
max-width: 55%;
@media(max-width: 810px){
max-width: 100%;
}
}
}
.js-form-type-select{
display: flex;
flex-direction: row;
justify-content: space-evenly;
padding-top: 0.5rem;
label{
width: 60%;
text-transform: lowercase;
}
select{
background-color: white;
border: none;
width: 50%;
padding-bottom: 0.2rem;
@media(max-width: 810px){
width: 100%;
}
}
}
.js-form-type-textfield{
flex-direction: column;
padding-top: 0.8rem;
label{
text-transform: lowercase;
padding-bottom: 0.2rem;
flex: 2 1 auto;
}
input{
flex: 2 1 auto;
max-width: 55%;
}
}
&.js-form-item{
@media(max-width: 810px){
flex-direction: column;
}
}
#edit-actions{
display: flex;
flex-direction: column;
@@ -194,20 +261,18 @@
}
}
.form-item{
margin-bottom: 1rem;
}
}
.view-content{
width: 100%;
display: flex;
flex-direction: row;
flex-wrap: wrap;
width: 100%;
.view-type-ressource-slide:not(footer){
width: 100%;
padding-top: 1rem;
h3{
margin-left: 25%;
text-transform: uppercase;
a{color: rgb(9, 57, 139) !important;}
}
@@ -241,7 +306,6 @@
}
}
.views-row-wrapper{
margin-left: 25%;
display: flex;
flex-direction: row;