reverend/scss-library
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Prefix configuable

Browse Source
This commit is contained in:
reverend 2020-12-27 16:00:24 +01:00
parent 96d47dc56a
commit 8b4ba286d9
5 changed files with 216 additions and 183 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
components/01_Layouts/alignment/_alignment.scss
View File

@ -33,44 +33,38 @@
@include RV-Alignment--verticalCenter; @include RV-Alignment--verticalCenter;
} }
@mixin RV-Alignment__Container { @mixin RV-Alignment($-prefix: '&') {
display: grid; display: grid;
&--top { #{$-prefix}--top {
@include RV-Alignment--top; @include RV-Alignment--top;
} }
&--bottom { #{$-prefix}--bottom {
@include RV-Alignment--bottom; @include RV-Alignment--bottom;
} }
&--left { #{$-prefix}--left {
@include RV-Alignment--left; @include RV-Alignment--left;
} }
&--right { #{$-prefix}--right {
@include RV-Alignment--right; @include RV-Alignment--right;
} }
&--horizontalCenter { #{$-prefix}--horizontalCenter {
@include RV-Alignment--horizontalCenter; @include RV-Alignment--horizontalCenter;
} }
&--verticalCenter { #{$-prefix}--verticalCenter {
@include RV-Alignment--verticalCenter; @include RV-Alignment--verticalCenter;
} }
&--center { #{$-prefix}--center {
@include RV-Alignment--center; @include RV-Alignment--center;
} }
} }
@mixin RV-Alignment {
&__Container {
@include RV-Alignment__Container;
}
}
.RV-Alignment { .RV-Alignment {
@include RV-Alignment; @include RV-Alignment;
} }

42
components/01_Layouts/fan/_fan.scss
View File

@ -1,63 +1,65 @@
@mixin RV-Fan--horizontal($-base_height, $-base_width, $-suffix: '') { @mixin RV-Fan--horizontal($-base_height, $-base_width, $-prefix: '&', $-suffix: '') {
&__Container#{$-suffix} { #{$-prefix}__Container#{$-suffix} {
flex-direction: row; flex-direction: row;
} }
&__Container#{$-suffix} &__Surface { #{$-prefix}__Container#{$-suffix} #{$-prefix}__Surface {
min-width: $-base_width; min-width: $-base_width;
height: $-base_height; height: $-base_height;
} }
} }
@mixin RV-Fan--vertical($-base_height, $-base_width, $-suffix: '') { @mixin RV-Fan--vertical($-base_height, $-base_width, $-prefix: '&', $-suffix: '') {
&__Container#{$-suffix} { #{$-prefix}__Container#{$-suffix} {
flex-direction: column; flex-direction: column;
width:max-content; width: max-content;
} }
&__Container#{$-suffix} &__Surface { #{$-prefix}__Container#{$-suffix} #{$-prefix}__Surface {
width: $-base_width; width: $-base_width;
min-height: $-base_height; 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} { #{$-prefix}__Container#{$-suffix} {
flex-flow: row wrap; flex-flow: row wrap;
} }
&__Container#{$-suffix} &__Surface { #{$-prefix}__Container#{$-suffix} #{$-prefix}__Surface {
width: calc(100% - #{$-base_width}); width: calc(100% - #{$-base_width});
min-width: $-base-width; min-width: $-base-width;
height: $-base_height; height: $-base_height;
} }
} }
@mixin RV-Fan--fullWidth($-base_height, $-base_width, $-suffix: '') { @mixin RV-Fan--fullWidth($-base_height, $-base_width, $-prefix: '&', $-suffix: '') {
&__Container#{$-suffix} &__Base, &__Container#{$-suffix} &__Surface {
#{$-prefix}__Container#{$-suffix} #{$-prefix}__Base,
#{$-prefix}__Container#{$-suffix} #{$-prefix}__Surface {
flex-grow: 1; flex-grow: 1;
} }
} }
@mixin RV-Fan ($-base_height, $-base_width) { @mixin RV-Fan ($-base_height, $-base_width, $-prefix: '&') {
@include RV-Fan--vertical($-base_height, $-base_width, '--vertical'); @include RV-Fan--vertical($-base_height, $-base_width, $-prefix, '--vertical');
@include RV-Fan--horizontal($-base_height, $-base_width, '--horizontal'); @include RV-Fan--horizontal($-base_height, $-base_width, $-prefix, '--horizontal');
@include RV-Fan--auto($-base_height, $-base_width, '--auto'); @include RV-Fan--auto($-base_height, $-base_width, $-prefix, '--auto');
@include RV-Fan--fullWidth($-base_height, $-base_width, '--fullWidth'); @include RV-Fan--fullWidth($-base_height, $-base_width, $-prefix, '--fullWidth');
&__Container { #{$-prefix}__Container {
display: flex; display: flex;
} }
&__Base { #{$-prefix}__Base {
height: $-base_height; height: $-base_height;
width: $-base_width; width: $-base_width;
flex: 0 0 auto; flex: 0 0 auto;
} }
&__Surface { #{$-prefix}__Surface {
@include RV-ContentCrop; @include RV-ContentCrop;
} }
} }

