mirror of
https://github.com/locomotivemtl/locomotive-boilerplate.git
synced 2026-01-15 00:55:08 +08:00
70 lines
1.7 KiB
SCSS
70 lines
1.7 KiB
SCSS
// ==========================================================================
|
|
// Settings / Config / Spacers
|
|
// ==========================================================================
|
|
|
|
:root {
|
|
--spacing-2xs-mobile: 6;
|
|
--spacing-2xs-desktop: 10;
|
|
|
|
--spacing-xs-mobile: 12;
|
|
--spacing-xs-desktop: 16;
|
|
|
|
--spacing-sm-mobile: 22;
|
|
--spacing-sm-desktop: 32;
|
|
|
|
--spacing-md-mobile: 32;
|
|
--spacing-md-desktop: 56;
|
|
|
|
--spacing-lg-mobile: 48;
|
|
--spacing-lg-desktop: 96;
|
|
|
|
--spacing-xl-mobile: 64;
|
|
--spacing-xl-desktop: 128;
|
|
|
|
--spacing-2xl-mobile: 88;
|
|
--spacing-2xl-desktop: 176;
|
|
|
|
--spacing-3xl-mobile: 122;
|
|
--spacing-3xl-desktop: 224;
|
|
}
|
|
|
|
// Spacers
|
|
// ==========================================================================
|
|
|
|
$spacers: (
|
|
'gutter': var(--grid-gutter),
|
|
'2xs': #{spacingClamp('2xs')},
|
|
'xs': #{spacingClamp('xs')},
|
|
'sm': #{spacingClamp('sm')},
|
|
'md': #{spacingClamp('md')},
|
|
'lg': #{spacingClamp('lg')},
|
|
'xl': #{spacingClamp('xl')},
|
|
'2xl': #{spacingClamp('2xl')},
|
|
'3xl': #{spacingClamp('3xl')},
|
|
);
|
|
|
|
// Function
|
|
// ==========================================================================
|
|
|
|
// Returns spacer.
|
|
//
|
|
// ```scss
|
|
// .c-box {
|
|
// margin-top: spacer(gutter);
|
|
// }
|
|
// ```
|
|
//
|
|
// @param {string} $key - The spacer key in $spacers.
|
|
// @param {number} $multiplier - The multiplier of the spacer value.
|
|
// @return {size}
|
|
|
|
@function spacer($spacer: $spacer-default, $multiplier: 1) {
|
|
@if not map-has-key($spacers, $spacer) {
|
|
@error "Unknown master spacer: #{$spacer}";
|
|
}
|
|
|
|
$index: map-get($spacers, $spacer);
|
|
|
|
@return calc(#{$index} * #{$multiplier});
|
|
}
|