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

POC advancved ideas (ruleset when 2 mixins are combined)

Browse Source
This commit is contained in:
reverend
2021-01-02 20:30:27 +01:00
parent 52af65da92
commit f6e10ad2aa
3 changed files with 127 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,13 +1,42 @@
@mixin RV-FlexGrid__Container($-item_width: 300px, $-item_height: 300px) {
@mixin RV-FlexGrid__Container {
display: grid;
grid-template-columns: repeat(auto-fill, minmax($-item_width, 1fr));
grid-template-rows: repeat(auto-fill, minmax($-item_height, 1fr));
grid-auto-rows: minmax($-item_height, 1fr);
}
@mixin RV-FlexGrid($-item_width: 300px, $-item_height: 300px, $-prefix: '&') {
@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($-item_width, $-item_height);
@include RV-FlexGrid__Container;
&--autoWidth {
@include RV-FlexGrid__Container--autoWidth;
}
&--fixedSize {
@include RV-FlexGrid__Container--fixedSize;
}
&--masonry {
@include RV-FlexGrid__Container--masonry;
}
}
#{$-prefix}__Item {