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 *;
@mixin pf-v6-c-data-list-responsive-block() {
// base responsive styles
@at-root .#{$data-list}:not([class*="pf-m-grid"]) {
@media screen and (min-width: $pf-v6-global--breakpoint--md) {
@content;
}
}
@at-root .#{$data-list}.pf-m-grid-none {
@media screen and (min-width: $pf-v6-global--breakpoint--xs) {
@content;
}
}
// grid modifiers
@each $size, $bp in $pf-v6-global--breakpoint-name-map {
@at-root .#{$data-list}.pf-m-grid-#{$size} {
@media screen and (min-width: #{$bp}) {
@content;
}
}
}
}
@include pf-v6-c-data-list-responsive-block {
--#{$data-list}__cell--cell--PaddingBlockStart: var(--#{$data-list}__cell--cell--md--PaddingBlockStart);
--#{$data-list}__cell--PaddingBlockEnd: var(--#{$data-list}__cell--md--PaddingBlockEnd);
--#{$data-list}__item-control--MarginInlineEnd: var(--#{$data-list}__item-control--md--MarginInlineEnd);
--#{$data-list}__item-action--MarginInlineStart: var(--#{$data-list}__item-action--md--MarginInlineStart);
--#{$data-list}__expandable-content-body--PaddingBlockStart: var(--#{$data-list}__expandable-content-body--md--PaddingBlockStart);
--#{$data-list}__expandable-content-body--PaddingBlockEnd: var(--#{$data-list}__expandable-content-body--md--PaddingBlockEnd);
--#{$data-list}--m-compact__cell--PaddingBlockEnd: var(--#{$data-list}--m-compact__cell--md--PaddingBlockEnd);
--#{$data-list}--m-compact__cell-cell--PaddingBlockStart: var(--#{$data-list}--m-compact__cell-cell--md--PaddingBlockStart);
@media screen and (min-width: $pf-v6-global--breakpoint--xl) {
--#{$data-list}__item-row--PaddingInlineEnd: var(--#{$data-list}__item-row--xl--PaddingInlineEnd);
--#{$data-list}__item-row--PaddingInlineStart: var(--#{$data-list}__item-row--xl--PaddingInlineStart);
--#{$data-list}__expandable-content-body--PaddingInlineEnd: var(--#{$data-list}__expandable-content-body--xl--PaddingInlineEnd);
--#{$data-list}__expandable-content-body--PaddingInlineStart: var(--#{$data-list}__expandable-content-body--xl--PaddingInlineStart);
}
.#{$data-list}__item-content {
display: flex;
flex-grow: 1;
flex-wrap: wrap;
padding-block-end: var(--#{$data-list}__item-content--md--PaddingBlockEnd);
}
.#{$data-list}__cell {
// stylelint-disable selector-not-notation
// update to single :not() in breaking change
&:not(:last-child):not(.pf-m-icon) {
margin-inline-end: var(--#{$data-list}__cell--MarginInlineEnd);
}
// for all subsequent .#{$data-list}__cell's, set to full width
& + .#{$data-list}__cell {
flex: 1;
order: initial;
}
&.pf-m-align-right {
margin-inline-start: auto;
}
&.pf-m-no-fill {
flex: none;
}
&.pf-m-flex-2 { flex-grow: 2; }
&.pf-m-flex-3 { flex-grow: 3; }
&.pf-m-flex-4 { flex-grow: 4; }
&.pf-m-flex-5 { flex-grow: 5; }
}
.#{$data-list}__expandable-content {
max-height: initial;
overflow-y: visible;
}
}
|
