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
|
@use '../../sass-utilities' as *;
@include pf-root($tab-content) {
--#{$tab-content}__body--PaddingBlockStart: 0;
--#{$tab-content}__body--PaddingInlineEnd: 0;
--#{$tab-content}__body--PaddingBlockEnd: 0;
--#{$tab-content}__body--PaddingInlineStart: 0;
--#{$tab-content}--BackgroundColor: transparent;
// Padding
--#{$tab-content}__body--m-padding--PaddingBlockStart: var(--pf-t--global--spacer--md);
--#{$tab-content}__body--m-padding--PaddingInlineEnd: var(--pf-t--global--spacer--md);
--#{$tab-content}__body--m-padding--PaddingBlockEnd: var(--pf-t--global--spacer--md);
--#{$tab-content}__body--m-padding--PaddingInlineStart: var(--pf-t--global--spacer--md);
// Match page padding
--#{$tab-content}__body--m-padding--xl--PaddingBlockStart: var(--pf-t--global--spacer--lg);
--#{$tab-content}__body--m-padding--xl--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
--#{$tab-content}__body--m-padding--xl--PaddingBlockEnd: var(--pf-t--global--spacer--lg);
--#{$tab-content}__body--m-padding--xl--PaddingInlineStart: var(--pf-t--global--spacer--lg);
// Secondary modifier
--#{$tab-content}--m-secondary--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
}
.#{$tab-content} {
background-color: var(--#{$tab-content}--BackgroundColor);
@media screen and (min-width: $pf-v6-global--breakpoint--xl) {
--#{$tab-content}__body--m-padding--PaddingBlockStart: var(--#{$tab-content}__body--m-padding--xl--PaddingBlockStart);
--#{$tab-content}__body--m-padding--PaddingInlineEnd: var(--#{$tab-content}__body--m-padding--xl--PaddingInlineEnd);
--#{$tab-content}__body--m-padding--PaddingBlockEnd: var(--#{$tab-content}__body--m-padding--xl--PaddingBlockEnd);
--#{$tab-content}__body--m-padding--PaddingInlineStart: var(--#{$tab-content}__body--m-padding--xl--PaddingInlineStart);
}
&.pf-m-secondary {
--#{$tab-content}--BackgroundColor: var(--#{$tab-content}--m-secondary--BackgroundColor);
}
}
// Body
.#{$tab-content}__body {
padding-block-start: var(--#{$tab-content}__body--PaddingBlockStart);
padding-block-end: var(--#{$tab-content}__body--PaddingBlockEnd);
padding-inline-start: var(--#{$tab-content}__body--PaddingInlineStart);
padding-inline-end: var(--#{$tab-content}__body--PaddingInlineEnd);
&.pf-m-padding {
--#{$tab-content}__body--PaddingBlockStart: var(--#{$tab-content}__body--m-padding--PaddingBlockStart);
--#{$tab-content}__body--PaddingInlineEnd: var(--#{$tab-content}__body--m-padding--PaddingInlineEnd);
--#{$tab-content}__body--PaddingBlockEnd: var(--#{$tab-content}__body--m-padding--PaddingBlockEnd);
--#{$tab-content}__body--PaddingInlineStart: var(--#{$tab-content}__body--m-padding--PaddingInlineStart);
}
}
|
