@mixin RV-FlexRow__Container--column { display: flex; flex-direction: column; } @mixin RV-FlexRow__Container--multiRow { flex-wrap: wrap; } @mixin RV-FlexRow__Container { display: flex; flex-direction: row; justify-content: space-around; &--multiRow { @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 { @include RV-Alignment; 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; } } @mixin RV-FlexRow { &__Container { @include RV-FlexRow__Container; } &__Item { @include RV-FlexRow__Item; } } .RV-FlexRow{ @include RV-FlexRow; }