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

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

@ -1,76 +1,70 @@
@mixin RV-Alignment--top { @mixin RV-Alignment--top {
display: grid; display: grid;
align-content: start; align-content: start;
} }
@mixin RV-Alignment--bottom { @mixin RV-Alignment--bottom {
display: grid; display: grid;
align-content: end; align-content: end;
} }
@mixin RV-Alignment--left { @mixin RV-Alignment--left {
display: grid; display: grid;
justify-content: start; justify-content: start;
} }
@mixin RV-Alignment--right { @mixin RV-Alignment--right {
display: grid; display: grid;
justify-content: end; justify-content: end;
} }
@mixin RV-Alignment--horizontalCenter { @mixin RV-Alignment--horizontalCenter {
display: grid; display: grid;
justify-content: center; justify-content: center;
} }
@mixin RV-Alignment--verticalCenter { @mixin RV-Alignment--verticalCenter {
display: grid; display: grid;
align-items: center; align-items: center;
} }
@mixin RV-Alignment--center { @mixin RV-Alignment--center {
@include RV-Alignment--horizontalCenter; @include RV-Alignment--horizontalCenter;
@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;
} }

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

@ -1,67 +1,69 @@
@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 {
flex-grow: 1; #{$-prefix}__Container#{$-suffix} #{$-prefix}__Base,
} #{$-prefix}__Container#{$-suffix} #{$-prefix}__Surface {
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;
} }
} }
.RV-Fan { .RV-Fan {
@include RV-Fan(280px, 320px); @include RV-Fan(280px, 320px);
} }

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

@ -1,20 +1,20 @@
@mixin RV-FlexGrid__Container($-item_width: 300px, $-item_height: 300px) { @mixin RV-FlexGrid__Container($-item_width: 300px, $-item_height: 300px) {
display: grid; display: grid;
grid-template-columns: repeat(auto-fill, minmax($-item_width, 1fr)); grid-template-columns: repeat(auto-fill, minmax($-item_width, 1fr));
grid-template-rows: repeat(auto-fill, minmax($-item_height, 1fr)); grid-template-rows: repeat(auto-fill, minmax($-item_height, 1fr));
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;
} }

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

@ -1,104 +1,141 @@
@mixin RV-FlexRow__Container--column { @mixin RV-FlexRow__Container--column {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
} }
@mixin RV-FlexRow__Container--multiRow { @mixin RV-FlexRow__Container--multiRow {
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; flex-wrap: wrap;
height: 100%;
&--multiRow { * {
@include RV-FlexRow__Container--multiRow; flex-basis: calc(#{$-break_width} * 999 - 100% * 999);
} }
}
&--column { @mixin RV-FlexRow__Container--vertical {
@include RV-FlexRow__Container--column; 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 { @mixin RV-FlexRow__Item--normal {
flex-grow: 3; flex-grow: 3;
flex-shrink: 3; flex-shrink: 3;
} }
@mixin RV-FlexRow__Item--narrower { @mixin RV-FlexRow__Item--narrower {
flex-grow: 1; flex-grow: 1;
flex-shrink: 5; flex-shrink: 5;
} }
@mixin RV-FlexRow__Item--narrow { @mixin RV-FlexRow__Item--narrow {
flex-grow: 2; flex-grow: 2;
flex-shrink: 4; flex-shrink: 4;
} }
@mixin RV-FlexRow__Item--wide { @mixin RV-FlexRow__Item--wide {
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;
width: min-content; width: min-content;
flex-basis: $-width; flex-basis: $-width;
} }
@mixin RV-FlexRow__Item { @mixin RV-FlexRow__Item($-prefix: '&') {
@include RV-Alignment; min-width: min-content;
width: 100%;
min-width: min-content; #{$-prefix},
width: 100%; #{$-prefix}--normal {
@include RV-FlexRow__Item--normal;
&,&--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--multiRow { @mixin RV-FlexRow__Item--advanced($-prefix: '&') {
&__Container { @include RV-Alignment;
@include RV-FlexRow__Container--multiRow;
} #{$-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 { @mixin RV-FlexRow--multiRow($-prefix: '&') {
&__Container { #{$-prefix}__Container {
@include RV-FlexRow__Container; @include RV-FlexRow__Container--multiRow;
} }
&__Item {
@include RV-FlexRow__Item;
}
} }
.RV-FlexRow{ @mixin RV-FlexRow($-prefix: '&') {
@include RV-FlexRow; #{$-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;
} }

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

@ -1,19 +1,19 @@
@mixin RV-FullWidthContent__Container { @mixin RV-FullWidthContent__Container {
width: 100%; width: 100%;
} }
@mixin RV-FullWidthContent__Item { @mixin RV-FullWidthContent__Item {
width: 100%; width: 100%;
@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;
} }
} }