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
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -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);
}