scss-library/components/01_Layouts/alignment/_alignment.scss

70 lines
1.2 KiB
SCSS
Raw Normal View History

2020-08-23 14:38:59 +02:00
@mixin RV-Alignment--top {
2020-12-27 16:00:24 +01:00
display: grid;
align-content: start;
2020-08-23 14:38:59 +02:00
}
@mixin RV-Alignment--bottom {
2020-12-27 16:00:24 +01:00
display: grid;
align-content: end;
2020-08-23 14:38:59 +02:00
}
@mixin RV-Alignment--left {
2020-12-27 16:00:24 +01:00
display: grid;
justify-content: start;
2020-08-23 14:38:59 +02:00
}
@mixin RV-Alignment--right {
2020-12-27 16:00:24 +01:00
display: grid;
justify-content: end;
2020-08-23 14:38:59 +02:00
}
@mixin RV-Alignment--horizontalCenter {
2020-12-27 16:00:24 +01:00
display: grid;
justify-content: center;
2020-08-23 14:38:59 +02:00
}
@mixin RV-Alignment--verticalCenter {
2020-12-27 16:00:24 +01:00
display: grid;
align-items: center;
2020-08-23 14:38:59 +02:00
}
@mixin RV-Alignment--center {
2020-12-27 16:00:24 +01:00
@include RV-Alignment--horizontalCenter;
@include RV-Alignment--verticalCenter;
2020-08-23 14:38:59 +02:00
}
2020-12-27 16:00:24 +01:00
@mixin RV-Alignment($-prefix: '&') {
display: grid;
2020-08-23 14:38:59 +02:00
2020-12-27 16:00:24 +01:00
#{$-prefix}--top {
@include RV-Alignment--top;
}
2020-08-23 14:38:59 +02:00
2020-12-27 16:00:24 +01:00
#{$-prefix}--bottom {
@include RV-Alignment--bottom;
}
2020-08-23 14:38:59 +02:00
2020-12-27 16:00:24 +01:00
#{$-prefix}--left {
@include RV-Alignment--left;
}
2020-08-23 14:38:59 +02:00
2020-12-27 16:00:24 +01:00
#{$-prefix}--right {
@include RV-Alignment--right;
}
2020-08-23 14:38:59 +02:00
2020-12-27 16:00:24 +01:00
#{$-prefix}--horizontalCenter {
@include RV-Alignment--horizontalCenter;
}
2020-08-23 14:38:59 +02:00
2020-12-27 16:00:24 +01:00
#{$-prefix}--verticalCenter {
@include RV-Alignment--verticalCenter;
}
2020-08-23 19:19:53 +02:00
2020-12-27 16:00:24 +01:00
#{$-prefix}--center {
@include RV-Alignment--center;
}
2020-08-23 14:38:59 +02:00
}
.RV-Alignment {
2020-12-27 16:00:24 +01:00
@include RV-Alignment;
2020-08-23 14:38:59 +02:00
}