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

Merge branch 'master' into feature/update-node-version

Browse Source
This commit is contained in:
Deven Caron
2023-02-09 10:11:24 -05:00
parent c82e9916d0 477cec7763
commit af57ebd9cb
5 changed files with 17 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
assets/styles/objects/_grid.scss
View File

@@ -169,7 +169,8 @@
// By default, a grid item takes full width of its parent.
//
.o-grid_item {
grid-column: 1 / -1;
grid-column-start: var(--gc-start, 1);
grid-column-end: var(--gc-end, -1);
&.-align-end {
align-self: end;

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

@@ -13,48 +13,26 @@ $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"
"from-tiny" $from-tiny,
"from-small" $from-small,
"from-medium" $from-medium,
"from-large" $from-large,
"from-big" $from-big
) !default;
@each $breakpoint-namespace, $breakpoint in $breakpoints {
@each $breakpoint, $mediaquery in $breakpoints {
@for $fromIndex from 1 through $colsMax {
@for $toIndex from 1 through $colsMax {
@if $breakpoint == null {
@if $mediaquery == null {
.u-gc-#{$fromIndex}\/#{$toIndex} {
grid-column-start: #{$fromIndex};
grid-column-end: #{$toIndex};
--gc-start: #{$fromIndex};
--gc-end: #{$toIndex};
}
} @else {
.u-gc-#{$fromIndex}\/#{$toIndex}\@#{$breakpoint} {
@if $breakpoint-namespace == "from-tiny" {
@media (min-width: $from-tiny) {
grid-column-start: #{$fromIndex};
grid-column-end: #{$toIndex};
}
} @else if $breakpoint-namespace == "from-small" {
@media (min-width: $from-small) {
grid-column-start: #{$fromIndex};
grid-column-end: #{$toIndex};
}
} @else if $breakpoint-namespace == "from-medium" {
@media (min-width: $from-medium) {
grid-column-start: #{$fromIndex};
grid-column-end: #{$toIndex};
}
} @else if $breakpoint-namespace == "from-large" {
@media (min-width: $from-large) {
grid-column-start: #{$fromIndex};
grid-column-end: #{$toIndex};
}
} @else if $breakpoint-namespace == "from-big" {
@media (min-width: $from-big) {
grid-column-start: #{$fromIndex};
grid-column-end: #{$toIndex};
}
@media (min-width: #{$mediaquery}) {
--gc-start: #{$fromIndex};
--gc-end: #{$toIndex};
}
}
}