75 lines
1.5 KiB
SCSS
75 lines
1.5 KiB
SCSS
|
/*
|
||
|
|
* ASSETS TESTS
|
||
|
|
* Styles for dev.assets_test* pages
|
||
|
|
*/
|
||
|
|
|
||
|
|
div.mgrid,
|
||
|
|
div.lgrid,
|
||
|
|
div.cgrid {
|
||
|
|
|
||
|
|
display: grid;
|
||
|
|
column-gap: 1em;
|
||
|
|
row-gap: 1em;
|
||
|
|
|
||
|
|
&.debug {
|
||
|
|
border: 1px solid black;
|
||
|
|
padding: 1em;
|
||
|
|
|
||
|
|
.area1, .area3 {
|
||
|
|
background-color: yellow;
|
||
|
|
}
|
||
|
|
.area2, .area4 {
|
||
|
|
background-color: transparentize(cyan, 0.4);
|
||
|
|
padding-top: 1em;
|
||
|
|
padding-left: 1em;
|
||
|
|
}
|
||
|
|
.item {
|
||
|
|
background-color: orange;
|
||
|
|
}
|
||
|
|
ul {
|
||
|
|
list-style-type: none;
|
||
|
|
padding: 0;
|
||
|
|
margin: 0;
|
||
|
|
display: flex;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
div.mgrid {
|
||
|
|
div.area1 {
|
||
|
|
grid-column: 1 / 3;
|
||
|
|
grid-row: 1 / 3;
|
||
|
|
}
|
||
|
|
div.area2 {
|
||
|
|
grid-column: 2 / 3;
|
||
|
|
grid-row: 2 / 3;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
div.lgrid {
|
||
|
|
div.area3 {
|
||
|
|
grid-area: ah;
|
||
|
|
}
|
||
|
|
div.area4 {
|
||
|
|
grid-area: bl;
|
||
|
|
}
|
||
|
|
grid-template-areas:
|
||
|
|
"ah ah"
|
||
|
|
"ah bl"; // invalid
|
||
|
|
/*
|
||
|
|
* La zone qu'on crée avec les noms doit être rectangulaires.
|
||
|
|
* Actuellement, il n'existe pas de méthode pour créer une zone avec une forme de L
|
||
|
|
* (bien que la spécification indique qu'une prochaine version pourrait couvrir cette fonctionnalité).
|
||
|
|
* [...] Si des zones ne sont pas rectangulaires, cela sera également considéré comme invalide.
|
||
|
|
* src: https://developer.mozilla.org/fr/docs/Web/CSS/CSS_Grid_Layout/Grid_Template_Areas
|
||
|
|
*/
|
||
|
|
grid-template-areas:
|
||
|
|
"ah ah"
|
||
|
|
". bl";
|
||
|
|
}
|
||
|
|
|
||
|
|
div.cgrid {
|
||
|
|
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
|
||
|
|
grid-template-rows: masonry;
|
||
|
|
}
|