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

More mixins

Browse Source
This commit is contained in:
reverend 2020-08-25 15:53:43 +02:00
parent 5ca1116e72
commit 11ef1c7cc8
2 changed files with 65 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -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 {
display: flex;
flex-direction: row;
justify-content: space-around;
&--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 {
@include RV-Alignment;
min-width: 0;
width: 100%;
&,&--normal {
flex-grow: 3;
flex-shrink: 3;
@include RV-FlexRow__Item--normal;
}
&--narrower {
flex-grow: 1;
flex-shrink: 5;
@include RV-FlexRow__Item--narrower;
}
&--narrow {
flex-grow: 2;
flex-shrink: 4;
@include RV-FlexRow__Item--narrow;
}
&--wide {
flex-grow: 4;
flex-shrink: 2;
@include RV-FlexRow__Item--wide;
}
&--wider {
flex-grow: 5;
flex-shrink: 1;
@include RV-FlexRow__Item--wider;
}
&--fixedSize {
flex-grow: 0;
flex-shrink: 0;
width: min-content;
@include RV-FlexRow__Item--fixedSize;
}
}

14
components/01_Layouts/fullWidthContent/_fullWidthContent.scss
View File

@ -1,11 +1,19 @@
@mixin RV-FullWidthContent__Container {
width: 100%;
}
@mixin RV-FullWidthContent__Item {
width: 100%;
@include RV-ContentCrop;
}
@mixin RV-FullWidthContent {
&__Container {
width: 100%;
@include RV-FullWidthContent__Container;
}
&__Item {
width: 100%;
@include RV-ContentCrop;
@include RV-FullWidthContent__Item;
}
}