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 on right
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 left
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 on right
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 on left
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 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 on right
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 left
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 light-200 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.
Props
Drawer
| Name | Type | Default | Description |
|---|---|---|---|
| children | React.ReactNode | Content rendered in the left hand 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 | () => void | () => {} | Callback when drawer panel is expanded after waiting 250ms for animation to complete. |
| position | 'left' | 'right' | 'bottom' | 'right' | Position of the drawer panel |
DrawerContent
| 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' | 'default' | DrawerColorVariant.default | Color variant of the background of the drawer panel |
DrawerPanelContent
| 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' | 'default' | DrawerColorVariant.default | Color variant of the background of the drawer panel |
| defaultSize | string | The starting size of a resizable drawer, in either pixels or percentage. | |
| 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, in pixels. |
| isResizable | boolean | false | Flag indicating that the drawer panel should be resizable. |
| maxSize | string | The maximum size of a drawer, in either pixels or percentage. | |
| minSize | string | The minimum size of a drawer, in either pixels or percentage. | |
| onResize | (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
| 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
| 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
| 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' | 'default' | DrawerColorVariant.default | Color variant of the background of the drawer Section |
DrawerHead
| 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
| 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
| 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 |
CSS variables
| .pf-c-drawer | --pf-c-drawer__section--BackgroundColor | #fff | ||
| .pf-c-drawer | --pf-c-drawer__section--m-light-200--BackgroundColor | #f0f0f0 | ||
| .pf-c-drawer | --pf-c-drawer__content--FlexBasis | 100% | ||
| .pf-c-drawer | --pf-c-drawer__content--BackgroundColor | #fff | ||
| .pf-c-drawer | --pf-c-drawer__content--m-light-200--BackgroundColor | #f0f0f0 | ||
| .pf-c-drawer | --pf-c-drawer__content--ZIndex | 100 | ||
| .pf-c-drawer | --pf-c-drawer__panel--MinWidth | 50% | ||
| .pf-c-drawer | --pf-c-drawer__panel--MaxHeight | auto | ||
| .pf-c-drawer | --pf-c-drawer__panel--ZIndex | 200 | ||
| .pf-c-drawer | --pf-c-drawer__panel--BackgroundColor | #fff | ||
| .pf-c-drawer | --pf-c-drawer__panel--m-light-200--BackgroundColor | #f0f0f0 | ||
| .pf-c-drawer | --pf-c-drawer__panel--TransitionDuration | 250ms | ||
| .pf-c-drawer | --pf-c-drawer__panel--TransitionProperty | margin, transform, box-shadow, flex-basis | ||
| .pf-c-drawer | --pf-c-drawer__panel--FlexBasis | 100% | ||
| .pf-c-drawer | --pf-c-drawer__panel--md--FlexBasis--min | 1.5rem | ||
| .pf-c-drawer | --pf-c-drawer__panel--md--FlexBasis | 50% | ||
| .pf-c-drawer | --pf-c-drawer__panel--md--FlexBasis--max | 100% | ||
| .pf-c-drawer | --pf-c-drawer__panel--xl--MinWidth | 28.125rem | ||
| .pf-c-drawer | --pf-c-drawer__panel--xl--FlexBasis | 28.125rem | ||
| .pf-c-drawer | --pf-c-drawer--m-panel-bottom__panel--md--MinHeight | 50% | ||
| .pf-c-drawer | --pf-c-drawer--m-panel-bottom__panel--xl--MinHeight | 18.75rem | ||
| .pf-c-drawer | --pf-c-drawer--m-panel-bottom__panel--xl--FlexBasis | 18.75rem | ||
| .pf-c-drawer | --pf-c-drawer__panel--m-resizable--FlexDirection | row | ||
| .pf-c-drawer | --pf-c-drawer__panel--m-resizable--md--FlexBasis--min | 0.5625rem | ||
| .pf-c-drawer | --pf-c-drawer__panel--m-resizable--MinWidth | 1.5rem | ||
| .pf-c-drawer | --pf-c-drawer--m-panel-bottom__panel--m-resizable--FlexDirection | column | ||
| .pf-c-drawer | --pf-c-drawer--m-panel-bottom__panel--m-resizable--md--FlexBasis--min | 1.5rem | ||
| .pf-c-drawer | --pf-c-drawer--m-panel-bottom__panel--m-resizable--MinHeight | 1.5rem | ||
| .pf-c-drawer | --pf-c-drawer--child--PaddingTop | 1rem | ||
| .pf-c-drawer | --pf-c-drawer--child--PaddingRight | 1rem | ||
| .pf-c-drawer | --pf-c-drawer--child--PaddingBottom | 1rem | ||
| .pf-c-drawer | --pf-c-drawer--child--PaddingLeft | 1rem | ||
| .pf-c-drawer | --pf-c-drawer--child--md--PaddingTop | 1.5rem | ||
| .pf-c-drawer | --pf-c-drawer--child--md--PaddingRight | 1.5rem | ||
| .pf-c-drawer | --pf-c-drawer--child--md--PaddingBottom | 1.5rem | ||
| .pf-c-drawer | --pf-c-drawer--child--md--PaddingLeft | 1.5rem | ||
| .pf-c-drawer | --pf-c-drawer--child--m-padding--PaddingTop | 1rem | ||
| .pf-c-drawer | --pf-c-drawer--child--m-padding--PaddingRight | 1rem | ||
| .pf-c-drawer | --pf-c-drawer--child--m-padding--PaddingBottom | 1rem | ||
| .pf-c-drawer | --pf-c-drawer--child--m-padding--PaddingLeft | 1rem | ||
| .pf-c-drawer | --pf-c-drawer--child--m-padding--md--PaddingTop | 1.5rem | ||
| .pf-c-drawer | --pf-c-drawer--child--m-padding--md--PaddingRight | 1.5rem | ||
| .pf-c-drawer | --pf-c-drawer--child--m-padding--md--PaddingBottom | 1.5rem | ||
| .pf-c-drawer | --pf-c-drawer--child--m-padding--md--PaddingLeft | 1.5rem | ||
| .pf-c-drawer | --pf-c-drawer__content--child--PaddingTop | 0 | ||
| .pf-c-drawer | --pf-c-drawer__content--child--PaddingRight | 0 | ||
| .pf-c-drawer | --pf-c-drawer__content--child--PaddingBottom | 0 | ||
| .pf-c-drawer | --pf-c-drawer__content--child--PaddingLeft | 0 | ||
| .pf-c-drawer | --pf-c-drawer__splitter--Height | 0.5625rem | ||
| .pf-c-drawer | --pf-c-drawer__splitter--Width | 100% | ||
| .pf-c-drawer | --pf-c-drawer__splitter--BackgroundColor | #fff | ||
| .pf-c-drawer | --pf-c-drawer__splitter--Cursor | row-resize | ||
| .pf-c-drawer | --pf-c-drawer__splitter--m-vertical--Height | 100% | ||
| .pf-c-drawer | --pf-c-drawer__splitter--m-vertical--Width | 0.5625rem | ||
| .pf-c-drawer | --pf-c-drawer__splitter--m-vertical--Cursor | col-resize | ||
| .pf-c-drawer | --pf-c-drawer--m-inline__splitter--focus--OutlineOffset | -0.0625rem | ||
| .pf-c-drawer | --pf-c-drawer__splitter--after--BorderColor | #d2d2d2 | ||
| .pf-c-drawer | --pf-c-drawer__splitter--after--border-width--base | 1px | ||
| .pf-c-drawer | --pf-c-drawer__splitter--after--BorderTopWidth | 0 | ||
| .pf-c-drawer | --pf-c-drawer__splitter--after--BorderRightWidth | 1px | ||
| .pf-c-drawer | --pf-c-drawer__splitter--after--BorderBottomWidth | 0 | ||
| .pf-c-drawer | --pf-c-drawer__splitter--after--BorderLeftWidth | 0 | ||
| .pf-c-drawer | --pf-c-drawer--m-panel-left__splitter--after--BorderLeftWidth | 1px | ||
| .pf-c-drawer | --pf-c-drawer--m-panel-bottom__splitter--after--BorderBottomWidth | 1px | ||
| .pf-c-drawer | --pf-c-drawer--m-inline__splitter--m-vertical--Width | 0.625rem | ||
| .pf-c-drawer | --pf-c-drawer--m-inline__splitter-handle--Left | 50% | ||
| .pf-c-drawer | --pf-c-drawer--m-inline__splitter--after--BorderRightWidth | 1px | ||
| .pf-c-drawer | --pf-c-drawer--m-inline__splitter--after--BorderLeftWidth | 1px | ||
| .pf-c-drawer | --pf-c-drawer--m-inline--m-panel-bottom__splitter--Height | 0.625rem | ||
| .pf-c-drawer | --pf-c-drawer--m-inline--m-panel-bottom__splitter-handle--Top | 50% | ||
| .pf-c-drawer | --pf-c-drawer--m-inline--m-panel-bottom__splitter--after--BorderTopWidth | 1px | ||
| .pf-c-drawer | --pf-c-drawer__splitter-handle--Top | 50% | ||
| .pf-c-drawer | --pf-c-drawer__splitter-handle--Left | calc(50% - 1px) | ||
| .pf-c-drawer | --pf-c-drawer--m-panel-left__splitter-handle--Left | 50% | ||
| .pf-c-drawer | --pf-c-drawer--m-panel-bottom__splitter-handle--Top | calc(50% - 1px) | ||
| .pf-c-drawer | --pf-c-drawer__splitter-handle--after--BorderColor | #6a6e73 | ||
| .pf-c-drawer | --pf-c-drawer__splitter-handle--after--BorderTopWidth | 1px | ||
| .pf-c-drawer | --pf-c-drawer__splitter-handle--after--BorderRightWidth | 0 | ||
| .pf-c-drawer | --pf-c-drawer__splitter-handle--after--BorderBottomWidth | 1px | ||
| .pf-c-drawer | --pf-c-drawer__splitter-handle--after--BorderLeftWidth | 0 | ||
| .pf-c-drawer | --pf-c-drawer__splitter--hover__splitter-handle--after--BorderColor | #151515 | ||
| .pf-c-drawer | --pf-c-drawer__splitter--focus__splitter-handle--after--BorderColor | #151515 | ||
| .pf-c-drawer | --pf-c-drawer__splitter--m-vertical__splitter-handle--after--BorderTopWidth | 0 | ||
| .pf-c-drawer | --pf-c-drawer__splitter--m-vertical__splitter-handle--after--BorderRightWidth | 1px | ||
| .pf-c-drawer | --pf-c-drawer__splitter--m-vertical__splitter-handle--after--BorderBottomWidth | 0 | ||
| .pf-c-drawer | --pf-c-drawer__splitter--m-vertical__splitter-handle--after--BorderLeftWidth | 1px | ||
| .pf-c-drawer | --pf-c-drawer__splitter-handle--after--Width | 0.75rem | ||
| .pf-c-drawer | --pf-c-drawer__splitter-handle--after--Height | 0.25rem | ||
| .pf-c-drawer | --pf-c-drawer__splitter--m-vertical__splitter-handle--after--Width | 0.25rem | ||
| .pf-c-drawer | --pf-c-drawer__splitter--m-vertical__splitter-handle--after--Height | 0.75rem | ||
| .pf-c-drawer | --pf-c-drawer__actions--MarginTop | calc(0.375rem * -1) | ||
| .pf-c-drawer | --pf-c-drawer__actions--MarginRight | calc(0.375rem * -1) | ||
| .pf-c-drawer | --pf-c-drawer__panel--BoxShadow | none | ||
| .pf-c-drawer | --pf-c-drawer--m-expanded__panel--BoxShadow | -0.75rem 0 0.75rem -0.5rem rgba(3, 3, 3, 0.18) | ||
| .pf-c-drawer | --pf-c-drawer--m-expanded--m-panel-left__panel--BoxShadow | 0.75rem 0 0.75rem -0.5rem rgba(3, 3, 3, 0.18) | ||
| .pf-c-drawer | --pf-c-drawer--m-expanded--m-panel-bottom__panel--BoxShadow | 0 -0.75rem 0.75rem -0.5rem rgba(3, 3, 3, 0.18) | ||
| .pf-c-drawer | --pf-c-drawer__panel--after--Width | 1px | ||
| .pf-c-drawer | --pf-c-drawer--m-panel-bottom__panel--after--Height | 1px | ||
| .pf-c-drawer | --pf-c-drawer__panel--after--BackgroundColor | transparent | ||
| .pf-c-drawer | --pf-c-drawer--m-inline--m-expanded__panel--after--BackgroundColor | #d2d2d2 | ||
| .pf-c-drawer | --pf-c-drawer--m-inline__panel--PaddingLeft | 1px | ||
| .pf-c-drawer | --pf-c-drawer--m-panel-left--m-inline__panel--PaddingRight | 1px | ||
| .pf-c-drawer | --pf-c-drawer--m-panel-bottom--m-inline__panel--PaddingTop | 1px | ||
| .pf-c-drawer.pf-m-resizing | --pf-c-drawer__panel--TransitionProperty | none | ||
| .pf-c-drawer__section.pf-m-no-background | --pf-c-drawer__section--BackgroundColor | transparent | ||
| .pf-c-drawer__section.pf-m-light-200 | --pf-c-drawer__section--BackgroundColor | #f0f0f0 | ||
| .pf-c-drawer__content.pf-m-no-background | --pf-c-drawer__content--BackgroundColor | transparent | ||
| .pf-c-drawer__content.pf-m-light-200 | --pf-c-drawer__content--BackgroundColor | #f0f0f0 | ||
| .pf-c-drawer__panel.pf-m-no-background | --pf-c-drawer__panel--BackgroundColor | transparent | ||
| .pf-c-drawer__panel.pf-m-light-200 | --pf-c-drawer__panel--BackgroundColor | #f0f0f0 | ||
| .pf-c-drawer__splitter.pf-m-vertical | --pf-c-drawer__splitter--Height | 100% | ||
| .pf-c-drawer__splitter.pf-m-vertical | --pf-c-drawer__splitter--Width | 0.5625rem | ||
| .pf-c-drawer__splitter.pf-m-vertical | --pf-c-drawer__splitter--Cursor | col-resize | ||
| .pf-c-drawer__splitter.pf-m-vertical | --pf-c-drawer__splitter-handle--after--Width | 0.25rem | ||
| .pf-c-drawer__splitter.pf-m-vertical | --pf-c-drawer__splitter-handle--after--Height | 0.75rem | ||
| .pf-c-drawer__splitter.pf-m-vertical | --pf-c-drawer__splitter-handle--after--BorderTopWidth | 0 | ||
| .pf-c-drawer__splitter.pf-m-vertical | --pf-c-drawer__splitter-handle--after--BorderRightWidth | 1px | ||
| .pf-c-drawer__splitter.pf-m-vertical | --pf-c-drawer__splitter-handle--after--BorderBottomWidth | 0 | ||
| .pf-c-drawer__splitter.pf-m-vertical | --pf-c-drawer__splitter-handle--after--BorderLeftWidth | 1px | ||
| .pf-c-drawer__splitter:hover | --pf-c-drawer__splitter-handle--after--BorderColor | #151515 | ||
| .pf-c-drawer__splitter:focus | --pf-c-drawer__splitter-handle--after--BorderColor | #151515 | ||
View source on GitHub
