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

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

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