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

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

@@ -1,70 +0,0 @@
@mixin RV-Alignment--top {
display: grid;
align-content: start;
}
@mixin RV-Alignment--bottom {
display: grid;
align-content: end;
}
@mixin RV-Alignment--left {
display: grid;
justify-content: start;
}
@mixin RV-Alignment--right {
display: grid;
justify-content: end;
}
@mixin RV-Alignment--horizontalCenter {
display: grid;
justify-content: center;
}
@mixin RV-Alignment--verticalCenter {
display: grid;
align-items: center;
}
@mixin RV-Alignment--center {
@include RV-Alignment--horizontalCenter;
@include RV-Alignment--verticalCenter;
}
@mixin RV-Alignment($-prefix: '&') {
display: grid;
#{$-prefix}--top {
@include RV-Alignment--top;
}
#{$-prefix}--bottom {
@include RV-Alignment--bottom;
}
#{$-prefix}--left {
@include RV-Alignment--left;
}
#{$-prefix}--right {
@include RV-Alignment--right;
}
#{$-prefix}--horizontalCenter {
@include RV-Alignment--horizontalCenter;
}
#{$-prefix}--verticalCenter {
@include RV-Alignment--verticalCenter;
}
#{$-prefix}--center {
@include RV-Alignment--center;
}
}
.RV-Alignment {
@include RV-Alignment;
}

55
components/01_Layouts/alignment/_alignment.styl Normal file
View File

@@ -0,0 +1,55 @@
RV-Alignment--top()
display grid
align-content start
RV-Alignment--bottom()
display grid
align-content end
RV-Alignment--left()
display grid
justify-content start
RV-Alignment--right()
display grid
justify-content: end
RV-Alignment--horizontalCenter()
display grid
justify-content center
RV-Alignment--verticalCenter()
display grid
align-items center
RV-Alignment--center()
RV-Alignment--horizontalCenter()
RV-Alignment--verticalCenter()
RV-Alignment(prefix='&')
display grid
{prefix}--top
RV-Alignment--top()
{prefix}--bottom
RV-Alignment--bottom()
{prefix}--left
RV-Alignment--left()
{prefix}--right
RV-Alignment--right()
{prefix}--horizontalCenter
RV-Alignment--horizontalCenter()
{prefix}--verticalCenter
RV-Alignment--verticalCenter()
{prefix}--center
RV-Alignment--center()
.RV-Alignment
RV-Alignment()