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
|
@use '../../sass-utilities' as *;
// * Table scrollable
@include pf-root($table) {
--#{$table}__sticky-cell--MinWidth--base: #{pf-size-prem(140px)};
--#{$table}__sticky-cell--MinWidth: var(--#{$table}__sticky-cell--MinWidth--base);
--#{$table}__sticky-cell--ZIndex: var(--pf-t--global--z-index--xs);
--#{$table}__sticky-cell--InsetInlineEnd: auto;
--#{$table}__sticky-cell--InsetInlineStart: auto;
--#{$table}__sticky-cell--BackgroundColor: var(--pf-t--global--background--color--primary--default);
--#{$table}__sticky-cell--m-border-right--before--BorderInlineEndWidth: var(--pf-t--global--border--width--divider--default);
--#{$table}__sticky-cell--m-border-right--before--BorderInlineEndColor: var(--pf-t--global--border--color--default);
--#{$table}__sticky-cell--m-border-left--before--BorderInlineStartWidth: var(--pf-t--global--border--width--divider--default);
--#{$table}__sticky-cell--m-border-left--before--BorderInlineStartColor: var(--pf-t--global--border--color--default);
--#{$table}__sticky-cell--m-right--InsetInlineEnd: 0;
--#{$table}__sticky-cell--m-left--InsetInlineStart: 0;
--#{$table}--m-sticky-header__sticky-cell--ZIndex: calc(var(--#{$table}__sticky-cell--ZIndex) + 1);
}
// - Table sticky cell
.#{$table} .#{$table}__sticky-cell {
position: sticky;
inset-inline-start: var(--#{$table}__sticky-cell--InsetInlineStart);
inset-inline-end: var(--#{$table}__sticky-cell--InsetInlineEnd);
z-index: var(--#{$table}__sticky-cell--ZIndex);
min-width: var(--#{$table}__sticky-cell--MinWidth);
}
.#{$table}__sticky-cell {
--#{$table}--cell--Overflow: visible;
--#{$table}--m-sticky-header--cell--ZIndex: var(--#{$table}--m-sticky-header__sticky-cell--ZIndex);
background-color: var(--#{$table}__sticky-cell--BackgroundColor);
background-clip: padding-box;
&.pf-m-border-right::before {
--#{$table}--cell--m-border-right--before--BorderInlineEndWidth: var(--#{$table}__sticky-cell--m-border-right--before--BorderInlineEndWidth);
--#{$table}--cell--m-border-right--before--BorderInlineEndColor: var(--#{$table}__sticky-cell--m-border-right--before--BorderInlineEndColor);
}
&.pf-m-border-left::before {
--#{$table}--cell--m-border-left--before--BorderInlineStartWidth: var(--#{$table}__sticky-cell--m-border-left--before--BorderInlineStartWidth);
--#{$table}--cell--m-border-left--before--BorderInlineStartColor: var(--#{$table}__sticky-cell--m-border-left--before--BorderInlineStartColor);
}
&.pf-m-right,
&.pf-m-inline-end {
--#{$table}__sticky-cell--InsetInlineEnd: var(--#{$table}__sticky-cell--m-right--InsetInlineEnd);
}
&.pf-m-left,
&.pf-m-inline-start {
--#{$table}__sticky-cell--InsetInlineStart: var(--#{$table}__sticky-cell--m-left--InsetInlineStart);
}
}
// - Scroll outer wrapper
.#{$scroll-outer-wrapper} {
--#{$scroll-outer-wrapper}--MinHeight: #{pf-size-prem(400px)};
--#{$scroll-outer-wrapper}--MaxHeight: 100%;
display: flex;
flex-direction: column;
max-width: 100%;
min-height: var(--#{$scroll-outer-wrapper}--MinHeight);
max-height: var(--#{$scroll-outer-wrapper}--MaxHeight);
overflow: hidden;
}
// - Scroll inner wrapper
.#{$scroll-inner-wrapper} {
display: flex;
flex-direction: column;
max-width: 100%;
max-height: 100%;
overflow: auto;
}
|
