Examples
Basic
Notifications
3 unread- unread
Info notification:Unread info notification title
This is an info notification description. - unread
Danger notification:Unread danger notification title. This is a long title to show how the title will wrap if it is long and wraps to multiple lines.
This is a danger notification description. This is a long description to show how the title will wrap if it is long and wraps to multiple lines. - unread
Danger notification:Unread danger notification title. This is a long title to show how the title will be truncated if it is long and will be shown in a single line.
This is a danger notification description. This is a long description to show how the title will wrap if it is long and wraps to multiple lines. - read
Warning notification:Read warning notification title
This is a warning notification description. - read
Success notification:Read success notification title
This is a success notification description. - read
notification:Read (default) notification title
This is a default notification description.
Groups
Notifications
4 unread- unread
Info notification:Unread info notification title
This is an info notification description. - unread
Danger notification:Unread danger notification title. This is a long title to show how the title will wrap if it is long and wraps to multiple lines.
This is a danger notification description. This is a long description to show how the title will wrap if it is long and wraps to multiple lines. - read
Warning notification:Read warning notification title
This is a warning notification description. - read
Success notification:Read success notification title
This is a success notification description.
No alerts found
There are currently no critical alerts firing. There may be firing alerts of other severities or silenced critical alerts however.
Lightweight
Notifications
- unread
Info notification:Info notification title
This is an info notification description. - unread
Danger notification:Danger notification title. This is a long title to show how the title will wrap if it is long and wraps to multiple lines.
This is a danger notification description. This is a long description to show how the title will wrap if it is long and wraps to multiple lines. - unread
Warning notification:Warning notification title
This is a warning notification description. - unread
Success notification:Success notification title
This is a success notification description.
No alerts found
There are currently no critical alerts firing. There may be firing alerts of other severities or silenced critical alerts however.
Props
NotificationDrawer
| Name | Type | Default | Description |
|---|---|---|---|
| children | React.ReactNode | Content rendered inside the notification drawer | |
| className | string | Additional classes added to the notification drawer |
NotificationDrawerBody
| Name | Type | Default | Description |
|---|---|---|---|
| children | React.ReactNode | Content rendered inside the body of the notification drawer | |
| className | string | '' | Additional classes added to the notification drawer body |
NotificationDrawerHeader
| Name | Type | Default | Description |
|---|---|---|---|
| children | React.ReactNode | Content rendered inside the drawer | |
| className | string | '' | Additional classes for notification drawer header. |
| closeButtonAriaLabel | string | 'Close' | Adds custom accessible text to the notification drawer close button. |
| count | number | Notification drawer heading count | |
| customText | string | Notification drawer heading custom text which can be used instead of providing count/unreadText | |
| onClose | (event: KeyboardEvent | React.MouseEvent) => void | Callback for when close button is clicked | |
| title | string | 'Notifications' | Notification drawer heading title |
| unreadText | string | 'unread' | Notification drawer heading unread text used in combination with a count |
NotificationDrawerGroup
| Name | Type | Default | Description |
|---|---|---|---|
| countrequired | number | Notification drawer group count | |
| isExpandedrequired | boolean | Adds styling to the group to indicate expanded state | |
| titlerequired | string | React.ReactNode | Notification drawer group title | |
| children | React.ReactNode | Content rendered inside the group | |
| className | string | '' | Additional classes added to the group |
| headingLevel | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'h1' | Sets the heading level to use for the group title. Default is h1. |
| isRead | boolean | false | Adds styling to the group to indicate whether it has been read |
| onExpand | (event: any, value: boolean) => void | (event: any, expanded: boolean) => undefined as any | Callback for when group button is clicked to expand |
| tooltipPosition | | TooltipPosition | 'auto' | 'top' | 'bottom' | 'left' | 'right' | 'top-start' | 'top-end' | 'bottom-start' | 'bottom-end' | 'left-start' | 'left-end' | 'right-start' | 'right-end' | Position of the tooltip which is displayed if text is truncated | |
| truncateTitle | number | 0 | Truncate title to number of lines |
NotificationDrawerGroupList
| Name | Type | Default | Description |
|---|---|---|---|
| children | React.ReactNode | Content rendered inside the notification drawer list body | |
| className | string | '' | Additional classes added to the notification drawer list body |
NotificationDrawerList
| Name | Type | Default | Description |
|---|---|---|---|
| aria-label | string | Adds an accessible label to the notification drawer list. | |
| children | React.ReactNode | Content rendered inside the notification drawer list body | |
| className | string | '' | Additional classes added to the notification drawer list body |
| isHidden | boolean | false | Adds styling to the notification drawer list to indicate expand/hide state |
NotificationDrawerListItem
| Name | Type | Default | Description |
|---|---|---|---|
| children | React.ReactNode | null | Content rendered inside the list item |
| className | string | '' | Additional classes added to the list item |
| isHoverable | boolean | true | Modifies the list item to include hover styles on :hover |
| isRead | boolean | false | Adds styling to the list item to indicate it has been read |
| onClick | (event: any) => void | (event: React.MouseEvent) => undefined as any | Callback for when a list item is clicked |
| readStateScreenReaderText | string | Visually hidden text that conveys the current read state of the notification list item | |
| tabIndex | number | 0 | Tab index for the list item |
| variant | 'custom' | 'success' | 'danger' | 'warning' | 'info' | 'custom' | Variant indicates the severity level |
NotificationDrawerListItemBody
| Name | Type | Default | Description |
|---|---|---|---|
| children | React.ReactNode | Content rendered inside the list item body | |
| className | string | '' | Additional classes added to the list item body |
| timestamp | React.ReactNode | List item timestamp |
NotificationDrawerListItemHeader
| Name | Type | Default | Description |
|---|---|---|---|
| titlerequired | string | Notification drawer list item title | |
| children | React.ReactNode | Actions rendered inside the notification drawer list item header | |
| className | string | '' | Additional classes for notification drawer list item header. |
| headingLevel | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'h2' | Sets the heading level to use for the list item header title. Default is h2. |
| icon | React.ReactNode | null | Add custom icon for notification drawer list item header |
| srTitle | string | Notification drawer list item header screen reader title | |
| tooltipPosition | | TooltipPosition | 'auto' | 'top' | 'bottom' | 'left' | 'right' | 'top-start' | 'top-end' | 'bottom-start' | 'bottom-end' | 'left-start' | 'left-end' | 'right-start' | 'right-end' | Position of the tooltip which is displayed if text is truncated | |
| truncateTitle | number | 0 | Truncate title to number of lines |
| variant | 'success' | 'danger' | 'warning' | 'info' | 'custom' | 'custom' | Variant indicates the severity level |
CSS variables
| Expand or collapse column | Selector | Variable | Value | |
|---|---|---|---|---|
| .pf-v5-c-notification-drawer | --pf-v5-c-notification-drawer--BackgroundColor | #f0f0f0 | ||
--pf-v5-c-notification-drawer--BackgroundColor --pf-v5-global--BackgroundColor--200 $pf-v5-global--BackgroundColor--200 $pf-v5-color-black-200 #f0f0f0 | ||||
| .pf-v5-c-notification-drawer | --pf-v5-c-notification-drawer__header--PaddingTop | 1rem | ||
--pf-v5-c-notification-drawer__header--PaddingTop --pf-v5-global--spacer--md $pf-v5-global--spacer--md pf-size-prem(16px) 1rem | ||||
| .pf-v5-c-notification-drawer | --pf-v5-c-notification-drawer__header--PaddingRight | 1rem | ||
--pf-v5-c-notification-drawer__header--PaddingRight --pf-v5-global--spacer--md $pf-v5-global--spacer--md pf-size-prem(16px) 1rem | ||||
| .pf-v5-c-notification-drawer | --pf-v5-c-notification-drawer__header--PaddingBottom | 1rem | ||
--pf-v5-c-notification-drawer__header--PaddingBottom --pf-v5-global--spacer--md $pf-v5-global--spacer--md pf-size-prem(16px) 1rem | ||||
| .pf-v5-c-notification-drawer | --pf-v5-c-notification-drawer__header--PaddingLeft | 1rem | ||
--pf-v5-c-notification-drawer__header--PaddingLeft --pf-v5-global--spacer--md $pf-v5-global--spacer--md pf-size-prem(16px) 1rem | ||||
| .pf-v5-c-notification-drawer | --pf-v5-c-notification-drawer__header--BackgroundColor | #fff | ||
--pf-v5-c-notification-drawer__header--BackgroundColor --pf-v5-global--BackgroundColor--100 $pf-v5-global--BackgroundColor--100 $pf-v5-color-white #fff | ||||
| .pf-v5-c-notification-drawer | --pf-v5-c-notification-drawer__header--BoxShadow | 0 0.125rem 0.25rem -0.0625rem rgba(3, 3, 3, 0.16) | ||
--pf-v5-c-notification-drawer__header--BoxShadow --pf-v5-global--BoxShadow--sm-bottom $pf-v5-global--BoxShadow--sm-bottom 0 pf-size-prem(2px) pf-size-prem(4px) pf-size-prem(-1px) rgba($pf-v5-color-black-1000, .16) 0 pf-size-prem(2px) pf-size-prem(4px) pf-size-prem(-1px) rgba(#030303, .16) 0 0.125rem 0.25rem -0.0625rem rgba(3, 3, 3, 0.16) | ||||
| .pf-v5-c-notification-drawer | --pf-v5-c-notification-drawer__header--ZIndex | 200 | ||
--pf-v5-c-notification-drawer__header--ZIndex --pf-v5-global--ZIndex--sm $pf-v5-global--ZIndex--sm 200 | ||||
| .pf-v5-c-notification-drawer | --pf-v5-c-notification-drawer__header-title--FontSize | 1.25rem | ||
--pf-v5-c-notification-drawer__header-title--FontSize --pf-v5-global--FontSize--xl $pf-v5-global--FontSize--xl pf-font-prem(20px) 1.25rem | ||||
| .pf-v5-c-notification-drawer | --pf-v5-c-notification-drawer__header-status--MarginLeft | 1rem | ||
--pf-v5-c-notification-drawer__header-status--MarginLeft --pf-v5-global--spacer--md $pf-v5-global--spacer--md pf-size-prem(16px) 1rem | ||||
| .pf-v5-c-notification-drawer | --pf-v5-c-notification-drawer__body--ZIndex | 100 | ||
--pf-v5-c-notification-drawer__body--ZIndex --pf-v5-global--ZIndex--xs $pf-v5-global--ZIndex--xs 100 | ||||
| .pf-v5-c-notification-drawer | --pf-v5-c-notification-drawer__list-item--PaddingTop | 1rem | ||
--pf-v5-c-notification-drawer__list-item--PaddingTop --pf-v5-global--spacer--md $pf-v5-global--spacer--md pf-size-prem(16px) 1rem | ||||
| .pf-v5-c-notification-drawer | --pf-v5-c-notification-drawer__list-item--PaddingRight | 1rem | ||
--pf-v5-c-notification-drawer__list-item--PaddingRight --pf-v5-global--spacer--md $pf-v5-global--spacer--md pf-size-prem(16px) 1rem | ||||
| .pf-v5-c-notification-drawer | --pf-v5-c-notification-drawer__list-item--PaddingBottom | 1rem | ||
--pf-v5-c-notification-drawer__list-item--PaddingBottom --pf-v5-global--spacer--md $pf-v5-global--spacer--md pf-size-prem(16px) 1rem | ||||
| .pf-v5-c-notification-drawer | --pf-v5-c-notification-drawer__list-item--PaddingLeft | 1rem | ||
--pf-v5-c-notification-drawer__list-item--PaddingLeft --pf-v5-global--spacer--md $pf-v5-global--spacer--md pf-size-prem(16px) 1rem | ||||
| .pf-v5-c-notification-drawer | --pf-v5-c-notification-drawer__list-item--BackgroundColor | #fff | ||
--pf-v5-c-notification-drawer__list-item--BackgroundColor --pf-v5-global--BackgroundColor--100 $pf-v5-global--BackgroundColor--100 $pf-v5-color-white #fff | ||||
| .pf-v5-c-notification-drawer | --pf-v5-c-notification-drawer__list-item--BoxShadow | inset 0 0.125rem 0.25rem -0.0625rem rgba(3, 3, 3, 0.16) | ||
--pf-v5-c-notification-drawer__list-item--BoxShadow inset --pf-v5-global--BoxShadow--sm-bottom inset $pf-v5-global--BoxShadow--sm-bottom inset 0 pf-size-prem(2px) pf-size-prem(4px) pf-size-prem(-1px) rgba($pf-v5-color-black-1000, .16) inset 0 pf-size-prem(2px) pf-size-prem(4px) pf-size-prem(-1px) rgba(#030303, .16) inset 0 0.125rem 0.25rem -0.0625rem rgba(3, 3, 3, 0.16) | ||||
| .pf-v5-c-notification-drawer | --pf-v5-c-notification-drawer__list-item--BorderBottomWidth | 1px | ||
--pf-v5-c-notification-drawer__list-item--BorderBottomWidth --pf-v5-global--BorderWidth--sm $pf-v5-global--BorderWidth--sm 1px | ||||
| .pf-v5-c-notification-drawer | --pf-v5-c-notification-drawer__list-item--BorderBottomColor | transparent | ||
| .pf-v5-c-notification-drawer | --pf-v5-c-notification-drawer__list-item--OutlineOffset | -0.25rem | ||
| .pf-v5-c-notification-drawer | --pf-v5-c-notification-drawer__list-item--before--Width | 3px | ||
--pf-v5-c-notification-drawer__list-item--before--Width --pf-v5-global--BorderWidth--lg $pf-v5-global--BorderWidth--lg 3px | ||||
| .pf-v5-c-notification-drawer | --pf-v5-c-notification-drawer__list-item--before--Top | 0 | ||
| .pf-v5-c-notification-drawer | --pf-v5-c-notification-drawer__list-item--before--Bottom | calc(1px * -1) | ||
--pf-v5-c-notification-drawer__list-item--before--Bottom calc(--pf-v5-c-notification-drawer__list-item--BorderBottomWidth * -1) calc(--pf-v5-global--BorderWidth--sm * -1) calc($pf-v5-global--BorderWidth--sm * -1) calc(1px * -1) | ||||
| .pf-v5-c-notification-drawer | --pf-v5-c-notification-drawer__list-item--m-info__list-item-header-icon--Color | #2b9af3 | ||
--pf-v5-c-notification-drawer__list-item--m-info__list-item-header-icon--Color --pf-v5-global--info-color--100 $pf-v5-global--info-color--100 $pf-v5-color-blue-300 #2b9af3 | ||||
| .pf-v5-c-notification-drawer | --pf-v5-c-notification-drawer__list-item--m-info__list-item--before--BackgroundColor | #2b9af3 | ||
--pf-v5-c-notification-drawer__list-item--m-info__list-item--before--BackgroundColor --pf-v5-global--info-color--100 $pf-v5-global--info-color--100 $pf-v5-color-blue-300 #2b9af3 | ||||
| .pf-v5-c-notification-drawer | --pf-v5-c-notification-drawer__list-item--m-warning__list-item-header-icon--Color | #f0ab00 | ||
--pf-v5-c-notification-drawer__list-item--m-warning__list-item-header-icon--Color --pf-v5-global--warning-color--100 $pf-v5-global--warning-color--100 $pf-v5-color-gold-400 #f0ab00 | ||||
| .pf-v5-c-notification-drawer | --pf-v5-c-notification-drawer__list-item--m-warning__list-item--before--BackgroundColor | #f0ab00 | ||
--pf-v5-c-notification-drawer__list-item--m-warning__list-item--before--BackgroundColor --pf-v5-global--warning-color--100 $pf-v5-global--warning-color--100 $pf-v5-color-gold-400 #f0ab00 | ||||
| .pf-v5-c-notification-drawer | --pf-v5-c-notification-drawer__list-item--m-danger__list-item-header-icon--Color | #c9190b | ||
--pf-v5-c-notification-drawer__list-item--m-danger__list-item-header-icon--Color --pf-v5-global--danger-color--100 $pf-v5-global--danger-color--100 $pf-v5-color-red-100 #c9190b | ||||
| .pf-v5-c-notification-drawer | --pf-v5-c-notification-drawer__list-item--m-danger__list-item--before--BackgroundColor | #c9190b | ||
--pf-v5-c-notification-drawer__list-item--m-danger__list-item--before--BackgroundColor --pf-v5-global--danger-color--100 $pf-v5-global--danger-color--100 $pf-v5-color-red-100 #c9190b | ||||
| .pf-v5-c-notification-drawer | --pf-v5-c-notification-drawer__list-item--m-success__list-item-header-icon--Color | #3e8635 | ||
--pf-v5-c-notification-drawer__list-item--m-success__list-item-header-icon--Color --pf-v5-global--success-color--100 $pf-v5-global--success-color--100 $pf-v5-color-green-500 #3e8635 | ||||
| .pf-v5-c-notification-drawer | --pf-v5-c-notification-drawer__list-item--m-success__list-item--before--BackgroundColor | #3e8635 | ||
--pf-v5-c-notification-drawer__list-item--m-success__list-item--before--BackgroundColor --pf-v5-global--success-color--100 $pf-v5-global--success-color--100 $pf-v5-color-green-500 #3e8635 | ||||
| .pf-v5-c-notification-drawer | --pf-v5-c-notification-drawer__list-item--m-custom__list-item-header-icon--Color | #009596 | ||
--pf-v5-c-notification-drawer__list-item--m-custom__list-item-header-icon--Color --pf-v5-global--custom-color--200 $pf-v5-global--custom-color--200 $pf-v5-color-cyan-300 #009596 | ||||
| .pf-v5-c-notification-drawer | --pf-v5-c-notification-drawer__list-item--m-custom__list-item--before--BackgroundColor | #009596 | ||
--pf-v5-c-notification-drawer__list-item--m-custom__list-item--before--BackgroundColor --pf-v5-global--custom-color--200 $pf-v5-global--custom-color--200 $pf-v5-color-cyan-300 #009596 | ||||
| .pf-v5-c-notification-drawer | --pf-v5-c-notification-drawer__list-item--m-read--BackgroundColor | #f0f0f0 | ||
--pf-v5-c-notification-drawer__list-item--m-read--BackgroundColor --pf-v5-global--BackgroundColor--200 $pf-v5-global--BackgroundColor--200 $pf-v5-color-black-200 #f0f0f0 | ||||
| .pf-v5-c-notification-drawer | --pf-v5-c-notification-drawer__list-item--m-read--BorderBottomColor | #d2d2d2 | ||
--pf-v5-c-notification-drawer__list-item--m-read--BorderBottomColor --pf-v5-global--BorderColor--100 $pf-v5-global--BorderColor--100 $pf-v5-color-black-300 #d2d2d2 | ||||
| .pf-v5-c-notification-drawer | --pf-v5-c-notification-drawer__list-item--m-read--before--Top | calc(1px * -1) | ||
--pf-v5-c-notification-drawer__list-item--m-read--before--Top calc(--pf-v5-c-notification-drawer__list-item--BorderBottomWidth * -1) calc(--pf-v5-global--BorderWidth--sm * -1) calc($pf-v5-global--BorderWidth--sm * -1) calc(1px * -1) | ||||
| .pf-v5-c-notification-drawer | --pf-v5-c-notification-drawer__list-item--m-read--before--Bottom | 0 | ||
| .pf-v5-c-notification-drawer | --pf-v5-c-notification-drawer__list-item--m-read--before--BackgroundColor | transparent | ||
| .pf-v5-c-notification-drawer | --pf-v5-c-notification-drawer__list-item--list-item--m-read--before--Top | 0 | ||
| .pf-v5-c-notification-drawer | --pf-v5-c-notification-drawer__list-item--list-item--m-read--BoxShadow | inset 0 0.125rem 0.25rem -0.0625rem rgba(3, 3, 3, 0.16) | ||
--pf-v5-c-notification-drawer__list-item--list-item--m-read--BoxShadow inset --pf-v5-global--BoxShadow--sm-bottom inset $pf-v5-global--BoxShadow--sm-bottom inset 0 pf-size-prem(2px) pf-size-prem(4px) pf-size-prem(-1px) rgba($pf-v5-color-black-1000, .16) inset 0 pf-size-prem(2px) pf-size-prem(4px) pf-size-prem(-1px) rgba(#030303, .16) inset 0 0.125rem 0.25rem -0.0625rem rgba(3, 3, 3, 0.16) | ||||
| .pf-v5-c-notification-drawer | --pf-v5-c-notification-drawer__list-item--m-hoverable--hover--ZIndex | 100 | ||
--pf-v5-c-notification-drawer__list-item--m-hoverable--hover--ZIndex --pf-v5-global--ZIndex--xs $pf-v5-global--ZIndex--xs 100 | ||||
| .pf-v5-c-notification-drawer | --pf-v5-c-notification-drawer__list-item--m-hoverable--hover--BoxShadow | 0 -0.5rem 0.5rem -0.375rem rgba(3, 3, 3, 0.18), 0 0.5rem 0.5rem -0.375rem rgba(3, 3, 3, 0.18) | ||
--pf-v5-c-notification-drawer__list-item--m-hoverable--hover--BoxShadow --pf-v5-global--BoxShadow--md-top, --pf-v5-global--BoxShadow--md-bottom $pf-v5-global--BoxShadow--md-top, $pf-v5-global--BoxShadow--md-bottom 0 pf-size-prem(-8px) pf-size-prem(8px) pf-size-prem(-6px) rgba($pf-v5-color-black-1000, .18), 0 pf-size-prem(8px) pf-size-prem(8px) pf-size-prem(-6px) rgba($pf-v5-color-black-1000, .18) 0 pf-size-prem(-8px) pf-size-prem(8px) pf-size-prem(-6px) rgba(#030303, .18), 0 pf-size-prem(8px) pf-size-prem(8px) pf-size-prem(-6px) rgba(#030303, .18) 0 -0.5rem 0.5rem -0.375rem rgba(3, 3, 3, 0.18), 0 0.5rem 0.5rem -0.375rem rgba(3, 3, 3, 0.18) | ||||
| .pf-v5-c-notification-drawer | --pf-v5-c-notification-drawer__list-item-header--MarginBottom | 0.25rem | ||
--pf-v5-c-notification-drawer__list-item-header--MarginBottom --pf-v5-global--spacer--xs $pf-v5-global--spacer--xs pf-size-prem(4px) 0.25rem | ||||
| .pf-v5-c-notification-drawer | --pf-v5-c-notification-drawer__list-item-header-icon--Color | inherit | ||
| .pf-v5-c-notification-drawer | --pf-v5-c-notification-drawer__list-item-header-icon--MarginRight | 0.5rem | ||
--pf-v5-c-notification-drawer__list-item-header-icon--MarginRight --pf-v5-global--spacer--sm $pf-v5-global--spacer--sm pf-size-prem(8px) 0.5rem | ||||
| .pf-v5-c-notification-drawer | --pf-v5-c-notification-drawer__list-item-header-title--FontWeight | 700 | ||
--pf-v5-c-notification-drawer__list-item-header-title--FontWeight --pf-v5-global--FontWeight--bold $pf-v5-global--FontWeight--bold 700 | ||||
| .pf-v5-c-notification-drawer | --pf-v5-c-notification-drawer__list-item-header-title--max-lines | 1 | ||
| .pf-v5-c-notification-drawer | --pf-v5-c-notification-drawer__list-item--m-read__list-item-header-title--FontWeight | 400 | ||
--pf-v5-c-notification-drawer__list-item--m-read__list-item-header-title--FontWeight --pf-v5-global--FontWeight--normal $pf-v5-global--FontWeight--normal 400 | ||||
| .pf-v5-c-notification-drawer | --pf-v5-c-notification-drawer__list-item-description--MarginBottom | 0.5rem | ||
--pf-v5-c-notification-drawer__list-item-description--MarginBottom --pf-v5-global--spacer--sm $pf-v5-global--spacer--sm pf-size-prem(8px) 0.5rem | ||||
| .pf-v5-c-notification-drawer | --pf-v5-c-notification-drawer__list-item-timestamp--Color | #6a6e73 | ||
--pf-v5-c-notification-drawer__list-item-timestamp--Color --pf-v5-global--Color--200 $pf-v5-global--Color--200 $pf-v5-color-black-600 #6a6e73 | ||||
| .pf-v5-c-notification-drawer | --pf-v5-c-notification-drawer__list-item-timestamp--FontSize | 0.875rem | ||
--pf-v5-c-notification-drawer__list-item-timestamp--FontSize --pf-v5-global--FontSize--sm $pf-v5-global--FontSize--sm pf-font-prem(14px) 0.875rem | ||||
| .pf-v5-c-notification-drawer | --pf-v5-c-notification-drawer__group--m-expanded--group--BorderTopWidth | 1px | ||
--pf-v5-c-notification-drawer__group--m-expanded--group--BorderTopWidth --pf-v5-global--BorderWidth--sm $pf-v5-global--BorderWidth--sm 1px | ||||
| .pf-v5-c-notification-drawer | --pf-v5-c-notification-drawer__group--m-expanded--group--BorderTopColor | #d2d2d2 | ||
--pf-v5-c-notification-drawer__group--m-expanded--group--BorderTopColor --pf-v5-global--BorderColor--100 $pf-v5-global--BorderColor--100 $pf-v5-color-black-300 #d2d2d2 | ||||
| .pf-v5-c-notification-drawer | --pf-v5-c-notification-drawer__group--m-expanded--MinHeight | 0 | ||
| .pf-v5-c-notification-drawer | --pf-v5-c-notification-drawer__group-toggle--PaddingTop | 1rem | ||
--pf-v5-c-notification-drawer__group-toggle--PaddingTop --pf-v5-global--spacer--md $pf-v5-global--spacer--md pf-size-prem(16px) 1rem | ||||
| .pf-v5-c-notification-drawer | --pf-v5-c-notification-drawer__group-toggle--PaddingRight | 1rem | ||
--pf-v5-c-notification-drawer__group-toggle--PaddingRight --pf-v5-global--spacer--md $pf-v5-global--spacer--md pf-size-prem(16px) 1rem | ||||
| .pf-v5-c-notification-drawer | --pf-v5-c-notification-drawer__group-toggle--PaddingBottom | 1rem | ||
--pf-v5-c-notification-drawer__group-toggle--PaddingBottom --pf-v5-global--spacer--md $pf-v5-global--spacer--md pf-size-prem(16px) 1rem | ||||
| .pf-v5-c-notification-drawer | --pf-v5-c-notification-drawer__group-toggle--PaddingLeft | 1rem | ||
--pf-v5-c-notification-drawer__group-toggle--PaddingLeft --pf-v5-global--spacer--md $pf-v5-global--spacer--md pf-size-prem(16px) 1rem | ||||
| .pf-v5-c-notification-drawer | --pf-v5-c-notification-drawer__group-toggle--BackgroundColor | #fff | ||
--pf-v5-c-notification-drawer__group-toggle--BackgroundColor --pf-v5-global--BackgroundColor--100 $pf-v5-global--BackgroundColor--100 $pf-v5-color-white #fff | ||||
| .pf-v5-c-notification-drawer | --pf-v5-c-notification-drawer__group-toggle--BorderColor | #d2d2d2 | ||
--pf-v5-c-notification-drawer__group-toggle--BorderColor --pf-v5-global--BorderColor--100 $pf-v5-global--BorderColor--100 $pf-v5-color-black-300 #d2d2d2 | ||||
| .pf-v5-c-notification-drawer | --pf-v5-c-notification-drawer__group-toggle--BorderBottomWidth | 1px | ||
--pf-v5-c-notification-drawer__group-toggle--BorderBottomWidth --pf-v5-global--BorderWidth--sm $pf-v5-global--BorderWidth--sm 1px | ||||
| .pf-v5-c-notification-drawer | --pf-v5-c-notification-drawer__group-toggle--OutlineOffset | -0.25rem | ||
| .pf-v5-c-notification-drawer | --pf-v5-c-notification-drawer__group-toggle-title--MarginRight | 1rem | ||
--pf-v5-c-notification-drawer__group-toggle-title--MarginRight --pf-v5-global--spacer--md $pf-v5-global--spacer--md pf-size-prem(16px) 1rem | ||||
| .pf-v5-c-notification-drawer | --pf-v5-c-notification-drawer__group-toggle-title--max-lines | 1 | ||
| .pf-v5-c-notification-drawer | --pf-v5-c-notification-drawer__group-toggle-count--MarginRight | 1rem | ||
--pf-v5-c-notification-drawer__group-toggle-count--MarginRight --pf-v5-global--spacer--md $pf-v5-global--spacer--md pf-size-prem(16px) 1rem | ||||
| .pf-v5-c-notification-drawer | --pf-v5-c-notification-drawer__group-toggle-icon--MarginRight | 1rem | ||
--pf-v5-c-notification-drawer__group-toggle-icon--MarginRight --pf-v5-global--spacer--md $pf-v5-global--spacer--md pf-size-prem(16px) 1rem | ||||
| .pf-v5-c-notification-drawer | --pf-v5-c-notification-drawer__group-toggle-icon--Color | #6a6e73 | ||
--pf-v5-c-notification-drawer__group-toggle-icon--Color --pf-v5-global--Color--200 $pf-v5-global--Color--200 $pf-v5-color-black-600 #6a6e73 | ||||
| .pf-v5-c-notification-drawer | --pf-v5-c-notification-drawer__group-toggle-icon--Transition | .2s ease-in 0s | ||
| .pf-v5-c-notification-drawer | --pf-v5-c-notification-drawer__group--m-expanded__group-toggle-icon--Rotate | 90deg | ||
| .pf-v5-c-notification-drawer__list-item.pf-m-read | --pf-v5-c-notification-drawer__list-item--BoxShadow | none | ||
| .pf-v5-c-notification-drawer__list-item.pf-m-read | --pf-v5-c-notification-drawer__list-item--BorderBottomColor | #d2d2d2 | ||
--pf-v5-c-notification-drawer__list-item--BorderBottomColor --pf-v5-c-notification-drawer__list-item--m-read--BorderBottomColor --pf-v5-global--BorderColor--100 $pf-v5-global--BorderColor--100 $pf-v5-color-black-300 #d2d2d2 | ||||
| .pf-v5-c-notification-drawer__list-item.pf-m-read | --pf-v5-c-notification-drawer__list-item--BackgroundColor | #f0f0f0 | ||
--pf-v5-c-notification-drawer__list-item--BackgroundColor --pf-v5-c-notification-drawer__list-item--m-read--BackgroundColor --pf-v5-global--BackgroundColor--200 $pf-v5-global--BackgroundColor--200 $pf-v5-color-black-200 #f0f0f0 | ||||
| .pf-v5-c-notification-drawer__list-item.pf-m-read | --pf-v5-c-notification-drawer__list-item--before--Top | calc(1px * -1) | ||
--pf-v5-c-notification-drawer__list-item--before--Top --pf-v5-c-notification-drawer__list-item--m-read--before--Top calc(--pf-v5-c-notification-drawer__list-item--BorderBottomWidth * -1) calc(--pf-v5-global--BorderWidth--sm * -1) calc($pf-v5-global--BorderWidth--sm * -1) calc(1px * -1) | ||||
| .pf-v5-c-notification-drawer__list-item.pf-m-read | --pf-v5-c-notification-drawer__list-item--before--Bottom | 0 | ||
--pf-v5-c-notification-drawer__list-item--before--Bottom --pf-v5-c-notification-drawer__list-item--m-read--before--Bottom 0 | ||||
| .pf-v5-c-notification-drawer__list-item.pf-m-read | --pf-v5-c-notification-drawer__list-item--before--BackgroundColor | transparent | ||
--pf-v5-c-notification-drawer__list-item--before--BackgroundColor --pf-v5-c-notification-drawer__list-item--m-read--before--BackgroundColor transparent | ||||
| .pf-v5-c-notification-drawer__list-item.pf-m-read | --pf-v5-c-notification-drawer__list-item-header-title--FontWeight | 400 | ||
--pf-v5-c-notification-drawer__list-item-header-title--FontWeight --pf-v5-c-notification-drawer__list-item--m-read__list-item-header-title--FontWeight --pf-v5-global--FontWeight--normal $pf-v5-global--FontWeight--normal 400 | ||||
| .pf-v5-c-notification-drawer__list-item:not(.pf-m-read) + .pf-v5-c-notification-drawer__list-item.pf-m-read | --pf-v5-c-notification-drawer__list-item--BoxShadow | inset 0 0.125rem 0.25rem -0.0625rem rgba(3, 3, 3, 0.16) | ||
--pf-v5-c-notification-drawer__list-item--BoxShadow --pf-v5-c-notification-drawer__list-item--list-item--m-read--BoxShadow inset --pf-v5-global--BoxShadow--sm-bottom inset $pf-v5-global--BoxShadow--sm-bottom inset 0 pf-size-prem(2px) pf-size-prem(4px) pf-size-prem(-1px) rgba($pf-v5-color-black-1000, .16) inset 0 pf-size-prem(2px) pf-size-prem(4px) pf-size-prem(-1px) rgba(#030303, .16) inset 0 0.125rem 0.25rem -0.0625rem rgba(3, 3, 3, 0.16) | ||||
| .pf-v5-c-notification-drawer__list-item:not(.pf-m-read) + .pf-v5-c-notification-drawer__list-item.pf-m-read | --pf-v5-c-notification-drawer__list-item--before--Top | 0 | ||
--pf-v5-c-notification-drawer__list-item--before--Top --pf-v5-c-notification-drawer__list-item--list-item--m-read--before--Top 0 | ||||
| .pf-v5-c-notification-drawer__list-item.pf-m-info | --pf-v5-c-notification-drawer__list-item--before--BackgroundColor | #2b9af3 | ||
--pf-v5-c-notification-drawer__list-item--before--BackgroundColor --pf-v5-c-notification-drawer__list-item--m-info__list-item--before--BackgroundColor --pf-v5-global--info-color--100 $pf-v5-global--info-color--100 $pf-v5-color-blue-300 #2b9af3 | ||||
| .pf-v5-c-notification-drawer__list-item.pf-m-info | --pf-v5-c-notification-drawer__list-item-header-icon--Color | #2b9af3 | ||
--pf-v5-c-notification-drawer__list-item-header-icon--Color --pf-v5-c-notification-drawer__list-item--m-info__list-item-header-icon--Color --pf-v5-global--info-color--100 $pf-v5-global--info-color--100 $pf-v5-color-blue-300 #2b9af3 | ||||
| .pf-v5-c-notification-drawer__list-item.pf-m-warning | --pf-v5-c-notification-drawer__list-item--before--BackgroundColor | #f0ab00 | ||
--pf-v5-c-notification-drawer__list-item--before--BackgroundColor --pf-v5-c-notification-drawer__list-item--m-warning__list-item--before--BackgroundColor --pf-v5-global--warning-color--100 $pf-v5-global--warning-color--100 $pf-v5-color-gold-400 #f0ab00 | ||||
| .pf-v5-c-notification-drawer__list-item.pf-m-warning | --pf-v5-c-notification-drawer__list-item-header-icon--Color | #f0ab00 | ||
--pf-v5-c-notification-drawer__list-item-header-icon--Color --pf-v5-c-notification-drawer__list-item--m-warning__list-item-header-icon--Color --pf-v5-global--warning-color--100 $pf-v5-global--warning-color--100 $pf-v5-color-gold-400 #f0ab00 | ||||
| .pf-v5-c-notification-drawer__list-item.pf-m-danger | --pf-v5-c-notification-drawer__list-item--before--BackgroundColor | #c9190b | ||
--pf-v5-c-notification-drawer__list-item--before--BackgroundColor --pf-v5-c-notification-drawer__list-item--m-danger__list-item--before--BackgroundColor --pf-v5-global--danger-color--100 $pf-v5-global--danger-color--100 $pf-v5-color-red-100 #c9190b | ||||
| .pf-v5-c-notification-drawer__list-item.pf-m-danger | --pf-v5-c-notification-drawer__list-item-header-icon--Color | #c9190b | ||
--pf-v5-c-notification-drawer__list-item-header-icon--Color --pf-v5-c-notification-drawer__list-item--m-danger__list-item-header-icon--Color --pf-v5-global--danger-color--100 $pf-v5-global--danger-color--100 $pf-v5-color-red-100 #c9190b | ||||
| .pf-v5-c-notification-drawer__list-item.pf-m-success | --pf-v5-c-notification-drawer__list-item--before--BackgroundColor | #3e8635 | ||
--pf-v5-c-notification-drawer__list-item--before--BackgroundColor --pf-v5-c-notification-drawer__list-item--m-success__list-item--before--BackgroundColor --pf-v5-global--success-color--100 $pf-v5-global--success-color--100 $pf-v5-color-green-500 #3e8635 | ||||
| .pf-v5-c-notification-drawer__list-item.pf-m-success | --pf-v5-c-notification-drawer__list-item-header-icon--Color | #3e8635 | ||
--pf-v5-c-notification-drawer__list-item-header-icon--Color --pf-v5-c-notification-drawer__list-item--m-success__list-item-header-icon--Color --pf-v5-global--success-color--100 $pf-v5-global--success-color--100 $pf-v5-color-green-500 #3e8635 | ||||
| .pf-v5-c-notification-drawer__list-item.pf-m-custom | --pf-v5-c-notification-drawer__list-item--before--BackgroundColor | #009596 | ||
--pf-v5-c-notification-drawer__list-item--before--BackgroundColor --pf-v5-c-notification-drawer__list-item--m-custom__list-item--before--BackgroundColor --pf-v5-global--custom-color--200 $pf-v5-global--custom-color--200 $pf-v5-color-cyan-300 #009596 | ||||
| .pf-v5-c-notification-drawer__list-item.pf-m-custom | --pf-v5-c-notification-drawer__list-item-header-icon--Color | #009596 | ||
--pf-v5-c-notification-drawer__list-item-header-icon--Color --pf-v5-c-notification-drawer__list-item--m-custom__list-item-header-icon--Color --pf-v5-global--custom-color--200 $pf-v5-global--custom-color--200 $pf-v5-color-cyan-300 #009596 | ||||
| .pf-v5-c-notification-drawer__group .pf-v5-c-notification-drawer__list-item:last-child | --pf-v5-c-notification-drawer__list-item--BorderBottomWidth | 0 | ||
| .pf-v5-c-notification-drawer__group .pf-v5-c-notification-drawer__list-item:last-child | --pf-v5-c-notification-drawer__list-item--before--Bottom | 0 | ||
View source on GitHub
