src/presentation/assets/styles/base/_margin-padding.scss
@use 'sass:math';
@use "../spacing" as *;
@mixin no-margin($selectors) {
#{$selectors} {
margin: 0;
}
}
@mixin no-padding($selectors) {
#{$selectors} {
padding: 0;
}
}
@mixin left-padding($selectors, $horizontal-spacing) {
#{$selectors} {
padding-inline-start: $horizontal-spacing;
}
}
@mixin bottom-margin($selectors, $vertical-spacing) {
#{$selectors} {
&:not(:last-child) {
margin-bottom: $vertical-spacing;
}
}
}
@mixin apply-uniform-vertical-spacing {
/* Reset default top/bottom margins added by browser. */
@include no-margin('p');
@include no-margin('h1, h2, h3, h4, h5, h6');
@include no-margin('blockquote');
@include no-margin('pre');
@include no-margin('hr');
@include no-margin('ul, ol');
/* Add spacing between elements using `margin-bottom` only (bottom-up instead of top-down strategy). */
@include bottom-margin('p', $spacing-relative-medium);
@include bottom-margin('li > p', $spacing-relative-small); // Reduce margin for paragraphs directly within list items to visually group related content.
@include bottom-margin('h1, h2, h3, h4, h5, h6', $spacing-relative-small);
@include bottom-margin('ul, ol', $spacing-relative-medium);
@include bottom-margin('li', $spacing-relative-small);
@include bottom-margin('table', $spacing-relative-medium);
@include bottom-margin('blockquote', $spacing-relative-medium);
@include bottom-margin('pre', $spacing-relative-medium);
@include bottom-margin('article', $spacing-relative-medium);
@include bottom-margin('hr', $spacing-relative-medium);
}
@mixin apply-uniform-horizontal-spacing {
/* Reset default left/right paddings added by browser. */
@include no-padding('ul, ol');
/* Add spacing for list items. */
@include left-padding('ul, ol', $spacing-relative-large);
}
@mixin apply-uniform-spacing {
@include apply-uniform-vertical-spacing;
@include apply-uniform-horizontal-spacing;
}