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

Update grid-column loop with config.breakpoints list and media query functions. Add @to-* modifier

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

34
assets/styles/utilities/_grid-column.scss
View File

@@ -11,29 +11,31 @@
$colsMax: $base-column-nb + 1; $colsMax: $base-column-nb + 1;
$breakpoints: (
"null" null,
"from-tiny" $from-tiny,
"from-small" $from-small,
"from-medium" $from-medium,
"from-large" $from-large,
"from-big" $from-big
) !default;
@each $breakpoint, $mediaquery in $breakpoints { @each $breakpoint, $mediaquery in $breakpoints {
@for $fromIndex from 1 through $colsMax { @for $fromIndex from 1 through $colsMax {
@for $toIndex from 1 through $colsMax { @for $toIndex from 1 through $colsMax {
@if $mediaquery == null {
// Columns without media query
@if $breakpoint == "tiny" {
.u-gc-#{$fromIndex}\/#{$toIndex} { .u-gc-#{$fromIndex}\/#{$toIndex} {
--gc-start: #{$fromIndex}; --gc-start: #{$fromIndex};
--gc-end: #{$toIndex}; --gc-end: #{$toIndex};
} }
} @else { }
.u-gc-#{$fromIndex}\/#{$toIndex}\@#{$breakpoint} {
@media (min-width: #{$mediaquery}) { // Columns min-width breakpoints `@from-*`
--gc-start: #{$fromIndex}; .u-gc-#{$fromIndex}\/#{$toIndex}\@from-#{$breakpoint} {
--gc-end: #{$toIndex}; @media #{mq-min($breakpoint)} {
} --gc-start: #{$fromIndex};
--gc-end: #{$toIndex};
}
}
// Columns max-width breakpoints @to-*`
.u-gc-#{$fromIndex}\/#{$toIndex}\@to-#{$breakpoint} {
@media #{mq-max($breakpoint)} {
--gc-start: #{$fromIndex};
--gc-end: #{$toIndex};
} }
} }
} }