1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
|
@use '../../sass-utilities' as *;
$pf-v6-l-grid--breakpoint-map: build-breakpoint-map(); // currently only used for css variable stack
// URL.com/guidelines#layout
// Generate smart grid layout
// @parameter {Suffix} xs, sm, md, lg, xl, null
@mixin pf-smart-grid($suffix: null) {
@for $col-num from 1 through 12 {
&.pf-m-all-#{$col-num}-col#{$suffix} {
> * {
--#{$grid}__item--GridColumnEnd: span #{$col-num};
}
}
}
}
// Creates grid item
// @parameter {Suffix} xs, sm, md, lg, xl, null
@mixin pf-grid-item-modifier($suffix: null) {
// generate column span modifier
@for $col-num from 1 through 12 {
> .pf-m-#{$col-num}-col#{$suffix} {
--#{$grid}__item--GridColumnEnd: span #{$col-num};
}
}
// generate column offset modfiers
@for $col-num from 1 through 12 {
> .pf-m-offset-#{$col-num}-col#{$suffix} {
--#{$grid}__item--GridColumnStart: col-start calc(#{$col-num} + 1);
}
}
// generate row span modfiers
@for $row-num from 1 through 12 {
> .pf-m-#{$row-num}-row#{$suffix} {
grid-row: span #{$row-num};
}
}
}
// Grid base
@include pf-root($grid) {
--#{$grid}--m-gutter--GridGap: var(--pf-t--global--spacer--gutter--default);
--#{$grid}__item--GridColumnStart: auto;
--#{$grid}__item--GridColumnEnd: span 12;
--#{$grid}--item--Order: 0;
}
.#{$grid} {
display: grid;
grid-template-columns: repeat(12, [col-start] 1fr);
> *,
.#{$grid}__item {
grid-column-start: var(--#{$grid}__item--GridColumnStart);
grid-column-end: var(--#{$grid}__item--GridColumnEnd);
min-width: 0;
min-height: 0;
@include pf-v6-build-css-variable-stack("order", "--#{$grid}--item--Order", $pf-v6-l-grid--breakpoint-map);
}
// Loop through $breakpoints map to generate responsive classes
@each $breakpoint, $value in $pf-v6-global--breakpoint-map {
@include pf-v6-media-query($breakpoint) {
@include pf-smart-grid($value);
}
}
// Loop through $breakpoints map to generate responsive classes
@each $breakpoint, $value in $pf-v6-global--breakpoint-map {
@include pf-v6-media-query($breakpoint) {
@include pf-grid-item-modifier($value);
}
}
&.pf-m-gutter {
grid-gap: var(--#{$grid}--m-gutter--GridGap);
}
}
|
