diff --git a/components/01_Layouts/flexGrid/_flexGrid.scss b/components/01_Layouts/flexGrid/_flexGrid.scss index 7ee4c83..43a86dc 100644 --- a/components/01_Layouts/flexGrid/_flexGrid.scss +++ b/components/01_Layouts/flexGrid/_flexGrid.scss @@ -1,9 +1,13 @@ -@mixin RV-FlexGrid($item_width: 300px, $item_height: 300px) { +@mixin RV-FlexGrid__Container($-item_width: 300px, $-item_height: 300px) { + display: grid; + grid-template-columns: repeat(auto-fill, minmax($-item_width, 1fr)); + grid-template-rows: repeat(auto-fill, $-item_height); + grid-auto-rows: $-item_height; +} + +@mixin RV-FlexGrid($-item_width: 300px, $-item_height: 300px) { &__Container { - display: grid; - grid-template-columns: repeat(auto-fill, minmax($item_width, 1fr)); - grid-template-rows: repeat(auto-fill, $item_height); - grid-auto-rows: $item_height; + @include RV-FlexGrid__Container($-item_width, $-item_height) : } &__Item { diff --git a/components/01_Layouts/flexRow/_flexRow.scss b/components/01_Layouts/flexRow/_flexRow.scss index e30191b..62901ea 100644 --- a/components/01_Layouts/flexRow/_flexRow.scss +++ b/components/01_Layouts/flexRow/_flexRow.scss @@ -1,23 +1,55 @@ +@mixin RV-FlexRow__Container { + display: flex; + flex-direction: row; + justify-content: space-around; + + &--multiRow { + flex-wrap: wrap; + } +} + +@mixin RV-FlexRow__Item { + @include RV-Alignment; + + &,&--normal { + flex-grow: 3; + flex-shrink: 3; + } + + &--narrower { + flex-grow: 1; + flex-shrink: 5; + } + + &--narrow { + flex-grow: 2; + flex-shrink: 4; + } + + &--wide { + flex-grow: 4; + flex-shrink: 2; + } + + &--wider { + flex-grow: 5; + flex-shrink: 1; + } + + &--fixedSize { + flex-grow: 0; + flex-shrink: 0; + width: min-content; + } +} + @mixin RV-FlexRow { &__Container { - display: flex; - flex-direction: row; - justify-content: space-around; - - &--wrap { - flex-wrap: wrap; - } + @include RV-FlexRow__Container; } &__Item { - width: 100%; - @include RV-Alignment; - - &--fixedSize { - flex: 0 0; - width: min-content; - } - + @include RV-FlexRow__Item; } }