durbok/noodl-docs
1
0
Fork 0
mirror of https://github.com/noodlapp/noodl-docs.git synced 2026-01-13 15:52:55 +01:00
Code Issues Actions Packages Projects Releases Wiki Activity

Initial commit

Browse Source 
Co-Authored-By: kotte <14197736+mrtamagotchi@users.noreply.github.com>
Co-Authored-By: mikaeltellhed <2311083+mikaeltellhed@users.noreply.github.com>
Co-Authored-By: Tore Knudsen <18231882+torekndsn@users.noreply.github.com>
Co-Authored-By: Michael Cartner <32543275+michaelcartner@users.noreply.github.com>
This commit is contained in:
Eric Tuvesson
2023-09-05 12:08:55 +02:00
commit 53f0d6320e
2704 changed files with 76354 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

103
src/components/layout/Grid/Grid.module.scss Normal file
View File

@@ -0,0 +1,103 @@
$_gutter: 24px;
.Root {
display: flex;
box-sizing: border-box;
flex-wrap: wrap;
margin-top: $_gutter * -1;
margin-left: $_gutter * -1;
&.has-equal-height-items {
align-items: stretch;
}
}
.GridItem {
flex-grow: 0;
flex-shrink: 0;
padding-top: $_gutter;
padding-left: $_gutter;
pointer-events: none;
> * {
pointer-events: all;
}
.Root.has-equal-height-items & > * {
height: 100%;
}
.Root.is-grid-half > & {
width: 100%;
@media (min-width: 850px) {
width: 50%;
}
}
.Root.is-grid-thirds > & {
width: 100%;
@media (min-width: 600px) {
width: 50%;
}
@media (min-width: 900px) {
width: 33.333%;
}
}
.Root.is-grid-fifths > & {
width: 100%;
@media (min-width: 350px) {
width: 50%;
}
@media (min-width: 520px) {
width: 33.333%;
}
@media (min-width: 800px) {
width: 25%;
}
@media (min-width: 1250px) {
width: 20%;
}
}
.Root.is-grid-2-1-1 > & {
width: 100%;
@media (min-width: 400px) {
&:nth-child(3n-2) {
width: 100%;
}
&:not(:nth-child(3n-2)) {
width: 50%;
}
}
@media (min-width: 800px) {
&:nth-child(3n-2) {
width: 50%;
}
&:not(:nth-child(3n-2)) {
width: 25%;
}
}
}
.Root.is-grid-2-3 > & {
&:nth-child(odd) {
width: 40%;
}
&:nth-child(even) {
width: 60%;
}
}
}