PatternFly

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

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 start

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 on bottom

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.

Basic inline

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.

Inline panel at end

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.

Inline panel at start

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.

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

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.

Additional section above drawer content

drawer-section
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.

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.

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.
drawer-panel

Breakpoint

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.

Resizable at end

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.

Resizable at start

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.

Resizable on bottom

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.

Resizable on inline

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 with secondary background


drawer-section
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.

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.

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.

Props

Drawer

*required
NameTypeDefaultDescription
childrenReact.ReactNodeContent rendered in the drawer panel
classNamestring''Additional classes added to the Drawer.
isExpandedbooleanfalseIndicates if the drawer is expanded
isInlinebooleanfalseIndicates if the content element and panel element are displayed side by side.
isStaticbooleanfalseIndicates 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
NameTypeDefaultDescription
panelContentrequiredReact.ReactNodeContent rendered in the drawer panel.
childrenReact.ReactNodeContent to be rendered in the drawer.
classNamestring''Additional classes added to the Drawer.
colorVariantDrawerColorVariant | 'light-200' | 'no-background' | 'default'DrawerColorVariant.defaultColor variant of the background of the drawer panel

DrawerPanelContent

*required
NameTypeDefaultDescription
childrenReact.ReactNodeContent to be rendered in the drawer panel.
classNamestring''Additional classes added to the drawer.
colorVariantDrawerColorVariant | 'light-200' | 'no-background' | 'default'DrawerColorVariant.defaultColor variant of the background of the drawer panel
defaultSizestringThe starting size of a resizable drawer, in either pixels or percentage.
focusTrapDrawerPanelFocusTrapObjectAdds and customizes a focus trap on the drawer panel content.
hasNoBorderbooleanfalseFlag indicating that the drawer panel should not have a border.
idstringID of the drawer panel
incrementnumber5The increment amount for keyboard drawer resizing, in pixels.
isResizablebooleanfalseFlag indicating that the drawer panel should be resizable.
maxSizestringThe maximum size of a drawer, in either pixels or percentage.
minSizestringThe minimum size of a drawer, in either pixels or percentage.
onResize(event: MouseEvent | TouchEvent | React.KeyboardEvent, width: number, id: string) => voidCallback for resize end.
resizeAriaLabelstring'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
NameTypeDefaultDescription
childrenReact.ReactNodeContent to be rendered in the drawer
classNamestring''Additional classes added to the Drawer.
hasPaddingbooleanfalseIndicates if there should be padding around the drawer content body

DrawerPanelBody

*required
NameTypeDefaultDescription
childrenReact.ReactNodeContent to be rendered in the drawer
classNamestring''Additional classes added to the Drawer.
hasNoPaddingbooleanfalseIndicates if there should be no padding around the drawer panel body

DrawerSection

*required
NameTypeDefaultDescription
childrenReact.ReactNodeContent to be rendered in the drawer section.
classNamestring''Additional classes added to the drawer section.
colorVariantDrawerColorVariant | 'light-200' | 'no-background' | 'default'DrawerColorVariant.defaultColor variant of the background of the drawer Section

DrawerHead

*required
NameTypeDefaultDescription
childrenReact.ReactNodeContent to be rendered in the drawer head
classNamestring''Additional classes added to the drawer head.
hasNoPaddingbooleanfalseIndicates if there should be no padding around the drawer panel body of the head

DrawerActions

*required
NameTypeDefaultDescription
childrenReact.ReactNodeActions to be rendered in the panel head.
classNamestring''Additional classes added to the drawer actions button.

DrawerCloseButton

*required
NameTypeDefaultDescription
aria-labelstring'Close drawer panel'Accessible label for the drawer close button
classNamestring''Additional classes added to the drawer close button outer <div>.
onClose() => void() => undefined as anyA callback for when the close button is clicked

DrawerPanelFocusTrapObject

*required
NameTypeDefaultDescription
elementToFocusOnExpandHTMLElement | SVGElement | stringThe 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.
enabledbooleanEnables 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.
UnknownstringOne or more id's to use for the drawer panel content's accessible label.

CSS variables

