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

Converting Layouts to Stylus

Browse Source
This commit is contained in:
reverend
2021-01-03 12:36:12 +01:00
parent 3f3874427c
commit 333aa9d1b5
36 changed files with 1088 additions and 1773 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,69 +0,0 @@
@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);
}

53
components/01_Layouts/fan/_fan.styl Normal file
View File

@@ -0,0 +1,53 @@
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
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
RV-Fan--auto(base_height, base_width, prefix='&', suffix='')
{prefix}__Container{suffix}
flex-flow row wrap
{prefix}__Container{suffix} {prefix}__Surface
width 'calc(100% - %s)' % base_width
min-width base_width
height base_height
RV-Fan--fullWidth(base_height, base_width, prefix='&', suffix='')
{prefix}__Container{suffix} {prefix}__Base,
{prefix}__Container{suffix} {prefix}__Surface
flex-grow 1
RV-Fan(base_height, base_width, prefix='&')
RV-Fan--vertical(base_height, base_width, prefix, '--vertical')
RV-Fan--horizontal(base_height, base_width, prefix, '--horizontal')
RV-Fan--auto(base_height, base_width, prefix, '--auto')
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
RV-ContentCrop()
.RV-Fan
RV-Fan(280px, 320px)