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
|
||||
}
|
||||
|
||||
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-Element--name('Item')
|
||||
height 'calc(%s - calc(2*var(--inner-spacing)))' % item-height
|
||||
@ -58,3 +83,9 @@ RV-FlexGrid(item-height, item-width)
|
||||
|
||||
+RV-Block__Modifier()
|
||||
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__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">
|
||||
<img class="RV-Image" src="{{path '/images/square.jpeg'}}"/>
|
||||
</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">
|
||||
<img class="RV-Image" src="{{path '/images/portrait.jpeg'}}"/>
|
||||
</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">
|
||||
<img class="RV-Image" src="{{path '/images/portrait.jpeg'}}"/>
|
||||
</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">
|
||||
<img class="RV-Image" src="{{path '/images/landscape.jpeg'}}"/>
|
||||
</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">
|
||||
<img class="RV-Image" src="{{path '/images/square.jpeg'}}"/>
|
||||
</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">
|
||||
<img class="RV-Image" src="{{path '/images/landscape.jpeg'}}"/>
|
||||
</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">
|
||||
<img class="RV-Image" src="{{path '/images/landscape.jpeg'}}"/>
|
||||
</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">
|
||||
<img class="RV-Image" src="{{path '/images/portrait.jpeg'}}"/>
|
||||
</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">
|
||||
<img class="RV-Image" src="{{path '/images/square.jpeg'}}"/>
|
||||
</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">
|
||||
<img class="RV-Image" src="{{path '/images/portrait.jpeg'}}"/>
|
||||
</div>
|
||||
|
Loading…
Reference in New Issue
Block a user