Drawer

A drawer is a sliding panel that enters from the right edge of the viewport. It can be configured to either overlay content on a page or create a sidebar by pushing that content to the left.

Examples

Basic

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus pretium est a porttitor vehicula. Quisque vel commodo urna. Morbi mattis rutrum ante, id vehicula ex accumsan ut. Morbi viverra, eros vel porttitor facilisis, eros purus aliquet erat,nec lobortis felis elit pulvinar sem. Vivamus vulputate, risus eget commodo eleifend, eros nibh porta quam, vitae lacinia leo libero at magna. Maecenas aliquam sagittis orci, et posuere nisi ultrices sit amet. Aliquam ex odio, malesuada sed posuere quis, pellentesque at mauris. Phasellus venenatis massa ex, eget pulvinar libero auctor pretium. Aliquam erat volutpat. Duis euismod justo in quam ullamcorper, in commodo massa vulputate.

Panel at end

Panel at start

Panel on bottom

Basic inline

Inline panel at end

Inline panel at start

Stacked content body elements

content-body

content-body with padding

content-body

Modified content padding

Drawer content padding.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus pretium est a porttitor vehicula. Quisque vel commodo urna. Morbi mattis rutrum ante, id vehicula ex accumsan ut. Morbi viverra, eros vel porttitor facilisis, eros purus aliquet erat,nec lobortis felis elit pulvinar sem. Vivamus vulputate, risus eget commodo eleifend, eros nibh porta quam, vitae lacinia leo libero at magna. Maecenas aliquam sagittis orci, et posuere nisi ultrices sit amet. Aliquam ex odio, malesuada sed posuere quis, pellentesque at mauris. Phasellus venenatis massa ex, eget pulvinar libero auctor pretium. Aliquam erat volutpat. Duis euismod justo in quam ullamcorper, in commodo massa vulputate.

Modified panel padding

Additional section above drawer content

drawer-section

Static drawer

Note: For mobile viewports, all drawer variants behave the same way. At the md breakpoint, or where .pf-m-static{-on-[lg, xl, 2xl]} is applied, the static drawer variant’s close button is automatically hidden because the drawer panel doesn’t close by design.

drawer-panel

Breakpoint

Resizable at end

Resizable at start

Resizable on bottom

Resizable on inline

Panel with secondary background

Secondary panel

Secondary content

Secondary section

drawer-section

With focus trap

When a focus trap is enabled on an element, a user will only be able to interact with the contents of that element until the focus trap is closed or deactivated.

To enable and customize a focus trap on a drawer panel, apply the focusTrap property to the <DrawerPanelContent> component. Enabling a focus trap with focusTrap.enabled will also automatically place focus on the first focusable element when the drawer panel expands, and return focus to the previously focused element when it collapses.

To customize which element receives focus when the drawer panel expands, use the focusTrap.elementToFocusOnExpand property.

Props

Drawer

*required
Name	Type	Default	Description
children	React.ReactNode		Content rendered in the drawer panel
className	string	''	Additional classes added to the Drawer.
isExpanded	boolean	false	Indicates if the drawer is expanded
isInline	boolean	false	Indicates if the content element and panel element are displayed side by side.
isStatic	boolean	false	Indicates if the drawer will always show both content and panel.
onExpand	(event: KeyboardEvent \| React.MouseEvent \| React.TransitionEvent) => void	() => {}	Callback when drawer panel is expanded after waiting 250ms for animation to complete.
position	'start' \| 'end' \| 'bottom' \| 'left' \| 'right'	'end'	Position of the drawer panel. left and right are deprecated, use start and end instead.

DrawerContent

*required
Name	Type	Default	Description
panelContentrequired	React.ReactNode		Content rendered in the drawer panel.
children	React.ReactNode		Content to be rendered in the drawer.
className	string	''	Additional classes added to the Drawer.
colorVariant	DrawerColorVariant \| 'light-200' \| 'no-background' \| 'default'	DrawerColorVariant.default	Color variant of the background of the drawer panel

DrawerPanelContent

*required
Name	Type	Default	Description
children	React.ReactNode		Content to be rendered in the drawer panel.
className	string	''	Additional classes added to the drawer.
colorVariant	DrawerColorVariant \| 'light-200' \| 'no-background' \| 'default'	DrawerColorVariant.default	Color variant of the background of the drawer panel
defaultSize	string		The starting size of a drawer.
focusTrap	DrawerPanelFocusTrapObject		Adds and customizes a focus trap on the drawer panel content.
hasNoBorder	boolean	false	Flag indicating that the drawer panel should not have a border.
id	string		ID of the drawer panel
increment	number	5	The increment amount for keyboard drawer resizing.
isResizable	boolean	false	Flag indicating that the drawer panel should be resizable.
maxSize	string		The maximum size of a drawer.
minSize	string		The minimum size of a drawer.
onResize	(event: MouseEvent \| TouchEvent \| React.KeyboardEvent, width: number, id: string) => void		Callback for resize end.
resizeAriaLabel	string	'Resize'	Aria label for the resizable drawer splitter.
widths	{ default?: 'width_25' \| 'width_33' \| 'width_50' \| 'width_66' \| 'width_75' \| 'width_100'; lg?: 'width_25' \| 'width_33' \| 'width_50' \| 'width_66' \| 'width_75' \| 'width_100'; xl?: 'width_25' \| 'width_33' \| 'width_50' \| 'width_66' \| 'width_75' \| 'width_100'; '2xl'?: 'width_25' \| 'width_33' \| 'width_50' \| 'width_66' \| 'width_75' \| 'width_100'; }		Width for drawer panel at various breakpoints. Overriden by resizable drawer minSize and defaultSize.

