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

Adapting Layouts to the new bem generator

Browse Source
This commit is contained in:
reverend
2021-03-07 18:47:44 +01:00
parent 0f4ca0c882
commit 7ae8569ff8
8 changed files with 125 additions and 221 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,19 +1,19 @@
RV-FlexGrid--autoWidth(item-height=300px, item-min-width=300px)
+RV-Block__Modifier--name('autoWidth')
+RV-Block--modifier()
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')
+RV-Block--modifier()
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')
+RV-Block--modifier()
display unquote(block)
column-count auto
column-width item-width
@@ -28,7 +28,7 @@ RV-FlexGrid--masonry(item-height=300px,item-width=300px)
}
RV-FlexGrid--verticalMasonry(item-height=300px,item-width=300px)
+RV-Block__Modifier--name('verticalMasonry')
+RV-Block--modifier()
display unquote(block)
column-count auto
column-width item-width
@@ -42,7 +42,7 @@ RV-FlexGrid--verticalMasonry(item-height=300px,item-width=300px)
}
RV-FlexGrid--horizontalMasonry(item-height=300px,item-width=300px)
+RV-Block__Modifier--name('horizontalMasonry')
+RV-Block--modifier()
display flex
flex-direction row
flex-wrap wrap
@@ -53,7 +53,7 @@ RV-FlexGrid--horizontalMasonry(item-height=300px,item-width=300px)
RV-FlexGrid__Item(item-height, item-width)
+RV-Element--name('Item')
+RV-Element()
height 'calc(%s - calc(2*var(--inner-spacing)))' % item-height
& > * {
height 100%
@@ -72,20 +72,9 @@ RV-FlexGrid(item-height, item-width)
})
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)
+RV-Block__Modifier()
RV-FlexGrid--verticalMasonry(--item-height, --item-width)
+RV-Block__Modifier()
RV-FlexGrid--horizontalMasonry(--item-height, --item-width)
RV-FlexGrid__Item(--item-height, --item-width)
RV-FlexGrid--autoWidth(--item-height, --item-width)
RV-FlexGrid--fixedSize(--item-height, --item-width)
RV-FlexGrid--masonry(--item-height, --item-width)
RV-FlexGrid--verticalMasonry(--item-height, --item-width)
RV-FlexGrid--horizontalMasonry(--item-height, --item-width)