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

Converting Layouts to mixin name based generatort

Browse Source
This commit is contained in:
reverend
2021-03-19 12:29:17 +01:00
parent 61290fb71d
commit cb4e4a978f
8 changed files with 168 additions and 164 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -12,44 +12,54 @@ RV-FlexGrid--fixedSize(item-height=300px, item-width=300px)
grid-template-columns repeat(auto-fill, item-width)
justify-content space-between
RV-FlexGrid--masonry__Item()
+RV-Element()
display inline-block
width 100%
height unset
margin-bottom: var(--inner-spacing);
& > * {
height auto
}
RV-FlexGrid--masonry(item-height=300px,item-width=300px)
+RV-Block--modifier()
display unquote(block)
column-count auto
column-width item-width
+RV-Element('Item')
display inline-block
width 100%
height unset
margin-bottom: var(--inner-spacing);
& > * {
height auto
}
RV-FlexGrid--masonry__Item()
RV-FlexGrid--verticalMasonry__Item()
+RV-Element()
display inline-block
height unset
margin-bottom: var(--inner-spacing);
& > * {
height auto
}
RV-FlexGrid--verticalMasonry(item-height=300px,item-width=300px)
+RV-Block--modifier()
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--verticalMasonry__Item()
RV-FlexGrid--horizontalMasonry__Item()
+RV-Element()
height calc_height(item-height)
width calc_width(max-content)
RV-FlexGrid--horizontalMasonry(item-height=300px,item-width=300px)
+RV-Block--modifier()
display flex
flex-direction row
flex-wrap wrap
+RV-Element('Item')
height calc_height(item-height)
width calc_width(max-content)
RV-FlexGrid--horizontalMasonry__Item()
RV-FlexGrid__Item(item-height, item-width)
@@ -61,20 +71,21 @@ RV-FlexGrid__Item(item-height, item-width)
}
RV-FlexGrid(item-height, item-width)
display grid
grid-template-columns: repeat(auto-fill, var(--item-width));
+RV-Block()
RV-CSSParameter({
item-height: item-height,
item-width: item-width
})
display grid
grid-template-columns: repeat(auto-fill, var(--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)
+RV-Block('RV-FlexGrid')
RV-CSSParameter({
item-height: 300px,
item-width: 300px
})
RV-FlexGrid(--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)
RV-FlexGrid(300px, 300px)