8
components/01_Layouts/flexGrid/_flexGrid.scss
View File

@ -5,16 +5,16 @@
grid-auto-rows: minmax($-item_height, 1fr); grid-auto-rows: minmax($-item_height, 1fr);
} }
@mixin RV-FlexGrid($-item_width: 300px, $-item_height: 300px) { @mixin RV-FlexGrid($-item_width: 300px, $-item_height: 300px, $-prefix: '&') {
&__Container { #{$-prefix}__Container {
@include RV-FlexGrid__Container($-item_width, $-item_height); @include RV-FlexGrid__Container($-item_width, $-item_height);
} }
&__Item { #{$-prefix}__Item {
@include RV-Alignment; @include RV-Alignment;
} }
} }
.RV-FlexGrid{ .RV-FlexGrid {
@include RV-FlexGrid; @include RV-FlexGrid;
} }

83
components/01_Layouts/flexRow/_flexRow.scss
View File

@ -1,4 +1,3 @@
@mixin RV-FlexRow__Container--column { @mixin RV-FlexRow__Container--column {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@ -8,18 +7,40 @@
flex-wrap: wrap; flex-wrap: wrap;
} }
@mixin RV-FlexRow__Container { @mixin RV-FlexRow__Container--horizontal($-break_width: 500px) {
display: flex;
flex-direction: row; flex-direction: row;
height: 100%; flex-wrap: wrap;
&--multiRow { * {
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; @include RV-FlexRow__Container--multiRow;
} }
&--column { #{$-prefix}--column {
@include RV-FlexRow__Container--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 { @mixin RV-FlexRow__Item--normal {
@ -41,10 +62,12 @@
flex-grow: 4; flex-grow: 4;
flex-shrink: 2; flex-shrink: 2;
} }
@mixin RV-FlexRow__Item--wider { @mixin RV-FlexRow__Item--wider {
flex-grow: 5; flex-grow: 5;
flex-shrink: 1; flex-shrink: 1;
} }
@mixin RV-FlexRow__Item--fixedSize($-width: 100px) { @mixin RV-FlexRow__Item--fixedSize($-width: 100px) {
flex-grow: 0; flex-grow: 0;
flex-shrink: 0; flex-shrink: 0;
@ -52,53 +75,67 @@
flex-basis: $-width; flex-basis: $-width;
} }
@mixin RV-FlexRow__Item { @mixin RV-FlexRow__Item($-prefix: '&') {
@include RV-Alignment;
min-width: min-content; min-width: min-content;
width: 100%; width: 100%;
&,&--normal { #{$-prefix},
#{$-prefix}--normal {
@include RV-FlexRow__Item--normal; @include RV-FlexRow__Item--normal;
} }
}
&--narrower { @mixin RV-FlexRow__Item--advanced($-prefix: '&') {
@include RV-Alignment;
#{$-prefix}--narrower {
@include RV-FlexRow__Item--narrower; @include RV-FlexRow__Item--narrower;
} }
&--narrow { #{$-prefix}--narrow {
@include RV-FlexRow__Item--narrow; @include RV-FlexRow__Item--narrow;
} }
&--wide { #{$-prefix}--wide {
@include RV-FlexRow__Item--wide; @include RV-FlexRow__Item--wide;
} }
&--wider { #{$-prefix}--wider {
@include RV-FlexRow__Item--wider; @include RV-FlexRow__Item--wider;
} }
&--fixedSize { #{$-prefix}--fixedSize {
@include RV-FlexRow__Item--fixedSize; @include RV-FlexRow__Item--fixedSize;
} }
} }
@mixin RV-FlexRow--multiRow { @mixin RV-FlexRow--multiRow($-prefix: '&') {
&__Container { #{$-prefix}__Container {
@include RV-FlexRow__Container--multiRow; @include RV-FlexRow__Container--multiRow;
} }
} }
@mixin RV-FlexRow { @mixin RV-FlexRow($-prefix: '&') {
&__Container { #{$-prefix}__Container {
@include RV-FlexRow__Container; @include RV-FlexRow__Container($-prefix: $-prefix);
} }
&__Item { #{$-prefix}__Item {
@include RV-FlexRow__Item; @include RV-FlexRow__Item($-prefix: $-prefix);
} }
} }
.RV-FlexRow{ @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;
@include RV-FlexRow--advanced;
} }

6
components/01_Layouts/fullWidthContent/_fullWidthContent.scss
View File

@ -7,12 +7,12 @@
@include RV-ContentCrop; @include RV-ContentCrop;
} }
@mixin RV-FullWidthContent { @mixin RV-FullWidthContent($-prefix: '&') {
&__Container { #{$-prefix}__Container {
@include RV-FullWidthContent__Container; @include RV-FullWidthContent__Container;
} }
&__Item { #{$-prefix}__Item {
@include RV-FullWidthContent__Item; @include RV-FullWidthContent__Item;
} }
} }