DrawerContentBody

*required
Name	Type	Default	Description
children	React.ReactNode		Content to be rendered in the drawer
className	string	''	Additional classes added to the Drawer.
hasPadding	boolean	false	Indicates if there should be padding around the drawer content body

DrawerPanelBody

*required
Name	Type	Default	Description
children	React.ReactNode		Content to be rendered in the drawer
className	string	''	Additional classes added to the Drawer.
hasNoPadding	boolean	false	Indicates if there should be no padding around the drawer panel body

DrawerSection

*required
Name	Type	Default	Description
children	React.ReactNode		Content to be rendered in the drawer section.
className	string	''	Additional classes added to the drawer section.
colorVariant	DrawerColorVariant \| 'light-200' \| 'no-background' \| 'default'	DrawerColorVariant.default	Color variant of the background of the drawer Section

DrawerHead

*required
Name	Type	Default	Description
children	React.ReactNode		Content to be rendered in the drawer head
className	string	''	Additional classes added to the drawer head.
hasNoPadding	boolean	false	Indicates if there should be no padding around the drawer panel body of the head

DrawerActions

*required
Name	Type	Default	Description
children	React.ReactNode		Actions to be rendered in the panel head.
className	string	''	Additional classes added to the drawer actions button.

DrawerCloseButton

*required
Name	Type	Default	Description
aria-label	string	'Close drawer panel'	Accessible label for the drawer close button
className	string	''	Additional classes added to the drawer close button outer <div>.
onClose	() => void	() => undefined as any	A callback for when the close button is clicked

DrawerPanelFocusTrapObject

*required
Name	Type	Description
elementToFocusOnExpand	HTMLElement \| SVGElement \| string	The element to focus when the drawer panel content expands. By default the first focusable element will receive focus. If there are no focusable elements, the panel itself will receive focus.
enabled	boolean	Enables a focus trap on the drawer panel content. This will also automatically handle focus management when the panel expands and when it collapses. Do not pass this prop if the isStatic prop on the drawer component is true.
Unknown	string	One or more id's to use for the drawer panel content's accessible label.

CSS variables

Expand or collapse column	Selector	Variable	Value
	.pf-v5-c-drawer	--pf-v5-c-drawer__section--BackgroundColor	#fff
--pf-v5-c-drawer__section--BackgroundColor --pf-v5-global--BackgroundColor--100 $pf-v5-global--BackgroundColor--100 $pf-v5-color-white #fff
	.pf-v5-c-drawer	--pf-v5-c-drawer__section--m-light-200--BackgroundColor	#f0f0f0
--pf-v5-c-drawer__section--m-light-200--BackgroundColor --pf-v5-global--BackgroundColor--200 $pf-v5-global--BackgroundColor--200 $pf-v5-color-black-200 #f0f0f0
	.pf-v5-c-drawer	--pf-v5-c-drawer__content--FlexBasis	100%
	.pf-v5-c-drawer	--pf-v5-c-drawer__content--BackgroundColor	#fff
--pf-v5-c-drawer__content--BackgroundColor --pf-v5-global--BackgroundColor--100 $pf-v5-global--BackgroundColor--100 $pf-v5-color-white #fff
	.pf-v5-c-drawer	--pf-v5-c-drawer__content--m-light-200--BackgroundColor	#f0f0f0
--pf-v5-c-drawer__content--m-light-200--BackgroundColor --pf-v5-global--BackgroundColor--200 $pf-v5-global--BackgroundColor--200 $pf-v5-color-black-200 #f0f0f0
	.pf-v5-c-drawer	--pf-v5-c-drawer__content--ZIndex	100
--pf-v5-c-drawer__content--ZIndex --pf-v5-global--ZIndex--xs $pf-v5-global--ZIndex--xs 100
	.pf-v5-c-drawer	--pf-v5-c-drawer__panel--MinWidth	50%
	.pf-v5-c-drawer	--pf-v5-c-drawer__panel--MaxHeight	auto
	.pf-v5-c-drawer	--pf-v5-c-drawer__panel--ZIndex	200
--pf-v5-c-drawer__panel--ZIndex --pf-v5-global--ZIndex--sm $pf-v5-global--ZIndex--sm 200
	.pf-v5-c-drawer	--pf-v5-c-drawer__panel--BackgroundColor	#fff
