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

Better usebility of mixins

Browse Source
This commit is contained in:
reverend 2020-08-23 19:19:53 +02:00
parent e61d21071a
commit 4705ed0d39
1 changed files with 39 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,24 +1,30 @@
@mixin RV-Alignment--top { @mixin RV-Alignment--top {
display: grid;
align-content: start; align-content: start;
} }
@mixin RV-Alignment--bottom { @mixin RV-Alignment--bottom {
display: grid;
align-content: end; align-content: end;
} }
@mixin RV-Alignment--left { @mixin RV-Alignment--left {
display: grid;
justify-content: start; justify-content: start;
} }
@mixin RV-Alignment--right { @mixin RV-Alignment--right {
display: grid;
justify-content: end; justify-content: end;
} }
@mixin RV-Alignment--horizontalCenter { @mixin RV-Alignment--horizontalCenter {
display: grid;
justify-content: center; justify-content: center;
} }
@mixin RV-Alignment--verticalCenter { @mixin RV-Alignment--verticalCenter {
display: grid;
align-content: center; align-content: center;
} }
@ -27,37 +33,41 @@
@include RV-Alignment--verticalCenter; @include RV-Alignment--verticalCenter;
} }
@mixin RV-Alignment__Container {
display: grid;
&--top {
@include RV-Alignment--top;
}
&--bottom {
@include RV-Alignment--bottom;
}
&--left {
@include RV-Alignment--left;
}
&--right {
@include RV-Alignment--right;
}
&--horizontalCenter {
@include RV-Alignment--horizontalCenter;
}
&--verticalCenter {
@include RV-Alignment--verticalCenter;
}
&--center {
@include RV-Alignment--center;
}
}
@mixin RV-Alignment { @mixin RV-Alignment {
&__Container { &__Container {
display: grid; @include RV-FlexRow__Container;
&--top {
@include RV-Alignment--top;
}
&--bottom {
@include RV-Alignment--bottom;
}
&--left {
@include RV-Alignment--left;
}
&--right {
@include RV-Alignment--right;
}
&--horizontalCenter {
@include RV-Alignment--horizontalCenter;
}
&--verticalCenter {
@include RV-Alignment--verticalCenter;
}
&--center {
@include RV-Alignment--center;
}
} }
} }