mirror of
https://github.com/locomotivemtl/locomotive-boilerplate.git
synced 2026-01-15 00:55:08 +08:00
58 lines
1.5 KiB
SCSS
58 lines
1.5 KiB
SCSS
// ==========================================================================
|
|
// Utilities / Spacing
|
|
// ==========================================================================
|
|
|
|
////
|
|
/// Utility classes to put specific spacing values onto elements. The below loop
|
|
/// will generate us a suite of classes like:
|
|
///
|
|
/// @example
|
|
/// .u-margin-top {}
|
|
/// .u-padding-left-large {}
|
|
/// .u-margin-right-small {}
|
|
/// .u-padding {}
|
|
/// .u-padding-right-none {}
|
|
/// .u-padding-horizontal {}
|
|
/// .u-padding-vertical-small {}
|
|
///
|
|
/// @link https://github.com/inuitcss/inuitcss/blob/512977a/utilities/_utilities.spacing.scss
|
|
////
|
|
|
|
/* stylelint-disable string-quotes */
|
|
|
|
$spacing-directions: (
|
|
null: null,
|
|
'-top': '-top',
|
|
'-right': '-right',
|
|
'-bottom': '-bottom',
|
|
'-left': '-left',
|
|
'-horizontal': '-left' '-right',
|
|
'-vertical': '-top' '-bottom',
|
|
) !default;
|
|
|
|
$spacing-properties: (
|
|
'padding': 'padding',
|
|
'margin': 'margin',
|
|
) !default;
|
|
|
|
$spacing-sizes: (
|
|
null: $unit,
|
|
'-double': $unit * 2,
|
|
'-small': $unit-small,
|
|
'-none': 0px,
|
|
) !default;
|
|
|
|
@each $property-namespace, $property in $spacing-properties {
|
|
@each $direction-namespace, $direction-rules in $spacing-directions {
|
|
@each $size-namespace, $size in $spacing-sizes {
|
|
.u-#{$property-namespace}#{$direction-namespace}#{$size-namespace} {
|
|
@each $direction in $direction-rules {
|
|
#{$property}#{$direction}: rem($size) !important;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
/* stylelint-enable string-quotes */
|