--pf-v5-c-drawer__panel--BackgroundColor --pf-v5-global--BackgroundColor--100 $pf-v5-global--BackgroundColor--100 $pf-v5-color-white #fff
	.pf-v5-c-drawer	--pf-v5-c-drawer__panel--m-light-200--BackgroundColor	#f0f0f0
--pf-v5-c-drawer__panel--m-light-200--BackgroundColor --pf-v5-global--BackgroundColor--200 $pf-v5-global--BackgroundColor--200 $pf-v5-color-black-200 #f0f0f0
	.pf-v5-c-drawer	--pf-v5-c-drawer__panel--TransitionDuration	250ms
--pf-v5-c-drawer__panel--TransitionDuration --pf-v5-global--TransitionDuration $pf-v5-global--TransitionDuration 250ms
	.pf-v5-c-drawer	--pf-v5-c-drawer__panel--TransitionProperty	margin, transform, box-shadow, flex-basis
	.pf-v5-c-drawer	--pf-v5-c-drawer__panel--FlexBasis	100%
	.pf-v5-c-drawer	--pf-v5-c-drawer__panel--md--FlexBasis--min	1.5rem
	.pf-v5-c-drawer	--pf-v5-c-drawer__panel--md--FlexBasis	50%
	.pf-v5-c-drawer	--pf-v5-c-drawer__panel--md--FlexBasis--max	100%
	.pf-v5-c-drawer	--pf-v5-c-drawer__panel--xl--MinWidth	28.125rem
	.pf-v5-c-drawer	--pf-v5-c-drawer__panel--xl--FlexBasis	28.125rem
	.pf-v5-c-drawer	--pf-v5-c-drawer--m-panel-bottom__panel--md--MinHeight	50%
	.pf-v5-c-drawer	--pf-v5-c-drawer--m-panel-bottom__panel--xl--MinHeight	18.75rem
	.pf-v5-c-drawer	--pf-v5-c-drawer--m-panel-bottom__panel--xl--FlexBasis	18.75rem
	.pf-v5-c-drawer	--pf-v5-c-drawer__panel--m-resizable--FlexDirection	row
	.pf-v5-c-drawer	--pf-v5-c-drawer__panel--m-resizable--md--FlexBasis--min	0.5625rem
--pf-v5-c-drawer__panel--m-resizable--md--FlexBasis--min --pf-v5-c-drawer__splitter--m-vertical--Width 0.5625rem
	.pf-v5-c-drawer	--pf-v5-c-drawer__panel--m-resizable--MinWidth	1.5rem
	.pf-v5-c-drawer	--pf-v5-c-drawer--m-panel-bottom__panel--m-resizable--FlexDirection	column
	.pf-v5-c-drawer	--pf-v5-c-drawer--m-panel-bottom__panel--m-resizable--md--FlexBasis--min	1.5rem
	.pf-v5-c-drawer	--pf-v5-c-drawer--m-panel-bottom__panel--m-resizable--MinHeight	1.5rem
	.pf-v5-c-drawer	--pf-v5-c-drawer--child--PaddingTop	1rem
--pf-v5-c-drawer--child--PaddingTop --pf-v5-global--spacer--md $pf-v5-global--spacer--md pf-size-prem(16px) 1rem
	.pf-v5-c-drawer	--pf-v5-c-drawer--child--PaddingRight	1rem
--pf-v5-c-drawer--child--PaddingRight --pf-v5-global--spacer--md $pf-v5-global--spacer--md pf-size-prem(16px) 1rem
	.pf-v5-c-drawer	--pf-v5-c-drawer--child--PaddingBottom	1rem
--pf-v5-c-drawer--child--PaddingBottom --pf-v5-global--spacer--md $pf-v5-global--spacer--md pf-size-prem(16px) 1rem
	.pf-v5-c-drawer	--pf-v5-c-drawer--child--PaddingLeft	1rem
--pf-v5-c-drawer--child--PaddingLeft --pf-v5-global--spacer--md $pf-v5-global--spacer--md pf-size-prem(16px) 1rem
	.pf-v5-c-drawer	--pf-v5-c-drawer--child--md--PaddingTop	1.5rem
--pf-v5-c-drawer--child--md--PaddingTop --pf-v5-global--spacer--lg $pf-v5-global--spacer--lg pf-size-prem(24px) 1.5rem
	.pf-v5-c-drawer	--pf-v5-c-drawer--child--md--PaddingRight	1.5rem
--pf-v5-c-drawer--child--md--PaddingRight --pf-v5-global--spacer--lg $pf-v5-global--spacer--lg pf-size-prem(24px) 1.5rem
	.pf-v5-c-drawer	--pf-v5-c-drawer--child--md--PaddingBottom	1.5rem
