1
0
mirror of https://github.com/locomotivemtl/locomotive-boilerplate.git synced 2026-01-15 00:55:08 +08:00

Rename spacer by spacings

This commit is contained in:
Lucas Bigot
2024-03-26 14:06:25 -04:00
parent c16407c8c1
commit 81d47b88b8
4 changed files with 20 additions and 21 deletions

View File

@@ -1,3 +1,3 @@
{
"version": 1711467668591
"version": 1711476341450
}

View File

@@ -25,7 +25,7 @@
@import "settings/config.colors";
@import "settings/config.eases";
@import "settings/config.fonts";
@import "settings/config.spacers";
@import "settings/config.spacings";
@import "settings/config.timings";
@import "settings/config.zindexes";
@import "settings/config.variables";

View File

@@ -1,5 +1,5 @@
// ==========================================================================
// Settings / Config / Spacers
// Settings / Config / Spacings
// ==========================================================================
:root {
@@ -28,10 +28,10 @@
--spacing-3xl-desktop: 224;
}
// Spacers
// Spacings
// ==========================================================================
$spacers: (
$spacings: (
'gutter': var(--grid-gutter),
'2xs': #{size-clamp('2xs')},
'xs': #{size-clamp('xs')},
@@ -46,24 +46,24 @@ $spacers: (
// Function
// ==========================================================================
// Returns spacer.
// Returns spacing.
//
// ```scss
// .c-box {
// margin-top: spacer(gutter);
// margin-top: spacing(gutter);
// }
// ```
//
// @param {string} $key - The spacer key in $spacers.
// @param {number} $multiplier - The multiplier of the spacer value.
// @param {string} $key - The spacing key in $spacings.
// @param {number} $multiplier - The multiplier of the spacing value.
// @return {size}
@function spacer($spacer: $spacer-default, $multiplier: 1) {
@if not map-has-key($spacers, $spacer) {
@error "Unknown master spacer: #{$spacer}";
@function spacing($spacing: 'sm', $multiplier: 1) {
@if not map-has-key($spacings, $spacing) {
@error "Unknown master spacing: #{$spacing}";
}
$index: map-get($spacers, $spacer);
$index: map-get($spacings, $spacing);
@return calc(#{$index} * #{$multiplier});
}

View File

@@ -8,12 +8,11 @@
///
/// @example
/// .u-margin-top {}
/// .u-padding-left-large {}
/// .u-margin-right-small {}
/// .u-margin-top-xs {}
/// .u-padding-left-lg {}
/// .u-margin-right-sm {}
/// .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
////
@@ -35,7 +34,7 @@ $spacing-properties: (
'margin': 'margin',
) !default;
$spacing-sizes: join($spacers, (
$spacing-sizes: join($spacings, (
null: var(--grid-gutter),
'none': 0
));
@@ -51,7 +50,7 @@ $spacing-sizes: join($spacers, (
// Base class
$base-class: ".u-" + #{$property-namespace}#{$direction-namespace}#{$size-namespace};
// Spacer without media query
// Spacing without media query
@if $breakpoint == "tiny" {
#{$base-class} {
@each $direction in $directions {
@@ -60,7 +59,7 @@ $spacing-sizes: join($spacers, (
}
}
// Spacer min-width breakpoints `@from-*`
// Spacing min-width breakpoints `@from-*`
#{$base-class}\@from-#{$breakpoint} {
@media #{mq-min($breakpoint)} {
@each $direction in $directions {
@@ -69,7 +68,7 @@ $spacing-sizes: join($spacers, (
}
}
// Spacer max-width breakpoints @to-*`
// Spacing max-width breakpoints @to-*`
#{$base-class}\@to-#{$breakpoint} {
@media #{mq-max($breakpoint)} {
@each $direction in $directions {