SelectorVariableValue
.pf-v5-c-drawer--pf-v5-c-drawer__section--BackgroundColor
#fff
.pf-v5-c-drawer--pf-v5-c-drawer__section--m-light-200--BackgroundColor
#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--pf-v5-c-drawer__content--m-light-200--BackgroundColor
#f0f0f0
.pf-v5-c-drawer--pf-v5-c-drawer__content--ZIndex
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--pf-v5-c-drawer__panel--BackgroundColor
#fff
.pf-v5-c-drawer--pf-v5-c-drawer__panel--m-light-200--BackgroundColor
#f0f0f0
.pf-v5-c-drawer--pf-v5-c-drawer__panel--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--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--pf-v5-c-drawer--child--PaddingRight
1rem
.pf-v5-c-drawer--pf-v5-c-drawer--child--PaddingBottom
1rem
.pf-v5-c-drawer--pf-v5-c-drawer--child--PaddingLeft
1rem
.pf-v5-c-drawer--pf-v5-c-drawer--child--md--PaddingTop
1.5rem
.pf-v5-c-drawer--pf-v5-c-drawer--child--md--PaddingRight
1.5rem
.pf-v5-c-drawer--pf-v5-c-drawer--child--md--PaddingBottom
1.5rem
.pf-v5-c-drawer--pf-v5-c-drawer--child--md--PaddingLeft
1.5rem
.pf-v5-c-drawer--pf-v5-c-drawer--child--m-padding--PaddingTop
1rem
.pf-v5-c-drawer--pf-v5-c-drawer--child--m-padding--PaddingRight
1rem
.pf-v5-c-drawer--pf-v5-c-drawer--child--m-padding--PaddingBottom
1rem
.pf-v5-c-drawer--pf-v5-c-drawer--child--m-padding--PaddingLeft
1rem
.pf-v5-c-drawer--pf-v5-c-drawer--child--m-padding--md--PaddingTop
1.5rem
.pf-v5-c-drawer--pf-v5-c-drawer--child--m-padding--md--PaddingRight
1.5rem
.pf-v5-c-drawer--pf-v5-c-drawer--child--m-padding--md--PaddingBottom
1.5rem
.pf-v5-c-drawer--pf-v5-c-drawer--child--m-padding--md--PaddingLeft
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--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--pf-v5-c-drawer__splitter--after--border-width--base
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--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--pf-v5-c-drawer--m-panel-bottom__splitter--after--BorderBottomWidth
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--pf-v5-c-drawer--m-inline__splitter--after--BorderLeftWidth
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--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--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--pf-v5-c-drawer__splitter-handle--after--BorderColor
#6a6e73
.pf-v5-c-drawer--pf-v5-c-drawer__splitter-handle--after--BorderTopWidth
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--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--pf-v5-c-drawer__splitter--focus__splitter-handle--after--BorderColor
#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--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--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--pf-v5-c-drawer__actions--MarginRight
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--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--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--pf-v5-c-drawer__panel--after--Width
1px
.pf-v5-c-drawer--pf-v5-c-drawer--m-panel-bottom__panel--after--Height
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--pf-v5-c-drawer--m-inline__panel--PaddingLeft
1px
.pf-v5-c-drawer--pf-v5-c-drawer--m-panel-left--m-inline__panel--PaddingRight
1px
.pf-v5-c-drawer--pf-v5-c-drawer--m-panel-bottom--m-inline__panel--PaddingTop
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)
: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.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__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__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__splitter.pf-m-vertical--pf-v5-c-drawer__splitter--Height
100%
.pf-v5-c-drawer__splitter.pf-m-vertical--pf-v5-c-drawer__splitter--Width
0.5625rem
.pf-v5-c-drawer__splitter.pf-m-vertical--pf-v5-c-drawer__splitter--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.pf-m-vertical--pf-v5-c-drawer__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.pf-m-vertical--pf-v5-c-drawer__splitter-handle--after--BorderRightWidth
1px
.pf-v5-c-drawer__splitter.pf-m-vertical--pf-v5-c-drawer__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:hover--pf-v5-c-drawer__splitter-handle--after--BorderColor
#151515
.pf-v5-c-drawer__splitter:focus--pf-v5-c-drawer__splitter-handle--after--BorderColor
#151515

View source on GitHub