--pf-v5-c-drawer--child--md--PaddingBottom --pf-v5-global--spacer--lg $pf-v5-global--spacer--lg pf-size-prem(24px) 1.5rem
	.pf-v5-c-drawer	--pf-v5-c-drawer--child--md--PaddingLeft	1.5rem
--pf-v5-c-drawer--child--md--PaddingLeft --pf-v5-global--spacer--lg $pf-v5-global--spacer--lg pf-size-prem(24px) 1.5rem
	.pf-v5-c-drawer	--pf-v5-c-drawer--child--m-padding--PaddingTop	1rem
--pf-v5-c-drawer--child--m-padding--PaddingTop --pf-v5-global--spacer--md $pf-v5-global--spacer--md pf-size-prem(16px) 1rem
	.pf-v5-c-drawer	--pf-v5-c-drawer--child--m-padding--PaddingRight	1rem
--pf-v5-c-drawer--child--m-padding--PaddingRight --pf-v5-global--spacer--md $pf-v5-global--spacer--md pf-size-prem(16px) 1rem
	.pf-v5-c-drawer	--pf-v5-c-drawer--child--m-padding--PaddingBottom	1rem
--pf-v5-c-drawer--child--m-padding--PaddingBottom --pf-v5-global--spacer--md $pf-v5-global--spacer--md pf-size-prem(16px) 1rem
	.pf-v5-c-drawer	--pf-v5-c-drawer--child--m-padding--PaddingLeft	1rem
--pf-v5-c-drawer--child--m-padding--PaddingLeft --pf-v5-global--spacer--md $pf-v5-global--spacer--md pf-size-prem(16px) 1rem
	.pf-v5-c-drawer	--pf-v5-c-drawer--child--m-padding--md--PaddingTop	1.5rem
--pf-v5-c-drawer--child--m-padding--md--PaddingTop --pf-v5-global--spacer--lg $pf-v5-global--spacer--lg pf-size-prem(24px) 1.5rem
	.pf-v5-c-drawer	--pf-v5-c-drawer--child--m-padding--md--PaddingRight	1.5rem
--pf-v5-c-drawer--child--m-padding--md--PaddingRight --pf-v5-global--spacer--lg $pf-v5-global--spacer--lg pf-size-prem(24px) 1.5rem
	.pf-v5-c-drawer	--pf-v5-c-drawer--child--m-padding--md--PaddingBottom	1.5rem
--pf-v5-c-drawer--child--m-padding--md--PaddingBottom --pf-v5-global--spacer--lg $pf-v5-global--spacer--lg pf-size-prem(24px) 1.5rem
	.pf-v5-c-drawer	--pf-v5-c-drawer--child--m-padding--md--PaddingLeft	1.5rem
--pf-v5-c-drawer--child--m-padding--md--PaddingLeft --pf-v5-global--spacer--lg $pf-v5-global--spacer--lg pf-size-prem(24px) 1.5rem
	.pf-v5-c-drawer	--pf-v5-c-drawer__content--child--PaddingTop	0
	.pf-v5-c-drawer	--pf-v5-c-drawer__content--child--PaddingRight	0
	.pf-v5-c-drawer	--pf-v5-c-drawer__content--child--PaddingBottom	0
	.pf-v5-c-drawer	--pf-v5-c-drawer__content--child--PaddingLeft	0
	.pf-v5-c-drawer	--pf-v5-c-drawer__splitter--Height	0.5625rem
	.pf-v5-c-drawer	--pf-v5-c-drawer__splitter--Width	100%
	.pf-v5-c-drawer	--pf-v5-c-drawer__splitter--BackgroundColor	#fff
--pf-v5-c-drawer__splitter--BackgroundColor --pf-v5-global--BackgroundColor--100 $pf-v5-global--BackgroundColor--100 $pf-v5-color-white #fff
	.pf-v5-c-drawer	--pf-v5-c-drawer__splitter--Cursor	row-resize
	.pf-v5-c-drawer	--pf-v5-c-drawer__splitter--m-vertical--Height	100%
	.pf-v5-c-drawer	--pf-v5-c-drawer__splitter--m-vertical--Width	0.5625rem
	.pf-v5-c-drawer	--pf-v5-c-drawer__splitter--m-vertical--Cursor	col-resize
	.pf-v5-c-drawer	--pf-v5-c-drawer--m-inline__splitter--focus--OutlineOffset	-0.0625rem
	.pf-v5-c-drawer	--pf-v5-c-drawer__splitter--after--BorderColor	#d2d2d2
--pf-v5-c-drawer__splitter--after--BorderColor --pf-v5-global--BorderColor--100 $pf-v5-global--BorderColor--100 $pf-v5-color-black-300 #d2d2d2
	.pf-v5-c-drawer	--pf-v5-c-drawer__splitter--after--border-width--base	1px
--pf-v5-c-drawer__splitter--after--border-width--base --pf-v5-global--BorderWidth--sm $pf-v5-global--BorderWidth--sm 1px
	.pf-v5-c-drawer	--pf-v5-c-drawer__splitter--after--BorderTopWidth	0
	.pf-v5-c-drawer	--pf-v5-c-drawer__splitter--after--BorderRightWidth	1px
