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

Prefix configuable

Browse Source
This commit is contained in:
reverend
2020-12-27 16:00:24 +01:00
parent 96d47dc56a
commit 8b4ba286d9
5 changed files with 216 additions and 183 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,104 +1,141 @@
@mixin RV-FlexRow__Container--column {
display: flex;
flex-direction: column;
display: flex;
flex-direction: column;
}
@mixin RV-FlexRow__Container--multiRow {
flex-wrap: wrap;
flex-wrap: wrap;
}
@mixin RV-FlexRow__Container {
display: flex;
flex-direction: row;
height: 100%;
@mixin RV-FlexRow__Container--horizontal($-break_width: 500px) {
flex-direction: row;
flex-wrap: wrap;
&--multiRow {
@include RV-FlexRow__Container--multiRow;
}
* {
flex-basis: calc(#{$-break_width} * 999 - 100% * 999);
}
}
&--column {
@include RV-FlexRow__Container--column;
}
@mixin RV-FlexRow__Container--vertical {
flex-direction: column;
}
@mixin RV-FlexRow__Container($-prefix: '&') {
display: flex;
height: 100%;
}
@mixin RV-FlexRow__Container--advanced($-break_width: 500px, $-prefix: '&') {
#{$-prefix}--multiRow {
@include RV-FlexRow__Container--multiRow;
}
#{$-prefix}--column {
@include RV-FlexRow__Container--column;
}
#{$-prefix}--horizontal {
@include RV-FlexRow__Container--horizontal(#{$-break_width});
}
#{$-prefix}--vertical {
@include RV-FlexRow__Container--vertical;
}
}
@mixin RV-FlexRow__Item--normal {
flex-grow: 3;
flex-shrink: 3;
flex-grow: 3;
flex-shrink: 3;
}
@mixin RV-FlexRow__Item--narrower {
flex-grow: 1;
flex-shrink: 5;
flex-grow: 1;
flex-shrink: 5;
}
@mixin RV-FlexRow__Item--narrow {
flex-grow: 2;
flex-shrink: 4;
flex-grow: 2;
flex-shrink: 4;
}
@mixin RV-FlexRow__Item--wide {
flex-grow: 4;
flex-shrink: 2;
flex-grow: 4;
flex-shrink: 2;
}
@mixin RV-FlexRow__Item--wider {
flex-grow: 5;
flex-shrink: 1;
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;
flex-grow: 0;
flex-shrink: 0;
width: min-content;
flex-basis: $-width;
}
@mixin RV-FlexRow__Item {
@include RV-Alignment;
@mixin RV-FlexRow__Item($-prefix: '&') {
min-width: min-content;
width: 100%;
min-width: min-content;
width: 100%;
&,&--normal {
@include RV-FlexRow__Item--normal;
}
&--narrower {
@include RV-FlexRow__Item--narrower;
}
&--narrow {
@include RV-FlexRow__Item--narrow;
}
&--wide {
@include RV-FlexRow__Item--wide;
}
&--wider {
@include RV-FlexRow__Item--wider;
}
&--fixedSize {
@include RV-FlexRow__Item--fixedSize;
}
#{$-prefix},
#{$-prefix}--normal {
@include RV-FlexRow__Item--normal;
}
}
@mixin RV-FlexRow--multiRow {
&__Container {
@include RV-FlexRow__Container--multiRow;
}
@mixin RV-FlexRow__Item--advanced($-prefix: '&') {
@include RV-Alignment;
#{$-prefix}--narrower {
@include RV-FlexRow__Item--narrower;
}
#{$-prefix}--narrow {
@include RV-FlexRow__Item--narrow;
}
#{$-prefix}--wide {
@include RV-FlexRow__Item--wide;
}
#{$-prefix}--wider {
@include RV-FlexRow__Item--wider;
}
#{$-prefix}--fixedSize {
@include RV-FlexRow__Item--fixedSize;
}
}
@mixin RV-FlexRow {
&__Container {
@include RV-FlexRow__Container;
}
&__Item {
@include RV-FlexRow__Item;
}
@mixin RV-FlexRow--multiRow($-prefix: '&') {
#{$-prefix}__Container {
@include RV-FlexRow__Container--multiRow;
}
}
.RV-FlexRow{
@include RV-FlexRow;
@mixin RV-FlexRow($-prefix: '&') {
#{$-prefix}__Container {
@include RV-FlexRow__Container($-prefix: $-prefix);
}
#{$-prefix}__Item {
@include RV-FlexRow__Item($-prefix: $-prefix);
}
}
@mixin RV-FlexRow--advanced($-break_width: 500px, $-prefix: '&') {
#{$-prefix}__Container {
@include RV-FlexRow__Container--advanced($-break_width, $-prefix: $-prefix);
}
#{$-prefix}__Item {
@include RV-FlexRow__Item--advanced($-prefix: $-prefix);
}
}
.RV-FlexRow {
@include RV-FlexRow;
@include RV-FlexRow--advanced;
}