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

Converting Layouts to Stylus

Browse Source
This commit is contained in:
reverend
2021-01-03 12:36:12 +01:00
parent 3f3874427c
commit 333aa9d1b5
36 changed files with 1088 additions and 1773 deletions
Download Patch File Download Diff File Expand all files Collapse all files

49
components/01_Layouts/flexGrid/_flexGrid.scss
View File

@@ -1,49 +0,0 @@
@mixin RV-FlexGrid__Container {
display: grid;
}
@mixin RV-FlexGrid__Container--autoWidth($-item-height: 300px, $-item-min-width: 300px) {
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);
}
@mixin RV-FlexGrid__Container--fixedSize($-item-height: 300px, $-item-width: 300px) {
@include RV-FlexGrid__Container--autoWidth($-item-height, $-item-width);
grid-template-columns: repeat(auto-fill, $-item-width);
justify-content: space-between;
}
@mixin RV-FlexGrid__Container--masonry($-item-width: 300px) {
display: block;
column-count: auto;
column-width: $-item-width;
@include RV-Utils__Hook--throw(());
}
@mixin RV-FlexGrid($-prefix: '&') {
#{$-prefix}__Container {
@include RV-FlexGrid__Container;
&--autoWidth {
@include RV-FlexGrid__Container--autoWidth;
}
&--fixedSize {
@include RV-FlexGrid__Container--fixedSize;
}
&--masonry {
@include RV-FlexGrid__Container--masonry;
}
}
#{$-prefix}__Item {
@include RV-Alignment;
}
}
.RV-FlexGrid {
@include RV-FlexGrid;
}

44
components/01_Layouts/flexGrid/_flexGrid.styl Normal file
View File

@@ -0,0 +1,44 @@
RV-FlexGrid__Container()
display grid
RV-FlexGrid__Container--autoWidth(item-height=300px, item-min-width=300px)
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__Container--fixedSize(item-height=300px, item-width=300px)
RV-FlexGrid__Container--autoWidth(item-height, item-width)
grid-template-columns repeat(auto-fill, item-width)
justify-content space-between
RV-FlexGrid__Container--masonry(item-width=300px)
display unquote(block)
column-count auto
column-width item-width
RV-Utils__Hook--throw('masonry_grid', @(gap){
*{
margin-bottom: gap;
}
}
)
RV-FlexGrid(prefix='&')
{prefix}__Container
RV-FlexGrid__Container()
&--autoWidth
RV-FlexGrid__Container--autoWidth()
&--fixedSize
RV-FlexGrid__Container--fixedSize()
&--masonry
RV-FlexGrid__Container--masonry()
{prefix}__Item
RV-Alignment()
.RV-FlexGrid
RV-FlexGrid()