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

Add config.spacers and modify spacing function to add breakpoint based spacers.

Browse Source
This commit is contained in:
Lucas Vallenet
2023-06-15 17:28:29 +02:00
parent 4a958c5fb5
commit d0fcfaac86
6 changed files with 81 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
assets/styles/main.scss
View File

@@ -21,6 +21,7 @@
@import "settings/config.colors";
@import "settings/config.eases";
@import "settings/config.fonts";
@import "settings/config.spacers";
@import "settings/config.timings";
@import "settings/config.zindexes";
@import "settings/config";
@@ -72,5 +73,5 @@
// @import "utilities/align";
// @import "utilities/helpers";
// @import "utilities/states";
// @import "utilities/spacing";
@import "utilities/spacing";
// @import "utilities/print";

40
assets/styles/settings/_config.spacers.scss Normal file
View File

@@ -0,0 +1,40 @@
// ==========================================================================
// Settings / Config / Spacers
// ==========================================================================
// Spacers
// ==========================================================================
$spacers: (
'gutter': var(--grid-gutter),
'gutter-2x': calc(2 * var(--grid-gutter)),
'xs': #{vh(5)},
'sm': #{vh(7.5)},
'md': #{vh(10)},
'lg': #{vh(12.5)},
'xl': #{vh(15)},
);
// Function
// ==========================================================================
// Returns spacer.
//
// ```scss
// .c-box {
// margin-top: spacer(gutter);
// }
// ```
//
// @param {string} $key - The spacer key in $spacers.
// @return {size}
@function spacer($spacer) {
@if not map-has-key($spacers, $spacer) {
@error "Unknown master spacer: #{$spacer}";
}
$index: map-get($spacers, $spacer);
@return $index;
}

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

@@ -26,8 +26,8 @@ $spacing-directions: (
'-right': '-right',
'-bottom': '-bottom',
'-left': '-left',
'-horizontal': '-left' '-right',
'-vertical': '-top' '-bottom',
'-x': '-left' '-right',
'-y': '-top' '-bottom',
) !default;
$spacing-properties: (
@@ -35,19 +35,41 @@ $spacing-properties: (
'margin': 'margin',
) !default;
$spacing-sizes: (
null: $unit,
'-double': $unit * 2,
'-small': $unit-small,
'-none': 0px
) !default;
$spacing-sizes: join($spacers, (
null: var(--grid-gutter),
'none': 0
));
@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;
@each $breakpoint, $mediaquery in $breakpoints {
@each $property-namespace, $property in $spacing-properties {
@each $direction-namespace, $direction-rules in $spacing-directions {
@each $size-namespace, $size in $spacing-sizes {
// Spacer without media query
@if $breakpoint == "tiny" {
.u-#{$property-namespace}#{$direction-namespace}-#{$size-namespace} {
@each $direction in $direction-rules {
#{$property}#{$direction}: $size !important;
}
}
}
// Spacer min-width breakpoints `@from-*`
.u-#{$property-namespace}#{$direction-namespace}-#{$size-namespace}\@from-#{$breakpoint} {
@media #{mq-min($breakpoint)} {
@each $direction in $direction-rules {
#{$property}#{$direction}: $size !important;
}
}
}
// Spacer max-width breakpoints @to-*`
.u-#{$property-namespace}#{$direction-namespace}-#{$size-namespace}\@to-#{$breakpoint} {
@media #{mq-max($breakpoint)} {
@each $direction in $direction-rules {
#{$property}#{$direction}: $size !important;
}
}
}
}
}