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
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
|
@use '../../sass-utilities' as *;
@include pf-root($panel) {
--#{$panel}--Width: auto;
--#{$panel}--MinWidth: auto;
--#{$panel}--MaxWidth: none;
--#{$panel}--BackgroundColor: var(--pf-t--global--background--color--primary--default);
--#{$panel}--BoxShadow: none;
--#{$panel}--BorderRadius: var(--pf-t--global--border--radius--small);
// border
--#{$panel}--before--BorderWidth: 0;
--#{$panel}--before--BorderColor: var(--pf-t--global--border--color--high-contrast);
// secondary modifier
--#{$panel}--m-secondary--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
--#{$panel}--m-secondary--before--BorderWidth: var(--pf-t--global--border--width--high-contrast--regular);
// bordered
--#{$panel}--m-bordered--before--BorderWidth: var(--pf-t--global--border--width--box--default);
--#{$panel}--m-bordered--before--BorderColor: var(--pf-t--global--border--color--default);
// raised
--#{$panel}--m-raised--BoxShadow: var(--pf-t--global--box-shadow--md);
--#{$panel}--m-raised--BackgroundColor: var(--pf-t--global--background--color--floating--default);
--#{$panel}--m-raised--before--BorderWidth: var(--pf-t--global--border--width--high-contrast--regular);
// header
--#{$panel}__header--PaddingBlockStart: var(--pf-t--global--spacer--md);
--#{$panel}__header--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
--#{$panel}__header--PaddingBlockEnd: var(--pf-t--global--spacer--md);
--#{$panel}__header--PaddingInlineStart: var(--pf-t--global--spacer--lg);
// main
--#{$panel}__main--MaxHeight: none;
--#{$panel}__main--Overflow: visible;
// body
--#{$panel}__main-body--PaddingBlockStart: var(--pf-t--global--spacer--md);
--#{$panel}__main-body--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
--#{$panel}__main-body--PaddingBlockEnd: var(--pf-t--global--spacer--md);
--#{$panel}__main-body--PaddingInlineStart: var(--pf-t--global--spacer--lg);
// footer
--#{$panel}__footer--PaddingBlockStart: var(--pf-t--global--spacer--sm);
--#{$panel}__footer--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
--#{$panel}__footer--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
--#{$panel}__footer--PaddingInlineStart: var(--pf-t--global--spacer--lg);
--#{$panel}__footer--BoxShadow: none;
--#{$panel}__footer--BorderColor: transparent;
--#{$panel}__footer--BorderWidth: 0;
// scrollable
--#{$panel}--m-scrollable__main--MaxHeight: #{pf-size-prem(300px)};
--#{$panel}--m-scrollable__main--Overflow: auto;
--#{$panel}--m-scrollable__footer--BoxShadow: var(--pf-t--global--box-shadow--md--top);
--#{$panel}--m-scrollable__footer--PaddingBlockStart: var(--pf-t--global--spacer--md);
--#{$panel}--m-scrollable__footer--PaddingBlockEnd: var(--pf-t--global--spacer--md);
--#{$panel}--m-scrollable__footer--BorderColor: var(--pf-t--global--border--color--high-contrast);
--#{$panel}--m-scrollable__footer--BorderWidth: var(--pf-t--global--border--width--high-contrast--regular);
}
.#{$panel} {
position: relative;
width: var(--#{$panel}--Width);
min-width: var(--#{$panel}--MinWidth);
max-width: var(--#{$panel}--MaxWidth);
background-color: var(--#{$panel}--BackgroundColor);
border-radius: var(--#{$panel}--BorderRadius);
box-shadow: var(--#{$panel}--BoxShadow);
&::before {
position: absolute;
inset: 0;
pointer-events: none;
content: "";
border: var(--#{$panel}--before--BorderWidth) solid var(--#{$panel}--before--BorderColor);
border-radius: var(--#{$panel}--BorderRadius);
}
&.pf-m-bordered {
--#{$panel}--before--BorderWidth: var(--#{$panel}--m-bordered--before--BorderWidth);
--#{$panel}--before--BorderColor: var(--#{$panel}--m-bordered--before--BorderColor);
}
&.pf-m-secondary {
--#{$panel}--BackgroundColor: var(--#{$panel}--m-secondary--BackgroundColor);
--#{$panel}--before--BorderWidth: var(--#{$panel}--m-secondary--before--BorderWidth);
}
&.pf-m-raised {
--#{$panel}--BackgroundColor: var(--#{$panel}--m-raised--BackgroundColor);
--#{$panel}--BoxShadow: var(--#{$panel}--m-raised--BoxShadow);
--#{$panel}--before--BorderWidth: var(--#{$panel}--m-raised--before--BorderWidth);
}
&.pf-m-scrollable {
--#{$panel}__main--MaxHeight: var(--#{$panel}--m-scrollable__main--MaxHeight);
--#{$panel}__main--Overflow: var(--#{$panel}--m-scrollable__main--Overflow);
--#{$panel}__footer--BoxShadow: var(--#{$panel}--m-scrollable__footer--BoxShadow);
--#{$panel}__footer--PaddingBlockStart: var(--#{$panel}--m-scrollable__footer--PaddingBlockStart);
--#{$panel}__footer--PaddingBlockEnd: var(--#{$panel}--m-scrollable__footer--PaddingBlockEnd);
--#{$panel}__footer--BorderColor: var(--#{$panel}--m-scrollable__footer--BorderColor);
--#{$panel}__footer--BorderWidth: var(--#{$panel}--m-scrollable__footer--BorderWidth);
}
}
.#{$panel}__header {
padding-block-start: var(--#{$panel}__header--PaddingBlockStart);
padding-block-end: var(--#{$panel}__header--PaddingBlockEnd);
padding-inline-start: var(--#{$panel}__header--PaddingInlineStart);
padding-inline-end: var(--#{$panel}__header--PaddingInlineEnd);
}
.#{$panel}__main {
max-height: var(--#{$panel}__main--MaxHeight);
overflow: var(--#{$panel}__main--Overflow);
}
.#{$panel}__main-body {
padding-block-start: var(--#{$panel}__main-body--PaddingBlockStart);
padding-block-end: var(--#{$panel}__main-body--PaddingBlockEnd);
padding-inline-start: var(--#{$panel}__main-body--PaddingInlineStart);
padding-inline-end: var(--#{$panel}__main-body--PaddingInlineEnd);
}
.#{$panel}__footer {
padding-block-start: var(--#{$panel}__footer--PaddingBlockStart);
padding-block-end: var(--#{$panel}__footer--PaddingBlockEnd);
padding-inline-start: var(--#{$panel}__footer--PaddingInlineStart);
padding-inline-end: var(--#{$panel}__footer--PaddingInlineEnd);
border-block-start: var(--#{$panel}__footer--BorderWidth) solid var(--#{$panel}__footer--BorderColor);
box-shadow: var(--#{$panel}__footer--BoxShadow);
}
|
