scss-library/components/01_Layouts/flexGrid/_flexGrid.styl
2021-01-17 22:32:52 +01:00

53 lines
1.2 KiB
Stylus

RV-FlexGrid--autoWidth(item-height=300px, item-min-width=300px)
+RV-Block__Modifier--name('autoWidth')
grid-template-columns repeat(auto-fill, minmax(item-min-width, 1fr))
grid-template-rows repeat(auto-fill, minmax(item-height, 1fr))
grid-auto-rows minmax(item-height, 1fr)
RV-FlexGrid--fixedSize(item-height=300px, item-width=300px)
+RV-Block__Modifier--name('fixedSize')
grid-template-rows repeat(auto-fill, minmax(item-height, 1fr))
grid-auto-rows minmax(item-height, 1fr)
grid-template-columns repeat(auto-fill, item-width)
justify-content space-between
RV-FlexGrid--masonry(item-width=300px)
+RV-Block__Modifier--name('masonry')
display unquote(block)
column-count auto
column-width item-width
+RV-Element('Item')
margin-bottom: var(--inner-spacing);
*{
margin-bottom: unset;
}
RV-FlexGrid__Item()
+RV-Element--name('Item')
pass
RV-FlexGrid()
display grid
+RV-Block('RV-FlexGrid')
RV-CSSParameter({
item-height: 300px,
item-width: 300px
})
RV-FlexGrid()
+RV-Element()
RV-FlexGrid__Item()
+RV-Block__Modifier()
RV-FlexGrid--autoWidth(item-height, item-width)
+RV-Block__Modifier()
RV-FlexGrid--fixedSize(item-height, item-width)
+RV-Block__Modifier()
RV-FlexGrid--masonry(item-width)