mirror of
https://github.com/locomotivemtl/locomotive-boilerplate.git
synced 2026-01-15 00:55:08 +08:00
45d8be5525
* Rename breakpoints by shortnames * Replace `tiny` breakpoint for `xs` in spacing loop * Add 2xs, 4xl and 5xl breakpoints
85 lines
2.7 KiB
SCSS
85 lines
2.7 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-margin-top-xs {}
|
|
/// .u-padding-left-lg {}
|
|
/// .u-margin-right-sm {}
|
|
/// .u-padding {}
|
|
/// .u-padding-right-none {}
|
|
///
|
|
/// @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',
|
|
'-x': '-left' '-right',
|
|
'-y': '-top' '-bottom',
|
|
) !default;
|
|
|
|
$spacing-properties: (
|
|
'padding': 'padding',
|
|
'margin': 'margin',
|
|
) !default;
|
|
|
|
$spacing-sizes: join($spacings, (
|
|
null: var(--grid-gutter),
|
|
'none': 0
|
|
));
|
|
|
|
@each $breakpoint, $mediaquery in $breakpoints {
|
|
@each $property-namespace, $property in $spacing-properties {
|
|
@each $direction-namespace, $directions in $spacing-directions {
|
|
@each $size-namespace, $size in $spacing-sizes {
|
|
|
|
// Prepend "-" to spacing sizes if not null
|
|
$size-namespace: if($size-namespace != null, "-" + $size-namespace, $size-namespace);
|
|
|
|
// Base class
|
|
$base-class: ".u-" + #{$property-namespace}#{$direction-namespace}#{$size-namespace};
|
|
|
|
// Spacing without media query
|
|
@if $breakpoint == "xs" {
|
|
#{$base-class} {
|
|
@each $direction in $directions {
|
|
#{$property}#{$direction}: $size !important;
|
|
}
|
|
}
|
|
}
|
|
|
|
// Spacing min-width breakpoints `@from-*`
|
|
#{$base-class}\@from-#{$breakpoint} {
|
|
@media #{mq-min($breakpoint)} {
|
|
@each $direction in $directions {
|
|
#{$property}#{$direction}: $size !important;
|
|
}
|
|
}
|
|
}
|
|
|
|
// Spacing max-width breakpoints @to-*`
|
|
#{$base-class}\@to-#{$breakpoint} {
|
|
@media #{mq-max($breakpoint)} {
|
|
@each $direction in $directions {
|
|
#{$property}#{$direction}: $size !important;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
/* stylelint-enable string-quotes */
|