@patternfly/patternfly 6.0.0-alpha.61 → 6.0.0-alpha.63

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (19) hide show
  1. package/CODE_OF_CONDUCT.md +1 -2
  2. package/components/AboutModalBox/about-modal-box.css +4 -2
  3. package/components/AboutModalBox/about-modal-box.scss +4 -2
  4. package/components/Card/card.css +97 -194
  5. package/components/Card/card.scss +114 -238
  6. package/components/Drawer/drawer.css +113 -113
  7. package/components/Drawer/drawer.scss +135 -136
  8. package/docs/components/Card/examples/Card.md +422 -111
  9. package/docs/components/Drawer/examples/Drawer.md +294 -256
  10. package/docs/demos/Drawer/examples/Drawer.md +30 -26
  11. package/docs/demos/JumpLinks/examples/JumpLinks.md +30 -26
  12. package/package.json +2 -2
  13. package/patternfly-no-globals.css +214 -318
  14. package/patternfly-theme-dark-unversioned.css +214 -318
  15. package/patternfly.css +214 -318
  16. package/patternfly.min.css +1 -1
  17. package/patternfly.min.css.map +1 -1
  18. package/components/Card/themes/dark/card.scss +0 -20
  19. package/components/Drawer/themes/dark/drawer.scss +0 -13
package/components/Drawer/drawer.scss CHANGED
@@ -3,24 +3,28 @@ $pf-v5-c-drawer--breakpoint-map: build-breakpoint-map("base", "lg", "xl", "2xl")
3
3
  $pf-v5-c-drawer--breakpoint-map--width: build-breakpoint-map("base", "lg", "xl", "2xl");
4
4
  $pf-v5-c-drawer__panel--list--width: (25, 33, 50, 66, 75, 100);
5
5
 
