chill-skeleton-basic/assets/scss/assets_test.scss
2022-07-11 21:32:20 +02:00

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;
}