More mixins
This commit is contained in:
parent
5ca1116e72
commit
11ef1c7cc8
@ -1,45 +1,85 @@
|
|||||||
|
|
||||||
|
@mixin RV-FlexRow__Container--column {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
@mixin RV-FlexRow__Container--multiRow {
|
||||||
|
flex-wrap: wrap;
|
||||||
|
}
|
||||||
|
|
||||||
@mixin RV-FlexRow__Container {
|
@mixin RV-FlexRow__Container {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
justify-content: space-around;
|
justify-content: space-around;
|
||||||
|
|
||||||
&--multiRow {
|
&--multiRow {
|
||||||
flex-wrap: wrap;
|
@include RV-FlexRow__Container--multiRow;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
&--column {
|
||||||
|
@include RV-FlexRow__Container--column;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@mixin RV-FlexRow__Item--normal {
|
||||||
|
flex-grow: 3;
|
||||||
|
flex-shrink: 3;
|
||||||
|
}
|
||||||
|
|
||||||
|
@mixin RV-FlexRow__Item--narrower {
|
||||||
|
flex-grow: 1;
|
||||||
|
flex-shrink: 5;
|
||||||
|
}
|
||||||
|
|
||||||
|
@mixin RV-FlexRow__Item--narrow {
|
||||||
|
flex-grow: 2;
|
||||||
|
flex-shrink: 4;
|
||||||
|
}
|
||||||
|
|
||||||
|
@mixin RV-FlexRow__Item--wide {
|
||||||
|
flex-grow: 4;
|
||||||
|
flex-shrink: 2;
|
||||||
|
}
|
||||||
|
@mixin RV-FlexRow__Item--wider {
|
||||||
|
flex-grow: 5;
|
||||||
|
flex-shrink: 1;
|
||||||
|
}
|
||||||
|
@mixin RV-FlexRow__Item--fixedSize($-width: 100px) {
|
||||||
|
flex-grow: 0;
|
||||||
|
flex-shrink: 0;
|
||||||
|
width: min-content;
|
||||||
|
flex-basis: $-width;
|
||||||
}
|
}
|
||||||
|
|
||||||
@mixin RV-FlexRow__Item {
|
@mixin RV-FlexRow__Item {
|
||||||
@include RV-Alignment;
|
@include RV-Alignment;
|
||||||
|
|
||||||
|
min-width: 0;
|
||||||
|
width: 100%;
|
||||||
|
|
||||||
&,&--normal {
|
&,&--normal {
|
||||||
flex-grow: 3;
|
@include RV-FlexRow__Item--normal;
|
||||||
flex-shrink: 3;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
&--narrower {
|
&--narrower {
|
||||||
flex-grow: 1;
|
@include RV-FlexRow__Item--narrower;
|
||||||
flex-shrink: 5;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
&--narrow {
|
&--narrow {
|
||||||
flex-grow: 2;
|
@include RV-FlexRow__Item--narrow;
|
||||||
flex-shrink: 4;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
&--wide {
|
&--wide {
|
||||||
flex-grow: 4;
|
@include RV-FlexRow__Item--wide;
|
||||||
flex-shrink: 2;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
&--wider {
|
&--wider {
|
||||||
flex-grow: 5;
|
@include RV-FlexRow__Item--wider;
|
||||||
flex-shrink: 1;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
&--fixedSize {
|
&--fixedSize {
|
||||||
flex-grow: 0;
|
@include RV-FlexRow__Item--fixedSize;
|
||||||
flex-shrink: 0;
|
|
||||||
width: min-content;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -1,12 +1,20 @@
|
|||||||
@mixin RV-FullWidthContent {
|
@mixin RV-FullWidthContent__Container {
|
||||||
&__Container {
|
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
&__Item {
|
@mixin RV-FullWidthContent__Item {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
@include RV-ContentCrop;
|
@include RV-ContentCrop;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@mixin RV-FullWidthContent {
|
||||||
|
&__Container {
|
||||||
|
@include RV-FullWidthContent__Container;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__Item {
|
||||||
|
@include RV-FullWidthContent__Item;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.RV-FullWidthContent {
|
.RV-FullWidthContent {
|
||||||
|
Loading…
Reference in New Issue
Block a user