--pf-v5-c-drawer__splitter--after--BorderRightWidth --pf-v5-c-drawer__splitter--after--border-width--base --pf-v5-global--BorderWidth--sm $pf-v5-global--BorderWidth--sm 1px
	.pf-v5-c-drawer	--pf-v5-c-drawer__splitter--after--BorderBottomWidth	0
	.pf-v5-c-drawer	--pf-v5-c-drawer__splitter--after--BorderLeftWidth	0
	.pf-v5-c-drawer	--pf-v5-c-drawer--m-panel-left__splitter--after--BorderLeftWidth	1px
--pf-v5-c-drawer--m-panel-left__splitter--after--BorderLeftWidth --pf-v5-c-drawer__splitter--after--border-width--base --pf-v5-global--BorderWidth--sm $pf-v5-global--BorderWidth--sm 1px
	.pf-v5-c-drawer	--pf-v5-c-drawer--m-panel-bottom__splitter--after--BorderBottomWidth	1px
--pf-v5-c-drawer--m-panel-bottom__splitter--after--BorderBottomWidth --pf-v5-c-drawer__splitter--after--border-width--base --pf-v5-global--BorderWidth--sm $pf-v5-global--BorderWidth--sm 1px
	.pf-v5-c-drawer	--pf-v5-c-drawer--m-inline__splitter--m-vertical--Width	0.625rem
	.pf-v5-c-drawer	--pf-v5-c-drawer--m-inline__splitter-handle--Left	50%
	.pf-v5-c-drawer	--pf-v5-c-drawer--m-inline__splitter--after--BorderRightWidth	1px
--pf-v5-c-drawer--m-inline__splitter--after--BorderRightWidth --pf-v5-c-drawer__splitter--after--border-width--base --pf-v5-global--BorderWidth--sm $pf-v5-global--BorderWidth--sm 1px
	.pf-v5-c-drawer	--pf-v5-c-drawer--m-inline__splitter--after--BorderLeftWidth	1px
--pf-v5-c-drawer--m-inline__splitter--after--BorderLeftWidth --pf-v5-c-drawer__splitter--after--border-width--base --pf-v5-global--BorderWidth--sm $pf-v5-global--BorderWidth--sm 1px
	.pf-v5-c-drawer	--pf-v5-c-drawer--m-inline--m-panel-bottom__splitter--Height	0.625rem
	.pf-v5-c-drawer	--pf-v5-c-drawer--m-inline--m-panel-bottom__splitter-handle--Top	50%
	.pf-v5-c-drawer	--pf-v5-c-drawer--m-inline--m-panel-bottom__splitter--after--BorderTopWidth	1px
--pf-v5-c-drawer--m-inline--m-panel-bottom__splitter--after--BorderTopWidth --pf-v5-c-drawer__splitter--after--border-width--base --pf-v5-global--BorderWidth--sm $pf-v5-global--BorderWidth--sm 1px
	.pf-v5-c-drawer	--pf-v5-c-drawer__splitter-handle--Top	50%
	.pf-v5-c-drawer	--pf-v5-c-drawer__splitter-handle--Left	calc(50% - 1px)
--pf-v5-c-drawer__splitter-handle--Left calc(50% - --pf-v5-c-drawer__splitter--after--border-width--base) calc(50% - --pf-v5-global--BorderWidth--sm) calc(50% - $pf-v5-global--BorderWidth--sm) calc(50% - 1px)
	.pf-v5-c-drawer	--pf-v5-c-drawer--m-panel-left__splitter-handle--Left	50%
	.pf-v5-c-drawer	--pf-v5-c-drawer--m-panel-bottom__splitter-handle--Top	calc(50% - 1px)
--pf-v5-c-drawer--m-panel-bottom__splitter-handle--Top calc(50% - --pf-v5-c-drawer__splitter--after--border-width--base) calc(50% - --pf-v5-global--BorderWidth--sm) calc(50% - $pf-v5-global--BorderWidth--sm) calc(50% - 1px)
	.pf-v5-c-drawer	--pf-v5-c-drawer__splitter-handle--after--BorderColor	#6a6e73
--pf-v5-c-drawer__splitter-handle--after--BorderColor --pf-v5-global--Color--200 $pf-v5-global--Color--200 $pf-v5-color-black-600 #6a6e73
	.pf-v5-c-drawer	--pf-v5-c-drawer__splitter-handle--after--BorderTopWidth	1px
--pf-v5-c-drawer__splitter-handle--after--BorderTopWidth --pf-v5-global--BorderWidth--sm $pf-v5-global--BorderWidth--sm 1px
	.pf-v5-c-drawer	--pf-v5-c-drawer__splitter-handle--after--BorderRightWidth	0
	.pf-v5-c-drawer	--pf-v5-c-drawer__splitter-handle--after--BorderBottomWidth	1px
