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 { @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;
} }
} }

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 { @mixin RV-FullWidthContent {
&__Container { &__Container {
width: 100%; @include RV-FullWidthContent__Container;
} }
&__Item { &__Item {
width: 100%; @include RV-FullWidthContent__Item;
@include RV-ContentCrop;
} }
} }