| .pf-v6-c-menu | --pf-v6-c-menu--RowGap | |
- --pf-v6-c-menu--RowGap
- --pf-t--global--spacer--xs
- --pf-t--global--spacer--100
- 0.25rem
|
| .pf-v6-c-menu | --pf-v6-c-menu--PaddingBlockStart | |
- --pf-v6-c-menu--PaddingBlockStart
- --pf-t--global--spacer--xs
- --pf-t--global--spacer--100
- 0.25rem
|
| .pf-v6-c-menu | --pf-v6-c-menu--PaddingBlockEnd | |
- --pf-v6-c-menu--PaddingBlockEnd
- --pf-t--global--spacer--xs
- --pf-t--global--spacer--100
- 0.25rem
|
| .pf-v6-c-menu | --pf-v6-c-menu--PaddingInlineStart | |
- --pf-v6-c-menu--PaddingInlineStart
- --pf-t--global--spacer--xs
- --pf-t--global--spacer--100
- 0.25rem
|
| .pf-v6-c-menu | --pf-v6-c-menu--PaddingInlineEnd | |
- --pf-v6-c-menu--PaddingInlineEnd
- --pf-t--global--spacer--xs
- --pf-t--global--spacer--100
- 0.25rem
|
| .pf-v6-c-menu | --pf-v6-c-menu--BackgroundColor | |
- --pf-v6-c-menu--BackgroundColor
- --pf-t--global--background--color--floating--default
- --pf-t--global--background--color--100
- --pf-t--color--white
- #ffffff
|
| .pf-v6-c-menu | --pf-v6-c-menu--BoxShadow | 0px
4px
10px
0px
rgb(41, 41, 41, 0.1500) |
- --pf-v6-c-menu--BoxShadow
- --pf-t--global--box-shadow--md
- --pf-t--global--box-shadow--X--md--default
--pf-t--global--box-shadow--Y--md--default
--pf-t--global--box-shadow--blur--md
--pf-t--global--box-shadow--spread--md--default
--pf-t--global--box-shadow--color--md--default
- --pf-t--global--box-shadow--X--400
--pf-t--global--box-shadow--Y--600
--pf-t--global--box-shadow--blur--200
--pf-t--global--box-shadow--spread--100
--pf-t--global--box-shadow--color--100
- 0px
4px
10px
0px
rgb(41, 41, 41, 0.1500)
|
| .pf-v6-c-menu | --pf-v6-c-menu--Color | |
- --pf-v6-c-menu--Color
- --pf-t--global--text--color--regular
- --pf-t--global--text--color--100
- --pf-t--color--gray--95
- #151515
|
| .pf-v6-c-menu | --pf-v6-c-menu--BorderWidth | |
- --pf-v6-c-menu--BorderWidth
- --pf-t--global--border--width--high-contrast--regular
- 0px
|
| .pf-v6-c-menu | --pf-v6-c-menu--BorderColor |
(In light theme) rgb(255, 255, 255, 0.0000) |
- --pf-v6-c-menu--BorderColor
- --pf-t--global--border--color--high-contrast
- rgb(255, 255, 255, 0.0000)
|
| .pf-v6-c-menu | --pf-v6-c-menu--BorderRadius | |
- --pf-v6-c-menu--BorderRadius
- calc(--pf-v6-c-menu__item--BorderRadius + --pf-v6-c-menu--PaddingBlockStart)
- calc(--pf-t--global--border--radius--small + --pf-t--global--spacer--xs)
- calc(--pf-t--global--border--radius--200 + --pf-t--global--spacer--100)
- calc(6px + 0.25rem)
|
| .pf-v6-c-menu | --pf-v6-c-menu--OutlineOffset | |
- --pf-v6-c-menu--OutlineOffset
- calc(--pf-t--global--border--width--control--default * -3)
- calc(--pf-t--global--border--width--100 * -3)
- calc(1px * -3)
|
| .pf-v6-c-menu | --pf-v6-c-menu--ZIndex | |
- --pf-v6-c-menu--ZIndex
- --pf-t--global--z-index--sm
- --pf-t--global--z-index--200
- 200
|
| .pf-v6-c-menu | --pf-v6-c-menu--button--disabled--Color | |
- --pf-v6-c-menu--button--disabled--Color
- --pf-t--global--text--color--disabled
- --pf-t--global--color--disabled--200
- --pf-t--color--gray--40
- #a3a3a3
|
| .pf-v6-c-menu | --pf-v6-c-menu--icon--disabled--Color | |
- --pf-v6-c-menu--icon--disabled--Color
- --pf-t--global--icon--color--disabled
- --pf-t--global--color--disabled--200
- --pf-t--color--gray--40
- #a3a3a3
|
| .pf-v6-c-menu | --pf-v6-c-menu--TransitionDuration | |
| .pf-v6-c-menu | --pf-v6-c-menu--TransitionTimingFunction | cubic-bezier(.4, 0, .2, 1) |
- --pf-v6-c-menu--TransitionTimingFunction
- --pf-t--global--motion--timing-function--default
- --pf-t--global--timing-function--200
- cubic-bezier(.4, 0, .2, 1)
|
| .pf-v6-c-menu | --pf-v6-c-menu--m-plain--BoxShadow | |
| .pf-v6-c-menu | --pf-v6-c-menu__content--RowGap | |
- --pf-v6-c-menu__content--RowGap
- --pf-v6-c-menu--RowGap
- --pf-t--global--spacer--xs
- --pf-t--global--spacer--100
- 0.25rem
|
| .pf-v6-c-menu | --pf-v6-c-menu__content--Height | |
| .pf-v6-c-menu | --pf-v6-c-menu__content--MaxHeight | |
| .pf-v6-c-menu | --pf-v6-c-menu--m-scrollable__content--MaxHeight | |
| .pf-v6-c-menu | --pf-v6-c-menu__search--PaddingBlockStart | |
- --pf-v6-c-menu__search--PaddingBlockStart
- --pf-t--global--spacer--sm
- --pf-t--global--spacer--200
- 0.5rem
|
| .pf-v6-c-menu | --pf-v6-c-menu__search--PaddingBlockEnd | |
- --pf-v6-c-menu__search--PaddingBlockEnd
- --pf-t--global--spacer--sm
- --pf-t--global--spacer--200
- 0.5rem
|
| .pf-v6-c-menu | --pf-v6-c-menu__search--PaddingInlineStart | |
- --pf-v6-c-menu__search--PaddingInlineStart
- --pf-t--global--spacer--md
- --pf-t--global--spacer--300
- 1rem
|
| .pf-v6-c-menu | --pf-v6-c-menu__search--PaddingInlineEnd | |
- --pf-v6-c-menu__search--PaddingInlineEnd
- --pf-t--global--spacer--md
- --pf-t--global--spacer--300
- 1rem
|
| .pf-v6-c-menu | --pf-v6-c-menu__footer--BoxShadow | |
| .pf-v6-c-menu | --pf-v6-c-menu__footer--BorderColor | |
| .pf-v6-c-menu | --pf-v6-c-menu__footer--BorderWidth | |
| .pf-v6-c-menu | --pf-v6-c-menu--m-scrollable__footer--BoxShadow | 0px
-4px
6px
-4px
rgb(41, 41, 41, 0.2000) |
- --pf-v6-c-menu--m-scrollable__footer--BoxShadow
- --pf-t--global--box-shadow--sm--top
- --pf-t--global--box-shadow--X--sm--top
--pf-t--global--box-shadow--Y--sm--top
--pf-t--global--box-shadow--blur--sm
--pf-t--global--box-shadow--spread--sm--directional
--pf-t--global--box-shadow--color--sm--directional
- --pf-t--global--box-shadow--X--400
--pf-t--global--box-shadow--Y--200
--pf-t--global--box-shadow--blur--100
--pf-t--global--box-shadow--spread--200
--pf-t--global--box-shadow--color--200
- 0px
-4px
6px
-4px
rgb(41, 41, 41, 0.2000)
|
| .pf-v6-c-menu | --pf-v6-c-menu--m-scrollable__footer--BorderColor |
(In light theme) rgb(255, 255, 255, 0.0000) |
- --pf-v6-c-menu--m-scrollable__footer--BorderColor
- --pf-t--global--border--color--high-contrast
- rgb(255, 255, 255, 0.0000)
|
| .pf-v6-c-menu | --pf-v6-c-menu--m-scrollable__footer--BorderWidth | |
- --pf-v6-c-menu--m-scrollable__footer--BorderWidth
- --pf-t--global--border--width--high-contrast--regular
- 0px
|
| .pf-v6-c-menu | --pf-v6-c-menu__list-item--Color | |
- --pf-v6-c-menu__list-item--Color
- --pf-t--global--text--color--regular
- --pf-t--global--text--color--100
- --pf-t--color--gray--95
- #151515
|
| .pf-v6-c-menu | --pf-v6-c-menu__list-item--BackgroundColor |
(In light theme) rgb(255, 255, 255, 0.0000) |
- --pf-v6-c-menu__list-item--BackgroundColor
- --pf-t--global--background--color--action--plain--default
- rgb(255, 255, 255, 0.0000)
|
| .pf-v6-c-menu | --pf-v6-c-menu__list-item--BorderWidth | |
- --pf-v6-c-menu__list-item--BorderWidth
- --pf-t--global--border--width--action--plain--default
- 0px
|
| .pf-v6-c-menu | --pf-v6-c-menu__list-item--hover--BorderWidth | |
- --pf-v6-c-menu__list-item--hover--BorderWidth
- --pf-t--global--border--width--action--plain--hover
- 0px
|
| .pf-v6-c-menu | --pf-v6-c-menu__list-item--BorderColor |
(In light theme) rgb(255, 255, 255, 0.0000) |
- --pf-v6-c-menu__list-item--BorderColor
- --pf-t--global--border--color--high-contrast
- rgb(255, 255, 255, 0.0000)
|
| .pf-v6-c-menu | --pf-v6-c-menu__list-item--TransitionDuration | |
- --pf-v6-c-menu__list-item--TransitionDuration
- --pf-t--global--motion--duration--fade--short
- --pf-t--global--motion--duration--sm
- --pf-t--global--duration--100
- 100ms
|
| .pf-v6-c-menu | --pf-v6-c-menu__list-item--TransitionTimingFunction | cubic-bezier(.4, 0, .2, 1) |
- --pf-v6-c-menu__list-item--TransitionTimingFunction
- --pf-t--global--motion--timing-function--default
- --pf-t--global--timing-function--200
- cubic-bezier(.4, 0, .2, 1)
|
| .pf-v6-c-menu | --pf-v6-c-menu__list-item--TransitionProperty | |
| .pf-v6-c-menu | --pf-v6-c-menu__list-item--hover--BackgroundColor |
(In light theme) rgb(199, 199, 199, 0.2500) |
- --pf-v6-c-menu__list-item--hover--BackgroundColor
- --pf-t--global--background--color--action--plain--hover
- --pf-t--global--background--color--600
- rgb(199, 199, 199, 0.2500)
|
| .pf-v6-c-menu | --pf-v6-c-menu__list-item--m-danger--Color | |
- --pf-v6-c-menu__list-item--m-danger--Color
- --pf-t--global--text--color--status--danger--default
- --pf-t--global--color--status--danger--default
- --pf-t--global--color--status--danger--100
- --pf-t--color--red-orange--60
- #b1380b
|
| .pf-v6-c-menu | --pf-v6-c-menu__list-item--m-load__item--Color | |
- --pf-v6-c-menu__list-item--m-load__item--Color
- --pf-t--global--text--color--link--default
- --pf-t--global--text--color--link--100
- --pf-t--color--blue--50
- #0066cc
|
| .pf-v6-c-menu | --pf-v6-c-menu__list-item--has--menu-action--PaddingInlineEnd | |
- --pf-v6-c-menu__list-item--has--menu-action--PaddingInlineEnd
- --pf-t--global--spacer--lg
- --pf-t--global--spacer--400
- 1.5rem
|
| .pf-v6-c-menu | --pf-v6-c-menu__list--divider--MarginBlockStart | |
- --pf-v6-c-menu__list--divider--MarginBlockStart
- --pf-t--global--spacer--xs
- --pf-t--global--spacer--100
- 0.25rem
|
| .pf-v6-c-menu | --pf-v6-c-menu__list--divider--MarginBlockEnd | |
- --pf-v6-c-menu__list--divider--MarginBlockEnd
- --pf-t--global--spacer--xs
- --pf-t--global--spacer--100
- 0.25rem
|
| .pf-v6-c-menu | --pf-v6-c-menu__item--BorderRadius | |
- --pf-v6-c-menu__item--BorderRadius
- --pf-t--global--border--radius--small
- --pf-t--global--border--radius--200
- 6px
|
| .pf-v6-c-menu | --pf-v6-c-menu__item--PaddingBlockStart | |
- --pf-v6-c-menu__item--PaddingBlockStart
- --pf-t--global--spacer--sm
- --pf-t--global--spacer--200
- 0.5rem
|
| .pf-v6-c-menu | --pf-v6-c-menu__item--PaddingBlockEnd | |
- --pf-v6-c-menu__item--PaddingBlockEnd
- --pf-t--global--spacer--sm
- --pf-t--global--spacer--200
- 0.5rem
|
| .pf-v6-c-menu | --pf-v6-c-menu__item--PaddingInlineStart | |
- --pf-v6-c-menu__item--PaddingInlineStart
- --pf-t--global--spacer--md
- --pf-t--global--spacer--300
- 1rem
|
| .pf-v6-c-menu | --pf-v6-c-menu__item--PaddingInlineEnd | |
- --pf-v6-c-menu__item--PaddingInlineEnd
- --pf-t--global--spacer--md
- --pf-t--global--spacer--300
- 1rem
|
| .pf-v6-c-menu | --pf-v6-c-menu__item--FontSize | |
- --pf-v6-c-menu__item--FontSize
- --pf-t--global--font--size--body--default
- --pf-t--global--font--size--sm
- --pf-t--global--font--size--200
- 0.875rem
|
| .pf-v6-c-menu | --pf-v6-c-menu__item--LineHeight | |
- --pf-v6-c-menu__item--LineHeight
- --pf-t--global--font--line-height--body
- --pf-t--global--font--line-height--200
- 1.5
|
| .pf-v6-c-menu | --pf-v6-c-menu__item--FontWeight | |
- --pf-v6-c-menu__item--FontWeight
- --pf-t--global--font--weight--body--default
- --pf-t--global--font--weight--100
- 400
|
| .pf-v6-c-menu | --pf-v6-c-menu__item--Color | |
- --pf-v6-c-menu__item--Color
- --pf-t--global--text--color--regular
- --pf-t--global--text--color--100
- --pf-t--color--gray--95
- #151515
|
| .pf-v6-c-menu | --pf-v6-c-menu__item--BackgroundColor |
(In light theme) rgb(255, 255, 255, 0.0000) |
- --pf-v6-c-menu__item--BackgroundColor
- --pf-t--global--background--color--action--plain--default
- rgb(255, 255, 255, 0.0000)
|
| .pf-v6-c-menu | --pf-v6-c-menu__item--m-disabled--Color | |
- --pf-v6-c-menu__item--m-disabled--Color
- --pf-t--global--text--color--disabled
- --pf-t--global--color--disabled--200
- --pf-t--color--gray--40
- #a3a3a3
|
| .pf-v6-c-menu | --pf-v6-c-menu__header--PaddingBlockStart | |
- --pf-v6-c-menu__header--PaddingBlockStart
- --pf-t--global--spacer--sm
- --pf-t--global--spacer--200
- 0.5rem
|
| .pf-v6-c-menu | --pf-v6-c-menu__header--PaddingBlockEnd | |
- --pf-v6-c-menu__header--PaddingBlockEnd
- --pf-t--global--spacer--sm
- --pf-t--global--spacer--200
- 0.5rem
|
| .pf-v6-c-menu | --pf-v6-c-menu__header--PaddingInlineStart | |
- --pf-v6-c-menu__header--PaddingInlineStart
- --pf-t--global--spacer--md
- --pf-t--global--spacer--300
- 1rem
|
| .pf-v6-c-menu | --pf-v6-c-menu__header--PaddingInlineEnd | |
- --pf-v6-c-menu__header--PaddingInlineEnd
- --pf-t--global--spacer--md
- --pf-t--global--spacer--300
- 1rem
|
| .pf-v6-c-menu | --pf-v6-c-menu__group-title--PaddingBlockStart | |
- --pf-v6-c-menu__group-title--PaddingBlockStart
- --pf-t--global--spacer--sm
- --pf-t--global--spacer--200
- 0.5rem
|
| .pf-v6-c-menu | --pf-v6-c-menu__group-title--PaddingBlockEnd | |
- --pf-v6-c-menu__group-title--PaddingBlockEnd
- --pf-t--global--spacer--sm
- --pf-t--global--spacer--200
- 0.5rem
|
| .pf-v6-c-menu | --pf-v6-c-menu__group-title--PaddingInlineStart | |
- --pf-v6-c-menu__group-title--PaddingInlineStart
- --pf-t--global--spacer--md
- --pf-t--global--spacer--300
- 1rem
|
| .pf-v6-c-menu | --pf-v6-c-menu__group-title--PaddingInlineEnd | |
- --pf-v6-c-menu__group-title--PaddingInlineEnd
- --pf-t--global--spacer--md
- --pf-t--global--spacer--300
- 1rem
|
| .pf-v6-c-menu | --pf-v6-c-menu__breadcrumb--PaddingBlockStart | |
| .pf-v6-c-menu | --pf-v6-c-menu__breadcrumb--PaddingBlockEnd | |
| .pf-v6-c-menu | --pf-v6-c-menu__breadcrumb--PaddingInlineStart | |
- --pf-v6-c-menu__breadcrumb--PaddingInlineStart
- --pf-t--global--spacer--md
- --pf-t--global--spacer--300
- 1rem
|
| .pf-v6-c-menu | --pf-v6-c-menu__breadcrumb--PaddingInlineEnd | |
- --pf-v6-c-menu__breadcrumb--PaddingInlineEnd
- --pf-t--global--spacer--md
- --pf-t--global--spacer--300
- 1rem
|
| .pf-v6-c-menu | --pf-v6-c-menu__footer--PaddingBlockStart | |
- --pf-v6-c-menu__footer--PaddingBlockStart
- --pf-t--global--spacer--sm
- --pf-t--global--spacer--200
- 0.5rem
|
| .pf-v6-c-menu | --pf-v6-c-menu__footer--PaddingBlockEnd | |
- --pf-v6-c-menu__footer--PaddingBlockEnd
- --pf-t--global--spacer--sm
- --pf-t--global--spacer--200
- 0.5rem
|
| .pf-v6-c-menu | --pf-v6-c-menu__footer--PaddingInlineStart | |
- --pf-v6-c-menu__footer--PaddingInlineStart
- --pf-t--global--spacer--md
- --pf-t--global--spacer--300
- 1rem
|
| .pf-v6-c-menu | --pf-v6-c-menu__footer--PaddingInlineEnd | |
- --pf-v6-c-menu__footer--PaddingInlineEnd
- --pf-t--global--spacer--md
- --pf-t--global--spacer--300
- 1rem
|
| .pf-v6-c-menu | --pf-v6-c-menu__item-main--ColumnGap | |
- --pf-v6-c-menu__item-main--ColumnGap
- --pf-t--global--spacer--sm
- --pf-t--global--spacer--200
- 0.5rem
|
| .pf-v6-c-menu | --pf-v6-c-menu__group-title--FontWeight | |
- --pf-v6-c-menu__group-title--FontWeight
- --pf-t--global--font--weight--body--bold
- --pf-t--global--font--weight--200
- 600
|
| .pf-v6-c-menu | --pf-v6-c-menu__group-title--Color | |
- --pf-v6-c-menu__group-title--Color
- --pf-t--global--text--color--regular
- --pf-t--global--text--color--100
- --pf-t--color--gray--95
- #151515
|
| .pf-v6-c-menu | --pf-v6-c-menu__item-description--FontSize | |
- --pf-v6-c-menu__item-description--FontSize
- --pf-t--global--font--size--body--sm
- --pf-t--global--font--size--xs
- --pf-t--global--font--size--100
- 0.75rem
|
| .pf-v6-c-menu | --pf-v6-c-menu__item-description--Color | |
- --pf-v6-c-menu__item-description--Color
- --pf-t--global--text--color--subtle
- --pf-t--global--text--color--200
- --pf-t--color--gray--60
- #4d4d4d
|
| .pf-v6-c-menu | --pf-v6-c-menu__item-action--FontSize | |
- --pf-v6-c-menu__item-action--FontSize
- --pf-t--global--font--size--body--default
- --pf-t--global--font--size--sm
- --pf-t--global--font--size--200
- 0.875rem
|
| .pf-v6-c-menu | --pf-v6-c-menu__item-action--icon--size | |
- --pf-v6-c-menu__item-action--icon--size
- var(--pf-v6-c-menu__item-action--FontSize, --pf-t--global--icon--size--md)
- --pf-t--global--font--size--body--default, --pf-t--global--icon--size--md
- --pf-t--global--font--size--sm, --pf-t--global--icon--size--200
- --pf-t--global--font--size--200, 0.875rem
- 0.875rem, 0.875rem
|
| .pf-v6-c-menu | --pf-v6-c-menu__item-action--m-favorited--Color | |
- --pf-v6-c-menu__item-action--m-favorited--Color
- --pf-t--global--icon--color--favorite--clicked
- --pf-t--global--color--favorite--clicked
- --pf-t--global--color--favorite--200
- --pf-t--color--yellow--40
- #dca614
|
| .pf-v6-c-menu | --pf-v6-c-menu__item-action--button--MinWidth | calc(0.875rem, 0.875rem) + 0.5rem * 2 |
- --pf-v6-c-menu__item-action--button--MinWidth
- calc(--pf-v6-c-menu__item-action--icon--size + --pf-t--global--spacer--sm * 2)
- calc(var(--pf-v6-c-menu__item-action--FontSize, --pf-t--global--icon--size--md) + --pf-t--global--spacer--200 * 2)
- calc(--pf-t--global--font--size--body--default, --pf-t--global--icon--size--md) + --pf-t--global--spacer--200 * 2
- calc(--pf-t--global--font--size--sm, --pf-t--global--icon--size--200) + 0.5rem * 2
- calc(--pf-t--global--font--size--200, 0.875rem) + 0.5rem * 2
- calc(0.875rem, 0.875rem) + 0.5rem * 2
|
| .pf-v6-c-menu | --pf-v6-c-menu__item-select-icon--Color | |
- --pf-v6-c-menu__item-select-icon--Color
- --pf-t--global--icon--color--subtle
- --pf-t--global--icon--color--200
- --pf-t--color--gray--50
- #707070
|
| .pf-v6-c-menu | --pf-v6-c-menu__item--m-selected__item-select-icon--Color | |
- --pf-v6-c-menu__item--m-selected__item-select-icon--Color
- --pf-t--global--icon--color--brand--default
- --pf-t--global--color--brand--default
- --pf-t--global--color--brand--200
- --pf-t--color--blue--50
- #0066cc
|
| .pf-v6-c-menu | --pf-v6-c-menu__item-external--Color | |
- --pf-v6-c-menu__item-external--Color
- --pf-t--global--icon--color--brand--default
- --pf-t--global--color--brand--default
- --pf-t--global--color--brand--200
- --pf-t--color--blue--50
- #0066cc
|
| .pf-v6-c-menu | --pf-v6-c-menu--m-flyout__menu--top-offset | |
| .pf-v6-c-menu | --pf-v6-c-menu--m-flyout__menu--left-offset | |
| .pf-v6-c-menu | --pf-v6-c-menu--m-flyout__menu--m-left--right-offset | |
| .pf-v6-c-menu | --pf-v6-c-menu--m-flyout__Zindex | |
- --pf-v6-c-menu--m-flyout__Zindex
- --pf-t--global--z-index--sm
- --pf-t--global--z-index--200
- 200
|
| .pf-v6-c-menu | --pf-v6-c-menu--m-flyout__menu--InsetBlockStart | |
- --pf-v6-c-menu--m-flyout__menu--InsetBlockStart
- calc(--pf-v6-c-menu__list--PaddingBlockStart * -1 + --pf-v6-c-menu--m-flyout__menu--top-offset)
- calc(0 * -1 + 0px)
|
| .pf-v6-c-menu | --pf-v6-c-menu--m-flyout__menu--InsetInlineEnd | |
| .pf-v6-c-menu | --pf-v6-c-menu--m-flyout__menu--InsetBlockEnd | |
| .pf-v6-c-menu | --pf-v6-c-menu--m-flyout__menu--InsetInlineStart | |
- --pf-v6-c-menu--m-flyout__menu--InsetInlineStart
- calc(100% + --pf-v6-c-menu--m-flyout__menu--left-offset)
- calc(100% + 0px)
|
| .pf-v6-c-menu | --pf-v6-c-menu--m-flyout__menu--m-top--InsetBlockEnd | |
- --pf-v6-c-menu--m-flyout__menu--m-top--InsetBlockEnd
- calc(--pf-v6-c-menu__list--PaddingBlockStart * -1)
- calc(0 * -1)
|
| .pf-v6-c-menu | --pf-v6-c-menu--m-flyout__menu--m-left--InsetInlineEnd | |
- --pf-v6-c-menu--m-flyout__menu--m-left--InsetInlineEnd
- calc(100% + --pf-v6-c-menu--m-flyout__menu--m-left--right-offset)
- calc(100% + 0px)
|
| .pf-v6-c-menu | --pf-v6-c-menu--m-drilldown__content--TransitionDuration--height | |
- --pf-v6-c-menu--m-drilldown__content--TransitionDuration--height
- --pf-t--global--motion--duration--slide-in--default
- --pf-t--global--motion--duration--xl
- --pf-t--global--duration--400
- 400ms
|
| .pf-v6-c-menu | --pf-v6-c-menu--m-drilldown__content--TransitionDuration--transform | |
- --pf-v6-c-menu--m-drilldown__content--TransitionDuration--transform
- --pf-t--global--motion--duration--slide-in--default
- --pf-t--global--motion--duration--xl
- --pf-t--global--duration--400
- 400ms
|
| .pf-v6-c-menu | --pf-v6-c-menu--m-drilldown__content--Transition | |
- --pf-v6-c-menu--m-drilldown__content--Transition
- height --pf-v6-c-menu--m-drilldown__content--TransitionDuration--height
- height --pf-t--global--motion--duration--slide-in--default
- height --pf-t--global--motion--duration--xl
- height --pf-t--global--duration--400
- height 400ms
|
| .pf-v6-c-menu | --pf-v6-c-menu--m-drilldown--c-menu--InsetBlockStart | |
| .pf-v6-c-menu | --pf-v6-c-menu--m-drilldown--c-menu--TransitionDuration--transform | |
| .pf-v6-c-menu | --pf-v6-c-menu--m-drilldown--c-menu--Transition | |
- --pf-v6-c-menu--m-drilldown--c-menu--Transition
- transform --pf-v6-c-menu--m-drilldown--c-menu--TransitionDuration--transform
- transform 0s
|
| .pf-v6-c-menu | --pf-v6-c-menu--m-drilldown__list--TransitionDuration--transform | |
| .pf-v6-c-menu | --pf-v6-c-menu--m-drilldown__list--Transition | |
- --pf-v6-c-menu--m-drilldown__list--Transition
- transform --pf-v6-c-menu--m-drilldown__list--TransitionDuration--transform
- transform 0s
|
| .pf-v6-c-menu | --pf-v6-c-menu--m-drilled-in--c-menu__list-item--m-current-path--c-menu--ZIndex | |
- --pf-v6-c-menu--m-drilled-in--c-menu__list-item--m-current-path--c-menu--ZIndex
- --pf-t--global--z-index--xs
- --pf-t--global--z-index--100
- 100
|
| .pf-v6-c-menu__list | --pf-v6-hidden-visible--visible--Display | |
| .pf-v6-c-menu__list | --pf-v6-hidden-visible--hidden--Display | |
| .pf-v6-c-menu__list | --pf-v6-hidden-visible--Display | |
- --pf-v6-hidden-visible--Display
- --pf-v6-hidden-visible--visible--Display
- --pf-v6-c-data-list__item-action--Display
- flex
|
| .pf-v6-c-menu__list.pf-m-hidden | --pf-v6-hidden-visible--Display | |
- --pf-v6-hidden-visible--Display
- --pf-v6-hidden-visible--hidden--Display
- none
|
| .pf-v6-c-menu__list-item:is(.pf-m-disabled, :disabled, .pf-m-aria-disabled, [aria-disabled=true]) | --pf-v6-c-menu__item--Color | |
- --pf-v6-c-menu__item--Color
- --pf-v6-c-menu__item--m-disabled--Color
- --pf-t--global--text--color--disabled
- --pf-t--global--color--disabled--200
- --pf-t--color--gray--40
- #a3a3a3
|
| .pf-v6-c-menu__list-item:is(.pf-m-disabled, :disabled, .pf-m-aria-disabled, [aria-disabled=true]) | --pf-v6-c-menu__item-toggle-icon--Color | |
- --pf-v6-c-menu__item-toggle-icon--Color
- --pf-v6-c-menu--icon--disabled--Color
- --pf-t--global--icon--color--disabled
- --pf-t--global--color--disabled--200
- --pf-t--color--gray--40
- #a3a3a3
|
| .pf-v6-c-menu__list-item:is(.pf-m-disabled, :disabled, .pf-m-aria-disabled, [aria-disabled=true]) | --pf-v6-c-menu__item-external--Color | |
| .pf-v6-c-menu__list-item:is(.pf-m-disabled, :disabled, .pf-m-aria-disabled, [aria-disabled=true]) | --pf-v6-c-menu__item-select-icon--Color | |
| .pf-v6-c-menu__list-item:is(.pf-m-disabled, :disabled, .pf-m-aria-disabled, [aria-disabled=true]) | --pf-v6-c-menu__item-description--Color | |
- --pf-v6-c-menu__item-description--Color
- --pf-v6-c-menu__item--m-disabled--Color
- --pf-t--global--text--color--disabled
- --pf-t--global--color--disabled--200
- --pf-t--color--gray--40
- #a3a3a3
|
| .pf-v6-c-menu__list-item:is(.pf-m-disabled, :disabled, .pf-m-aria-disabled, [aria-disabled=true]) | --pf-v6-c-menu__list-item--BackgroundColor | |
| .pf-v6-c-menu__list-item:is(.pf-m-disabled, :disabled, .pf-m-aria-disabled, [aria-disabled=true]) | --pf-v6-c-menu__list-item--hover--BackgroundColor | |
| .pf-v6-c-menu__list-item:is(.pf-m-disabled, :disabled, .pf-m-aria-disabled, [aria-disabled=true]) | --pf-v6-c-menu__list-item--hover--BorderColor | |
| .pf-v6-c-menu.pf-m-top | --pf-v6-c-menu--m-flyout__menu--InsetBlockStart | |
| .pf-v6-c-menu.pf-m-top | --pf-v6-c-menu--m-flyout__menu--InsetBlockEnd | |
- --pf-v6-c-menu--m-flyout__menu--InsetBlockEnd
- --pf-v6-c-menu--m-flyout__menu--m-top--InsetBlockEnd
- calc(--pf-v6-c-menu__list--PaddingBlockStart * -1)
- calc(0 * -1)
|
| .pf-v6-c-menu.pf-m-left | --pf-v6-c-menu--m-flyout__menu--InsetInlineEnd | |
- --pf-v6-c-menu--m-flyout__menu--InsetInlineEnd
- --pf-v6-c-menu--m-flyout__menu--m-left--InsetInlineEnd
- calc(100% + --pf-v6-c-menu--m-flyout__menu--m-left--right-offset)
- calc(100% + 0px)
|
| .pf-v6-c-menu.pf-m-left | --pf-v6-c-menu--m-flyout__menu--InsetInlineStart | |
| .pf-v6-c-menu.pf-m-drilldown .pf-v6-c-menu__list .pf-v6-c-menu__list | --pf-v6-c-menu__list--PaddingBlockStart | |
| .pf-v6-c-menu.pf-m-drilldown .pf-v6-c-menu__list .pf-v6-c-menu__list | --pf-v6-c-menu__list--PaddingBlockEnd | |
| .pf-v6-c-menu.pf-m-plain | --pf-v6-c-menu--BoxShadow | |
- --pf-v6-c-menu--BoxShadow
- --pf-v6-c-menu--m-plain--BoxShadow
- none
|
| .pf-v6-c-menu.pf-m-scrollable | --pf-v6-c-menu__content--MaxHeight | |
- --pf-v6-c-menu__content--MaxHeight
- --pf-v6-c-menu--m-scrollable__content--MaxHeight
- 18.75rem
|
| .pf-v6-c-menu.pf-m-scrollable | --pf-v6-c-menu__footer--BoxShadow | 0px
-4px
6px
-4px
rgb(41, 41, 41, 0.2000) |
- --pf-v6-c-menu__footer--BoxShadow
- --pf-v6-c-menu--m-scrollable__footer--BoxShadow
- --pf-t--global--box-shadow--sm--top
- --pf-t--global--box-shadow--X--sm--top
--pf-t--global--box-shadow--Y--sm--top
--pf-t--global--box-shadow--blur--sm
--pf-t--global--box-shadow--spread--sm--directional
--pf-t--global--box-shadow--color--sm--directional
- --pf-t--global--box-shadow--X--400
--pf-t--global--box-shadow--Y--200
--pf-t--global--box-shadow--blur--100
--pf-t--global--box-shadow--spread--200
--pf-t--global--box-shadow--color--200
- 0px
-4px
6px
-4px
rgb(41, 41, 41, 0.2000)
|
| .pf-v6-c-menu.pf-m-scrollable | --pf-v6-c-menu__footer--BorderColor |
(In light theme) rgb(255, 255, 255, 0.0000) |
- --pf-v6-c-menu__footer--BorderColor
- --pf-v6-c-menu--m-scrollable__footer--BorderColor
- --pf-t--global--border--color--high-contrast
- rgb(255, 255, 255, 0.0000)
|
| .pf-v6-c-menu.pf-m-scrollable | --pf-v6-c-menu__footer--BorderWidth | |
- --pf-v6-c-menu__footer--BorderWidth
- --pf-v6-c-menu--m-scrollable__footer--BorderWidth
- --pf-t--global--border--width--high-contrast--regular
- 0px
|
| .pf-v6-c-menu.pf-m-scrollable | --pf-v6-c-menu__footer--PaddingBlockStart | |
- --pf-v6-c-menu__footer--PaddingBlockStart
- calc(--pf-v6-c-menu__item--PaddingBlockStart + --pf-v6-c-menu--RowGap)
- calc(--pf-t--global--spacer--sm + --pf-t--global--spacer--xs)
- calc(--pf-t--global--spacer--200 + --pf-t--global--spacer--100)
- calc(0.5rem + 0.25rem)
|
| .pf-v6-c-menu.pf-m-scrollable | --pf-v6-c-menu__footer--PaddingBlockEnd | |
- --pf-v6-c-menu__footer--PaddingBlockEnd
- calc(--pf-v6-c-menu__item--PaddingBlockStart + --pf-v6-c-menu--RowGap)
- calc(--pf-t--global--spacer--sm + --pf-t--global--spacer--xs)
- calc(--pf-t--global--spacer--200 + --pf-t--global--spacer--100)
- calc(0.5rem + 0.25rem)
|
| .pf-v6-c-menu.pf-m-scrollable:has(.pf-v6-c-menu__footer) | --pf-v6-c-menu--PaddingBlockEnd | |
| .pf-v6-c-menu__content .pf-v6-c-menu__content | --pf-v6-c-menu__content--Height | |
| .pf-v6-c-menu__list-item.pf-m-load | --pf-v6-c-menu__item--Color | |
- --pf-v6-c-menu__item--Color
- --pf-v6-c-menu__list-item--m-load__item--Color
- --pf-t--global--text--color--link--default
- --pf-t--global--text--color--link--100
- --pf-t--color--blue--50
- #0066cc
|
| .pf-v6-c-menu__list-item.pf-m-danger | --pf-v6-c-menu__item--Color | |
- --pf-v6-c-menu__item--Color
- --pf-v6-c-menu__list-item--m-danger--Color
- --pf-t--global--text--color--status--danger--default
- --pf-t--global--color--status--danger--default
- --pf-t--global--color--status--danger--100
- --pf-t--color--red-orange--60
- #b1380b
|
| .pf-v6-c-menu__list-item.pf-m-danger:is(:hover, :focus) | --pf-v6-c-menu__item--Color | |
- --pf-v6-c-menu__item--Color
- var(--pf-v6-c-menu__list-item--m-danger--hover--Color, --pf-v6-c-menu__list-item--m-danger--Color)
- undefined, --pf-v6-c-menu__list-item--m-danger--Color
- undefined, --pf-t--global--text--color--status--danger--default
- undefined, --pf-t--global--color--status--danger--default
- undefined, --pf-t--global--color--status--danger--100
- undefined, --pf-t--color--red-orange--60
- undefined, #b1380b
|
| .pf-v6-c-menu__list-item.pf-m-focus | --pf-v6-c-menu__list-item--BackgroundColor |
(In light theme) rgb(199, 199, 199, 0.2500) |
- --pf-v6-c-menu__list-item--BackgroundColor
- --pf-v6-c-menu__list-item--hover--BackgroundColor
- --pf-t--global--background--color--action--plain--hover
- --pf-t--global--background--color--600
- rgb(199, 199, 199, 0.2500)
|
| .pf-v6-c-menu__list-item.pf-m-focus | --pf-v6-c-menu__list-item--BorderWidth | |
- --pf-v6-c-menu__list-item--BorderWidth
- --pf-v6-c-menu__list-item--hover--BorderWidth
- --pf-t--global--border--width--action--plain--hover
- 0px
|
| .pf-v6-c-menu__item | --pf-v6-hidden-visible--visible--Display | |
| .pf-v6-c-menu__item | --pf-v6-hidden-visible--hidden--Display | |
| .pf-v6-c-menu__item | --pf-v6-hidden-visible--Display | |
- --pf-v6-hidden-visible--Display
- --pf-v6-hidden-visible--visible--Display
- --pf-v6-c-data-list__item-action--Display
- flex
|
| .pf-v6-c-menu__item.pf-m-hidden | --pf-v6-hidden-visible--Display | |
- --pf-v6-hidden-visible--Display
- --pf-v6-hidden-visible--hidden--Display
- none
|
| .pf-v6-c-menu__item.pf-m-selected | --pf-v6-c-menu__item-select-icon--Color | |
- --pf-v6-c-menu__item-select-icon--Color
- --pf-v6-c-menu__item--m-selected__item-select-icon--Color
- --pf-t--global--icon--color--brand--default
- --pf-t--global--color--brand--default
- --pf-t--global--color--brand--200
- --pf-t--color--blue--50
- #0066cc
|
| .pf-v6-c-menu__item-check .pf-v6-c-check | --pf-v6-c-check__input--TranslateY | |
| .pf-v6-c-menu__item-toggle-icon.pf-m-favorited | --pf-v6-c-button--m-plain__icon--Color | |
- --pf-v6-c-button--m-plain__icon--Color
- --pf-v6-c-menu__item-action--m-favorited--Color
- --pf-t--global--icon--color--favorite--clicked
- --pf-t--global--color--favorite--clicked
- --pf-t--global--color--favorite--200
- --pf-t--color--yellow--40
- #dca614
|
| .pf-v6-c-menu__item-toggle-icon.pf-m-favorited:is(:hover, :focus) | --pf-v6-c-button--hover__icon--Color | |
- --pf-v6-c-button--hover__icon--Color
- --pf-v6-c-menu__item-action--m-favorited--Color
- --pf-t--global--icon--color--favorite--clicked
- --pf-t--global--color--favorite--clicked
- --pf-t--global--color--favorite--200
- --pf-t--color--yellow--40
- #dca614
|
| .pf-v6-c-menu__breadcrumb | --pf-v6-c-breadcrumb__item--FontSize | |
- --pf-v6-c-breadcrumb__item--FontSize
- --pf-v6-c-menu__breadcrumb--FontSize
- undefined
|
| .pf-v6-c-menu__breadcrumb .pf-v6-c-menu-toggle | --pf-v6-c-menu-toggle--BorderWidth | |
| .pf-v6-c-menu__breadcrumb .pf-v6-c-menu-toggle | --pf-v6-c-menu-toggle--BorderColor | |