--pf-v5-c-drawer__splitter-handle--after--BorderBottomWidth --pf-v5-global--BorderWidth--sm $pf-v5-global--BorderWidth--sm 1px
	.pf-v5-c-drawer	--pf-v5-c-drawer__splitter-handle--after--BorderLeftWidth	0
	.pf-v5-c-drawer	--pf-v5-c-drawer__splitter--hover__splitter-handle--after--BorderColor	#151515
--pf-v5-c-drawer__splitter--hover__splitter-handle--after--BorderColor --pf-v5-global--Color--100 $pf-v5-global--Color--100 $pf-v5-color-black-900 #151515
	.pf-v5-c-drawer	--pf-v5-c-drawer__splitter--focus__splitter-handle--after--BorderColor	#151515
--pf-v5-c-drawer__splitter--focus__splitter-handle--after--BorderColor --pf-v5-global--Color--100 $pf-v5-global--Color--100 $pf-v5-color-black-900 #151515
	.pf-v5-c-drawer	--pf-v5-c-drawer__splitter--m-vertical__splitter-handle--after--BorderTopWidth	0
	.pf-v5-c-drawer	--pf-v5-c-drawer__splitter--m-vertical__splitter-handle--after--BorderRightWidth	1px
--pf-v5-c-drawer__splitter--m-vertical__splitter-handle--after--BorderRightWidth --pf-v5-global--BorderWidth--sm $pf-v5-global--BorderWidth--sm 1px
	.pf-v5-c-drawer	--pf-v5-c-drawer__splitter--m-vertical__splitter-handle--after--BorderBottomWidth	0
	.pf-v5-c-drawer	--pf-v5-c-drawer__splitter--m-vertical__splitter-handle--after--BorderLeftWidth	1px
--pf-v5-c-drawer__splitter--m-vertical__splitter-handle--after--BorderLeftWidth --pf-v5-global--BorderWidth--sm $pf-v5-global--BorderWidth--sm 1px
	.pf-v5-c-drawer	--pf-v5-c-drawer__splitter-handle--after--Width	0.75rem
	.pf-v5-c-drawer	--pf-v5-c-drawer__splitter-handle--after--Height	0.25rem
	.pf-v5-c-drawer	--pf-v5-c-drawer__splitter--m-vertical__splitter-handle--after--Width	0.25rem
	.pf-v5-c-drawer	--pf-v5-c-drawer__splitter--m-vertical__splitter-handle--after--Height	0.75rem
	.pf-v5-c-drawer	--pf-v5-c-drawer__actions--MarginTop	calc(0.375rem * -1)
--pf-v5-c-drawer__actions--MarginTop calc(--pf-v5-global--spacer--form-element * -1) calc($pf-v5-global--spacer--form-element * -1) calc(pf-size-prem(6px) * -1) calc(0.375rem * -1)
	.pf-v5-c-drawer	--pf-v5-c-drawer__actions--MarginRight	calc(0.375rem * -1)
--pf-v5-c-drawer__actions--MarginRight calc(--pf-v5-global--spacer--form-element * -1) calc($pf-v5-global--spacer--form-element * -1) calc(pf-size-prem(6px) * -1) calc(0.375rem * -1)
	.pf-v5-c-drawer	--pf-v5-c-drawer__panel--BoxShadow	none
	.pf-v5-c-drawer	--pf-v5-c-drawer--m-expanded--m-panel-bottom__panel--BoxShadow	0 -0.75rem 0.75rem -0.5rem rgba(3, 3, 3, 0.18)
