2022-09-02 10:57:30 +00:00
|
|
|
/*
|
|
|
|
|
* Spacing
|
|
|
|
|
*/
|
2024-04-30 14:00:06 +00:00
|
|
|
$spacing-shortcuts: ("margin": "m", "padding": "p");
|
2022-09-02 10:57:30 +00:00
|
|
|
$spacing-directions: ("top": "t", "right": "r", "bottom": "b", "left": "l");
|
|
|
|
|
$spacing-values: ("0": 0, "1": 0.25rem, "2": 0.5rem, "3": 0.75rem, "4": 1rem, "5": 1.5rem, "6": 3rem, "auto": auto);
|
|
|
|
|
|
|
|
|
|
@each $spacing-shortcut-name, $spacing-shortcut-value in $spacing-shortcuts {
|
|
|
|
|
@each $spacing-name, $spacing-value in $spacing-values {
|
|
|
|
|
// All directions
|
|
|
|
|
.#{$spacing-shortcut-value}-#{$spacing-name} {
|
|
|
|
|
#{$spacing-shortcut-name}: $spacing-value !important;
|
|
|
|
|
}
|
|
|
|
|
// Horizontal axis
|
|
|
|
|
.#{$spacing-shortcut-value}x-#{$spacing-name} {
|
|
|
|
|
#{$spacing-shortcut-name}-left: $spacing-value !important;
|
|
|
|
|
#{$spacing-shortcut-name}-right: $spacing-value !important;
|
|
|
|
|
}
|
|
|
|
|
// Vertical axis
|
|
|
|
|
.#{$spacing-shortcut-value}y-#{$spacing-name} {
|
|
|
|
|
#{$spacing-shortcut-name}-top: $spacing-value !important;
|
|
|
|
|
#{$spacing-shortcut-name}-bottom: $spacing-value !important;
|
|
|
|
|
}
|
|
|
|
|
// Cardinal directions
|
|
|
|
|
@each $spacing-direction-name, $spacing-direction-value in $spacing-directions {
|
|
|
|
|
.#{$spacing-shortcut-value}#{$spacing-direction-value}-#{$spacing-name} {
|
|
|
|
|
#{$spacing-shortcut-name}-#{$spacing-direction-name}: $spacing-value !important;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
