60 lines
1.6 KiB
Stylus
60 lines
1.6 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-height=300px,item-width=300px)
|
|
+RV-Block__Modifier--name('masonry')
|
|
display unquote(block)
|
|
column-count auto
|
|
column-width item-width
|
|
|
|
+RV-Element('Item')
|
|
display inline-block
|
|
height unset
|
|
margin-bottom: var(--inner-spacing);
|
|
& > * {
|
|
height auto
|
|
}
|
|
|
|
RV-FlexGrid__Item(item-height, item-width)
|
|
+RV-Element--name('Item')
|
|
height 'calc(%s - calc(2*var(--inner-spacing)))' % item-height
|
|
& > * {
|
|
height 100%
|
|
width 100%
|
|
}
|
|
|
|
RV-FlexGrid(item-height, item-width)
|
|
display grid
|
|
|
|
grid-template-columns: repeat(auto-fill, var(--item-width));
|
|
|
|
|
|
+RV-Block('RV-FlexGrid')
|
|
RV-CSSParameter({
|
|
item-height: 300px,
|
|
item-width: 300px
|
|
})
|
|
RV-FlexGrid(item-height, item-width)
|
|
|
|
+RV-Element()
|
|
RV-FlexGrid__Item(item-height, item-width)
|
|
|
|
+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-height,item-width) |