Molecular mixins
This commit is contained in:
parent
4705ed0d39
commit
4cab1fa9ad
@ -1,9 +1,13 @@
|
|||||||
@mixin RV-FlexGrid($item_width: 300px, $item_height: 300px) {
|
@mixin RV-FlexGrid__Container($-item_width: 300px, $-item_height: 300px) {
|
||||||
&__Container {
|
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-template-columns: repeat(auto-fill, minmax($item_width, 1fr));
|
grid-template-columns: repeat(auto-fill, minmax($-item_width, 1fr));
|
||||||
grid-template-rows: repeat(auto-fill, $item_height);
|
grid-template-rows: repeat(auto-fill, $-item_height);
|
||||||
grid-auto-rows: $item_height;
|
grid-auto-rows: $-item_height;
|
||||||
|
}
|
||||||
|
|
||||||
|
@mixin RV-FlexGrid($-item_width: 300px, $-item_height: 300px) {
|
||||||
|
&__Container {
|
||||||
|
@include RV-FlexGrid__Container($-item_width, $-item_height) :
|
||||||
}
|
}
|
||||||
|
|
||||||
&__Item {
|
&__Item {
|
||||||
|
@ -1,23 +1,55 @@
|
|||||||
@mixin RV-FlexRow {
|
@mixin RV-FlexRow__Container {
|
||||||
&__Container {
|
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
justify-content: space-around;
|
justify-content: space-around;
|
||||||
|
|
||||||
&--wrap {
|
&--multiRow {
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&__Item {
|
@mixin RV-FlexRow__Item {
|
||||||
width: 100%;
|
|
||||||
@include RV-Alignment;
|
@include RV-Alignment;
|
||||||
|
|
||||||
&--fixedSize {
|
&,&--normal {
|
||||||
flex: 0 0;
|
flex-grow: 3;
|
||||||
width: min-content;
|
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 {
|
||||||
|
@include RV-FlexRow__Container;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__Item {
|
||||||
|
@include RV-FlexRow__Item;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
Loading…
Reference in New Issue
Block a user