reverend/scss-library
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

New horizontal masonry variant

Browse Source
This commit is contained in:
reverend 2021-01-20 11:41:23 +01:00
parent 83520d050f
commit 39807a7377
2 changed files with 42 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

33
components/01_Layouts/flexGrid/_flexGrid.styl
View File

@ -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
@ -57,4 +82,10 @@ RV-FlexGrid(item-height, item-width)
RV-FlexGrid--fixedSize(item-height, item-width) RV-FlexGrid--fixedSize(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)

20
components/01_Layouts/flexGrid/flexGrid.hbs
View File

@ -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>