New horizontal masonry variant
This commit is contained in:
parent
83520d050f
commit
39807a7377
@ -26,6 +26,31 @@ RV-FlexGrid--masonry(item-height=300px,item-width=300px)
|
|||||||
height auto
|
height auto
|
||||||
}
|
}
|
||||||
|
|
||||||
|
RV-FlexGrid--verticalMasonry(item-height=300px,item-width=300px)
|
||||||
|
+RV-Block__Modifier--name('verticalMasonry')
|
||||||
|
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--horizontalMasonry(item-height=300px,item-width=300px)
|
||||||
|
+RV-Block__Modifier--name('horizontalMasonry')
|
||||||
|
display flex
|
||||||
|
flex-direction row
|
||||||
|
flex-wrap wrap
|
||||||
|
|
||||||
|
+RV-Element('Item')
|
||||||
|
height calc_height(item-height)
|
||||||
|
width calc_width(max-content)
|
||||||
|
|
||||||
|
|
||||||
RV-FlexGrid__Item(item-height, item-width)
|
RV-FlexGrid__Item(item-height, item-width)
|
||||||
+RV-Element--name('Item')
|
+RV-Element--name('Item')
|
||||||
height 'calc(%s - calc(2*var(--inner-spacing)))' % item-height
|
height 'calc(%s - calc(2*var(--inner-spacing)))' % item-height
|
||||||
@ -58,3 +83,9 @@ RV-FlexGrid(item-height, item-width)
|
|||||||
|
|
||||||
+RV-Block__Modifier()
|
+RV-Block__Modifier()
|
||||||
RV-FlexGrid--masonry(item-height,item-width)
|
RV-FlexGrid--masonry(item-height,item-width)
|
||||||
|
|
||||||
|
+RV-Block__Modifier()
|
||||||
|
RV-FlexGrid--verticalMasonry(item-height,item-width)
|
||||||
|
|
||||||
|
+RV-Block__Modifier()
|
||||||
|
RV-FlexGrid--horizontalMasonry(item-height,item-width)
|
@ -1,50 +1,50 @@
|
|||||||
<div class="RV-FlexGrid RV-FlexGrid{{modifier}} RV-Spacing__Inner--medium">
|
<div class="RV-FlexGrid RV-FlexGrid{{modifier}} RV-Spacing__Inner--medium">
|
||||||
<div class="RV-FlexGrid__Item RV-BoxShadow RV-BoxShadow--simple RV-Spacing__Inner--medium">
|
<div class="RV-FlexGrid__Item RV-BoxShadow RV-BoxShadow--{{item-shadow}} RV-Spacing__Inner--medium">
|
||||||
<div class="RV-ContentCrop">
|
<div class="RV-ContentCrop">
|
||||||
<img class="RV-Image" src="{{path '/images/square.jpeg'}}"/>
|
<img class="RV-Image" src="{{path '/images/square.jpeg'}}"/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="RV-FlexGrid__Item RV-BoxShadow RV-BoxShadow--simple RV-Spacing__Inner--medium">
|
<div class="RV-FlexGrid__Item RV-BoxShadow RV-BoxShadow--{{item-shadow}} RV-Spacing__Inner--medium">
|
||||||
<div class="RV-ContentCrop">
|
<div class="RV-ContentCrop">
|
||||||
<img class="RV-Image" src="{{path '/images/portrait.jpeg'}}"/>
|
<img class="RV-Image" src="{{path '/images/portrait.jpeg'}}"/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="RV-FlexGrid__Item RV-BoxShadow RV-BoxShadow--simple RV-Spacing__Inner--medium">
|
<div class="RV-FlexGrid__Item RV-BoxShadow RV-BoxShadow--{{item-shadow}} RV-Spacing__Inner--medium">
|
||||||
<div class="RV-ContentCrop">
|
<div class="RV-ContentCrop">
|
||||||
<img class="RV-Image" src="{{path '/images/portrait.jpeg'}}"/>
|
<img class="RV-Image" src="{{path '/images/portrait.jpeg'}}"/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="RV-FlexGrid__Item RV-BoxShadow RV-BoxShadow--simple RV-Spacing__Inner--medium">
|
<div class="RV-FlexGrid__Item RV-BoxShadow RV-BoxShadow--{{item-shadow}} RV-Spacing__Inner--medium">
|
||||||
<div class="RV-ContentCrop">
|
<div class="RV-ContentCrop">
|
||||||
<img class="RV-Image" src="{{path '/images/landscape.jpeg'}}"/>
|
<img class="RV-Image" src="{{path '/images/landscape.jpeg'}}"/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="RV-FlexGrid__Item RV-BoxShadow RV-BoxShadow--simple RV-Spacing__Inner--medium">
|
<div class="RV-FlexGrid__Item RV-BoxShadow RV-BoxShadow--{{item-shadow}} RV-Spacing__Inner--medium">
|
||||||
<div class="RV-ContentCrop">
|
<div class="RV-ContentCrop">
|
||||||
<img class="RV-Image" src="{{path '/images/square.jpeg'}}"/>
|
<img class="RV-Image" src="{{path '/images/square.jpeg'}}"/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="RV-FlexGrid__Item RV-BoxShadow RV-BoxShadow--simple RV-Spacing__Inner--medium">
|
<div class="RV-FlexGrid__Item RV-BoxShadow RV-BoxShadow--{{item-shadow}} RV-Spacing__Inner--medium">
|
||||||
<div class="RV-ContentCrop">
|
<div class="RV-ContentCrop">
|
||||||
<img class="RV-Image" src="{{path '/images/landscape.jpeg'}}"/>
|
<img class="RV-Image" src="{{path '/images/landscape.jpeg'}}"/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="RV-FlexGrid__Item RV-BoxShadow RV-BoxShadow--simple RV-Spacing__Inner--medium">
|
<div class="RV-FlexGrid__Item RV-BoxShadow RV-BoxShadow--{{item-shadow}} RV-Spacing__Inner--medium">
|
||||||
<div class="RV-ContentCrop">
|
<div class="RV-ContentCrop">
|
||||||
<img class="RV-Image" src="{{path '/images/landscape.jpeg'}}"/>
|
<img class="RV-Image" src="{{path '/images/landscape.jpeg'}}"/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="RV-FlexGrid__Item RV-BoxShadow RV-BoxShadow--simple RV-Spacing__Inner--medium">
|
<div class="RV-FlexGrid__Item RV-BoxShadow RV-BoxShadow--{{item-shadow}} RV-Spacing__Inner--medium">
|
||||||
<div class="RV-ContentCrop">
|
<div class="RV-ContentCrop">
|
||||||
<img class="RV-Image" src="{{path '/images/portrait.jpeg'}}"/>
|
<img class="RV-Image" src="{{path '/images/portrait.jpeg'}}"/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="RV-FlexGrid__Item RV-BoxShadow RV-BoxShadow--simple RV-Spacing__Inner--medium">
|
<div class="RV-FlexGrid__Item RV-BoxShadow RV-BoxShadow--{{item-shadow}} RV-Spacing__Inner--medium">
|
||||||
<div class="RV-ContentCrop">
|
<div class="RV-ContentCrop">
|
||||||
<img class="RV-Image" src="{{path '/images/square.jpeg'}}"/>
|
<img class="RV-Image" src="{{path '/images/square.jpeg'}}"/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="RV-FlexGrid__Item RV-BoxShadow RV-BoxShadow--simple RV-Spacing__Inner--medium">
|
<div class="RV-FlexGrid__Item RV-BoxShadow RV-BoxShadow--{{item-shadow}} RV-Spacing__Inner--medium">
|
||||||
<div class="RV-ContentCrop">
|
<div class="RV-ContentCrop">
|
||||||
<img class="RV-Image" src="{{path '/images/portrait.jpeg'}}"/>
|
<img class="RV-Image" src="{{path '/images/portrait.jpeg'}}"/>
|
||||||
</div>
|
</div>
|
||||||
|
Loading…
Reference in New Issue
Block a user