scss-library/components/02_Styles/spacing/_spacing.scss

67 lines
1.2 KiB
SCSS
Raw Normal View History

2020-08-23 11:35:47 +02:00
@mixin RV-Spacing__Outer--small {
margin: $-spacing-small;
}
@mixin RV-Spacing__Outer--medium {
margin: $-spacing-medium;
}
@mixin RV-Spacing__Outer--large {
margin: $-spacing-large;
}
2020-08-23 19:20:34 +02:00
@mixin RV-Spacing__Inner--small($-container-suffix: '__Container') {
padding: $-spacing-small;
&#{$-container-suffix} {
gap: $-spacing-small;
}
2020-08-23 11:35:47 +02:00
}
2020-08-23 19:20:34 +02:00
@mixin RV-Spacing__Inner--medium($-container-suffix: '__Container') {
2020-08-23 11:35:47 +02:00
padding: $-spacing-medium;
2020-08-23 19:20:34 +02:00
&#{$-container-suffix} {
gap: $-spacing-medium;
}
2020-08-23 11:35:47 +02:00
}
2020-08-23 19:20:34 +02:00
@mixin RV-Spacing__Inner--large($-container-suffix: '__Container') {
2020-08-23 11:35:47 +02:00
padding: $-spacing-large;
2020-08-23 19:20:34 +02:00
&#{$-container-suffix} {
gap: $-spacing-large;
}
2020-08-23 11:35:47 +02:00
}
@mixin RV-Spacing {
&__Outer{
&--small {
@include RV-Spacing__Outer--small;
}
&--medium {
@include RV-Spacing__Outer--medium;
}
&--large {
@include RV-Spacing__Outer--large;
}
}
&__Inner{
&--small {
2020-08-23 19:20:34 +02:00
@include RV-Spacing__Inner--small('');
2020-08-23 11:35:47 +02:00
}
&--medium {
2020-08-23 19:20:34 +02:00
@include RV-Spacing__Inner--medium('');
2020-08-23 11:35:47 +02:00
}
&--large {
2020-08-23 19:20:34 +02:00
@include RV-Spacing__Inner--large('');
2020-08-23 11:35:47 +02:00
}
}
}
.RV-Spacing {
@include RV-Spacing;
}