@patternfly/patternfly 6.0.0-alpha.62 → 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.
- package/components/Drawer/drawer.css +113 -113
- package/components/Drawer/drawer.scss +135 -136
- package/docs/components/Drawer/examples/Drawer.md +294 -256
- package/docs/demos/Drawer/examples/Drawer.md +30 -26
- package/docs/demos/JumpLinks/examples/JumpLinks.md +30 -26
- package/package.json +1 -1
- package/patternfly-no-globals.css +113 -118
- package/patternfly-theme-dark-unversioned.css +113 -118
- package/patternfly.css +113 -118
- package/patternfly.min.css +1 -1
- package/patternfly.min.css.map +1 -1
- package/components/Drawer/themes/dark/drawer.scss +0 -13
|
@@ -13220,19 +13220,23 @@ label.pf-v5-c-check, .pf-v5-c-check__label,
|
|
|
13220
13220
|
}
|
|
13221
13221
|
}
|
|
13222
13222
|
|
|
13223
|
-
|
|
13224
|
-
|
|
13225
|
-
--pf-v5-c-drawer__section--
|
|
13223
|
+
:where(:root),
|
|
13224
|
+
:where(.pf-v5-c-drawer) {
|
|
13225
|
+
--pf-v5-c-drawer__section--BackgroundColor: var(--pf-t--global--background--color--primary--default);
|
|
13226
|
+
--pf-v5-c-drawer__section--m-secondary--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
|
|
13226
13227
|
--pf-v5-c-drawer__content--FlexBasis: 100%;
|
|
13227
|
-
--pf-v5-c-drawer__content--BackgroundColor: var(--pf-
|
|
13228
|
-
--pf-v5-c-drawer__content--m-
|
|
13229
|
-
--pf-v5-c-drawer__content--ZIndex: var(--pf-
|
|
13228
|
+
--pf-v5-c-drawer__content--BackgroundColor: var(--pf-t--global--background--color--primary--default);
|
|
13229
|
+
--pf-v5-c-drawer__content--m-secondary--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
|
|
13230
|
+
--pf-v5-c-drawer__content--ZIndex: var(--pf-t--global--Zindex--xs);
|
|
13230
13231
|
--pf-v5-c-drawer__panel--MinWidth: 50%;
|
|
13231
13232
|
--pf-v5-c-drawer__panel--MaxHeight: auto;
|
|
13232
|
-
--pf-v5-c-drawer__panel--ZIndex: var(--pf-
|
|
13233
|
-
--pf-v5-c-drawer__panel--BackgroundColor: var(--pf-
|
|
13234
|
-
--pf-v5-c-drawer__panel--m-
|
|
13235
|
-
--pf-v5-c-drawer__panel--
|
|
13233
|
+
--pf-v5-c-drawer__panel--ZIndex: var(--pf-t--global--Zindex--sm);
|
|
13234
|
+
--pf-v5-c-drawer__panel--BackgroundColor: var(--pf-t--global--background--color--floating--default);
|
|
13235
|
+
--pf-v5-c-drawer__panel--m-secondary--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
|
|
13236
|
+
--pf-v5-c-drawer__panel--RowGap: var(--pf-t--global--spacer--sm);
|
|
13237
|
+
--pf-v5-c-drawer__panel--PaddingBlockStart: var(--pf-t--global--spacer--sm);
|
|
13238
|
+
--pf-v5-c-drawer__panel--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
|
|
13239
|
+
--pf-v5-c-drawer__panel--TransitionDuration: 250ms;
|
|
13236
13240
|
--pf-v5-c-drawer__panel--TransitionProperty: margin, transform, box-shadow, flex-basis;
|
|
13237
13241
|
--pf-v5-c-drawer__panel--FlexBasis: 100%;
|
|
13238
13242
|
--pf-v5-c-drawer__panel--md--FlexBasis--min: 1.5rem;
|
|
@@ -13249,46 +13253,47 @@ label.pf-v5-c-check, .pf-v5-c-check__label,
|
|
|
13249
13253
|
--pf-v5-c-drawer--m-panel-bottom__panel--m-resizable--FlexDirection: column;
|
|
13250
13254
|
--pf-v5-c-drawer--m-panel-bottom__panel--m-resizable--md--FlexBasis--min: 1.5rem;
|
|
13251
13255
|
--pf-v5-c-drawer--m-panel-bottom__panel--m-resizable--MinHeight: 1.5rem;
|
|
13252
|
-
--pf-v5-c-
|
|
13253
|
-
--pf-v5-c-
|
|
13254
|
-
--pf-v5-c-
|
|
13255
|
-
--pf-v5-c-
|
|
13256
|
-
--pf-v5-c-
|
|
13257
|
-
--pf-v5-c-
|
|
13258
|
-
--pf-v5-c-
|
|
13259
|
-
--pf-v5-c-
|
|
13260
|
-
--pf-v5-c-
|
|
13261
|
-
--pf-v5-c-
|
|
13262
|
-
--pf-v5-c-
|
|
13263
|
-
--pf-v5-c-
|
|
13264
|
-
--pf-v5-c-
|
|
13265
|
-
--pf-v5-c-
|
|
13266
|
-
--pf-v5-c-
|
|
13267
|
-
--pf-v5-c-
|
|
13268
|
-
--pf-v5-c-
|
|
13269
|
-
--pf-v5-c-
|
|
13270
|
-
--pf-v5-c-
|
|
13271
|
-
--pf-v5-c-
|
|
13256
|
+
--pf-v5-c-drawer__head--ColumnGap: var(--pf-t--global--spacer--sm);
|
|
13257
|
+
--pf-v5-c-drawer__head--PaddingBlockStart: var(--pf-t--global--spacer--sm);
|
|
13258
|
+
--pf-v5-c-drawer__head--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
|
|
13259
|
+
--pf-v5-c-drawer__head--PaddingInlineStart: var(--pf-t--global--spacer--md);
|
|
13260
|
+
--pf-v5-c-drawer__head--PaddingInlineEnd: var(--pf-t--global--spacer--md);
|
|
13261
|
+
--pf-v5-c-drawer__description--PaddingInlineStart: var(--pf-t--global--spacer--md);
|
|
13262
|
+
--pf-v5-c-drawer__description--PaddingInlineEnd: var(--pf-t--global--spacer--md);
|
|
13263
|
+
--pf-v5-c-drawer__body--PaddingTop--base: var(--pf-t--global--spacer--md);
|
|
13264
|
+
--pf-v5-c-drawer__body--PaddingRight--base: var(--pf-t--global--spacer--md);
|
|
13265
|
+
--pf-v5-c-drawer__body--PaddingBottom--base: var(--pf-t--global--spacer--md);
|
|
13266
|
+
--pf-v5-c-drawer__body--PaddingLeft--base: var(--pf-t--global--spacer--md);
|
|
13267
|
+
--pf-v5-c-drawer__content__body--PaddingTop: 0;
|
|
13268
|
+
--pf-v5-c-drawer__content__body--PaddingRight: 0;
|
|
13269
|
+
--pf-v5-c-drawer__content__body--PaddingBottom: 0;
|
|
13270
|
+
--pf-v5-c-drawer__content__body--PaddingLeft: 0;
|
|
13271
|
+
--pf-v5-c-drawer__panel__body--PaddingTop: var(--pf-v5-c-drawer__body--PaddingTop--base);
|
|
13272
|
+
--pf-v5-c-drawer__panel__body--PaddingRight: var(--pf-v5-c-drawer__body--PaddingRight--base);
|
|
13273
|
+
--pf-v5-c-drawer__panel__body--PaddingBottom: var(--pf-v5-c-drawer__body--PaddingBottom--base);
|
|
13274
|
+
--pf-v5-c-drawer__panel__body--PaddingLeft: var(--pf-v5-c-drawer__body--PaddingLeft--base);
|
|
13275
|
+
--pf-v5-c-drawer__body--m-padding--PaddingTop: var(--pf-t--global--spacer--md);
|
|
13276
|
+
--pf-v5-c-drawer__body--m-padding--PaddingRight: var(--pf-t--global--spacer--md);
|
|
13277
|
+
--pf-v5-c-drawer__body--m-padding--PaddingBottom: var(--pf-t--global--spacer--md);
|
|
13278
|
+
--pf-v5-c-drawer__body--m-padding--PaddingLeft: var(--pf-t--global--spacer--md);
|
|
13272
13279
|
--pf-v5-c-drawer__splitter--Height: 0.5625rem;
|
|
13273
13280
|
--pf-v5-c-drawer__splitter--Width: 100%;
|
|
13274
|
-
--pf-v5-c-drawer__splitter--BackgroundColor: var(--pf-
|
|
13281
|
+
--pf-v5-c-drawer__splitter--BackgroundColor: var(--pf-t--global--background--color--primary--default);
|
|
13275
13282
|
--pf-v5-c-drawer__splitter--Cursor: row-resize;
|
|
13276
13283
|
--pf-v5-c-drawer__splitter--m-vertical--Height: 100%;
|
|
13277
13284
|
--pf-v5-c-drawer__splitter--m-vertical--Width: 0.5625rem;
|
|
13278
13285
|
--pf-v5-c-drawer__splitter--m-vertical--Cursor: col-resize;
|
|
13279
13286
|
--pf-v5-c-drawer--m-inline__splitter--focus--OutlineOffset: -0.0625rem;
|
|
13280
|
-
--pf-v5-c-drawer__splitter--after--BorderColor: var(--pf-
|
|
13281
|
-
--pf-v5-c-drawer__splitter--after--border-width--base: var(--pf-
|
|
13287
|
+
--pf-v5-c-drawer__splitter--after--BorderColor: var(--pf-t--global--border--color--default);
|
|
13288
|
+
--pf-v5-c-drawer__splitter--after--border-width--base: var(--pf-t--global--border--width--divider--default);
|
|
13282
13289
|
--pf-v5-c-drawer__splitter--after--BorderTopWidth: 0;
|
|
13283
13290
|
--pf-v5-c-drawer__splitter--after--BorderRightWidth: var(--pf-v5-c-drawer__splitter--after--border-width--base);
|
|
13284
13291
|
--pf-v5-c-drawer__splitter--after--BorderBottomWidth: 0;
|
|
13285
|
-
--pf-v5-c-drawer__splitter--after--BorderLeftWidth:
|
|
13286
|
-
--pf-v5-c-drawer--m-panel-
|
|
13292
|
+
--pf-v5-c-drawer__splitter--after--BorderLeftWidth: var(--pf-v5-c-drawer__splitter--after--border-width--base);
|
|
13293
|
+
--pf-v5-c-drawer--m-panel-bottom__splitter--after--BorderTopWidth: var(--pf-v5-c-drawer__splitter--after--border-width--base);
|
|
13287
13294
|
--pf-v5-c-drawer--m-panel-bottom__splitter--after--BorderBottomWidth: var(--pf-v5-c-drawer__splitter--after--border-width--base);
|
|
13288
13295
|
--pf-v5-c-drawer--m-inline__splitter--m-vertical--Width: 0.625rem;
|
|
13289
13296
|
--pf-v5-c-drawer--m-inline__splitter-handle--Left: 50%;
|
|
13290
|
-
--pf-v5-c-drawer--m-inline__splitter--after--BorderRightWidth: var(--pf-v5-c-drawer__splitter--after--border-width--base);
|
|
13291
|
-
--pf-v5-c-drawer--m-inline__splitter--after--BorderLeftWidth: var(--pf-v5-c-drawer__splitter--after--border-width--base);
|
|
13292
13297
|
--pf-v5-c-drawer--m-inline--m-panel-bottom__splitter--Height: 0.625rem;
|
|
13293
13298
|
--pf-v5-c-drawer--m-inline--m-panel-bottom__splitter-handle--Top: 50%;
|
|
13294
13299
|
--pf-v5-c-drawer--m-inline--m-panel-bottom__splitter--after--BorderTopWidth: var(--pf-v5-c-drawer__splitter--after--border-width--base);
|
|
@@ -13296,62 +13301,54 @@ label.pf-v5-c-check, .pf-v5-c-check__label,
|
|
|
13296
13301
|
--pf-v5-c-drawer__splitter-handle--Left: calc(50% - var(--pf-v5-c-drawer__splitter--after--border-width--base));
|
|
13297
13302
|
--pf-v5-c-drawer--m-panel-left__splitter-handle--Left: 50%;
|
|
13298
13303
|
--pf-v5-c-drawer--m-panel-bottom__splitter-handle--Top: calc(50% - var(--pf-v5-c-drawer__splitter--after--border-width--base));
|
|
13299
|
-
--pf-v5-c-drawer__splitter-handle--after--BorderColor: var(--pf-
|
|
13300
|
-
--pf-v5-c-drawer__splitter-handle--after--BorderTopWidth: var(--pf-
|
|
13304
|
+
--pf-v5-c-drawer__splitter-handle--after--BorderColor: var(--pf-t--global--border--color--default);
|
|
13305
|
+
--pf-v5-c-drawer__splitter-handle--after--BorderTopWidth: var(--pf-t--global--border--width--divider--default);
|
|
13301
13306
|
--pf-v5-c-drawer__splitter-handle--after--BorderRightWidth: 0;
|
|
13302
|
-
--pf-v5-c-drawer__splitter-handle--after--BorderBottomWidth: var(--pf-
|
|
13307
|
+
--pf-v5-c-drawer__splitter-handle--after--BorderBottomWidth: var(--pf-t--global--border--width--divider--default);
|
|
13303
13308
|
--pf-v5-c-drawer__splitter-handle--after--BorderLeftWidth: 0;
|
|
13304
|
-
--pf-v5-c-drawer__splitter--hover__splitter-handle--after--BorderColor: var(--pf-
|
|
13305
|
-
--pf-v5-c-drawer__splitter--focus__splitter-handle--after--BorderColor: var(--pf-v5-global--Color--100);
|
|
13309
|
+
--pf-v5-c-drawer__splitter--hover__splitter-handle--after--BorderColor: var(--pf-t--global--border--color--hover);
|
|
13306
13310
|
--pf-v5-c-drawer__splitter--m-vertical__splitter-handle--after--BorderTopWidth: 0;
|
|
13307
|
-
--pf-v5-c-drawer__splitter--m-vertical__splitter-handle--after--BorderRightWidth: var(--pf-
|
|
13311
|
+
--pf-v5-c-drawer__splitter--m-vertical__splitter-handle--after--BorderRightWidth: var(--pf-t--global--border--width--divider--default);
|
|
13308
13312
|
--pf-v5-c-drawer__splitter--m-vertical__splitter-handle--after--BorderBottomWidth: 0;
|
|
13309
|
-
--pf-v5-c-drawer__splitter--m-vertical__splitter-handle--after--BorderLeftWidth: var(--pf-
|
|
13313
|
+
--pf-v5-c-drawer__splitter--m-vertical__splitter-handle--after--BorderLeftWidth: var(--pf-t--global--border--width--divider--default);
|
|
13310
13314
|
--pf-v5-c-drawer__splitter-handle--after--Width: 0.75rem;
|
|
13311
13315
|
--pf-v5-c-drawer__splitter-handle--after--Height: 0.25rem;
|
|
13312
13316
|
--pf-v5-c-drawer__splitter--m-vertical__splitter-handle--after--Width: 0.25rem;
|
|
13313
13317
|
--pf-v5-c-drawer__splitter--m-vertical__splitter-handle--after--Height: 0.75rem;
|
|
13314
|
-
--pf-v5-c-drawer__actions--MarginTop: calc(var(--pf-
|
|
13315
|
-
--pf-v5-c-drawer__actions--MarginRight: calc(var(--pf-
|
|
13318
|
+
--pf-v5-c-drawer__actions--MarginTop: calc(var(--pf-t--global--spacer--xs) * -1.5);
|
|
13319
|
+
--pf-v5-c-drawer__actions--MarginRight: calc(var(--pf-t--global--spacer--xs) * -1.5);
|
|
13316
13320
|
--pf-v5-c-drawer__panel--BoxShadow: none;
|
|
13317
|
-
--pf-v5-c-drawer--m-expanded--m-panel-bottom__panel--BoxShadow: var(--pf-
|
|
13318
|
-
--pf-v5-c-
|
|
13319
|
-
--pf-v5-c-drawer--m-
|
|
13320
|
-
--pf-v5-c-drawer__panel--after--Width: var(--pf-v5-global--BorderWidth--sm);
|
|
13321
|
-
--pf-v5-c-drawer--m-panel-bottom__panel--after--Height: var(--pf-v5-global--BorderWidth--sm);
|
|
13321
|
+
--pf-v5-c-drawer--m-expanded--m-panel-bottom__panel--BoxShadow: var(--pf-t--global--box-shadow--lg--top);
|
|
13322
|
+
--pf-v5-c-drawer__panel--after--Width: var(--pf-t--global--border--width--divider--default);
|
|
13323
|
+
--pf-v5-c-drawer--m-panel-bottom__panel--after--Height: var(--pf-t--global--border--width--divider--default);
|
|
13322
13324
|
--pf-v5-c-drawer__panel--after--BackgroundColor: transparent;
|
|
13323
|
-
--pf-v5-c-drawer--m-inline--m-expanded__panel--after--BackgroundColor: var(--pf-
|
|
13325
|
+
--pf-v5-c-drawer--m-inline--m-expanded__panel--after--BackgroundColor: var(--pf-t--global--border--color--default);
|
|
13324
13326
|
--pf-v5-c-drawer--m-inline__panel--PaddingLeft: var(--pf-v5-c-drawer__panel--after--Width);
|
|
13325
13327
|
--pf-v5-c-drawer--m-panel-left--m-inline__panel--PaddingRight: var(--pf-v5-c-drawer__panel--after--Width);
|
|
13326
13328
|
--pf-v5-c-drawer--m-panel-bottom--m-inline__panel--PaddingTop: var(--pf-v5-c-drawer__panel--after--Width);
|
|
13327
|
-
display: flex;
|
|
13328
|
-
flex-direction: column;
|
|
13329
|
-
height: 100%;
|
|
13330
|
-
overflow-x: hidden;
|
|
13331
|
-
}
|
|
13332
|
-
@media screen and (min-width: 768px) {
|
|
13333
|
-
.pf-v5-c-drawer {
|
|
13334
|
-
--pf-v5-c-drawer--child--PaddingTop: var(--pf-v5-c-drawer--child--md--PaddingTop);
|
|
13335
|
-
--pf-v5-c-drawer--child--PaddingRight: var(--pf-v5-c-drawer--child--md--PaddingRight);
|
|
13336
|
-
--pf-v5-c-drawer--child--PaddingBottom: var(--pf-v5-c-drawer--child--md--PaddingBottom);
|
|
13337
|
-
--pf-v5-c-drawer--child--PaddingLeft: var(--pf-v5-c-drawer--child--md--PaddingLeft);
|
|
13338
|
-
--pf-v5-c-drawer--child--m-padding--PaddingTop: var(--pf-v5-c-drawer--child--m-padding--md--PaddingTop);
|
|
13339
|
-
--pf-v5-c-drawer--child--m-padding--PaddingRight: var(--pf-v5-c-drawer--child--m-padding--md--PaddingRight);
|
|
13340
|
-
--pf-v5-c-drawer--child--m-padding--PaddingBottom: var(--pf-v5-c-drawer--child--m-padding--md--PaddingBottom);
|
|
13341
|
-
--pf-v5-c-drawer--child--m-padding--PaddingLeft: var(--pf-v5-c-drawer--child--m-padding--md--PaddingLeft);
|
|
13342
|
-
}
|
|
13343
13329
|
}
|
|
13344
13330
|
@media screen and (min-width: 1200px) {
|
|
13345
|
-
|
|
13331
|
+
:where(:root),
|
|
13332
|
+
:where(.pf-v5-c-drawer) {
|
|
13346
13333
|
--pf-v5-c-drawer__panel--MinWidth: var(--pf-v5-c-drawer__panel--xl--MinWidth);
|
|
13347
13334
|
}
|
|
13348
|
-
.pf-
|
|
13335
|
+
:where(:root).pf-m-panel-bottom,
|
|
13336
|
+
:where(.pf-v5-c-drawer).pf-m-panel-bottom {
|
|
13349
13337
|
--pf-v5-c-drawer__panel--MinWidth: auto;
|
|
13350
13338
|
--pf-v5-c-drawer__panel--MinHeight: var(--pf-v5-c-drawer--m-panel-bottom__panel--xl--MinHeight);
|
|
13351
13339
|
}
|
|
13352
13340
|
}
|
|
13341
|
+
|
|
13342
|
+
.pf-v5-c-drawer {
|
|
13343
|
+
--pf-v5-c-drawer--m-expanded__panel--BoxShadow: var(--pf-t--global--box-shadow--lg--left);
|
|
13344
|
+
--pf-v5-c-drawer--m-expanded--m-panel-left__panel--BoxShadow: var(--pf-v5-global--BoxShadow--lg-right);
|
|
13345
|
+
display: flex;
|
|
13346
|
+
flex-direction: column;
|
|
13347
|
+
height: 100%;
|
|
13348
|
+
overflow-x: hidden;
|
|
13349
|
+
}
|
|
13353
13350
|
:where(.pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-drawer {
|
|
13354
|
-
--pf-v5-c-drawer--m-expanded__panel--BoxShadow: var(--pf-
|
|
13351
|
+
--pf-v5-c-drawer--m-expanded__panel--BoxShadow: var(--pf-t--global--box-shadow--lg--right);
|
|
13355
13352
|
}
|
|
13356
13353
|
|
|
13357
13354
|
:where(.pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-drawer {
|
|
@@ -13401,12 +13398,12 @@ label.pf-v5-c-check, .pf-v5-c-check__label,
|
|
|
13401
13398
|
flex-grow: 0;
|
|
13402
13399
|
background-color: var(--pf-v5-c-drawer__section--BackgroundColor);
|
|
13403
13400
|
}
|
|
13401
|
+
.pf-v5-c-drawer__section.pf-m-secondary {
|
|
13402
|
+
--pf-v5-c-drawer__section--BackgroundColor: var(--pf-v5-c-drawer__section--m-secondary--BackgroundColor);
|
|
13403
|
+
}
|
|
13404
13404
|
.pf-v5-c-drawer__section.pf-m-no-background {
|
|
13405
13405
|
--pf-v5-c-drawer__section--BackgroundColor: transparent;
|
|
13406
13406
|
}
|
|
13407
|
-
.pf-v5-c-drawer__section.pf-m-light-200 {
|
|
13408
|
-
--pf-v5-c-drawer__section--BackgroundColor: var(--pf-v5-c-drawer__section--m-light-200--BackgroundColor);
|
|
13409
|
-
}
|
|
13410
13407
|
|
|
13411
13408
|
.pf-v5-c-drawer__main {
|
|
13412
13409
|
display: flex;
|
|
@@ -13427,24 +13424,26 @@ label.pf-v5-c-check, .pf-v5-c-check__label,
|
|
|
13427
13424
|
z-index: var(--pf-v5-c-drawer__content--ZIndex);
|
|
13428
13425
|
flex-basis: var(--pf-v5-c-drawer__content--FlexBasis);
|
|
13429
13426
|
order: 0;
|
|
13427
|
+
background-color: var(--pf-v5-c-drawer__content--BackgroundColor);
|
|
13428
|
+
}
|
|
13429
|
+
.pf-v5-c-drawer__content.pf-m-secondary {
|
|
13430
|
+
--pf-v5-c-drawer__content--BackgroundColor: var(--pf-v5-c-drawer__content--m-secondary--BackgroundColor);
|
|
13430
13431
|
}
|
|
13431
13432
|
.pf-v5-c-drawer__content.pf-m-no-background {
|
|
13432
13433
|
--pf-v5-c-drawer__content--BackgroundColor: transparent;
|
|
13433
13434
|
}
|
|
13434
|
-
.pf-v5-c-drawer__content.pf-m-light-200 {
|
|
13435
|
-
--pf-v5-c-drawer__content--BackgroundColor: var(--pf-v5-c-drawer__content--m-light-200--BackgroundColor);
|
|
13436
|
-
}
|
|
13437
13435
|
.pf-v5-c-drawer__content > .pf-v5-c-drawer__body {
|
|
13438
|
-
padding-block-start: var(--pf-v5-c-
|
|
13439
|
-
padding-block-end: var(--pf-v5-c-
|
|
13440
|
-
padding-inline-start: var(--pf-v5-c-
|
|
13441
|
-
padding-inline-end: var(--pf-v5-c-
|
|
13436
|
+
padding-block-start: var(--pf-v5-c-drawer__content__body--PaddingTop);
|
|
13437
|
+
padding-block-end: var(--pf-v5-c-drawer__content__body--PaddingBottom);
|
|
13438
|
+
padding-inline-start: var(--pf-v5-c-drawer__content__body--PaddingLeft);
|
|
13439
|
+
padding-inline-end: var(--pf-v5-c-drawer__content__body--PaddingRight);
|
|
13442
13440
|
}
|
|
13443
13441
|
|
|
13444
13442
|
.pf-v5-c-drawer__panel {
|
|
13445
13443
|
position: relative;
|
|
13446
13444
|
z-index: var(--pf-v5-c-drawer__panel--ZIndex);
|
|
13447
13445
|
flex-basis: var(--pf-v5-c-drawer__panel--FlexBasis);
|
|
13446
|
+
row-gap: var(--pf-v5-c-drawer__panel--RowGap);
|
|
13448
13447
|
order: 1;
|
|
13449
13448
|
max-height: var(--pf-v5-c-drawer__panel--MaxHeight);
|
|
13450
13449
|
overflow: auto;
|
|
@@ -13463,12 +13462,16 @@ label.pf-v5-c-check, .pf-v5-c-check__label,
|
|
|
13463
13462
|
content: "";
|
|
13464
13463
|
background-color: var(--pf-v5-c-drawer__panel--after--BackgroundColor);
|
|
13465
13464
|
}
|
|
13465
|
+
.pf-v5-c-drawer__panel:not(.pf-m-resizable) {
|
|
13466
|
+
padding-block-start: var(--pf-v5-c-drawer__panel--PaddingBlockStart);
|
|
13467
|
+
padding-block-end: var(--pf-v5-c-drawer__panel--PaddingBlockEnd);
|
|
13468
|
+
}
|
|
13469
|
+
.pf-v5-c-drawer__panel.pf-m-secondary {
|
|
13470
|
+
--pf-v5-c-drawer__panel--BackgroundColor: var(--pf-v5-c-drawer__panel--m-secondary--BackgroundColor);
|
|
13471
|
+
}
|
|
13466
13472
|
.pf-v5-c-drawer__panel.pf-m-no-background {
|
|
13467
13473
|
--pf-v5-c-drawer__panel--BackgroundColor: transparent;
|
|
13468
13474
|
}
|
|
13469
|
-
.pf-v5-c-drawer__panel.pf-m-light-200 {
|
|
13470
|
-
--pf-v5-c-drawer__panel--BackgroundColor: var(--pf-v5-c-drawer__panel--m-light-200--BackgroundColor);
|
|
13471
|
-
}
|
|
13472
13475
|
@media screen and (min-width: 768px) {
|
|
13473
13476
|
.pf-v5-c-drawer__panel {
|
|
13474
13477
|
--pf-v5-c-drawer__panel--FlexBasis:
|
|
@@ -13487,8 +13490,18 @@ label.pf-v5-c-check, .pf-v5-c-check__label,
|
|
|
13487
13490
|
}
|
|
13488
13491
|
}
|
|
13489
13492
|
|
|
13493
|
+
.pf-v5-c-drawer__panel > .pf-v5-c-drawer__body,
|
|
13494
|
+
.pf-v5-c-drawer__panel-main > .pf-v5-c-drawer__body {
|
|
13495
|
+
padding-block-start: var(--pf-v5-c-drawer__panel__body--PaddingTop);
|
|
13496
|
+
padding-block-end: var(--pf-v5-c-drawer__panel__body--PaddingBottom);
|
|
13497
|
+
padding-inline-start: var(--pf-v5-c-drawer__panel__body--PaddingLeft);
|
|
13498
|
+
padding-inline-end: var(--pf-v5-c-drawer__panel__body--PaddingRight);
|
|
13499
|
+
}
|
|
13500
|
+
|
|
13490
13501
|
.pf-v5-c-drawer__panel-main {
|
|
13491
13502
|
flex-grow: 1;
|
|
13503
|
+
padding-block-start: var(--pf-v5-c-drawer__panel--PaddingBlockStart);
|
|
13504
|
+
padding-block-end: var(--pf-v5-c-drawer__panel--PaddingBlockEnd);
|
|
13492
13505
|
}
|
|
13493
13506
|
|
|
13494
13507
|
@keyframes pf-remove-tab-focus {
|
|
@@ -13506,6 +13519,11 @@ label.pf-v5-c-check, .pf-v5-c-check__label,
|
|
|
13506
13519
|
display: grid;
|
|
13507
13520
|
grid-template-columns: auto;
|
|
13508
13521
|
grid-auto-columns: max-content;
|
|
13522
|
+
column-gap: var(--pf-v5-c-drawer__head--ColumnGap);
|
|
13523
|
+
padding-block-start: var(--pf-v5-c-drawer__head--PaddingBlockStart);
|
|
13524
|
+
padding-block-end: var(--pf-v5-c-drawer__head--PaddingBlockEnd);
|
|
13525
|
+
padding-inline-start: var(--pf-v5-c-drawer__head--PaddingInlineStart);
|
|
13526
|
+
padding-inline-end: var(--pf-v5-c-drawer__head--PaddingInlineEnd);
|
|
13509
13527
|
}
|
|
13510
13528
|
.pf-v5-c-drawer__head > * {
|
|
13511
13529
|
grid-column: 1;
|
|
@@ -13520,25 +13538,19 @@ label.pf-v5-c-check, .pf-v5-c-check__label,
|
|
|
13520
13538
|
margin-inline-end: var(--pf-v5-c-drawer__actions--MarginRight);
|
|
13521
13539
|
}
|
|
13522
13540
|
|
|
13523
|
-
.pf-v5-c-
|
|
13524
|
-
padding-
|
|
13525
|
-
padding-
|
|
13526
|
-
padding-inline-start: var(--pf-v5-c-drawer--child--PaddingLeft);
|
|
13527
|
-
padding-inline-end: var(--pf-v5-c-drawer--child--PaddingRight);
|
|
13541
|
+
.pf-v5-c-drawer__description {
|
|
13542
|
+
padding-inline-start: var(--pf-v5-c-drawer__description--PaddingInlineStart);
|
|
13543
|
+
padding-inline-end: var(--pf-v5-c-drawer__description--PaddingInlineEnd);
|
|
13528
13544
|
}
|
|
13545
|
+
|
|
13529
13546
|
.pf-v5-c-drawer__body.pf-m-no-padding {
|
|
13530
13547
|
padding: 0;
|
|
13531
13548
|
}
|
|
13532
|
-
.pf-v5-c-drawer__body.pf-m-no-padding > .pf-v5-c-drawer__actions,
|
|
13533
|
-
.pf-v5-c-drawer__body.pf-m-no-padding > .pf-v5-c-drawer__head > .pf-v5-c-drawer__actions {
|
|
13534
|
-
margin-block-start: 0;
|
|
13535
|
-
margin-inline-end: 0;
|
|
13536
|
-
}
|
|
13537
13549
|
.pf-v5-c-drawer__body.pf-m-padding {
|
|
13538
|
-
padding-block-start: var(--pf-v5-c-
|
|
13539
|
-
padding-block-end: var(--pf-v5-c-
|
|
13540
|
-
padding-inline-start: var(--pf-v5-c-
|
|
13541
|
-
padding-inline-end: var(--pf-v5-c-
|
|
13550
|
+
padding-block-start: var(--pf-v5-c-drawer__body--m-padding--PaddingTop);
|
|
13551
|
+
padding-block-end: var(--pf-v5-c-drawer__body--m-padding--PaddingBottom);
|
|
13552
|
+
padding-inline-start: var(--pf-v5-c-drawer__body--m-padding--PaddingLeft);
|
|
13553
|
+
padding-inline-end: var(--pf-v5-c-drawer__body--m-padding--PaddingRight);
|
|
13542
13554
|
}
|
|
13543
13555
|
.pf-v5-c-drawer__body:not(.pf-m-no-padding) + * {
|
|
13544
13556
|
padding-block-start: 0;
|
|
@@ -13570,12 +13582,9 @@ label.pf-v5-c-check, .pf-v5-c-check__label,
|
|
|
13570
13582
|
--pf-v5-c-drawer__splitter-handle--after--BorderBottomWidth: var(--pf-v5-c-drawer__splitter--m-vertical__splitter-handle--after--BorderBottomWidth);
|
|
13571
13583
|
--pf-v5-c-drawer__splitter-handle--after--BorderLeftWidth: var(--pf-v5-c-drawer__splitter--m-vertical__splitter-handle--after--BorderLeftWidth);
|
|
13572
13584
|
}
|
|
13573
|
-
.pf-v5-c-drawer__splitter:hover {
|
|
13585
|
+
.pf-v5-c-drawer__splitter:hover, .pf-v5-c-drawer__splitter:focus {
|
|
13574
13586
|
--pf-v5-c-drawer__splitter-handle--after--BorderColor: var(--pf-v5-c-drawer__splitter--hover__splitter-handle--after--BorderColor);
|
|
13575
13587
|
}
|
|
13576
|
-
.pf-v5-c-drawer__splitter:focus {
|
|
13577
|
-
--pf-v5-c-drawer__splitter-handle--after--BorderColor: var(--pf-v5-c-drawer__splitter--focus__splitter-handle--after--BorderColor);
|
|
13578
|
-
}
|
|
13579
13588
|
.pf-v5-c-drawer__splitter::after {
|
|
13580
13589
|
position: absolute;
|
|
13581
13590
|
inset-block-start: 0;
|
|
@@ -13651,8 +13660,6 @@ label.pf-v5-c-check, .pf-v5-c-check__label,
|
|
|
13651
13660
|
}
|
|
13652
13661
|
.pf-v5-c-drawer.pf-m-panel-left > .pf-v5-c-drawer__main > .pf-v5-c-drawer__panel.pf-m-resizable > .pf-v5-c-drawer__splitter {
|
|
13653
13662
|
--pf-v5-c-drawer__splitter-handle--Left: var(--pf-v5-c-drawer--m-panel-left__splitter-handle--Left);
|
|
13654
|
-
--pf-v5-c-drawer__splitter--after--BorderRightWidth: 0;
|
|
13655
|
-
--pf-v5-c-drawer__splitter--after--BorderLeftWidth: var(--pf-v5-c-drawer--m-panel-left__splitter--after--BorderLeftWidth);
|
|
13656
13663
|
order: 1;
|
|
13657
13664
|
}
|
|
13658
13665
|
.pf-v5-c-drawer.pf-m-panel-bottom {
|
|
@@ -13680,14 +13687,14 @@ label.pf-v5-c-check, .pf-v5-c-check__label,
|
|
|
13680
13687
|
}
|
|
13681
13688
|
.pf-v5-c-drawer.pf-m-panel-bottom > .pf-v5-c-drawer__main > .pf-v5-c-drawer__panel.pf-m-resizable > .pf-v5-c-drawer__splitter {
|
|
13682
13689
|
--pf-v5-c-drawer__splitter-handle--Top: var(--pf-v5-c-drawer--m-panel-bottom__splitter-handle--Top);
|
|
13690
|
+
--pf-v5-c-drawer__splitter--after--BorderTopWidth: var(--pf-v5-c-drawer--m-panel-bottom__splitter--after--BorderTopWidth);
|
|
13683
13691
|
--pf-v5-c-drawer__splitter--after--BorderRightWidth: 0;
|
|
13684
13692
|
--pf-v5-c-drawer__splitter--after--BorderBottomWidth: var(--pf-v5-c-drawer--m-panel-bottom__splitter--after--BorderBottomWidth);
|
|
13693
|
+
--pf-v5-c-drawer__splitter--after--BorderLeftWidth: 0;
|
|
13685
13694
|
}
|
|
13686
13695
|
.pf-v5-c-drawer.pf-m-inline > .pf-v5-c-drawer__main > .pf-v5-c-drawer__panel.pf-m-resizable > .pf-v5-c-drawer__splitter {
|
|
13687
13696
|
--pf-v5-c-drawer__splitter--m-vertical--Width: var(--pf-v5-c-drawer--m-inline__splitter--m-vertical--Width);
|
|
13688
13697
|
--pf-v5-c-drawer__splitter-handle--Left: var(--pf-v5-c-drawer--m-inline__splitter-handle--Left);
|
|
13689
|
-
--pf-v5-c-drawer__splitter--after--BorderRightWidth: var(--pf-v5-c-drawer--m-inline__splitter--after--BorderRightWidth);
|
|
13690
|
-
--pf-v5-c-drawer__splitter--after--BorderLeftWidth: var(--pf-v5-c-drawer--m-inline__splitter--after--BorderLeftWidth);
|
|
13691
13698
|
outline-offset: var(--pf-v5-c-drawer--m-inline__splitter--focus--OutlineOffset);
|
|
13692
13699
|
}
|
|
13693
13700
|
.pf-v5-c-drawer.pf-m-inline.pf-m-panel-bottom > .pf-v5-c-drawer__main > .pf-v5-c-drawer__panel.pf-m-resizable > .pf-v5-c-drawer__splitter {
|
|
@@ -14053,18 +14060,6 @@ label.pf-v5-c-check, .pf-v5-c-check__label,
|
|
|
14053
14060
|
display: none;
|
|
14054
14061
|
}
|
|
14055
14062
|
}
|
|
14056
|
-
:where(.pf-theme-dark) .pf-v5-c-wizard__header .pf-v5-c-button, :where(.pf-theme-dark) .pf-v5-c-log-viewer.pf-m-dark .pf-v5-c-log-viewer__main .pf-v5-c-button {
|
|
14057
|
-
--pf-v5-c-button--m-primary--BackgroundColor: var(--pf-v5-global--primary-color--300);
|
|
14058
|
-
}
|
|
14059
|
-
|
|
14060
|
-
:where(.pf-theme-dark) .pf-v5-c-drawer {
|
|
14061
|
-
--pf-v5-c-drawer__panel--BackgroundColor: var(--pf-v5-global--BackgroundColor--400);
|
|
14062
|
-
--pf-v5-c-drawer__splitter--BackgroundColor: transparent;
|
|
14063
|
-
}
|
|
14064
|
-
:where(.pf-theme-dark) .pf-v5-c-drawer.pf-m-inline, :where(.pf-theme-dark) .pf-v5-c-drawer.pf-m-static {
|
|
14065
|
-
--pf-v5-c-drawer__panel--BackgroundColor: var(--pf-v5-global--BackgroundColor--100);
|
|
14066
|
-
}
|
|
14067
|
-
|
|
14068
14063
|
.pf-v5-c-dropdown {
|
|
14069
14064
|
--pf-v5-c-dropdown__toggle--PaddingTop: var(--pf-v5-global--spacer--form-element);
|
|
14070
14065
|
--pf-v5-c-dropdown__toggle--PaddingRight: var(--pf-v5-global--spacer--sm);
|