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

Fix spacing loop

Browse Source
This commit is contained in:
Lucas Vallenet
2023-06-16 10:13:10 +02:00
parent d0fcfaac86
commit c1bcf7fb0d
5 changed files with 17 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
assets/styles/main.scss
View File

@@ -73,5 +73,5 @@
// @import "utilities/align";
// @import "utilities/helpers";
// @import "utilities/states";
@import "utilities/spacing";
// @import "utilities/spacing";
// @import "utilities/print";

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

@@ -42,31 +42,37 @@ $spacing-sizes: join($spacers, (
@each $breakpoint, $mediaquery in $breakpoints {
@each $property-namespace, $property in $spacing-properties {
@each $direction-namespace, $direction-rules in $spacing-directions {
@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};
// Spacer without media query
@if $breakpoint == "tiny" {
.u-#{$property-namespace}#{$direction-namespace}-#{$size-namespace} {
@each $direction in $direction-rules {
#{$base-class} {
@each $direction in $directions {
#{$property}#{$direction}: $size !important;
}
}
}
// Spacer min-width breakpoints `@from-*`
.u-#{$property-namespace}#{$direction-namespace}-#{$size-namespace}\@from-#{$breakpoint} {
#{$base-class}\@from-#{$breakpoint} {
@media #{mq-min($breakpoint)} {
@each $direction in $direction-rules {
@each $direction in $directions {
#{$property}#{$direction}: $size !important;
}
}
}
// Spacer max-width breakpoints @to-*`
.u-#{$property-namespace}#{$direction-namespace}-#{$size-namespace}\@to-#{$breakpoint} {
#{$base-class}\@to-#{$breakpoint} {
@media #{mq-max($breakpoint)} {
@each $direction in $direction-rules {
@each $direction in $directions {
#{$property}#{$direction}: $size !important;
}
}