From aab1baf6b0dd188b42c775e0253bbaa7d95b1c90 Mon Sep 17 00:00:00 2001 From: reverend Date: Sun, 27 Dec 2020 20:28:45 +0100 Subject: [PATCH] Restructuring --- components/01_Layouts/flexRow/_flexRow.scss | 165 ++++++++++++++------ components/01_Layouts/flexRow/flexRow.hbs | 2 +- 2 files changed, 119 insertions(+), 48 deletions(-) diff --git a/components/01_Layouts/flexRow/_flexRow.scss b/components/01_Layouts/flexRow/_flexRow.scss index 879433a..583f782 100644 --- a/components/01_Layouts/flexRow/_flexRow.scss +++ b/components/01_Layouts/flexRow/_flexRow.scss @@ -1,48 +1,73 @@ -@mixin RV-FlexRow__Container--column { +/* + * Classes for easy flexrow usage + */ + + +/* ########## + * Container class + ########### */ +@mixin RV-FlexRow__Container($-prefix: '&') { display: flex; - flex-direction: column; + height: 100%; } -@mixin RV-FlexRow__Container--multiRow { - flex-wrap: wrap; -} - -@mixin RV-FlexRow__Container--horizontal($-break_width: 500px) { +/* + * Orientation + */ +@mixin RV-FlexRow__Container--horizontal { flex-direction: row; flex-wrap: wrap; - - * { - flex-basis: calc(#{$-break_width} * 999 - 100% * 999); - } } @mixin RV-FlexRow__Container--vertical { flex-direction: column; } -@mixin RV-FlexRow__Container($-prefix: '&') { - display: flex; - height: 100%; +/* + * Breaks from row to column orientation at the given breakpoint + * 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) { + * { + flex-basis: calc(#{$-localBreakPoint} * 999 - 100% * 999); + } + + @if ($-mediaBreakPoint !=null) { + @media(max-width: $-mediaBreakPoint) { + @include RV-FlexRow__Container--column; + } + } } -@mixin RV-FlexRow__Container--advanced($-break_width: 500px, $-prefix: '&') { - #{$-prefix}--multiRow { - @include RV-FlexRow__Container--multiRow; +/* + * Shorthand for the modifiers above + */ +@mixin RV-FlexRow__Container--shorthands($-break_width: 500px) { + &--breakPoint { + @include RV-FlexRow__Container--breakPoint(#{$-break_width}); } - #{$-prefix}--column { - @include RV-FlexRow__Container--column; + &--horizontal { + @include RV-FlexRow__Container--horizontal; } - #{$-prefix}--horizontal { - @include RV-FlexRow__Container--horizontal(#{$-break_width}); - } - - #{$-prefix}--vertical { + &--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 { flex-grow: 3; flex-shrink: 3; @@ -68,6 +93,9 @@ flex-shrink: 1; } +/* + * Item has always the given width + */ @mixin RV-FlexRow__Item--fixedSize($-width: 100px) { flex-grow: 0; flex-shrink: 0; @@ -75,67 +103,110 @@ flex-basis: $-width; } -@mixin RV-FlexRow__Item($-prefix: '&') { - min-width: min-content; - width: 100%; - - #{$-prefix}, - #{$-prefix}--normal { - @include RV-FlexRow__Item--normal; - } +/* + * Item width relativ to the container + */ +@mixin RV-FlexRow__Item--half { + flex-grow: 0; + flex-shrink: 0; + 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; - #{$-prefix}--narrower { + &--narrower { @include RV-FlexRow__Item--narrower; } - #{$-prefix}--narrow { + &--narrow { @include RV-FlexRow__Item--narrow; } - #{$-prefix}--wide { + &--wide { @include RV-FlexRow__Item--wide; } - #{$-prefix}--wider { + &--wider { @include RV-FlexRow__Item--wider; } - #{$-prefix}--fixedSize { + &--fixedSize { @include RV-FlexRow__Item--fixedSize; } -} -@mixin RV-FlexRow--multiRow($-prefix: '&') { - #{$-prefix}__Container { - @include RV-FlexRow__Container--multiRow; + &--half { + @include RV-FlexRow__Item--half; + } + + &--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: '&') { #{$-prefix}__Container { @include RV-FlexRow__Container($-prefix: $-prefix); } #{$-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 { - @include RV-FlexRow__Container--advanced($-break_width, $-prefix: $-prefix); + @include RV-FlexRow__Container--shorthands($-break_width); } #{$-prefix}__Item { - @include RV-FlexRow__Item--advanced($-prefix: $-prefix); + @include RV-FlexRow__Item--shorthands; } } +/* + * Final CSS Class + */ .RV-FlexRow { @include RV-FlexRow; - @include RV-FlexRow--advanced; + @include RV-FlexRow--shorthands; } \ No newline at end of file diff --git a/components/01_Layouts/flexRow/flexRow.hbs b/components/01_Layouts/flexRow/flexRow.hbs index e541f48..4326791 100644 --- a/components/01_Layouts/flexRow/flexRow.hbs +++ b/components/01_Layouts/flexRow/flexRow.hbs @@ -25,5 +25,5 @@
.
.
.
-
.
+
content
\ No newline at end of file