69 lines
1.8 KiB
SCSS
69 lines
1.8 KiB
SCSS
@mixin RV-Fan--horizontal($-base_height, $-base_width, $-prefix: '&', $-suffix: '') {
|
|
|
|
#{$-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, $-prefix: '&', $-suffix: '') {
|
|
#{$-prefix}__Container#{$-suffix} {
|
|
flex-direction: column;
|
|
width: max-content;
|
|
}
|
|
|
|
#{$-prefix}__Container#{$-suffix} #{$-prefix}__Surface {
|
|
width: $-base_width;
|
|
min-height: $-base_height;
|
|
}
|
|
}
|
|
|
|
@mixin RV-Fan--auto($-base_height, $-base_width, $-prefix: '&', $-suffix: '') {
|
|
|
|
#{$-prefix}__Container#{$-suffix} {
|
|
flex-flow: row wrap;
|
|
}
|
|
|
|
#{$-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, $-prefix: '&', $-suffix: '') {
|
|
|
|
#{$-prefix}__Container#{$-suffix} #{$-prefix}__Base,
|
|
#{$-prefix}__Container#{$-suffix} #{$-prefix}__Surface {
|
|
flex-grow: 1;
|
|
}
|
|
}
|
|
|
|
@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');
|
|
|
|
#{$-prefix}__Container {
|
|
display: flex;
|
|
}
|
|
|
|
#{$-prefix}__Base {
|
|
height: $-base_height;
|
|
width: $-base_width;
|
|
flex: 0 0 auto;
|
|
}
|
|
|
|
#{$-prefix}__Surface {
|
|
@include RV-ContentCrop;
|
|
}
|
|
}
|
|
|
|
.RV-Fan {
|
|
@include RV-Fan(280px, 320px);
|
|
} |