mirror of
https://github.com/BookStackApp/BookStack.git
synced 2025-11-03 02:13:16 +03:00
8ec26e8083
Changes the name of our spacing variables due to the prefixing -/_ meaning private in the use of new "use" rather than include. All now modular too, so all variables/mixins are accessed via their package. Also renamed variables file to vars for simpler/cleaner access/writing. eg. '$-m' is now 'vars.$m'
47 lines
1.2 KiB
SCSS
47 lines
1.2 KiB
SCSS
@use "vars";
|
|
|
|
// 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 vars.$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 vars.$spacing {
|
|
.gap-#{$sizeLetter} {
|
|
gap: $size !important;
|
|
}
|
|
.gap-x-#{$sizeLetter} {
|
|
column-gap: $size !important;
|
|
}
|
|
.gap-y-#{$sizeLetter} {
|
|
row-gap: $size !important;
|
|
}
|
|
}
|