ch4o5/locomotive-boilerplate
Template
1
0
Fork 0
mirror of https://github.com/locomotivemtl/locomotive-boilerplate.git synced 2026-01-15 00:55:08 +08:00
Code Issues Projects Releases Wiki Activity

Rename spacer by spacings

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files

2
assets.json
View File

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

2
assets/styles/main.scss
View File

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

22
assets/styles/settings/_config.spacers.scss → assets/styles/settings/_config.spacings.scss
View File

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

15
assets/styles/utilities/_spacing.scss
View File

@@ -8,12 +8,11 @@
/// ///
/// @example /// @example
/// .u-margin-top {} /// .u-margin-top {}
/// .u-padding-left-large {} /// .u-margin-top-xs {}
/// .u-margin-right-small {} /// .u-padding-left-lg {}
/// .u-margin-right-sm {}
/// .u-padding {} /// .u-padding {}
/// .u-padding-right-none {} /// .u-padding-right-none {}
/// .u-padding-horizontal {}
/// .u-padding-vertical-small {}
/// ///
/// @link https://github.com/inuitcss/inuitcss/blob/512977a/utilities/_utilities.spacing.scss /// @link https://github.com/inuitcss/inuitcss/blob/512977a/utilities/_utilities.spacing.scss
//// ////
@@ -35,7 +34,7 @@ $spacing-properties: (
'margin': 'margin', 'margin': 'margin',
) !default; ) !default;
$spacing-sizes: join($spacers, ( $spacing-sizes: join($spacings, (
null: var(--grid-gutter), null: var(--grid-gutter),
'none': 0 'none': 0
)); ));
@@ -51,7 +50,7 @@ $spacing-sizes: join($spacers, (
// Base class // Base class
$base-class: ".u-" + #{$property-namespace}#{$direction-namespace}#{$size-namespace}; $base-class: ".u-" + #{$property-namespace}#{$direction-namespace}#{$size-namespace};
// Spacer without media query // Spacing without media query
@if $breakpoint == "tiny" { @if $breakpoint == "tiny" {
#{$base-class} { #{$base-class} {
@each $direction in $directions { @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} { #{$base-class}\@from-#{$breakpoint} {
@media #{mq-min($breakpoint)} { @media #{mq-min($breakpoint)} {
@each $direction in $directions { @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} { #{$base-class}\@to-#{$breakpoint} {
@media #{mq-max($breakpoint)} { @media #{mq-max($breakpoint)} {
@each $direction in $directions { @each $direction in $directions {