Restructuring

This commit is contained in:
reverend 2020-12-27 20:28:45 +01:00
parent 2b938cf69e
commit aab1baf6b0
2 changed files with 119 additions and 48 deletions

View File

@ -1,48 +1,73 @@
@mixin RV-FlexRow__Container--column { /*
* Classes for easy flexrow usage
*/
/* ##########
* Container class
########### */
@mixin RV-FlexRow__Container($-prefix: '&') {
display: flex; display: flex;
flex-direction: column; height: 100%;
} }
@mixin RV-FlexRow__Container--multiRow { /*
flex-wrap: wrap; * Orientation
} */
@mixin RV-FlexRow__Container--horizontal {
@mixin RV-FlexRow__Container--horizontal($-break_width: 500px) {
flex-direction: row; flex-direction: row;
flex-wrap: wrap; flex-wrap: wrap;
* {
flex-basis: calc(#{$-break_width} * 999 - 100% * 999);
}
} }
@mixin RV-FlexRow__Container--vertical { @mixin RV-FlexRow__Container--vertical {
flex-direction: column; flex-direction: column;
} }
@mixin RV-FlexRow__Container($-prefix: '&') { /*
display: flex; * Breaks from row to column orientation at the given breakpoint
height: 100%; * breaks when the container is smaller than $-localBreakPoint or when the viewport is smaller than $-mediaBreakPoint.
} */
@mixin RV-FlexRow__Container--breakPoint($-localBreakPoint: 500px, $-mediaBreakPoint: null) {
@mixin RV-FlexRow__Container--advanced($-break_width: 500px, $-prefix: '&') { * {
#{$-prefix}--multiRow { flex-basis: calc(#{$-localBreakPoint} * 999 - 100% * 999);
@include RV-FlexRow__Container--multiRow;
} }
#{$-prefix}--column { @if ($-mediaBreakPoint !=null) {
@media(max-width: $-mediaBreakPoint) {
@include RV-FlexRow__Container--column; @include RV-FlexRow__Container--column;
} }
}
}
#{$-prefix}--horizontal { /*
@include RV-FlexRow__Container--horizontal(#{$-break_width}); * Shorthand for the modifiers above
*/
@mixin RV-FlexRow__Container--shorthands($-break_width: 500px) {
&--breakPoint {
@include RV-FlexRow__Container--breakPoint(#{$-break_width});
} }
#{$-prefix}--vertical { &--horizontal {
@include RV-FlexRow__Container--horizontal;
}
&--vertical {
@include RV-FlexRow__Container--vertical; @include RV-FlexRow__Container--vertical;
} }
} }
/* ##########
* Item class
########### */
@mixin RV-FlexRow__Item {
min-width: min-content;
width: 100%;
@include RV-FlexRow__Item--normal;
}
/*
* Varios relative width of items to each other
*/
@mixin RV-FlexRow__Item--normal { @mixin RV-FlexRow__Item--normal {
flex-grow: 3; flex-grow: 3;
flex-shrink: 3; flex-shrink: 3;
@ -68,6 +93,9 @@
flex-shrink: 1; flex-shrink: 1;
} }
/*
* Item has always the given width
*/
@mixin RV-FlexRow__Item--fixedSize($-width: 100px) { @mixin RV-FlexRow__Item--fixedSize($-width: 100px) {
flex-grow: 0; flex-grow: 0;
flex-shrink: 0; flex-shrink: 0;
@ -75,67 +103,110 @@
flex-basis: $-width; flex-basis: $-width;
} }
@mixin RV-FlexRow__Item($-prefix: '&') { /*
min-width: min-content; * Item width relativ to the container
width: 100%; */
@mixin RV-FlexRow__Item--half {
#{$-prefix}, flex-grow: 0;
#{$-prefix}--normal { flex-shrink: 0;
@include RV-FlexRow__Item--normal; flex-basis: 50%;
} width: 50%;
} }
@mixin RV-FlexRow__Item--advanced($-prefix: '&') { @mixin RV-FlexRow__Item--third {
flex-grow: 0;
flex-shrink: 0;
flex-basis: 33.33%;
width: 33.33%;
}
@mixin RV-FlexRow__Item--quarter {
flex-grow: 0;
flex-shrink: 0;
flex-basis: 25%;
width: 25%;
}
@mixin RV-FlexRow__Item--content {
flex-grow: 0;
flex-shrink: 0;
width: max-content;
flex-basis: max-content;
}
/*
* Shorthand for the modifiers above
*/
@mixin RV-FlexRow__Item--shorthands() {
@include RV-Alignment; @include RV-Alignment;
#{$-prefix}--narrower { &--narrower {
@include RV-FlexRow__Item--narrower; @include RV-FlexRow__Item--narrower;
} }
#{$-prefix}--narrow { &--narrow {
@include RV-FlexRow__Item--narrow; @include RV-FlexRow__Item--narrow;
} }
#{$-prefix}--wide { &--wide {
@include RV-FlexRow__Item--wide; @include RV-FlexRow__Item--wide;
} }
#{$-prefix}--wider { &--wider {
@include RV-FlexRow__Item--wider; @include RV-FlexRow__Item--wider;
} }
#{$-prefix}--fixedSize { &--fixedSize {
@include RV-FlexRow__Item--fixedSize; @include RV-FlexRow__Item--fixedSize;
} }
}
@mixin RV-FlexRow--multiRow($-prefix: '&') { &--half {
#{$-prefix}__Container { @include RV-FlexRow__Item--half;
@include RV-FlexRow__Container--multiRow; }
&--third {
@include RV-FlexRow__Item--third;
}
&--quarter {
@include RV-FlexRow__Item--quarter;
}
&--content {
@include RV-FlexRow__Item--content;
} }
} }
/*
* Combining basic classes
*/
@mixin RV-FlexRow($-prefix: '&') { @mixin RV-FlexRow($-prefix: '&') {
#{$-prefix}__Container { #{$-prefix}__Container {
@include RV-FlexRow__Container($-prefix: $-prefix); @include RV-FlexRow__Container($-prefix: $-prefix);
} }
#{$-prefix}__Item { #{$-prefix}__Item {
@include RV-FlexRow__Item($-prefix: $-prefix); @include RV-FlexRow__Item;
} }
} }
@mixin RV-FlexRow--advanced($-break_width: 500px, $-prefix: '&') { /*
* Combining shorthands
*/
@mixin RV-FlexRow--shorthands($-break_width: 500px, $-prefix: '&') {
#{$-prefix}__Container { #{$-prefix}__Container {
@include RV-FlexRow__Container--advanced($-break_width, $-prefix: $-prefix); @include RV-FlexRow__Container--shorthands($-break_width);
} }
#{$-prefix}__Item { #{$-prefix}__Item {
@include RV-FlexRow__Item--advanced($-prefix: $-prefix); @include RV-FlexRow__Item--shorthands;
} }
} }
/*
* Final CSS Class
*/
.RV-FlexRow { .RV-FlexRow {
@include RV-FlexRow; @include RV-FlexRow;
@include RV-FlexRow--advanced; @include RV-FlexRow--shorthands;
} }

View File

@ -25,5 +25,5 @@
<div class="red RV-FlexRow__Item RV-FlexRow__Item--narrow">.</div> <div class="red RV-FlexRow__Item RV-FlexRow__Item--narrow">.</div>
<div class="green RV-FlexRow__Item RV-FlexRow__Item--normal">.</div> <div class="green RV-FlexRow__Item RV-FlexRow__Item--normal">.</div>
<div class="red RV-FlexRow__Item RV-FlexRow__Item--wide">.</div> <div class="red RV-FlexRow__Item RV-FlexRow__Item--wide">.</div>
<div class="green RV-FlexRow__Item RV-FlexRow__Item--wider">.</div> <div class="green RV-FlexRow__Item RV-FlexRow__Item--content">content</div>
</div> </div>