BookStack/resources/sass/_spacing.scss
2022-10-02 13:17:28 +01:00

45 lines
1.2 KiB
SCSS

// Here we generate spacing utility classes for our sizes for all box sides and axis.
// These will output to classes like .px-m (Padding on x-axis, medium size) or .mr-l (Margin right, large size)
@mixin spacing($prop, $propLetter) {
@each $sizeLetter, $size in $spacing {
.#{$propLetter}-#{$sizeLetter} {
#{$prop}: $size !important;
}
.#{$propLetter}x-#{$sizeLetter} {
#{$prop}-inline-start: $size !important;
#{$prop}-inline-end: $size !important;
}
.#{$propLetter}y-#{$sizeLetter} {
#{$prop}-top: $size !important;
#{$prop}-bottom: $size !important;
}
.#{$propLetter}t-#{$sizeLetter} {
#{$prop}-top: $size !important;
}
.#{$propLetter}r-#{$sizeLetter} {
#{$prop}-inline-end: $size !important;
}
.#{$propLetter}b-#{$sizeLetter} {
#{$prop}-bottom: $size !important;
}
.#{$propLetter}l-#{$sizeLetter} {
#{$prop}-inline-start: $size !important;
}
}
}
@include spacing('margin', 'm');
@include spacing('padding', 'p');
@each $sizeLetter, $size in $spacing {
.gap-#{$sizeLetter} {
gap: $size !important;
}
.gap-x-#{$sizeLetter} {
column-gap: $size !important;
}
.gap-y-#{$sizeLetter} {
row-gap: $size !important;
}
}