@mixin RV-FlexRow__Container--column { display: flex; flex-direction: column; } @mixin RV-FlexRow__Container--multiRow { flex-wrap: wrap; } @mixin RV-FlexRow__Container--horizontal($-break_width: 500px) { 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%; } @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; } @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($-prefix: '&') { min-width: min-content; width: 100%; #{$-prefix}, #{$-prefix}--normal { @include RV-FlexRow__Item--normal; } } @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--multiRow($-prefix: '&') { #{$-prefix}__Container { @include RV-FlexRow__Container--multiRow; } } @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; }