diff --git a/components/01_Layouts/alignment/_alignment.scss b/components/01_Layouts/alignment/_alignment.scss index b5dccae..c7ac18a 100644 --- a/components/01_Layouts/alignment/_alignment.scss +++ b/components/01_Layouts/alignment/_alignment.scss @@ -1,76 +1,70 @@ @mixin RV-Alignment--top { - display: grid; - align-content: start; + display: grid; + align-content: start; } @mixin RV-Alignment--bottom { - display: grid; - align-content: end; + display: grid; + align-content: end; } @mixin RV-Alignment--left { - display: grid; - justify-content: start; + display: grid; + justify-content: start; } @mixin RV-Alignment--right { - display: grid; - justify-content: end; + display: grid; + justify-content: end; } @mixin RV-Alignment--horizontalCenter { - display: grid; - justify-content: center; + display: grid; + justify-content: center; } @mixin RV-Alignment--verticalCenter { - display: grid; - align-items: center; + display: grid; + align-items: center; } @mixin RV-Alignment--center { - @include RV-Alignment--horizontalCenter; - @include RV-Alignment--verticalCenter; + @include RV-Alignment--horizontalCenter; + @include RV-Alignment--verticalCenter; } -@mixin RV-Alignment__Container { - display: grid; +@mixin RV-Alignment($-prefix: '&') { + display: grid; - &--top { - @include RV-Alignment--top; - } + #{$-prefix}--top { + @include RV-Alignment--top; + } - &--bottom { - @include RV-Alignment--bottom; - } + #{$-prefix}--bottom { + @include RV-Alignment--bottom; + } - &--left { - @include RV-Alignment--left; - } + #{$-prefix}--left { + @include RV-Alignment--left; + } - &--right { - @include RV-Alignment--right; - } + #{$-prefix}--right { + @include RV-Alignment--right; + } - &--horizontalCenter { - @include RV-Alignment--horizontalCenter; - } + #{$-prefix}--horizontalCenter { + @include RV-Alignment--horizontalCenter; + } - &--verticalCenter { - @include RV-Alignment--verticalCenter; - } + #{$-prefix}--verticalCenter { + @include RV-Alignment--verticalCenter; + } - &--center { - @include RV-Alignment--center; - } -} - -@mixin RV-Alignment { - &__Container { - @include RV-Alignment__Container; - } + #{$-prefix}--center { + @include RV-Alignment--center; + } } .RV-Alignment { - @include RV-Alignment; + @include RV-Alignment; } \ No newline at end of file diff --git a/components/01_Layouts/fan/_fan.scss b/components/01_Layouts/fan/_fan.scss index 1758cea..eeafdcb 100644 --- a/components/01_Layouts/fan/_fan.scss +++ b/components/01_Layouts/fan/_fan.scss @@ -1,67 +1,69 @@ -@mixin RV-Fan--horizontal($-base_height, $-base_width, $-suffix: '') { - - &__Container#{$-suffix} { - flex-direction: row; - } +@mixin RV-Fan--horizontal($-base_height, $-base_width, $-prefix: '&', $-suffix: '') { - &__Container#{$-suffix} &__Surface { - min-width: $-base_width; - height: $-base_height; - } + #{$-prefix}__Container#{$-suffix} { + flex-direction: row; + } + + #{$-prefix}__Container#{$-suffix} #{$-prefix}__Surface { + min-width: $-base_width; + height: $-base_height; + } } -@mixin RV-Fan--vertical($-base_height, $-base_width, $-suffix: '') { - &__Container#{$-suffix} { - flex-direction: column; - width:max-content; - } +@mixin RV-Fan--vertical($-base_height, $-base_width, $-prefix: '&', $-suffix: '') { + #{$-prefix}__Container#{$-suffix} { + flex-direction: column; + width: max-content; + } - &__Container#{$-suffix} &__Surface { - width: $-base_width; - min-height: $-base_height; - } + #{$-prefix}__Container#{$-suffix} #{$-prefix}__Surface { + width: $-base_width; + min-height: $-base_height; + } } -@mixin RV-Fan--auto($-base_height, $-base_width, $-suffix: '') { +@mixin RV-Fan--auto($-base_height, $-base_width, $-prefix: '&', $-suffix: '') { - &__Container#{$-suffix} { - flex-flow: row wrap; - } + #{$-prefix}__Container#{$-suffix} { + flex-flow: row wrap; + } - &__Container#{$-suffix} &__Surface { - width: calc(100% - #{$-base_width}); - min-width: $-base-width; - height: $-base_height; - } + #{$-prefix}__Container#{$-suffix} #{$-prefix}__Surface { + width: calc(100% - #{$-base_width}); + min-width: $-base-width; + height: $-base_height; + } } -@mixin RV-Fan--fullWidth($-base_height, $-base_width, $-suffix: '') { - &__Container#{$-suffix} &__Base, &__Container#{$-suffix} &__Surface { - flex-grow: 1; - } +@mixin RV-Fan--fullWidth($-base_height, $-base_width, $-prefix: '&', $-suffix: '') { + + #{$-prefix}__Container#{$-suffix} #{$-prefix}__Base, + #{$-prefix}__Container#{$-suffix} #{$-prefix}__Surface { + flex-grow: 1; + } } -@mixin RV-Fan ($-base_height, $-base_width) { - @include RV-Fan--vertical($-base_height, $-base_width, '--vertical'); - @include RV-Fan--horizontal($-base_height, $-base_width, '--horizontal'); - @include RV-Fan--auto($-base_height, $-base_width, '--auto'); - @include RV-Fan--fullWidth($-base_height, $-base_width, '--fullWidth'); +@mixin RV-Fan ($-base_height, $-base_width, $-prefix: '&') { + @include RV-Fan--vertical($-base_height, $-base_width, $-prefix, '--vertical'); + @include RV-Fan--horizontal($-base_height, $-base_width, $-prefix, '--horizontal'); + @include RV-Fan--auto($-base_height, $-base_width, $-prefix, '--auto'); + @include RV-Fan--fullWidth($-base_height, $-base_width, $-prefix, '--fullWidth'); - &__Container { - display: flex; - } + #{$-prefix}__Container { + display: flex; + } - &__Base { - height: $-base_height; - width: $-base_width; - flex: 0 0 auto; - } + #{$-prefix}__Base { + height: $-base_height; + width: $-base_width; + flex: 0 0 auto; + } - &__Surface { - @include RV-ContentCrop; - } + #{$-prefix}__Surface { + @include RV-ContentCrop; + } } .RV-Fan { - @include RV-Fan(280px, 320px); + @include RV-Fan(280px, 320px); } \ No newline at end of file diff --git a/components/01_Layouts/flexGrid/_flexGrid.scss b/components/01_Layouts/flexGrid/_flexGrid.scss index 2db5810..269eed5 100644 --- a/components/01_Layouts/flexGrid/_flexGrid.scss +++ b/components/01_Layouts/flexGrid/_flexGrid.scss @@ -1,20 +1,20 @@ @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, minmax($-item_height, 1fr)); - grid-auto-rows: minmax($-item_height, 1fr); + display: grid; + grid-template-columns: repeat(auto-fill, minmax($-item_width, 1fr)); + grid-template-rows: repeat(auto-fill, minmax($-item_height, 1fr)); + grid-auto-rows: minmax($-item_height, 1fr); } -@mixin RV-FlexGrid($-item_width: 300px, $-item_height: 300px) { - &__Container { - @include RV-FlexGrid__Container($-item_width, $-item_height); - } +@mixin RV-FlexGrid($-item_width: 300px, $-item_height: 300px, $-prefix: '&') { + #{$-prefix}__Container { + @include RV-FlexGrid__Container($-item_width, $-item_height); + } - &__Item { - @include RV-Alignment; - } + #{$-prefix}__Item { + @include RV-Alignment; + } } -.RV-FlexGrid{ - @include RV-FlexGrid; -} +.RV-FlexGrid { + @include RV-FlexGrid; +} \ No newline at end of file diff --git a/components/01_Layouts/flexRow/_flexRow.scss b/components/01_Layouts/flexRow/_flexRow.scss index d50661d..879433a 100644 --- a/components/01_Layouts/flexRow/_flexRow.scss +++ b/components/01_Layouts/flexRow/_flexRow.scss @@ -1,104 +1,141 @@ - @mixin RV-FlexRow__Container--column { - display: flex; - flex-direction: column; + display: flex; + flex-direction: column; } @mixin RV-FlexRow__Container--multiRow { - flex-wrap: wrap; + flex-wrap: wrap; } -@mixin RV-FlexRow__Container { - display: flex; - flex-direction: row; - height: 100%; +@mixin RV-FlexRow__Container--horizontal($-break_width: 500px) { + flex-direction: row; + flex-wrap: wrap; - &--multiRow { - @include RV-FlexRow__Container--multiRow; - } + * { + flex-basis: calc(#{$-break_width} * 999 - 100% * 999); + } +} - &--column { - @include RV-FlexRow__Container--column; - } +@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; + flex-grow: 3; + flex-shrink: 3; } @mixin RV-FlexRow__Item--narrower { - flex-grow: 1; - flex-shrink: 5; + flex-grow: 1; + flex-shrink: 5; } @mixin RV-FlexRow__Item--narrow { - flex-grow: 2; - flex-shrink: 4; + flex-grow: 2; + flex-shrink: 4; } @mixin RV-FlexRow__Item--wide { - flex-grow: 4; - flex-shrink: 2; + flex-grow: 4; + flex-shrink: 2; } + @mixin RV-FlexRow__Item--wider { - flex-grow: 5; - flex-shrink: 1; + 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; + flex-grow: 0; + flex-shrink: 0; + width: min-content; + flex-basis: $-width; } -@mixin RV-FlexRow__Item { - @include RV-Alignment; +@mixin RV-FlexRow__Item($-prefix: '&') { + min-width: min-content; + width: 100%; - 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; - } + #{$-prefix}, + #{$-prefix}--normal { + @include RV-FlexRow__Item--normal; + } } -@mixin RV-FlexRow--multiRow { - &__Container { - @include RV-FlexRow__Container--multiRow; - } +@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 { - &__Container { - @include RV-FlexRow__Container; - } - - &__Item { - @include RV-FlexRow__Item; - } +@mixin RV-FlexRow--multiRow($-prefix: '&') { + #{$-prefix}__Container { + @include RV-FlexRow__Container--multiRow; + } } -.RV-FlexRow{ - @include RV-FlexRow; +@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; } \ No newline at end of file diff --git a/components/01_Layouts/fullWidthContent/_fullWidthContent.scss b/components/01_Layouts/fullWidthContent/_fullWidthContent.scss index af35960..7f346d5 100644 --- a/components/01_Layouts/fullWidthContent/_fullWidthContent.scss +++ b/components/01_Layouts/fullWidthContent/_fullWidthContent.scss @@ -1,19 +1,19 @@ @mixin RV-FullWidthContent__Container { - width: 100%; + width: 100%; } @mixin RV-FullWidthContent__Item { - width: 100%; - @include RV-ContentCrop; + width: 100%; + @include RV-ContentCrop; } -@mixin RV-FullWidthContent { - &__Container { +@mixin RV-FullWidthContent($-prefix: '&') { + #{$-prefix}__Container { @include RV-FullWidthContent__Container; } - &__Item { - @include RV-FullWidthContent__Item; + #{$-prefix}__Item { + @include RV-FullWidthContent__Item; } }