6
- .#{$drawer} {
6
+ :where(:root),
7
+ :where(.#{$drawer}) {
7
8
  // Section
8
- --#{$drawer}__section--BackgroundColor: var(--#{$pf-global}--BackgroundColor--100);
9
- --#{$drawer}__section--m-light-200--BackgroundColor: var(--#{$pf-global}--BackgroundColor--200);
9
+ --#{$drawer}__section--BackgroundColor: var(--pf-t--global--background--color--primary--default);
10
+ --#{$drawer}__section--m-secondary--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
10
11
 
11
12
  // Content
12
13
  --#{$drawer}__content--FlexBasis: 100%;
13
- --#{$drawer}__content--BackgroundColor: var(--#{$pf-global}--BackgroundColor--100);
14
- --#{$drawer}__content--m-light-200--BackgroundColor: var(--#{$pf-global}--BackgroundColor--200);
15
- --#{$drawer}__content--ZIndex: var(--#{$pf-global}--ZIndex--xs);
14
+ --#{$drawer}__content--BackgroundColor: var(--pf-t--global--background--color--primary--default);
15
+ --#{$drawer}__content--m-secondary--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
16
+ --#{$drawer}__content--ZIndex: var(--pf-t--global--Zindex--xs);
16
17
 
17
18
  // Panel
18
19
  --#{$drawer}__panel--MinWidth: 50%; // change to __panel--md--MinWidth at breaking change
19
20
  --#{$drawer}__panel--MaxHeight: auto;
20
- --#{$drawer}__panel--ZIndex: var(--#{$pf-global}--ZIndex--sm);
21
- --#{$drawer}__panel--BackgroundColor: var(--#{$pf-global}--BackgroundColor--100);
22
- --#{$drawer}__panel--m-light-200--BackgroundColor: var(--#{$pf-global}--BackgroundColor--200);
23
- --#{$drawer}__panel--TransitionDuration: var(--#{$pf-global}--TransitionDuration);
21
+ --#{$drawer}__panel--ZIndex: var(--pf-t--global--Zindex--sm);
22
+ --#{$drawer}__panel--BackgroundColor: var(--pf-t--global--background--color--floating--default);
23
+ --#{$drawer}__panel--m-secondary--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
24
+ --#{$drawer}__panel--RowGap: var(--pf-t--global--spacer--sm);
25
+ --#{$drawer}__panel--PaddingBlockStart: var(--pf-t--global--spacer--sm);
26
+ --#{$drawer}__panel--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
27
+ --#{$drawer}__panel--TransitionDuration: 250ms;
24
28
  --#{$drawer}__panel--TransitionProperty: margin, transform, box-shadow, flex-basis;
25
29
  --#{$drawer}__panel--FlexBasis: 100%;
26
30
  --#{$drawer}__panel--md--FlexBasis--min: #{pf-size-prem(24px)};
@@ -38,40 +42,45 @@ $pf-v5-c-drawer__panel--list--width: (25, 33, 50, 66, 75, 100);
38
42
  --#{$drawer}--m-panel-bottom__panel--m-resizable--md--FlexBasis--min: #{pf-size-prem(24px)};
39
43
  --#{$drawer}--m-panel-bottom__panel--m-resizable--MinHeight: #{pf-size-prem(24px)};
40
44
 
41
- // Child padding
42
- --#{$drawer}--child--PaddingTop: var(--#{$pf-global}--spacer--md);
43
- --#{$drawer}--child--PaddingRight: var(--#{$pf-global}--spacer--md);
44
- --#{$drawer}--child--PaddingBottom: var(--#{$pf-global}--spacer--md);
45
- --#{$drawer}--child--PaddingLeft: var(--#{$pf-global}--spacer--md);
46
-
47
- // Responsive child padding
48
- --#{$drawer}--child--md--PaddingTop: var(--#{$pf-global}--spacer--lg);
49
- --#{$drawer}--child--md--PaddingRight: var(--#{$pf-global}--spacer--lg);
50
- --#{$drawer}--child--md--PaddingBottom: var(--#{$pf-global}--spacer--lg);
51
- --#{$drawer}--child--md--PaddingLeft: var(--#{$pf-global}--spacer--lg);
52
-
53
- // Modified padding, child padding
54
- --#{$drawer}--child--m-padding--PaddingTop: var(--#{$pf-global}--spacer--md);
55
- --#{$drawer}--child--m-padding--PaddingRight: var(--#{$pf-global}--spacer--md);
56
- --#{$drawer}--child--m-padding--PaddingBottom: var(--#{$pf-global}--spacer--md);
57
- --#{$drawer}--child--m-padding--PaddingLeft: var(--#{$pf-global}--spacer--md);
58
-
59
- // Responsive, modified padding, child padding
60
- --#{$drawer}--child--m-padding--md--PaddingTop: var(--#{$pf-global}--spacer--lg);
61
- --#{$drawer}--child--m-padding--md--PaddingRight: var(--#{$pf-global}--spacer--lg);
62
- --#{$drawer}--child--m-padding--md--PaddingBottom: var(--#{$pf-global}--spacer--lg);
63
- --#{$drawer}--child--m-padding--md--PaddingLeft: var(--#{$pf-global}--spacer--lg);
64
-
65
- // Content
66
- --#{$drawer}__content--child--PaddingTop: 0;
67
- --#{$drawer}__content--child--PaddingRight: 0;
68
- --#{$drawer}__content--child--PaddingBottom: 0;
69
- --#{$drawer}__content--child--PaddingLeft: 0;
45
+ // Drawer panel head
46
+ --#{$drawer}__head--ColumnGap: var(--pf-t--global--spacer--sm);
47
+ --#{$drawer}__head--PaddingBlockStart: var(--pf-t--global--spacer--sm);
48
+ --#{$drawer}__head--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
49
+ --#{$drawer}__head--PaddingInlineStart: var(--pf-t--global--spacer--md);
50
+ --#{$drawer}__head--PaddingInlineEnd: var(--pf-t--global--spacer--md);
51
+
52
+ // Drawer panel description
53
+ --#{$drawer}__description--PaddingInlineStart: var(--pf-t--global--spacer--md);
54
+ --#{$drawer}__description--PaddingInlineEnd: var(--pf-t--global--spacer--md);
55
+
56
+ // Drawer body padding
57
+ --#{$drawer}__body--PaddingTop--base: var(--pf-t--global--spacer--md);
58
+ --#{$drawer}__body--PaddingRight--base: var(--pf-t--global--spacer--md);
59
+ --#{$drawer}__body--PaddingBottom--base: var(--pf-t--global--spacer--md);
60
+ --#{$drawer}__body--PaddingLeft--base: var(--pf-t--global--spacer--md);
61
+
62
+ // Drawer content body
63
+ --#{$drawer}__content__body--PaddingTop: 0;
64
+ --#{$drawer}__content__body--PaddingRight: 0;
65
+ --#{$drawer}__content__body--PaddingBottom: 0;
66
+ --#{$drawer}__content__body--PaddingLeft: 0;
67
+
68
+ // Drawer panel body
69
+ --#{$drawer}__panel__body--PaddingTop: var(--#{$drawer}__body--PaddingTop--base);
70
+ --#{$drawer}__panel__body--PaddingRight: var(--#{$drawer}__body--PaddingRight--base);
71
+ --#{$drawer}__panel__body--PaddingBottom: var(--#{$drawer}__body--PaddingBottom--base);
72
+ --#{$drawer}__panel__body--PaddingLeft: var(--#{$drawer}__body--PaddingLeft--base);
73
+
74
+ // Modified body padding
75
+ --#{$drawer}__body--m-padding--PaddingTop: var(--pf-t--global--spacer--md);
76
+ --#{$drawer}__body--m-padding--PaddingRight: var(--pf-t--global--spacer--md);
77
+ --#{$drawer}__body--m-padding--PaddingBottom: var(--pf-t--global--spacer--md);
78
+ --#{$drawer}__body--m-padding--PaddingLeft: var(--pf-t--global--spacer--md);
70
79
 
71
80
  // Splitter
72
81
  --#{$drawer}__splitter--Height: #{pf-size-prem(9px)};
73
82
  --#{$drawer}__splitter--Width: 100%;
74
- --#{$drawer}__splitter--BackgroundColor: var(--#{$pf-global}--BackgroundColor--100);
83
+ --#{$drawer}__splitter--BackgroundColor: var(--pf-t--global--background--color--primary--default);
75
84
  --#{$drawer}__splitter--Cursor: row-resize;
76
85
  --#{$drawer}__splitter--m-vertical--Height: 100%;
77
86
  --#{$drawer}__splitter--m-vertical--Width: #{pf-size-prem(9px)};
@@ -79,18 +88,16 @@ $pf-v5-c-drawer__panel--list--width: (25, 33, 50, 66, 75, 100);
79
88
  --#{$drawer}--m-inline__splitter--focus--OutlineOffset: #{pf-size-prem(-1px)};
80
89
 
81
90
  // Splitter border
82
- --#{$drawer}__splitter--after--BorderColor: var(--#{$pf-global}--BorderColor--100);
83
- --#{$drawer}__splitter--after--border-width--base: var(--#{$pf-global}--BorderWidth--sm);
91
+ --#{$drawer}__splitter--after--BorderColor: var(--pf-t--global--border--color--default);
92
+ --#{$drawer}__splitter--after--border-width--base: var(--pf-t--global--border--width--divider--default);
84
93
  --#{$drawer}__splitter--after--BorderTopWidth: 0;
85
94
  --#{$drawer}__splitter--after--BorderRightWidth: var(--#{$drawer}__splitter--after--border-width--base);
86
95
  --#{$drawer}__splitter--after--BorderBottomWidth: 0;
87
- --#{$drawer}__splitter--after--BorderLeftWidth: 0;
88
- --#{$drawer}--m-panel-left__splitter--after--BorderLeftWidth: var(--#{$drawer}__splitter--after--border-width--base);
96
+ --#{$drawer}__splitter--after--BorderLeftWidth: var(--#{$drawer}__splitter--after--border-width--base);
97
+ --#{$drawer}--m-panel-bottom__splitter--after--BorderTopWidth: var(--#{$drawer}__splitter--after--border-width--base);
89
98
  --#{$drawer}--m-panel-bottom__splitter--after--BorderBottomWidth: var(--#{$drawer}__splitter--after--border-width--base);
90
99
  --#{$drawer}--m-inline__splitter--m-vertical--Width: #{pf-size-prem(10px)};
91
100
  --#{$drawer}--m-inline__splitter-handle--Left: 50%;
92
- --#{$drawer}--m-inline__splitter--after--BorderRightWidth: var(--#{$drawer}__splitter--after--border-width--base);
93
- --#{$drawer}--m-inline__splitter--after--BorderLeftWidth: var(--#{$drawer}__splitter--after--border-width--base);
94
101
  --#{$drawer}--m-inline--m-panel-bottom__splitter--Height: #{pf-size-prem(10px)};
95
102
  --#{$drawer}--m-inline--m-panel-bottom__splitter-handle--Top: 50%;
96
103
  --#{$drawer}--m-inline--m-panel-bottom__splitter--after--BorderTopWidth: var(--#{$drawer}__splitter--after--border-width--base);
@@ -102,39 +109,24 @@ $pf-v5-c-drawer__panel--list--width: (25, 33, 50, 66, 75, 100);
102
109
  --#{$drawer}--m-panel-bottom__splitter-handle--Top: calc(50% - var(--#{$drawer}__splitter--after--border-width--base));
103
110
 
104
111
  // Splitter handle line
105
- --#{$drawer}__splitter-handle--after--BorderColor: var(--#{$pf-global}--Color--200);
106
- --#{$drawer}__splitter-handle--after--BorderTopWidth: var(--#{$pf-global}--BorderWidth--sm);
112
+ --#{$drawer}__splitter-handle--after--BorderColor: var(--pf-t--global--border--color--default);
113
+ --#{$drawer}__splitter-handle--after--BorderTopWidth: var(--pf-t--global--border--width--divider--default);
107
114
  --#{$drawer}__splitter-handle--after--BorderRightWidth: 0;
108
- --#{$drawer}__splitter-handle--after--BorderBottomWidth: var(--#{$pf-global}--BorderWidth--sm);
115
+ --#{$drawer}__splitter-handle--after--BorderBottomWidth: var(--pf-t--global--border--width--divider--default);
109
116
  --#{$drawer}__splitter-handle--after--BorderLeftWidth: 0;
110
- --#{$drawer}__splitter--hover__splitter-handle--after--BorderColor: var(--#{$pf-global}--Color--100);
111
- --#{$drawer}__splitter--focus__splitter-handle--after--BorderColor: var(--#{$pf-global}--Color--100);
117
+ --#{$drawer}__splitter--hover__splitter-handle--after--BorderColor: var(--pf-t--global--border--color--hover);
112
118
  --#{$drawer}__splitter--m-vertical__splitter-handle--after--BorderTopWidth: 0;
113
- --#{$drawer}__splitter--m-vertical__splitter-handle--after--BorderRightWidth: var(--#{$pf-global}--BorderWidth--sm);
119
+ --#{$drawer}__splitter--m-vertical__splitter-handle--after--BorderRightWidth: var(--pf-t--global--border--width--divider--default);
114
120
  --#{$drawer}__splitter--m-vertical__splitter-handle--after--BorderBottomWidth: 0;
115
- --#{$drawer}__splitter--m-vertical__splitter-handle--after--BorderLeftWidth: var(--#{$pf-global}--BorderWidth--sm);
121
+ --#{$drawer}__splitter--m-vertical__splitter-handle--after--BorderLeftWidth: var(--pf-t--global--border--width--divider--default);
116
122
  --#{$drawer}__splitter-handle--after--Width: #{pf-size-prem(12px)};
117
123
  --#{$drawer}__splitter-handle--after--Height: #{pf-size-prem(4px)};
118
124
  --#{$drawer}__splitter--m-vertical__splitter-handle--after--Width: #{pf-size-prem(4px)};
119
125
  --#{$drawer}__splitter--m-vertical__splitter-handle--after--Height: #{pf-size-prem(12px)};
120
126
 
121
- @media screen and (min-width: $pf-v5-global--breakpoint--md) {
122
- // Responsive child padding
123
- --#{$drawer}--child--PaddingTop: var(--#{$drawer}--child--md--PaddingTop);
124
- --#{$drawer}--child--PaddingRight: var(--#{$drawer}--child--md--PaddingRight);
125
- --#{$drawer}--child--PaddingBottom: var(--#{$drawer}--child--md--PaddingBottom);
126
- --#{$drawer}--child--PaddingLeft: var(--#{$drawer}--child--md--PaddingLeft);
127
-
128
- // Responsive, modified padding, child padding
129
- --#{$drawer}--child--m-padding--PaddingTop: var(--#{$drawer}--child--m-padding--md--PaddingTop);
130
- --#{$drawer}--child--m-padding--PaddingRight: var(--#{$drawer}--child--m-padding--md--PaddingRight);
131
- --#{$drawer}--child--m-padding--PaddingBottom: var(--#{$drawer}--child--m-padding--md--PaddingBottom);
132
- --#{$drawer}--child--m-padding--PaddingLeft: var(--#{$drawer}--child--m-padding--md--PaddingLeft);
133
- }
134
-
135
127
  @media screen and (min-width: $pf-v5-global--breakpoint--xl) {
136
128
  --#{$drawer}__panel--MinWidth: var(--#{$drawer}__panel--xl--MinWidth);
137
-
129
+
138
130
  &.pf-m-panel-bottom {
139
131
  --#{$drawer}__panel--MinWidth: auto;
140
132
  --#{$drawer}__panel--MinHeight: var(--#{$drawer}--m-panel-bottom__panel--xl--MinHeight);
@@ -142,32 +134,34 @@ $pf-v5-c-drawer__panel--list--width: (25, 33, 50, 66, 75, 100);
142
134
  }
143
135
 
144
136
  // Actions
145
- --#{$drawer}__actions--MarginTop: calc(var(--#{$pf-global}--spacer--form-element) * -1);
146
- --#{$drawer}__actions--MarginRight: calc(var(--#{$pf-global}--spacer--form-element) * -1);
137
+ --#{$drawer}__actions--MarginTop: calc(var(--pf-t--global--spacer--xs) * -1.5); // TODO: add form element var
138
+ --#{$drawer}__actions--MarginRight: calc(var(--pf-t--global--spacer--xs) * -1.5); // TODO: add form element var
147
139
 
148
140
  // Box shadow
149
141
  --#{$drawer}__panel--BoxShadow: none;
150
- --#{$drawer}--m-expanded--m-panel-bottom__panel--BoxShadow: var(--#{$pf-global}--BoxShadow--lg-top);
142
+ --#{$drawer}--m-expanded--m-panel-bottom__panel--BoxShadow: var(--pf-t--global--box-shadow--lg--top);
143
+
144
+ // Divider
145
+ --#{$drawer}__panel--after--Width: var(--pf-t--global--border--width--divider--default);
146
+ --#{$drawer}--m-panel-bottom__panel--after--Height: var(--pf-t--global--border--width--divider--default);
147
+ --#{$drawer}__panel--after--BackgroundColor: transparent;
148
+ --#{$drawer}--m-inline--m-expanded__panel--after--BackgroundColor: var(--pf-t--global--border--color--default);
149
+ --#{$drawer}--m-inline__panel--PaddingLeft: var(--#{$drawer}__panel--after--Width);
150
+ --#{$drawer}--m-panel-left--m-inline__panel--PaddingRight: var(--#{$drawer}__panel--after--Width);
151
+ --#{$drawer}--m-panel-bottom--m-inline__panel--PaddingTop: var(--#{$drawer}__panel--after--Width);
152
+ }
151
153
 
154
+ .#{$drawer} {
152
155
  @include pf-v5-bidirectional-style(
153
156
  $prop: --#{$drawer}--m-expanded__panel--BoxShadow,
154
- $ltr-val: var(--#{$pf-global}--BoxShadow--lg-left),
155
- $rtl-val: var(--#{$pf-global}--BoxShadow--lg-right)
157
+ $ltr-val: var(--pf-t--global--box-shadow--lg--left),
158
+ $rtl-val: var(--pf-t--global--box-shadow--lg--right)
156
159
  );
157
160
  @include pf-v5-bidirectional-style(
158
161
  $prop: --#{$drawer}--m-expanded--m-panel-left__panel--BoxShadow,
159
162
  $ltr-val: var(--#{$pf-global}--BoxShadow--lg-right),
160
163
  $rtl-val: var(--#{$pf-global}--BoxShadow--lg-left)
161
- );
162
-
163
- // Divider
164
- --#{$drawer}__panel--after--Width: var(--#{$pf-global}--BorderWidth--sm);
165
- --#{$drawer}--m-panel-bottom__panel--after--Height: var(--#{$pf-global}--BorderWidth--sm);
166
- --#{$drawer}__panel--after--BackgroundColor: transparent;
167
- --#{$drawer}--m-inline--m-expanded__panel--after--BackgroundColor: var(--#{$pf-global}--BorderColor--100);
168
- --#{$drawer}--m-inline__panel--PaddingLeft: var(--#{$drawer}__panel--after--Width);
169
- --#{$drawer}--m-panel-left--m-inline__panel--PaddingRight: var(--#{$drawer}__panel--after--Width);
170
- --#{$drawer}--m-panel-bottom--m-inline__panel--PaddingTop: var(--#{$drawer}__panel--after--Width);
164
+ );
171
165
 
172
166
  display: flex;
173
167
  flex-direction: column;
@@ -239,12 +233,12 @@ $pf-v5-c-drawer__panel--list--width: (25, 33, 50, 66, 75, 100);
239
233
  flex-grow: 0;
240
234
  background-color: var(--#{$drawer}__section--BackgroundColor);
241
235
 
242
- &.pf-m-no-background {
243
- --#{$drawer}__section--BackgroundColor: transparent;
236
+ &.pf-m-secondary {
237
+ --#{$drawer}__section--BackgroundColor: var(--#{$drawer}__section--m-secondary--BackgroundColor);
244
238
  }
245
239
 
246
- &.pf-m-light-200 {
247
- --#{$drawer}__section--BackgroundColor: var(--#{$drawer}__section--m-light-200--BackgroundColor);
240
+ &.pf-m-no-background {
241
+ --#{$drawer}__section--BackgroundColor: transparent;
248
242
  }
249
243
  }
250
244
 
@@ -270,22 +264,21 @@ $pf-v5-c-drawer__panel--list--width: (25, 33, 50, 66, 75, 100);
270
264
  z-index: var(--#{$drawer}__content--ZIndex);
271
265
  flex-basis: var(--#{$drawer}__content--FlexBasis);
272
266
  order: 0;
273
-
274
- // background-color: var(--#{$drawer}__content--BackgroundColor);
267
+ background-color: var(--#{$drawer}__content--BackgroundColor);
268
+
269
+ &.pf-m-secondary {
270
+ --#{$drawer}__content--BackgroundColor: var(--#{$drawer}__content--m-secondary--BackgroundColor);
271
+ }
275
272
 
276
273
  &.pf-m-no-background {
277
274
  --#{$drawer}__content--BackgroundColor: transparent;
278
275
  }
279
276
 
280
- &.pf-m-light-200 {
281
- --#{$drawer}__content--BackgroundColor: var(--#{$drawer}__content--m-light-200--BackgroundColor);
282
- }
283
-
284
277
  > .#{$drawer}__body {
285
- padding-block-start: var(--#{$drawer}__content--child--PaddingTop);
286
- padding-block-end: var(--#{$drawer}__content--child--PaddingBottom);
287
- padding-inline-start: var(--#{$drawer}__content--child--PaddingLeft);
288
- padding-inline-end: var(--#{$drawer}__content--child--PaddingRight);
278
+ padding-block-start: var(--#{$drawer}__content__body--PaddingTop);
279
+ padding-block-end: var(--#{$drawer}__content__body--PaddingBottom);
280
+ padding-inline-start: var(--#{$drawer}__content__body--PaddingLeft);
281
+ padding-inline-end: var(--#{$drawer}__content__body--PaddingRight);
289
282
  }
290
283
  }
291
284
 
@@ -294,6 +287,7 @@ $pf-v5-c-drawer__panel--list--width: (25, 33, 50, 66, 75, 100);
294
287
  position: relative;
295
288
  z-index: var(--#{$drawer}__panel--ZIndex);
296
289
  flex-basis: var(--#{$drawer}__panel--FlexBasis);
290
+ row-gap: var(--#{$drawer}__panel--RowGap);
297
291
  order: 1;
298
292
  max-height: var(--#{$drawer}__panel--MaxHeight);
299
293
  overflow: auto;
@@ -305,20 +299,25 @@ $pf-v5-c-drawer__panel--list--width: (25, 33, 50, 66, 75, 100);
305
299
 
306
300
  &::after {
307
301
  position: absolute;
308
- inset-block-start: 0;
309
- inset-inline-start: 0;
302
+ inset-block-start: 0;
303
+ inset-inline-start: 0;
310
304
  width: var(--#{$drawer}__panel--after--Width);
311
305
  height: 100%;
312
306
  content: "";
313
307
  background-color: var(--#{$drawer}__panel--after--BackgroundColor);
314
308
  }
315
309
 
316
- &.pf-m-no-background {
317
- --#{$drawer}__panel--BackgroundColor: transparent;
310
+ &:not(.pf-m-resizable) {
311
+ padding-block-start: var(--#{$drawer}__panel--PaddingBlockStart);
312
+ padding-block-end: var(--#{$drawer}__panel--PaddingBlockEnd);
318
313
  }
319
314
 
320
- &.pf-m-light-200 {
321
- --#{$drawer}__panel--BackgroundColor: var(--#{$drawer}__panel--m-light-200--BackgroundColor);
315
+ &.pf-m-secondary {
316
+ --#{$drawer}__panel--BackgroundColor: var(--#{$drawer}__panel--m-secondary--BackgroundColor);
317
+ }
318
+
319
+ &.pf-m-no-background {
320
+ --#{$drawer}__panel--BackgroundColor: transparent;
322
321
  }
323
322
 
324
323
  @media screen and (min-width: $pf-v5-global--breakpoint--md) {
@@ -338,8 +337,20 @@ $pf-v5-c-drawer__panel--list--width: (25, 33, 50, 66, 75, 100);
338
337
  }
339
338
  }
340
339
 
340
+ .#{$drawer}__panel,
341
+ .#{$drawer}__panel-main {
342
+ > .#{$drawer}__body {
343
+ padding-block-start: var(--#{$drawer}__panel__body--PaddingTop);
344
+ padding-block-end: var(--#{$drawer}__panel__body--PaddingBottom);
345
+ padding-inline-start: var(--#{$drawer}__panel__body--PaddingLeft);
346
+ padding-inline-end: var(--#{$drawer}__panel__body--PaddingRight);
347
+ }
348
+ }
349
+
341
350
  .#{$drawer}__panel-main {
342
351
  flex-grow: 1;
352
+ padding-block-start: var(--#{$drawer}__panel--PaddingBlockStart);
353
+ padding-block-end: var(--#{$drawer}__panel--PaddingBlockEnd);
343
354
  }
344
355
 
345
356
  // Remove tab focus
@@ -350,6 +361,11 @@ $pf-v5-c-drawer__panel--list--width: (25, 33, 50, 66, 75, 100);
350
361
  display: grid;
351
362
  grid-template-columns: auto;
352
363
  grid-auto-columns: max-content;
364
+ column-gap: var(--#{$drawer}__head--ColumnGap);
365
+ padding-block-start: var(--#{$drawer}__head--PaddingBlockStart);
366
+ padding-block-end: var(--#{$drawer}__head--PaddingBlockEnd);
367
+ padding-inline-start: var(--#{$drawer}__head--PaddingInlineStart);
368
+ padding-inline-end: var(--#{$drawer}__head--PaddingInlineEnd);
353
369
 
354
370
  > * {
355
371
  grid-column: 1;
@@ -366,30 +382,25 @@ $pf-v5-c-drawer__panel--list--width: (25, 33, 50, 66, 75, 100);
366
382
  margin-inline-end: var(--#{$drawer}__actions--MarginRight);
367
383
  }
368
384
 
385
+ // Drawer panel description
386
+ .#{$drawer}__description {
387
+ padding-inline-start: var(--#{$drawer}__description--PaddingInlineStart);
388
+ padding-inline-end: var(--#{$drawer}__description--PaddingInlineEnd);
389
+ }
390
+
369
391
  // Modified content children
370
392
  .#{$drawer}__body {
371
- padding-block-start: var(--#{$drawer}--child--PaddingTop);
372
- padding-block-end: var(--#{$drawer}--child--PaddingBottom);
373
- padding-inline-start: var(--#{$drawer}--child--PaddingLeft);
374
- padding-inline-end: var(--#{$drawer}--child--PaddingRight);
375
-
376
393
  // No padding
377
394
  &.pf-m-no-padding {
378
395
  padding: 0;
379
-
380
- > .#{$drawer}__actions,
381
- > .#{$drawer}__head > .#{$drawer}__actions {
382
- margin-block-start: 0;
383
- margin-inline-end: 0;
384
- }
385
396
  }
386
397
 
387
398
  // Padding
388
399
  &.pf-m-padding {
389
- padding-block-start: var(--#{$drawer}--child--m-padding--PaddingTop);
390
- padding-block-end: var(--#{$drawer}--child--m-padding--PaddingBottom);
391
- padding-inline-start: var(--#{$drawer}--child--m-padding--PaddingLeft);
392
- padding-inline-end: var(--#{$drawer}--child--m-padding--PaddingRight);
400
+ padding-block-start: var(--#{$drawer}__body--m-padding--PaddingTop);
401
+ padding-block-end: var(--#{$drawer}__body--m-padding--PaddingBottom);
402
+ padding-inline-start: var(--#{$drawer}__body--m-padding--PaddingLeft);
403
+ padding-inline-end: var(--#{$drawer}__body--m-padding--PaddingRight);
393
404
  }
394
405
 
395
406
  &:not(.pf-m-no-padding) + * {
@@ -426,12 +437,9 @@ $pf-v5-c-drawer__panel--list--width: (25, 33, 50, 66, 75, 100);
426
437
  --#{$drawer}__splitter-handle--after--BorderLeftWidth: var(--#{$drawer}__splitter--m-vertical__splitter-handle--after--BorderLeftWidth);
427
438
  }
428
439
 
429
- &:hover {
430
- --#{$drawer}__splitter-handle--after--BorderColor: var(--#{$drawer}__splitter--hover__splitter-handle--after--BorderColor);
431
- }
432
-
440
+ &:hover,
433
441
  &:focus {
434
- --#{$drawer}__splitter-handle--after--BorderColor: var(--#{$drawer}__splitter--focus__splitter-handle--after--BorderColor);
442
+ --#{$drawer}__splitter-handle--after--BorderColor: var(--#{$drawer}__splitter--hover__splitter-handle--after--BorderColor);
435
443
  }
436
444
 
437
445
  &::after {
@@ -534,8 +542,6 @@ $pf-v5-c-drawer__panel--list--width: (25, 33, 50, 66, 75, 100);
534
542
  > .#{$drawer}__main > .#{$drawer}__panel.pf-m-resizable {
535
543
  > .#{$drawer}__splitter {
536
544
  --#{$drawer}__splitter-handle--Left: var(--#{$drawer}--m-panel-left__splitter-handle--Left);
537
- --#{$drawer}__splitter--after--BorderRightWidth: 0;
538
- --#{$drawer}__splitter--after--BorderLeftWidth: var(--#{$drawer}--m-panel-left__splitter--after--BorderLeftWidth);
539
545
 
540
546
  order: 1;
541
547
  }
@@ -559,8 +565,8 @@ $pf-v5-c-drawer__panel--list--width: (25, 33, 50, 66, 75, 100);
559
565
  }
560
566
 
561
567
  > .#{$drawer}__main > .#{$drawer}__panel::after {
562
- inset-block-start: 0;
563
- inset-inline-start: auto;
568
+ inset-block-start: 0;
569
+ inset-inline-start: auto;
564
570
  width: 100%;
565
571
  height: var(--#{$drawer}--m-panel-bottom__panel--after--Height);
566
572
  }
@@ -574,8 +580,10 @@ $pf-v5-c-drawer__panel--list--width: (25, 33, 50, 66, 75, 100);
574
580
 
575
581
  > .#{$drawer}__splitter {
576
582
  --#{$drawer}__splitter-handle--Top: var(--#{$drawer}--m-panel-bottom__splitter-handle--Top);
583
+ --#{$drawer}__splitter--after--BorderTopWidth: var(--#{$drawer}--m-panel-bottom__splitter--after--BorderTopWidth);
577
584
  --#{$drawer}__splitter--after--BorderRightWidth: 0;
578
585
  --#{$drawer}__splitter--after--BorderBottomWidth: var(--#{$drawer}--m-panel-bottom__splitter--after--BorderBottomWidth);
586
+ --#{$drawer}__splitter--after--BorderLeftWidth: 0;
579
587
  }
580
588
  }
581
589
  }
@@ -585,8 +593,6 @@ $pf-v5-c-drawer__panel--list--width: (25, 33, 50, 66, 75, 100);
585
593
  > .#{$drawer}__splitter {
586
594
  --#{$drawer}__splitter--m-vertical--Width: var(--#{$drawer}--m-inline__splitter--m-vertical--Width);
587
595
  --#{$drawer}__splitter-handle--Left: var(--#{$drawer}--m-inline__splitter-handle--Left);
588
- --#{$drawer}__splitter--after--BorderRightWidth: var(--#{$drawer}--m-inline__splitter--after--BorderRightWidth);
589
- --#{$drawer}__splitter--after--BorderLeftWidth: var(--#{$drawer}--m-inline__splitter--after--BorderLeftWidth);
590
596
 
591
597
  outline-offset: var(--#{$drawer}--m-inline__splitter--focus--OutlineOffset);
592
598
  }
@@ -753,10 +759,3 @@ $pf-v5-c-drawer__panel--list--width: (25, 33, 50, 66, 75, 100);
753
759
  }
754
760
  }
755
761
  }
756
-
757
- // stylelint-disable no-invalid-position-at-import-rule
758
- @import "themes/dark/drawer";
759
-
760
- @include pf-v5-theme-dark {
761
- @include pf-v5-theme-dark-drawer;
762
- }