--pf-v5-c-drawer--m-expanded--m-panel-bottom__panel--BoxShadow --pf-v5-global--BoxShadow--lg-top $pf-v5-global--BoxShadow--lg-top 0 pf-size-prem(-12px) pf-size-prem(12px) pf-size-prem(-8px) rgba($pf-v5-color-black-1000, .18) 0 pf-size-prem(-12px) pf-size-prem(12px) pf-size-prem(-8px) rgba(#030303, .18) 0 -0.75rem 0.75rem -0.5rem rgba(3, 3, 3, 0.18)
	.pf-v5-c-drawer	--pf-v5-c-drawer--m-expanded__panel--BoxShadow	-0.75rem 0 0.75rem -0.5rem rgba(3, 3, 3, 0.18)
--pf-v5-c-drawer--m-expanded__panel--BoxShadow --pf-v5-global--BoxShadow--lg-left $pf-v5-global--BoxShadow--lg-left pf-size-prem(-12px) 0 pf-size-prem(12px) pf-size-prem(-8px) rgba($pf-v5-color-black-1000, .18) pf-size-prem(-12px) 0 pf-size-prem(12px) pf-size-prem(-8px) rgba(#030303, .18) -0.75rem 0 0.75rem -0.5rem rgba(3, 3, 3, 0.18)
	.pf-v5-c-drawer	--pf-v5-c-drawer--m-expanded--m-panel-left__panel--BoxShadow	0.75rem 0 0.75rem -0.5rem rgba(3, 3, 3, 0.18)
--pf-v5-c-drawer--m-expanded--m-panel-left__panel--BoxShadow --pf-v5-global--BoxShadow--lg-right $pf-v5-global--BoxShadow--lg-right pf-size-prem(12px) 0 pf-size-prem(12px) pf-size-prem(-8px) rgba($pf-v5-color-black-1000, .18) pf-size-prem(12px) 0 pf-size-prem(12px) pf-size-prem(-8px) rgba(#030303, .18) 0.75rem 0 0.75rem -0.5rem rgba(3, 3, 3, 0.18)
	.pf-v5-c-drawer	--pf-v5-c-drawer__panel--after--Width	1px
--pf-v5-c-drawer__panel--after--Width --pf-v5-global--BorderWidth--sm $pf-v5-global--BorderWidth--sm 1px
	.pf-v5-c-drawer	--pf-v5-c-drawer--m-panel-bottom__panel--after--Height	1px
--pf-v5-c-drawer--m-panel-bottom__panel--after--Height --pf-v5-global--BorderWidth--sm $pf-v5-global--BorderWidth--sm 1px
	.pf-v5-c-drawer	--pf-v5-c-drawer__panel--after--BackgroundColor	transparent
	.pf-v5-c-drawer	--pf-v5-c-drawer--m-inline--m-expanded__panel--after--BackgroundColor	#d2d2d2
--pf-v5-c-drawer--m-inline--m-expanded__panel--after--BackgroundColor --pf-v5-global--BorderColor--100 $pf-v5-global--BorderColor--100 $pf-v5-color-black-300 #d2d2d2
	.pf-v5-c-drawer	--pf-v5-c-drawer--m-inline__panel--PaddingLeft	1px
--pf-v5-c-drawer--m-inline__panel--PaddingLeft --pf-v5-c-drawer__panel--after--Width --pf-v5-global--BorderWidth--sm $pf-v5-global--BorderWidth--sm 1px
	.pf-v5-c-drawer	--pf-v5-c-drawer--m-panel-left--m-inline__panel--PaddingRight	1px
--pf-v5-c-drawer--m-panel-left--m-inline__panel--PaddingRight --pf-v5-c-drawer__panel--after--Width --pf-v5-global--BorderWidth--sm $pf-v5-global--BorderWidth--sm 1px
	.pf-v5-c-drawer	--pf-v5-c-drawer--m-panel-bottom--m-inline__panel--PaddingTop	1px
--pf-v5-c-drawer--m-panel-bottom--m-inline__panel--PaddingTop --pf-v5-c-drawer__panel--after--Width --pf-v5-global--BorderWidth--sm $pf-v5-global--BorderWidth--sm 1px
	:where(.pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-drawer	--pf-v5-c-drawer--m-expanded__panel--BoxShadow	0.75rem 0 0.75rem -0.5rem rgba(3, 3, 3, 0.18)
--pf-v5-c-drawer--m-expanded__panel--BoxShadow --pf-v5-global--BoxShadow--lg-right $pf-v5-global--BoxShadow--lg-right pf-size-prem(12px) 0 pf-size-prem(12px) pf-size-prem(-8px) rgba($pf-v5-color-black-1000, .18) pf-size-prem(12px) 0 pf-size-prem(12px) pf-size-prem(-8px) rgba(#030303, .18) 0.75rem 0 0.75rem -0.5rem rgba(3, 3, 3, 0.18)
	:where(.pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-drawer	--pf-v5-c-drawer--m-expanded--m-panel-left__panel--BoxShadow	-0.75rem 0 0.75rem -0.5rem rgba(3, 3, 3, 0.18)
--pf-v5-c-drawer--m-expanded--m-panel-left__panel--BoxShadow --pf-v5-global--BoxShadow--lg-left $pf-v5-global--BoxShadow--lg-left pf-size-prem(-12px) 0 pf-size-prem(12px) pf-size-prem(-8px) rgba($pf-v5-color-black-1000, .18) pf-size-prem(-12px) 0 pf-size-prem(12px) pf-size-prem(-8px) rgba(#030303, .18) -0.75rem 0 0.75rem -0.5rem rgba(3, 3, 3, 0.18)
	.pf-v5-c-drawer.pf-m-resizing	--pf-v5-c-drawer__panel--TransitionProperty	none
	.pf-v5-c-drawer__section.pf-m-no-background	--pf-v5-c-drawer__section--BackgroundColor	transparent
	.pf-v5-c-drawer__section.pf-m-light-200	--pf-v5-c-drawer__section--BackgroundColor	#f0f0f0
--pf-v5-c-drawer__section--BackgroundColor --pf-v5-c-drawer__section--m-light-200--BackgroundColor --pf-v5-global--BackgroundColor--200 $pf-v5-global--BackgroundColor--200 $pf-v5-color-black-200 #f0f0f0
	.pf-v5-c-drawer__content.pf-m-no-background	--pf-v5-c-drawer__content--BackgroundColor	transparent
	.pf-v5-c-drawer__content.pf-m-light-200	--pf-v5-c-drawer__content--BackgroundColor	#f0f0f0
--pf-v5-c-drawer__content--BackgroundColor --pf-v5-c-drawer__content--m-light-200--BackgroundColor --pf-v5-global--BackgroundColor--200 $pf-v5-global--BackgroundColor--200 $pf-v5-color-black-200 #f0f0f0
	.pf-v5-c-drawer__panel.pf-m-no-background	--pf-v5-c-drawer__panel--BackgroundColor	transparent
	.pf-v5-c-drawer__panel.pf-m-light-200	--pf-v5-c-drawer__panel--BackgroundColor	#f0f0f0
--pf-v5-c-drawer__panel--BackgroundColor --pf-v5-c-drawer__panel--m-light-200--BackgroundColor --pf-v5-global--BackgroundColor--200 $pf-v5-global--BackgroundColor--200 $pf-v5-color-black-200 #f0f0f0
	.pf-v5-c-drawer__splitter.pf-m-vertical	--pf-v5-c-drawer__splitter--Height	100%
--pf-v5-c-drawer__splitter--Height --pf-v5-c-drawer__splitter--m-vertical--Height 100%
	.pf-v5-c-drawer__splitter.pf-m-vertical	--pf-v5-c-drawer__splitter--Width	0.5625rem
--pf-v5-c-drawer__splitter--Width --pf-v5-c-drawer__splitter--m-vertical--Width 0.5625rem
	.pf-v5-c-drawer__splitter.pf-m-vertical	--pf-v5-c-drawer__splitter--Cursor	col-resize
--pf-v5-c-drawer__splitter--Cursor --pf-v5-c-drawer__splitter--m-vertical--Cursor col-resize
	.pf-v5-c-drawer__splitter.pf-m-vertical	--pf-v5-c-drawer__splitter-handle--after--Width	0.25rem
--pf-v5-c-drawer__splitter-handle--after--Width --pf-v5-c-drawer__splitter--m-vertical__splitter-handle--after--Width 0.25rem
	.pf-v5-c-drawer__splitter.pf-m-vertical	--pf-v5-c-drawer__splitter-handle--after--Height	0.75rem
--pf-v5-c-drawer__splitter-handle--after--Height --pf-v5-c-drawer__splitter--m-vertical__splitter-handle--after--Height 0.75rem
	.pf-v5-c-drawer__splitter.pf-m-vertical	--pf-v5-c-drawer__splitter-handle--after--BorderTopWidth	0
--pf-v5-c-drawer__splitter-handle--after--BorderTopWidth --pf-v5-c-drawer__splitter--m-vertical__splitter-handle--after--BorderTopWidth 0
	.pf-v5-c-drawer__splitter.pf-m-vertical	--pf-v5-c-drawer__splitter-handle--after--BorderRightWidth	1px
--pf-v5-c-drawer__splitter-handle--after--BorderRightWidth --pf-v5-c-drawer__splitter--m-vertical__splitter-handle--after--BorderRightWidth --pf-v5-global--BorderWidth--sm $pf-v5-global--BorderWidth--sm 1px
	.pf-v5-c-drawer__splitter.pf-m-vertical	--pf-v5-c-drawer__splitter-handle--after--BorderBottomWidth	0
--pf-v5-c-drawer__splitter-handle--after--BorderBottomWidth --pf-v5-c-drawer__splitter--m-vertical__splitter-handle--after--BorderBottomWidth 0
	.pf-v5-c-drawer__splitter.pf-m-vertical	--pf-v5-c-drawer__splitter-handle--after--BorderLeftWidth	1px
--pf-v5-c-drawer__splitter-handle--after--BorderLeftWidth --pf-v5-c-drawer__splitter--m-vertical__splitter-handle--after--BorderLeftWidth --pf-v5-global--BorderWidth--sm $pf-v5-global--BorderWidth--sm 1px
	.pf-v5-c-drawer__splitter:hover	--pf-v5-c-drawer__splitter-handle--after--BorderColor	#151515
--pf-v5-c-drawer__splitter-handle--after--BorderColor --pf-v5-c-drawer__splitter--hover__splitter-handle--after--BorderColor --pf-v5-global--Color--100 $pf-v5-global--Color--100 $pf-v5-color-black-900 #151515
	.pf-v5-c-drawer__splitter:focus	--pf-v5-c-drawer__splitter-handle--after--BorderColor	#151515
--pf-v5-c-drawer__splitter-handle--after--BorderColor --pf-v5-c-drawer__splitter--focus__splitter-handle--after--BorderColor --pf-v5-global--Color--100 $pf-v5-global--Color--100 $pf-v5-color-black-900 #151515

View source on GitHub