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

Molecular mixins

Browse Source
This commit is contained in:
reverend 2020-08-23 19:20:11 +02:00
parent 4705ed0d39
commit 4cab1fa9ad
2 changed files with 56 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,9 +1,13 @@
@mixin RV-FlexGrid($item_width: 300px, $item_height: 300px) {
@mixin RV-FlexGrid__Container($-item_width: 300px, $-item_height: 300px) {
display: grid;
grid-template-columns: repeat(auto-fill, minmax($-item_width, 1fr));
grid-template-rows: repeat(auto-fill, $-item_height);
grid-auto-rows: $-item_height;
}
@mixin RV-FlexGrid($-item_width: 300px, $-item_height: 300px) {
&__Container {
display: grid;
grid-template-columns: repeat(auto-fill, minmax($item_width, 1fr));
grid-template-rows: repeat(auto-fill, $item_height);
grid-auto-rows: $item_height;
@include RV-FlexGrid__Container($-item_width, $-item_height) :
}
&__Item {

62
components/01_Layouts/flexRow/_flexRow.scss
View File

@ -1,23 +1,55 @@
@mixin RV-FlexRow__Container {
display: flex;
flex-direction: row;
justify-content: space-around;
&--multiRow {
flex-wrap: wrap;
}
}
@mixin RV-FlexRow__Item {
@include RV-Alignment;
&,&--normal {
flex-grow: 3;
flex-shrink: 3;
}
&--narrower {
flex-grow: 1;
flex-shrink: 5;
}
&--narrow {
flex-grow: 2;
flex-shrink: 4;
}
&--wide {
flex-grow: 4;
flex-shrink: 2;
}
&--wider {
flex-grow: 5;
flex-shrink: 1;
}
&--fixedSize {
flex-grow: 0;
flex-shrink: 0;
width: min-content;
}
}
@mixin RV-FlexRow {
&__Container {
display: flex;
flex-direction: row;
justify-content: space-around;
&--wrap {
flex-wrap: wrap;
}
@include RV-FlexRow__Container;
}
&__Item {
width: 100%;
@include RV-Alignment;
&--fixedSize {
flex: 0 0;
width: min-content;
}
@include RV-FlexRow__Item;
}
}