Examples
Filled labels
GreyGrey icon Grey removable Grey icon removable Grey link Grey link removable Grey label with icon that overflows Grey link removable (disabled)
Blue Blue icon Blue removable Blue icon removable Blue link Blue link removable Blue label with icon that overflows Blue link removable (disabled)
Green Green icon Green removable Green icon removable Green link Green link removable Green label with icon that overflows Green link removable (disabled)
Orange Orange icon Orange removable Orange icon removable Orange link Orange link removable Orange label with icon that overflows Orange link removable (disabled)
Red Red icon Red removable Red icon removable Red link Red link removable Red label with icon that overflows Red link removable (disabled)
Purple Purple icon Purple removable Purple icon removable Purple link Purple link removable Purple label with icon that overflows Purple link removable (disabled)
Cyan Cyan icon Cyan removable Cyan icon removable Cyan link Cyan link removable Cyan label with icon that overflows Cyan link removable (disabled)
Gold Gold icon Gold removable Gold icon removable Gold link Gold link removable Gold label with icon that overflows Gold link removable (disabled)
Blue Blue icon Blue removable Blue icon removable Blue link Blue link removable Blue label with icon that overflows Blue link removable (disabled)
Green Green icon Green removable Green icon removable Green link Green link removable Green label with icon that overflows Green link removable (disabled)
Orange Orange icon Orange removable Orange icon removable Orange link Orange link removable Orange label with icon that overflows Orange link removable (disabled)
Red Red icon Red removable Red icon removable Red link Red link removable Red label with icon that overflows Red link removable (disabled)
Purple Purple icon Purple removable Purple icon removable Purple link Purple link removable Purple label with icon that overflows Purple link removable (disabled)
Cyan Cyan icon Cyan removable Cyan icon removable Cyan link Cyan link removable Cyan label with icon that overflows Cyan link removable (disabled)
Gold Gold icon Gold removable Gold icon removable Gold link Gold link removable Gold label with icon that overflows Gold link removable (disabled)
Label that overflows its parent, but has no textMaxWidth on its own
Outlined labels
Grey Grey icon Grey removable Grey icon removable Grey link Grey link removable Grey label with icon that overflows Grey link removable (disabled)
Blue Blue icon Blue removable Blue icon removable Blue link Blue link removable Blue label with icon that overflows Blue link removable (disabled)
Green Green icon Green removable Green icon removable Green link Green link removable Green label with icon that overflows Green link removable (disabled)
Orange Orange icon Orange removable Orange icon removable Orange link Orange link removable Orange label with icon that overflows Orange link removable (disabled)
Red Red icon Red removable Red icon removable Red link Red link removable Red label with icon that overflows Red link removable (disabled)
Purple Purple icon Purple removable Purple icon removable Purple link Purple link removable Purple label with icon that overflows Purple link removable (disabled)
Cyan Cyan icon Cyan removable Cyan icon removable Cyan link Cyan link removable Cyan label with icon that overflows Cyan link removable (disabled)
Gold Gold icon Gold removable Gold icon removable Gold link Gold link removable Gold label with icon that overflows Gold link removable (disabled)
Blue Blue icon Blue removable Blue icon removable Blue link Blue link removable Blue label with icon that overflows Blue link removable (disabled)
Green Green icon Green removable Green icon removable Green link Green link removable Green label with icon that overflows Green link removable (disabled)
Orange Orange icon Orange removable Orange icon removable Orange link Orange link removable Orange label with icon that overflows Orange link removable (disabled)
Red Red icon Red removable Red icon removable Red link Red link removable Red label with icon that overflows Red link removable (disabled)
Purple Purple icon Purple removable Purple icon removable Purple link Purple link removable Purple label with icon that overflows Purple link removable (disabled)
Cyan Cyan icon Cyan removable Cyan icon removable Cyan link Cyan link removable Cyan label with icon that overflows Cyan link removable (disabled)
Gold Gold icon Gold removable Gold icon removable Gold link Gold link removable Gold label with icon that overflows Gold link removable (disabled)
Compact labels
Grey Compact icon Compact removable Compact icon removable Compact link Compact link removable Compact label with icon that overflows Compact link removable (disabled)
Editable labels
Click or press either enter or space to begin editing a label. After editing, click outside the label or press enter again to complete the edit. To cancel an edit, press escape.
You can also customize any Label's close button aria-label as this example shows with closeBtnAriaLabel.
Basic label group
Use a label group when you have multiple labels to display at once.
- Label 1
- Label 2
- Label 3
Label group with overflow
An overflow label can be added to the end of a group to save space when the number of labels exceeds some threshold. Click the overflow label to expand and collapse the group.
- Label 1
- Label 2
- Label 3
Vertical label group
Labels in a group can also be stacked vertically. This example shows a verical label group with a category name and overflow.
- Label 1
- Label 2
- Label 3
Editable label group with add button
The contents of a label group can be modified by removing labels or adding new ones using the add button. For additional documentation that showcases adding a new label, see label demos.
Props
Label
| Name | Type | Default | Description |
|---|---|---|---|
| children | React.ReactNode | Content rendered inside the label. | |
| className | string | '' | Additional classes added to the label. |
| closeBtn | React.ReactNode | Node for custom close button. | |
| closeBtnAriaLabel | string | Aria label for close button | |
| closeBtnProps | any | Additional properties for the default close button. | |
| color | 'blue' | 'cyan' | 'green' | 'orange' | 'purple' | 'red' | 'grey' | 'gold' | 'grey' | Color of the label. |
| editablePropsBeta | any | Additional props passed to the editable label text div. Optionally passing onInput and onBlur callbacks will allow finer custom text input control. | |
| href | string | Href for a label that is a link. If present, the label will change to an anchor element. This should not be passed in if the onClick prop is also passed in. | |
| icon | React.ReactNode | Icon added to the left of the label text. | |
| isCompact | boolean | false | Flag indicating the label is compact. |
| isDisabled | boolean | false | Flag indicating the label is disabled. Works only on clickable labels, so either href or onClick props must be passed in. |
| isEditableBeta | boolean | false | Flag indicating the label is editable. |
| isOverflowLabel | boolean | Flag indicating if the label is an overflow label. | |
| onClick | (event: React.MouseEvent) => void | Callback for when the label is clicked. This should not be passed in if the href or isEditable props are also passed in. | |
| onClose | (event: React.MouseEvent) => void | Close click callback for removable labels. If present, label will have a close button. | |
| onEditCancelBeta | (event: KeyboardEvent, previousText: string) => void | Callback when an editable label cancels an edit. | |
| onEditCompleteBeta | (event: MouseEvent | KeyboardEvent, newText: string) => void | Callback when an editable label completes an edit. | |
| render | ({ className, content, componentRef }: { className: string; content: React.ReactNode; componentRef: any; }) => React.ReactNode | Forwards the label content and className to rendered function. Use this prop for react router support. | |
| textMaxWidth | string | The max width of the label before it is truncated. Can be any valid CSS unit, such as '100%', '100px', or '16ch'. | |
| 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 | |
| variant | 'outline' | 'filled' | 'filled' | Variant of the label. |
LabelGroup
| Name | Type | Default | Description |
|---|---|---|---|
| addLabelControl | React.ReactNode | Control for adding new labels | |
| aria-label | string | 'Label group category' | Aria label for label group that does not have a category name |
| categoryName | string | '' | Category name text for the label group category. If this prop is supplied the label group with have a label and category styling applied |
| children | React.ReactNode | Content rendered inside the label group. Should be <Label> elements. | |
| className | string | Additional classes added to the label item | |
| closeBtnAriaLabel | string | 'Close label group' | Aria label for close button |
| collapsedText | string | '${remaining} more' | Customizeable template string. Use variable "${remaining}" for the overflow label count. |
| defaultIsOpen | boolean | false | Flag for having the label group default to expanded |
| editableTextAreaProps | any | Additional props passed to the editable textarea. | |
| expandedText | string | 'Show Less' | Customizable "Show Less" text string |
| hasEditableTextArea | boolean | false | Flag indicating the editable label group should be appended with a textarea. |
| isClosable | boolean | false | Flag if label group can be closed |
| isCompact | boolean | false | Flag indicating the labels in the group are compact |
| isEditable | boolean | false | Flag indicating contained labels are editable. Allows spacing for a text input after the labels. |
| isVertical | boolean | false | Flag to implement a vertical layout |
| numLabels | number | 3 | Set number of labels to show before overflow |
| onClick | (event: React.MouseEvent) => void | (_e: React.MouseEvent) => undefined as any | Function that is called when clicking on the label group close button |
| tooltipPosition | | TooltipPosition | 'auto' | 'top' | 'bottom' | 'left' | 'right' | 'top-start' | 'top-end' | 'bottom-start' | 'bottom-end' | 'left-start' | 'left-end' | 'right-start' | 'right-end' | 'top' | Position of the tooltip which is displayed if the category name text is longer |
CSS variables
Prefixed with 'pf-v5-c-label'
| Expand or collapse column | Selector | Variable | Value | |
|---|---|---|---|---|
| .pf-v5-c-label | --pf-v5-c-label--PaddingTop | 0.25rem | ||
--pf-v5-c-label--PaddingTop --pf-v5-global--spacer--xs $pf-v5-global--spacer--xs pf-size-prem(4px) 0.25rem | ||||
| .pf-v5-c-label | --pf-v5-c-label--PaddingRight | 0.5rem | ||
--pf-v5-c-label--PaddingRight --pf-v5-global--spacer--sm $pf-v5-global--spacer--sm pf-size-prem(8px) 0.5rem | ||||
| .pf-v5-c-label | --pf-v5-c-label--PaddingBottom | 0.25rem | ||
--pf-v5-c-label--PaddingBottom --pf-v5-global--spacer--xs $pf-v5-global--spacer--xs pf-size-prem(4px) 0.25rem | ||||
| .pf-v5-c-label | --pf-v5-c-label--PaddingLeft | 0.5rem | ||
--pf-v5-c-label--PaddingLeft --pf-v5-global--spacer--sm $pf-v5-global--spacer--sm pf-size-prem(8px) 0.5rem | ||||
| .pf-v5-c-label | --pf-v5-c-label--MaxWidth | 100% | ||
| .pf-v5-c-label | --pf-v5-c-label--BorderRadius | 30em | ||
--pf-v5-c-label--BorderRadius --pf-v5-global--BorderRadius--lg $pf-v5-global--BorderRadius--lg 30em | ||||
| .pf-v5-c-label | --pf-v5-c-label--BackgroundColor | #f5f5f5 | ||
--pf-v5-c-label--BackgroundColor --pf-v5-global--palette--black-150 $pf-v5-color-black-150 #f5f5f5 | ||||
| .pf-v5-c-label | --pf-v5-c-label--Color | #151515 | ||
--pf-v5-c-label--Color --pf-v5-global--Color--100 $pf-v5-global--Color--100 $pf-v5-color-black-900 #151515 | ||||
| .pf-v5-c-label | --pf-v5-c-label--FontSize | 0.875rem | ||
--pf-v5-c-label--FontSize --pf-v5-global--FontSize--sm $pf-v5-global--FontSize--sm pf-font-prem(14px) 0.875rem | ||||
| .pf-v5-c-label | --pf-v5-c-label__content--before--BorderWidth | 1px | ||
--pf-v5-c-label__content--before--BorderWidth --pf-v5-global--BorderWidth--sm $pf-v5-global--BorderWidth--sm 1px | ||||
| .pf-v5-c-label | --pf-v5-c-label__content--before--BorderColor | #d2d2d2 | ||
--pf-v5-c-label__content--before--BorderColor --pf-v5-global--BorderColor--100 $pf-v5-global--BorderColor--100 $pf-v5-color-black-300 #d2d2d2 | ||||
| .pf-v5-c-label | --pf-v5-c-label--m-outline--BackgroundColor | #fff | ||
--pf-v5-c-label--m-outline--BackgroundColor --pf-v5-global--BackgroundColor--100 $pf-v5-global--BackgroundColor--100 $pf-v5-color-white #fff | ||||
| .pf-v5-c-label | --pf-v5-c-label--m-outline__content--before--BorderWidth | 1px | ||
--pf-v5-c-label--m-outline__content--before--BorderWidth --pf-v5-global--BorderWidth--sm $pf-v5-global--BorderWidth--sm 1px | ||||
| .pf-v5-c-label | --pf-v5-c-label--m-outline__content--before--BorderColor | #d2d2d2 | ||
--pf-v5-c-label--m-outline__content--before--BorderColor --pf-v5-global--BorderColor--100 $pf-v5-global--BorderColor--100 $pf-v5-color-black-300 #d2d2d2 | ||||
| .pf-v5-c-label | --pf-v5-c-label__content--link--hover--before--BorderWidth | 2px | ||
--pf-v5-c-label__content--link--hover--before--BorderWidth --pf-v5-global--BorderWidth--md $pf-v5-global--BorderWidth--md 2px | ||||
| .pf-v5-c-label | --pf-v5-c-label__content--link--focus--before--BorderWidth | 2px | ||
--pf-v5-c-label__content--link--focus--before--BorderWidth --pf-v5-global--BorderWidth--md $pf-v5-global--BorderWidth--md 2px | ||||
| .pf-v5-c-label | --pf-v5-c-label__content--link--hover--before--BorderColor | #8a8d90 | ||
--pf-v5-c-label__content--link--hover--before--BorderColor --pf-v5-global--BorderColor--200 $pf-v5-global--BorderColor--200 $pf-v5-color-black-500 #8a8d90 | ||||
| .pf-v5-c-label | --pf-v5-c-label__content--link--focus--before--BorderColor | #8a8d90 | ||
--pf-v5-c-label__content--link--focus--before--BorderColor --pf-v5-global--BorderColor--200 $pf-v5-global--BorderColor--200 $pf-v5-color-black-500 #8a8d90 | ||||
| .pf-v5-c-label | --pf-v5-c-label--m-outline__content--link--hover--before--BorderWidth | 2px | ||
--pf-v5-c-label--m-outline__content--link--hover--before--BorderWidth --pf-v5-global--BorderWidth--md $pf-v5-global--BorderWidth--md 2px | ||||
| .pf-v5-c-label | --pf-v5-c-label--m-outline__content--link--focus--before--BorderWidth | 2px | ||
--pf-v5-c-label--m-outline__content--link--focus--before--BorderWidth --pf-v5-global--BorderWidth--md $pf-v5-global--BorderWidth--md 2px | ||||
| .pf-v5-c-label | --pf-v5-c-label--m-outline__content--link--hover--before--BorderColor | #d2d2d2 | ||
--pf-v5-c-label--m-outline__content--link--hover--before--BorderColor --pf-v5-global--BorderColor--100 $pf-v5-global--BorderColor--100 $pf-v5-color-black-300 #d2d2d2 | ||||
| .pf-v5-c-label | --pf-v5-c-label--m-outline__content--link--focus--before--BorderColor | #d2d2d2 | ||
--pf-v5-c-label--m-outline__content--link--focus--before--BorderColor --pf-v5-global--BorderColor--100 $pf-v5-global--BorderColor--100 $pf-v5-color-black-300 #d2d2d2 | ||||
| .pf-v5-c-label | --pf-v5-c-label--m-blue--BackgroundColor | #e7f1fa | ||
--pf-v5-c-label--m-blue--BackgroundColor --pf-v5-global--palette--blue-50 $pf-v5-color-blue-50 #e7f1fa | ||||
| .pf-v5-c-label | --pf-v5-c-label--m-blue__icon--Color | #06c | ||
--pf-v5-c-label--m-blue__icon--Color --pf-v5-global--primary-color--100 $pf-v5-global--primary-color--100 $pf-v5-color-blue-400 #06c | ||||
| .pf-v5-c-label | --pf-v5-c-label--m-blue__content--Color | #002952 | ||
--pf-v5-c-label--m-blue__content--Color --pf-v5-global--info-color--200 $pf-v5-global--info-color--200 $pf-v5-color-blue-600 #002952 | ||||
| .pf-v5-c-label | --pf-v5-c-label--m-blue__content--before--BorderColor | #bee1f4 | ||
--pf-v5-c-label--m-blue__content--before--BorderColor --pf-v5-global--palette--blue-100 $pf-v5-color-blue-100 #bee1f4 | ||||
| .pf-v5-c-label | --pf-v5-c-label--m-blue__content--link--hover--before--BorderColor | #06c | ||
--pf-v5-c-label--m-blue__content--link--hover--before--BorderColor --pf-v5-global--primary-color--100 $pf-v5-global--primary-color--100 $pf-v5-color-blue-400 #06c | ||||
| .pf-v5-c-label | --pf-v5-c-label--m-blue__content--link--focus--before--BorderColor | #06c | ||
--pf-v5-c-label--m-blue__content--link--focus--before--BorderColor --pf-v5-global--primary-color--100 $pf-v5-global--primary-color--100 $pf-v5-color-blue-400 #06c | ||||
| .pf-v5-c-label | --pf-v5-c-label--m-outline--m-blue__content--Color | #06c | ||
--pf-v5-c-label--m-outline--m-blue__content--Color --pf-v5-global--primary-color--100 $pf-v5-global--primary-color--100 $pf-v5-color-blue-400 #06c | ||||
| .pf-v5-c-label | --pf-v5-c-label--m-outline--m-blue__content--before--BorderColor | #d2d2d2 | ||
--pf-v5-c-label--m-outline--m-blue__content--before--BorderColor --pf-v5-global--BorderColor--100 $pf-v5-global--BorderColor--100 $pf-v5-color-black-300 #d2d2d2 | ||||
| .pf-v5-c-label | --pf-v5-c-label--m-outline--m-blue__content--link--hover--before--BorderColor | #d2d2d2 | ||
--pf-v5-c-label--m-outline--m-blue__content--link--hover--before--BorderColor --pf-v5-global--BorderColor--100 $pf-v5-global--BorderColor--100 $pf-v5-color-black-300 #d2d2d2 | ||||
| .pf-v5-c-label | --pf-v5-c-label--m-outline--m-blue__content--link--focus--before--BorderColor | #d2d2d2 | ||
--pf-v5-c-label--m-outline--m-blue__content--link--focus--before--BorderColor --pf-v5-global--BorderColor--100 $pf-v5-global--BorderColor--100 $pf-v5-color-black-300 #d2d2d2 | ||||
| .pf-v5-c-label | --pf-v5-c-label--m-green--BackgroundColor | #f3faf2 | ||
--pf-v5-c-label--m-green--BackgroundColor --pf-v5-global--palette--green-50 $pf-v5-color-green-50 #f3faf2 | ||||
| .pf-v5-c-label | --pf-v5-c-label--m-green__icon--Color | #3e8635 | ||
--pf-v5-c-label--m-green__icon--Color --pf-v5-global--success-color--100 $pf-v5-global--success-color--100 $pf-v5-color-green-500 #3e8635 | ||||
| .pf-v5-c-label | --pf-v5-c-label--m-green__content--Color | #1e4f18 | ||
--pf-v5-c-label--m-green__content--Color --pf-v5-global--success-color--200 $pf-v5-global--success-color--200 $pf-v5-color-green-600 #1e4f18 | ||||
| .pf-v5-c-label | --pf-v5-c-label--m-green__content--before--BorderColor | #bde5b8 | ||
--pf-v5-c-label--m-green__content--before--BorderColor --pf-v5-global--palette--green-100 $pf-v5-color-green-100 #bde5b8 | ||||
| .pf-v5-c-label | --pf-v5-c-label--m-green__content--link--hover--before--BorderColor | #3e8635 | ||
--pf-v5-c-label--m-green__content--link--hover--before--BorderColor --pf-v5-global--success-color--100 $pf-v5-global--success-color--100 $pf-v5-color-green-500 #3e8635 | ||||
| .pf-v5-c-label | --pf-v5-c-label--m-green__content--link--focus--before--BorderColor | #3e8635 | ||
--pf-v5-c-label--m-green__content--link--focus--before--BorderColor --pf-v5-global--success-color--100 $pf-v5-global--success-color--100 $pf-v5-color-green-500 #3e8635 | ||||
| .pf-v5-c-label | --pf-v5-c-label--m-outline--m-green__content--Color | #3e8635 | ||
--pf-v5-c-label--m-outline--m-green__content--Color --pf-v5-global--success-color--100 $pf-v5-global--success-color--100 $pf-v5-color-green-500 #3e8635 | ||||
| .pf-v5-c-label | --pf-v5-c-label--m-outline--m-green__content--before--BorderColor | #d2d2d2 | ||
--pf-v5-c-label--m-outline--m-green__content--before--BorderColor --pf-v5-global--BorderColor--100 $pf-v5-global--BorderColor--100 $pf-v5-color-black-300 #d2d2d2 | ||||
| .pf-v5-c-label | --pf-v5-c-label--m-outline--m-green__content--link--hover--before--BorderColor | #d2d2d2 | ||
--pf-v5-c-label--m-outline--m-green__content--link--hover--before--BorderColor --pf-v5-global--BorderColor--100 $pf-v5-global--BorderColor--100 $pf-v5-color-black-300 #d2d2d2 | ||||
| .pf-v5-c-label | --pf-v5-c-label--m-outline--m-green__content--link--focus--before--BorderColor | #d2d2d2 | ||
--pf-v5-c-label--m-outline--m-green__content--link--focus--before--BorderColor --pf-v5-global--BorderColor--100 $pf-v5-global--BorderColor--100 $pf-v5-color-black-300 #d2d2d2 | ||||
| .pf-v5-c-label | --pf-v5-c-label--m-orange--BackgroundColor | #fff6ec | ||
--pf-v5-c-label--m-orange--BackgroundColor --pf-v5-global--palette--orange-50 $pf-v5-color-orange-50 #fff6ec | ||||
| .pf-v5-c-label | --pf-v5-c-label--m-orange__icon--Color | #ec7a08 | ||
--pf-v5-c-label--m-orange__icon--Color --pf-v5-global--palette--orange-300 $pf-v5-color-orange-300 #ec7a08 | ||||
| .pf-v5-c-label | --pf-v5-c-label--m-orange__content--Color | #3b1f00 | ||
--pf-v5-c-label--m-orange__content--Color --pf-v5-global--palette--orange-700 $pf-v5-color-orange-700 #3b1f00 | ||||
| .pf-v5-c-label | --pf-v5-c-label--m-orange__content--before--BorderColor | #f4b678 | ||
--pf-v5-c-label--m-orange__content--before--BorderColor --pf-v5-global--palette--orange-100 $pf-v5-color-orange-100 #f4b678 | ||||
| .pf-v5-c-label | --pf-v5-c-label--m-orange__content--link--hover--before--BorderColor | #ec7a08 | ||
--pf-v5-c-label--m-orange__content--link--hover--before--BorderColor --pf-v5-global--palette--orange-300 $pf-v5-color-orange-300 #ec7a08 | ||||
| .pf-v5-c-label | --pf-v5-c-label--m-orange__content--link--focus--before--BorderColor | #ec7a08 | ||
--pf-v5-c-label--m-orange__content--link--focus--before--BorderColor --pf-v5-global--palette--orange-300 $pf-v5-color-orange-300 #ec7a08 | ||||
| .pf-v5-c-label | --pf-v5-c-label--m-outline--m-orange__content--Color | #8f4700 | ||
--pf-v5-c-label--m-outline--m-orange__content--Color --pf-v5-global--palette--orange-500 $pf-v5-color-orange-500 #8f4700 | ||||
| .pf-v5-c-label | --pf-v5-c-label--m-outline--m-orange__content--before--BorderColor | #d2d2d2 | ||
--pf-v5-c-label--m-outline--m-orange__content--before--BorderColor --pf-v5-global--BorderColor--100 $pf-v5-global--BorderColor--100 $pf-v5-color-black-300 #d2d2d2 | ||||
| .pf-v5-c-label | --pf-v5-c-label--m-outline--m-orange__content--link--hover--before--BorderColor | #d2d2d2 | ||
--pf-v5-c-label--m-outline--m-orange__content--link--hover--before--BorderColor --pf-v5-global--BorderColor--100 $pf-v5-global--BorderColor--100 $pf-v5-color-black-300 #d2d2d2 | ||||
| .pf-v5-c-label | --pf-v5-c-label--m-outline--m-orange__content--link--focus--before--BorderColor | #d2d2d2 | ||
--pf-v5-c-label--m-outline--m-orange__content--link--focus--before--BorderColor --pf-v5-global--BorderColor--100 $pf-v5-global--BorderColor--100 $pf-v5-color-black-300 #d2d2d2 | ||||
| .pf-v5-c-label | --pf-v5-c-label--m-red--BackgroundColor | #faeae8 | ||
--pf-v5-c-label--m-red--BackgroundColor --pf-v5-global--palette--red-50 $pf-v5-color-red-50 #faeae8 | ||||
| .pf-v5-c-label | --pf-v5-c-label--m-red__icon--Color | #c9190b | ||
--pf-v5-c-label--m-red__icon--Color --pf-v5-global--danger-color--100 $pf-v5-global--danger-color--100 $pf-v5-color-red-100 #c9190b | ||||
| .pf-v5-c-label | --pf-v5-c-label--m-red__content--Color | #7d1007 | ||
--pf-v5-c-label--m-red__content--Color --pf-v5-global--palette--red-300 $pf-v5-color-red-300 #7d1007 | ||||
| .pf-v5-c-label | --pf-v5-c-label--m-red__content--before--BorderColor | #c9190b | ||
--pf-v5-c-label--m-red__content--before--BorderColor --pf-v5-global--palette--red-100 $pf-v5-color-red-100 #c9190b | ||||
| .pf-v5-c-label | --pf-v5-c-label--m-red__content--link--hover--before--BorderColor | #c9190b | ||
--pf-v5-c-label--m-red__content--link--hover--before--BorderColor --pf-v5-global--danger-color--100 $pf-v5-global--danger-color--100 $pf-v5-color-red-100 #c9190b | ||||
| .pf-v5-c-label | --pf-v5-c-label--m-red__content--link--focus--before--BorderColor | #c9190b | ||
--pf-v5-c-label--m-red__content--link--focus--before--BorderColor --pf-v5-global--danger-color--100 $pf-v5-global--danger-color--100 $pf-v5-color-red-100 #c9190b | ||||
| .pf-v5-c-label | --pf-v5-c-label--m-outline--m-red__content--Color | #c9190b | ||
--pf-v5-c-label--m-outline--m-red__content--Color --pf-v5-global--danger-color--100 $pf-v5-global--danger-color--100 $pf-v5-color-red-100 #c9190b | ||||
| .pf-v5-c-label | --pf-v5-c-label--m-outline--m-red__content--before--BorderColor | #d2d2d2 | ||
--pf-v5-c-label--m-outline--m-red__content--before--BorderColor --pf-v5-global--BorderColor--100 $pf-v5-global--BorderColor--100 $pf-v5-color-black-300 #d2d2d2 | ||||
| .pf-v5-c-label | --pf-v5-c-label--m-outline--m-red__content--link--hover--before--BorderColor | #d2d2d2 | ||
--pf-v5-c-label--m-outline--m-red__content--link--hover--before--BorderColor --pf-v5-global--BorderColor--100 $pf-v5-global--BorderColor--100 $pf-v5-color-black-300 #d2d2d2 | ||||
| .pf-v5-c-label | --pf-v5-c-label--m-outline--m-red__content--link--focus--before--BorderColor | #d2d2d2 | ||
--pf-v5-c-label--m-outline--m-red__content--link--focus--before--BorderColor --pf-v5-global--BorderColor--100 $pf-v5-global--BorderColor--100 $pf-v5-color-black-300 #d2d2d2 | ||||
| .pf-v5-c-label | --pf-v5-c-label--m-purple--BackgroundColor | #f2f0fc | ||
--pf-v5-c-label--m-purple--BackgroundColor --pf-v5-global--palette--purple-50 $pf-v5-color-purple-50 #f2f0fc | ||||
| .pf-v5-c-label | --pf-v5-c-label--m-purple__icon--Color | #6753ac | ||
--pf-v5-c-label--m-purple__icon--Color --pf-v5-global--palette--purple-500 $pf-v5-color-purple-500 #6753ac | ||||
| .pf-v5-c-label | --pf-v5-c-label--m-purple__content--Color | #1f0066 | ||
--pf-v5-c-label--m-purple__content--Color --pf-v5-global--palette--purple-700 $pf-v5-color-purple-700 #1f0066 | ||||
| .pf-v5-c-label | --pf-v5-c-label--m-purple__content--before--BorderColor | #cbc1ff | ||
--pf-v5-c-label--m-purple__content--before--BorderColor --pf-v5-global--palette--purple-100 $pf-v5-color-purple-100 #cbc1ff | ||||
| .pf-v5-c-label | --pf-v5-c-label--m-purple__content--link--hover--before--BorderColor | #6753ac | ||
--pf-v5-c-label--m-purple__content--link--hover--before--BorderColor --pf-v5-global--palette--purple-500 $pf-v5-color-purple-500 #6753ac | ||||
| .pf-v5-c-label | --pf-v5-c-label--m-purple__content--link--focus--before--BorderColor | #6753ac | ||
--pf-v5-c-label--m-purple__content--link--focus--before--BorderColor --pf-v5-global--palette--purple-500 $pf-v5-color-purple-500 #6753ac | ||||
| .pf-v5-c-label | --pf-v5-c-label--m-outline--m-purple__content--Color | #6753ac | ||
--pf-v5-c-label--m-outline--m-purple__content--Color --pf-v5-global--palette--purple-500 $pf-v5-color-purple-500 #6753ac | ||||
| .pf-v5-c-label | --pf-v5-c-label--m-outline--m-purple__content--before--BorderColor | #d2d2d2 | ||
--pf-v5-c-label--m-outline--m-purple__content--before--BorderColor --pf-v5-global--BorderColor--100 $pf-v5-global--BorderColor--100 $pf-v5-color-black-300 #d2d2d2 | ||||
| .pf-v5-c-label | --pf-v5-c-label--m-outline--m-purple__content--link--hover--before--BorderColor | #d2d2d2 | ||
--pf-v5-c-label--m-outline--m-purple__content--link--hover--before--BorderColor --pf-v5-global--BorderColor--100 $pf-v5-global--BorderColor--100 $pf-v5-color-black-300 #d2d2d2 | ||||
| .pf-v5-c-label | --pf-v5-c-label--m-outline--m-purple__content--link--focus--before--BorderColor | #d2d2d2 | ||
--pf-v5-c-label--m-outline--m-purple__content--link--focus--before--BorderColor --pf-v5-global--BorderColor--100 $pf-v5-global--BorderColor--100 $pf-v5-color-black-300 #d2d2d2 | ||||
| .pf-v5-c-label | --pf-v5-c-label--m-cyan--BackgroundColor | #f2f9f9 | ||
--pf-v5-c-label--m-cyan--BackgroundColor --pf-v5-global--palette--cyan-50 $pf-v5-color-cyan-50 #f2f9f9 | ||||
| .pf-v5-c-label | --pf-v5-c-label--m-cyan__icon--Color | #009596 | ||
--pf-v5-c-label--m-cyan__icon--Color --pf-v5-global--custom-color--200 $pf-v5-global--custom-color--200 $pf-v5-color-cyan-300 #009596 | ||||
| .pf-v5-c-label | --pf-v5-c-label--m-cyan__content--Color | #003737 | ||
--pf-v5-c-label--m-cyan__content--Color --pf-v5-global--custom-color--300 $pf-v5-global--custom-color--300 $pf-v5-color-cyan-500 #003737 | ||||
| .pf-v5-c-label | --pf-v5-c-label--m-cyan__content--before--BorderColor | #a2d9d9 | ||
--pf-v5-c-label--m-cyan__content--before--BorderColor --pf-v5-global--palette--cyan-100 $pf-v5-color-cyan-100 #a2d9d9 | ||||
| .pf-v5-c-label | --pf-v5-c-label--m-cyan__content--link--hover--before--BorderColor | #009596 | ||
--pf-v5-c-label--m-cyan__content--link--hover--before--BorderColor --pf-v5-global--custom-color--200 $pf-v5-global--custom-color--200 $pf-v5-color-cyan-300 #009596 | ||||
| .pf-v5-c-label | --pf-v5-c-label--m-cyan__content--link--focus--before--BorderColor | #009596 | ||
--pf-v5-c-label--m-cyan__content--link--focus--before--BorderColor --pf-v5-global--custom-color--200 $pf-v5-global--custom-color--200 $pf-v5-color-cyan-300 #009596 | ||||
| .pf-v5-c-label | --pf-v5-c-label--m-outline--m-cyan__content--Color | #005f60 | ||
--pf-v5-c-label--m-outline--m-cyan__content--Color --pf-v5-global--palette--cyan-400 $pf-v5-color-cyan-400 #005f60 | ||||
| .pf-v5-c-label | --pf-v5-c-label--m-outline--m-cyan__content--before--BorderColor | #d2d2d2 | ||
--pf-v5-c-label--m-outline--m-cyan__content--before--BorderColor --pf-v5-global--BorderColor--100 $pf-v5-global--BorderColor--100 $pf-v5-color-black-300 #d2d2d2 | ||||
| .pf-v5-c-label | --pf-v5-c-label--m-outline--m-cyan__content--link--hover--before--BorderColor | #d2d2d2 | ||
--pf-v5-c-label--m-outline--m-cyan__content--link--hover--before--BorderColor --pf-v5-global--BorderColor--100 $pf-v5-global--BorderColor--100 $pf-v5-color-black-300 #d2d2d2 | ||||
| .pf-v5-c-label | --pf-v5-c-label--m-outline--m-cyan__content--link--focus--before--BorderColor | #d2d2d2 | ||
--pf-v5-c-label--m-outline--m-cyan__content--link--focus--before--BorderColor --pf-v5-global--BorderColor--100 $pf-v5-global--BorderColor--100 $pf-v5-color-black-300 #d2d2d2 | ||||
| .pf-v5-c-label | --pf-v5-c-label--m-gold--BackgroundColor | #fdf7e7 | ||
--pf-v5-c-label--m-gold--BackgroundColor --pf-v5-global--palette--gold-50 $pf-v5-color-gold-50 #fdf7e7 | ||||
| .pf-v5-c-label | --pf-v5-c-label--m-gold__icon--Color | #f0ab00 | ||
--pf-v5-c-label--m-gold__icon--Color --pf-v5-global--palette--gold-400 $pf-v5-color-gold-400 #f0ab00 | ||||
| .pf-v5-c-label | --pf-v5-c-label--m-gold__content--Color | #3d2c00 | ||
--pf-v5-c-label--m-gold__content--Color --pf-v5-global--palette--gold-700 $pf-v5-color-gold-700 #3d2c00 | ||||
| .pf-v5-c-label | --pf-v5-c-label--m-gold__content--before--BorderColor | #f9e0a2 | ||
--pf-v5-c-label--m-gold__content--before--BorderColor --pf-v5-global--palette--gold-100 $pf-v5-color-gold-100 #f9e0a2 | ||||
| .pf-v5-c-label | --pf-v5-c-label--m-gold__content--link--hover--before--BorderColor | #f4c145 | ||
--pf-v5-c-label--m-gold__content--link--hover--before--BorderColor --pf-v5-global--palette--gold-300 $pf-v5-color-gold-300 #f4c145 | ||||
| .pf-v5-c-label | --pf-v5-c-label--m-gold__content--link--focus--before--BorderColor | #f4c145 | ||
--pf-v5-c-label--m-gold__content--link--focus--before--BorderColor --pf-v5-global--palette--gold-300 $pf-v5-color-gold-300 #f4c145 | ||||
| .pf-v5-c-label | --pf-v5-c-label--m-outline--m-gold__content--Color | #795600 | ||
--pf-v5-c-label--m-outline--m-gold__content--Color --pf-v5-global--palette--gold-600 $pf-v5-color-gold-600 #795600 | ||||
| .pf-v5-c-label | --pf-v5-c-label--m-outline--m-gold__content--before--BorderColor | #d2d2d2 | ||
--pf-v5-c-label--m-outline--m-gold__content--before--BorderColor --pf-v5-global--BorderColor--100 $pf-v5-global--BorderColor--100 $pf-v5-color-black-300 #d2d2d2 | ||||
| .pf-v5-c-label | --pf-v5-c-label--m-outline--m-gold__content--link--hover--before--BorderColor | #d2d2d2 | ||
--pf-v5-c-label--m-outline--m-gold__content--link--hover--before--BorderColor --pf-v5-global--BorderColor--100 $pf-v5-global--BorderColor--100 $pf-v5-color-black-300 #d2d2d2 | ||||
| .pf-v5-c-label | --pf-v5-c-label--m-outline--m-gold__content--link--focus--before--BorderColor | #d2d2d2 | ||
--pf-v5-c-label--m-outline--m-gold__content--link--focus--before--BorderColor --pf-v5-global--BorderColor--100 $pf-v5-global--BorderColor--100 $pf-v5-color-black-300 #d2d2d2 | ||||
| .pf-v5-c-label | --pf-v5-c-label--m-overflow__content--Color | #06c | ||
--pf-v5-c-label--m-overflow__content--Color --pf-v5-global--link--Color $pf-v5-global--link--Color $pf-v5-global--primary-color--100 $pf-v5-color-blue-400 #06c | ||||
| .pf-v5-c-label | --pf-v5-c-label--m-overflow__content--BackgroundColor | #fff | ||
--pf-v5-c-label--m-overflow__content--BackgroundColor --pf-v5-global--BackgroundColor--100 $pf-v5-global--BackgroundColor--100 $pf-v5-color-white #fff | ||||
| .pf-v5-c-label | --pf-v5-c-label--m-overflow__content--before--BorderWidth | 1px | ||
--pf-v5-c-label--m-overflow__content--before--BorderWidth --pf-v5-global--BorderWidth--sm $pf-v5-global--BorderWidth--sm 1px | ||||
| .pf-v5-c-label | --pf-v5-c-label--m-overflow__content--before--BorderColor | #f0f0f0 | ||
--pf-v5-c-label--m-overflow__content--before--BorderColor --pf-v5-global--BorderColor--300 $pf-v5-global--BorderColor--300 $pf-v5-color-black-200 #f0f0f0 | ||||
| .pf-v5-c-label | --pf-v5-c-label--m-overflow__content--link--hover--before--BorderWidth | 2px | ||
--pf-v5-c-label--m-overflow__content--link--hover--before--BorderWidth --pf-v5-global--BorderWidth--md $pf-v5-global--BorderWidth--md 2px | ||||
| .pf-v5-c-label | --pf-v5-c-label--m-overflow__content--link--hover--before--BorderColor | #f0f0f0 | ||
--pf-v5-c-label--m-overflow__content--link--hover--before--BorderColor --pf-v5-global--BorderColor--300 $pf-v5-global--BorderColor--300 $pf-v5-color-black-200 #f0f0f0 | ||||
| .pf-v5-c-label | --pf-v5-c-label--m-overflow__content--link--focus--before--BorderWidth | 2px | ||
--pf-v5-c-label--m-overflow__content--link--focus--before--BorderWidth --pf-v5-global--BorderWidth--md $pf-v5-global--BorderWidth--md 2px | ||||
| .pf-v5-c-label | --pf-v5-c-label--m-overflow__content--link--focus--before--BorderColor | #f0f0f0 | ||
--pf-v5-c-label--m-overflow__content--link--focus--before--BorderColor --pf-v5-global--BorderColor--300 $pf-v5-global--BorderColor--300 $pf-v5-color-black-200 #f0f0f0 | ||||
| .pf-v5-c-label | --pf-v5-c-label--m-compact--PaddingTop | 0 | ||
| .pf-v5-c-label | --pf-v5-c-label--m-compact--PaddingRight | 0.5rem | ||
--pf-v5-c-label--m-compact--PaddingRight --pf-v5-global--spacer--sm $pf-v5-global--spacer--sm pf-size-prem(8px) 0.5rem | ||||
| .pf-v5-c-label | --pf-v5-c-label--m-compact--PaddingBottom | 0 | ||
| .pf-v5-c-label | --pf-v5-c-label--m-compact--PaddingLeft | 0.5rem | ||
--pf-v5-c-label--m-compact--PaddingLeft --pf-v5-global--spacer--sm $pf-v5-global--spacer--sm pf-size-prem(8px) 0.5rem | ||||
| .pf-v5-c-label | --pf-v5-c-label--m-compact--FontSize | 0.75rem | ||
--pf-v5-c-label--m-compact--FontSize --pf-v5-global--FontSize--xs $pf-v5-global--FontSize--xs pf-font-prem(12px) 0.75rem | ||||
| .pf-v5-c-label | --pf-v5-c-label--m-compact--m-editable--TextDecorationOffset | 0.0625rem | ||
| .pf-v5-c-label | --pf-v5-c-label__content--Color | #151515 | ||
--pf-v5-c-label__content--Color --pf-v5-global--Color--100 $pf-v5-global--Color--100 $pf-v5-color-black-900 #151515 | ||||
| .pf-v5-c-label | --pf-v5-c-label__content--BackgroundColor | transparent | ||
| .pf-v5-c-label | --pf-v5-c-label__content--MaxWidth | 100% | ||
| .pf-v5-c-label | --pf-v5-c-label--m-outline__content--Color | #151515 | ||
--pf-v5-c-label--m-outline__content--Color --pf-v5-global--Color--100 $pf-v5-global--Color--100 $pf-v5-color-black-900 #151515 | ||||
| .pf-v5-c-label | --pf-v5-c-label--m-editable__content--MaxWidth | 16ch | ||
| .pf-v5-c-label | --pf-v5-c-label__text--MaxWidth | 100% | ||
| .pf-v5-c-label | --pf-v5-c-label__icon--Color | #151515 | ||
--pf-v5-c-label__icon--Color --pf-v5-global--Color--100 $pf-v5-global--Color--100 $pf-v5-color-black-900 #151515 | ||||
| .pf-v5-c-label | --pf-v5-c-label__icon--MarginRight | 0.25rem | ||
--pf-v5-c-label__icon--MarginRight --pf-v5-global--spacer--xs $pf-v5-global--spacer--xs pf-size-prem(4px) 0.25rem | ||||
| .pf-v5-c-label | --pf-v5-c-label__actions--FontSize | 0.75rem | ||
--pf-v5-c-label__actions--FontSize --pf-v5-global--FontSize--xs $pf-v5-global--FontSize--xs pf-font-prem(12px) 0.75rem | ||||
| .pf-v5-c-label | --pf-v5-c-label__actions--MarginRight | calc(0.5rem * -1) | ||
--pf-v5-c-label__actions--MarginRight calc(--pf-v5-c-label__actions--c-button--PaddingRight * -1) calc(--pf-v5-global--spacer--sm * -1) calc($pf-v5-global--spacer--sm * -1) calc(pf-size-prem(8px) * -1) calc(0.5rem * -1) | ||||
| .pf-v5-c-label | --pf-v5-c-label__actions--c-button--FontSize | 0.75rem | ||
--pf-v5-c-label__actions--c-button--FontSize --pf-v5-global--FontSize--xs $pf-v5-global--FontSize--xs pf-font-prem(12px) 0.75rem | ||||
| .pf-v5-c-label | --pf-v5-c-label__actions--c-button--MarginTop | calc(0.25rem * -1) | ||
--pf-v5-c-label__actions--c-button--MarginTop calc(--pf-v5-c-label__actions--c-button--PaddingTop * -1) calc(--pf-v5-global--spacer--xs * -1) calc($pf-v5-global--spacer--xs * -1) calc(pf-size-prem(4px) * -1) calc(0.25rem * -1) | ||||
| .pf-v5-c-label | --pf-v5-c-label__actions--c-button--MarginBottom | calc(0.25rem * -1) | ||
--pf-v5-c-label__actions--c-button--MarginBottom calc(--pf-v5-c-label__actions--c-button--PaddingBottom * -1) calc(--pf-v5-global--spacer--xs * -1) calc($pf-v5-global--spacer--xs * -1) calc(pf-size-prem(4px) * -1) calc(0.25rem * -1) | ||||
| .pf-v5-c-label | --pf-v5-c-label__actions--c-button--PaddingTop | 0.25rem | ||
--pf-v5-c-label__actions--c-button--PaddingTop --pf-v5-global--spacer--xs $pf-v5-global--spacer--xs pf-size-prem(4px) 0.25rem | ||||
| .pf-v5-c-label | --pf-v5-c-label__actions--c-button--PaddingRight | 0.5rem | ||
--pf-v5-c-label__actions--c-button--PaddingRight --pf-v5-global--spacer--sm $pf-v5-global--spacer--sm pf-size-prem(8px) 0.5rem | ||||
| .pf-v5-c-label | --pf-v5-c-label__actions--c-button--PaddingBottom | 0.25rem | ||
--pf-v5-c-label__actions--c-button--PaddingBottom --pf-v5-global--spacer--xs $pf-v5-global--spacer--xs pf-size-prem(4px) 0.25rem | ||||
| .pf-v5-c-label | --pf-v5-c-label__actions--c-button--PaddingLeft | 0.5rem | ||
--pf-v5-c-label__actions--c-button--PaddingLeft --pf-v5-global--spacer--sm $pf-v5-global--spacer--sm pf-size-prem(8px) 0.5rem | ||||
| .pf-v5-c-label | --pf-v5-c-label--m-editable--Cursor | pointer | ||
| .pf-v5-c-label | --pf-v5-c-label--m-editable--TextDecoration | underline | ||
| .pf-v5-c-label | --pf-v5-c-label--m-editable--TextDecorationStyle | dashed | ||
| .pf-v5-c-label | --pf-v5-c-label--m-editable--TextDecorationThickness | 1px | ||
--pf-v5-c-label--m-editable--TextDecorationThickness --pf-v5-global--BorderWidth--sm $pf-v5-global--BorderWidth--sm 1px | ||||
| .pf-v5-c-label | --pf-v5-c-label--m-editable--TextDecorationOffset | 0.25rem | ||
| .pf-v5-c-label | --pf-v5-c-label--m-editable--TextDecorationColor | #8a8d90 | ||
--pf-v5-c-label--m-editable--TextDecorationColor --pf-v5-global--BorderColor--200 $pf-v5-global--BorderColor--200 $pf-v5-color-black-500 #8a8d90 | ||||
| .pf-v5-c-label | --pf-v5-c-label--m-editable--hover--TextDecorationColor | #151515 | ||
--pf-v5-c-label--m-editable--hover--TextDecorationColor --pf-v5-global--Color--100 $pf-v5-global--Color--100 $pf-v5-color-black-900 #151515 | ||||
| .pf-v5-c-label | --pf-v5-c-label--m-editable--focus--TextDecorationColor | #151515 | ||
--pf-v5-c-label--m-editable--focus--TextDecorationColor --pf-v5-global--Color--100 $pf-v5-global--Color--100 $pf-v5-color-black-900 #151515 | ||||
| .pf-v5-c-label | --pf-v5-c-label--m-editable__content--before--BorderWidth | 1px | ||
--pf-v5-c-label--m-editable__content--before--BorderWidth --pf-v5-global--BorderWidth--sm $pf-v5-global--BorderWidth--sm 1px | ||||
| .pf-v5-c-label | --pf-v5-c-label--m-editable__content--before--BorderColor | #d2d2d2 | ||
--pf-v5-c-label--m-editable__content--before--BorderColor --pf-v5-global--BorderColor--100 $pf-v5-global--BorderColor--100 $pf-v5-color-black-300 #d2d2d2 | ||||
| .pf-v5-c-label | --pf-v5-c-label--m-editable__content--hover--before--BorderWidth | 1px | ||
--pf-v5-c-label--m-editable__content--hover--before--BorderWidth --pf-v5-global--BorderWidth--sm $pf-v5-global--BorderWidth--sm 1px | ||||
| .pf-v5-c-label | --pf-v5-c-label--m-editable__content--hover--before--BorderColor | #d2d2d2 | ||
--pf-v5-c-label--m-editable__content--hover--before--BorderColor --pf-v5-global--BorderColor--100 $pf-v5-global--BorderColor--100 $pf-v5-color-black-300 #d2d2d2 | ||||
| .pf-v5-c-label | --pf-v5-c-label--m-editable__content--focus--before--BorderWidth | 1px | ||
--pf-v5-c-label--m-editable__content--focus--before--BorderWidth --pf-v5-global--BorderWidth--sm $pf-v5-global--BorderWidth--sm 1px | ||||
| .pf-v5-c-label | --pf-v5-c-label--m-editable__content--focus--before--BorderColor | #d2d2d2 | ||
--pf-v5-c-label--m-editable__content--focus--before--BorderColor --pf-v5-global--BorderColor--100 $pf-v5-global--BorderColor--100 $pf-v5-color-black-300 #d2d2d2 | ||||
| .pf-v5-c-label | --pf-v5-c-label--m-editable--m-editable-active--Cursor | auto | ||
| .pf-v5-c-label | --pf-v5-c-label--m-editable--m-editable-active--TextDecoration | none | ||
| .pf-v5-c-label | --pf-v5-c-label--m-editable--m-editable-active--BackgroundColor | transparent | ||
| .pf-v5-c-label | --pf-v5-c-label--m-editable--m-editable-active__content--before--BorderWidth | 0 | ||
| .pf-v5-c-label | --pf-v5-c-label--m-editable--m-editable-active__content--before--BorderColor | transparent | ||
| .pf-v5-c-label | --pf-v5-c-label--m-disabled--BackgroundColor | #d2d2d2 | ||
--pf-v5-c-label--m-disabled--BackgroundColor --pf-v5-global--disabled-color--200 $pf-v5-global--disabled-color--200 $pf-v5-color-black-300 #d2d2d2 | ||||
| .pf-v5-c-label | --pf-v5-c-label--m-disabled__content--Color | #6a6e73 | ||
--pf-v5-c-label--m-disabled__content--Color --pf-v5-global--disabled-color--100 $pf-v5-global--disabled-color--100 $pf-v5-color-black-600 #6a6e73 | ||||
| .pf-v5-c-label | --pf-v5-c-label--m-disabled__icon--Color | #6a6e73 | ||
--pf-v5-c-label--m-disabled__icon--Color --pf-v5-global--disabled-color--100 $pf-v5-global--disabled-color--100 $pf-v5-color-black-600 #6a6e73 | ||||
| .pf-v5-c-label | --pf-v5-c-label--c-button--m-disabled--Color | #6a6e73 | ||
--pf-v5-c-label--c-button--m-disabled--Color --pf-v5-global--disabled-color--100 $pf-v5-global--disabled-color--100 $pf-v5-color-black-600 #6a6e73 | ||||
| .pf-v5-c-label.pf-m-compact | --pf-v5-c-label--PaddingTop | 0 | ||
--pf-v5-c-label--PaddingTop --pf-v5-c-label--m-compact--PaddingTop 0 | ||||
| .pf-v5-c-label.pf-m-compact | --pf-v5-c-label--PaddingRight | 0.5rem | ||
--pf-v5-c-label--PaddingRight --pf-v5-c-label--m-compact--PaddingRight --pf-v5-global--spacer--sm $pf-v5-global--spacer--sm pf-size-prem(8px) 0.5rem | ||||
| .pf-v5-c-label.pf-m-compact | --pf-v5-c-label--PaddingBottom | 0 | ||
--pf-v5-c-label--PaddingBottom --pf-v5-c-label--m-compact--PaddingBottom 0 | ||||
| .pf-v5-c-label.pf-m-compact | --pf-v5-c-label--PaddingLeft | 0.5rem | ||
--pf-v5-c-label--PaddingLeft --pf-v5-c-label--m-compact--PaddingLeft --pf-v5-global--spacer--sm $pf-v5-global--spacer--sm pf-size-prem(8px) 0.5rem | ||||
| .pf-v5-c-label.pf-m-compact | --pf-v5-c-label--FontSize | 0.75rem | ||
--pf-v5-c-label--FontSize --pf-v5-c-label--m-compact--FontSize --pf-v5-global--FontSize--xs $pf-v5-global--FontSize--xs pf-font-prem(12px) 0.75rem | ||||
| .pf-v5-c-label.pf-m-compact | --pf-v5-c-label--m-editable--TextDecorationOffset | 0.0625rem | ||
--pf-v5-c-label--m-editable--TextDecorationOffset --pf-v5-c-label--m-compact--m-editable--TextDecorationOffset 0.0625rem | ||||
| .pf-v5-c-label.pf-m-blue | --pf-v5-c-label--BackgroundColor | #e7f1fa | ||
--pf-v5-c-label--BackgroundColor --pf-v5-c-label--m-blue--BackgroundColor --pf-v5-global--palette--blue-50 $pf-v5-color-blue-50 #e7f1fa | ||||
| .pf-v5-c-label.pf-m-blue | --pf-v5-c-label__icon--Color | #06c | ||
--pf-v5-c-label__icon--Color --pf-v5-c-label--m-blue__icon--Color --pf-v5-global--primary-color--100 $pf-v5-global--primary-color--100 $pf-v5-color-blue-400 #06c | ||||
| .pf-v5-c-label.pf-m-blue | --pf-v5-c-label__content--Color | #002952 | ||
--pf-v5-c-label__content--Color --pf-v5-c-label--m-blue__content--Color --pf-v5-global--info-color--200 $pf-v5-global--info-color--200 $pf-v5-color-blue-600 #002952 | ||||
| .pf-v5-c-label.pf-m-blue | --pf-v5-c-label__content--before--BorderColor | #bee1f4 | ||
--pf-v5-c-label__content--before--BorderColor --pf-v5-c-label--m-blue__content--before--BorderColor --pf-v5-global--palette--blue-100 $pf-v5-color-blue-100 #bee1f4 | ||||
| .pf-v5-c-label.pf-m-blue | --pf-v5-c-label__content--link--hover--before--BorderColor | #06c | ||
--pf-v5-c-label__content--link--hover--before--BorderColor --pf-v5-c-label--m-blue__content--link--hover--before--BorderColor --pf-v5-global--primary-color--100 $pf-v5-global--primary-color--100 $pf-v5-color-blue-400 #06c | ||||
| .pf-v5-c-label.pf-m-blue | --pf-v5-c-label__content--link--focus--before--BorderColor | #06c | ||
--pf-v5-c-label__content--link--focus--before--BorderColor --pf-v5-c-label--m-blue__content--link--focus--before--BorderColor --pf-v5-global--primary-color--100 $pf-v5-global--primary-color--100 $pf-v5-color-blue-400 #06c | ||||
| .pf-v5-c-label.pf-m-blue | --pf-v5-c-label--m-outline__content--Color | #06c | ||
--pf-v5-c-label--m-outline__content--Color --pf-v5-c-label--m-outline--m-blue__content--Color --pf-v5-global--primary-color--100 $pf-v5-global--primary-color--100 $pf-v5-color-blue-400 #06c | ||||
| .pf-v5-c-label.pf-m-blue | --pf-v5-c-label--m-outline__content--before--BorderColor | #d2d2d2 | ||
--pf-v5-c-label--m-outline__content--before--BorderColor --pf-v5-c-label--m-outline--m-blue__content--before--BorderColor --pf-v5-global--BorderColor--100 $pf-v5-global--BorderColor--100 $pf-v5-color-black-300 #d2d2d2 | ||||
| .pf-v5-c-label.pf-m-blue | --pf-v5-c-label--m-outline__content--link--hover--before--BorderColor | #d2d2d2 | ||
--pf-v5-c-label--m-outline__content--link--hover--before--BorderColor --pf-v5-c-label--m-outline--m-blue__content--link--hover--before--BorderColor --pf-v5-global--BorderColor--100 $pf-v5-global--BorderColor--100 $pf-v5-color-black-300 #d2d2d2 | ||||
| .pf-v5-c-label.pf-m-blue | --pf-v5-c-label--m-outline__content--link--focus--before--BorderColor | #d2d2d2 | ||
--pf-v5-c-label--m-outline__content--link--focus--before--BorderColor --pf-v5-c-label--m-outline--m-blue__content--link--focus--before--BorderColor --pf-v5-global--BorderColor--100 $pf-v5-global--BorderColor--100 $pf-v5-color-black-300 #d2d2d2 | ||||
| .pf-v5-c-label.pf-m-blue | --pf-v5-c-label--m-editable__content--before--BorderColor | #bee1f4 | ||
--pf-v5-c-label--m-editable__content--before--BorderColor --pf-v5-c-label--m-blue__content--before--BorderColor --pf-v5-global--palette--blue-100 $pf-v5-color-blue-100 #bee1f4 | ||||
| .pf-v5-c-label.pf-m-blue | --pf-v5-c-label--m-editable__content--hover--before--BorderColor | #bee1f4 | ||
--pf-v5-c-label--m-editable__content--hover--before--BorderColor --pf-v5-c-label--m-blue__content--before--BorderColor --pf-v5-global--palette--blue-100 $pf-v5-color-blue-100 #bee1f4 | ||||
| .pf-v5-c-label.pf-m-blue | --pf-v5-c-label--m-editable__content--focus--before--BorderColor | #bee1f4 | ||
--pf-v5-c-label--m-editable__content--focus--before--BorderColor --pf-v5-c-label--m-blue__content--before--BorderColor --pf-v5-global--palette--blue-100 $pf-v5-color-blue-100 #bee1f4 | ||||
| .pf-v5-c-label.pf-m-green | --pf-v5-c-label--BackgroundColor | #f3faf2 | ||
--pf-v5-c-label--BackgroundColor --pf-v5-c-label--m-green--BackgroundColor --pf-v5-global--palette--green-50 $pf-v5-color-green-50 #f3faf2 | ||||
| .pf-v5-c-label.pf-m-green | --pf-v5-c-label__icon--Color | #3e8635 | ||
--pf-v5-c-label__icon--Color --pf-v5-c-label--m-green__icon--Color --pf-v5-global--success-color--100 $pf-v5-global--success-color--100 $pf-v5-color-green-500 #3e8635 | ||||
| .pf-v5-c-label.pf-m-green | --pf-v5-c-label__content--Color | #1e4f18 | ||
--pf-v5-c-label__content--Color --pf-v5-c-label--m-green__content--Color --pf-v5-global--success-color--200 $pf-v5-global--success-color--200 $pf-v5-color-green-600 #1e4f18 | ||||
| .pf-v5-c-label.pf-m-green | --pf-v5-c-label__content--before--BorderColor | #bde5b8 | ||
--pf-v5-c-label__content--before--BorderColor --pf-v5-c-label--m-green__content--before--BorderColor --pf-v5-global--palette--green-100 $pf-v5-color-green-100 #bde5b8 | ||||
| .pf-v5-c-label.pf-m-green | --pf-v5-c-label__content--link--hover--before--BorderColor | #3e8635 | ||
--pf-v5-c-label__content--link--hover--before--BorderColor --pf-v5-c-label--m-green__content--link--hover--before--BorderColor --pf-v5-global--success-color--100 $pf-v5-global--success-color--100 $pf-v5-color-green-500 #3e8635 | ||||
| .pf-v5-c-label.pf-m-green | --pf-v5-c-label__content--link--focus--before--BorderColor | #3e8635 | ||
--pf-v5-c-label__content--link--focus--before--BorderColor --pf-v5-c-label--m-green__content--link--focus--before--BorderColor --pf-v5-global--success-color--100 $pf-v5-global--success-color--100 $pf-v5-color-green-500 #3e8635 | ||||
| .pf-v5-c-label.pf-m-green | --pf-v5-c-label--m-outline__content--Color | #3e8635 | ||
--pf-v5-c-label--m-outline__content--Color --pf-v5-c-label--m-outline--m-green__content--Color --pf-v5-global--success-color--100 $pf-v5-global--success-color--100 $pf-v5-color-green-500 #3e8635 | ||||
| .pf-v5-c-label.pf-m-green | --pf-v5-c-label--m-outline__content--before--BorderColor | #d2d2d2 | ||
--pf-v5-c-label--m-outline__content--before--BorderColor --pf-v5-c-label--m-outline--m-green__content--before--BorderColor --pf-v5-global--BorderColor--100 $pf-v5-global--BorderColor--100 $pf-v5-color-black-300 #d2d2d2 | ||||
| .pf-v5-c-label.pf-m-green | --pf-v5-c-label--m-outline__content--link--hover--before--BorderColor | #d2d2d2 | ||
--pf-v5-c-label--m-outline__content--link--hover--before--BorderColor --pf-v5-c-label--m-outline--m-green__content--link--hover--before--BorderColor --pf-v5-global--BorderColor--100 $pf-v5-global--BorderColor--100 $pf-v5-color-black-300 #d2d2d2 | ||||
| .pf-v5-c-label.pf-m-green | --pf-v5-c-label--m-outline__content--link--focus--before--BorderColor | #d2d2d2 | ||
--pf-v5-c-label--m-outline__content--link--focus--before--BorderColor --pf-v5-c-label--m-outline--m-green__content--link--focus--before--BorderColor --pf-v5-global--BorderColor--100 $pf-v5-global--BorderColor--100 $pf-v5-color-black-300 #d2d2d2 | ||||
| .pf-v5-c-label.pf-m-green | --pf-v5-c-label--m-editable__content--before--BorderColor | #bde5b8 | ||
--pf-v5-c-label--m-editable__content--before--BorderColor --pf-v5-c-label--m-green__content--before--BorderColor --pf-v5-global--palette--green-100 $pf-v5-color-green-100 #bde5b8 | ||||
| .pf-v5-c-label.pf-m-green | --pf-v5-c-label--m-editable__content--hover--before--BorderColor | #bde5b8 | ||
--pf-v5-c-label--m-editable__content--hover--before--BorderColor --pf-v5-c-label--m-green__content--before--BorderColor --pf-v5-global--palette--green-100 $pf-v5-color-green-100 #bde5b8 | ||||
| .pf-v5-c-label.pf-m-green | --pf-v5-c-label--m-editable__content--focus--before--BorderColor | #bde5b8 | ||
--pf-v5-c-label--m-editable__content--focus--before--BorderColor --pf-v5-c-label--m-green__content--before--BorderColor --pf-v5-global--palette--green-100 $pf-v5-color-green-100 #bde5b8 | ||||
| .pf-v5-c-label.pf-m-orange | --pf-v5-c-label--BackgroundColor | #fff6ec | ||
--pf-v5-c-label--BackgroundColor --pf-v5-c-label--m-orange--BackgroundColor --pf-v5-global--palette--orange-50 $pf-v5-color-orange-50 #fff6ec | ||||
| .pf-v5-c-label.pf-m-orange | --pf-v5-c-label__icon--Color | #ec7a08 | ||
--pf-v5-c-label__icon--Color --pf-v5-c-label--m-orange__icon--Color --pf-v5-global--palette--orange-300 $pf-v5-color-orange-300 #ec7a08 | ||||
| .pf-v5-c-label.pf-m-orange | --pf-v5-c-label__content--Color | #3b1f00 | ||
--pf-v5-c-label__content--Color --pf-v5-c-label--m-orange__content--Color --pf-v5-global--palette--orange-700 $pf-v5-color-orange-700 #3b1f00 | ||||
| .pf-v5-c-label.pf-m-orange | --pf-v5-c-label__content--before--BorderColor | #f4b678 | ||
--pf-v5-c-label__content--before--BorderColor --pf-v5-c-label--m-orange__content--before--BorderColor --pf-v5-global--palette--orange-100 $pf-v5-color-orange-100 #f4b678 | ||||
| .pf-v5-c-label.pf-m-orange | --pf-v5-c-label__content--link--hover--before--BorderColor | #ec7a08 | ||
--pf-v5-c-label__content--link--hover--before--BorderColor --pf-v5-c-label--m-orange__content--link--hover--before--BorderColor --pf-v5-global--palette--orange-300 $pf-v5-color-orange-300 #ec7a08 | ||||
| .pf-v5-c-label.pf-m-orange | --pf-v5-c-label__content--link--focus--before--BorderColor | #ec7a08 | ||
--pf-v5-c-label__content--link--focus--before--BorderColor --pf-v5-c-label--m-orange__content--link--focus--before--BorderColor --pf-v5-global--palette--orange-300 $pf-v5-color-orange-300 #ec7a08 | ||||
| .pf-v5-c-label.pf-m-orange | --pf-v5-c-label--m-outline__content--Color | #8f4700 | ||
--pf-v5-c-label--m-outline__content--Color --pf-v5-c-label--m-outline--m-orange__content--Color --pf-v5-global--palette--orange-500 $pf-v5-color-orange-500 #8f4700 | ||||
| .pf-v5-c-label.pf-m-orange | --pf-v5-c-label--m-outline__content--before--BorderColor | #d2d2d2 | ||
--pf-v5-c-label--m-outline__content--before--BorderColor --pf-v5-c-label--m-outline--m-orange__content--before--BorderColor --pf-v5-global--BorderColor--100 $pf-v5-global--BorderColor--100 $pf-v5-color-black-300 #d2d2d2 | ||||
| .pf-v5-c-label.pf-m-orange | --pf-v5-c-label--m-outline__content--link--hover--before--BorderColor | #d2d2d2 | ||
--pf-v5-c-label--m-outline__content--link--hover--before--BorderColor --pf-v5-c-label--m-outline--m-orange__content--link--hover--before--BorderColor --pf-v5-global--BorderColor--100 $pf-v5-global--BorderColor--100 $pf-v5-color-black-300 #d2d2d2 | ||||
| .pf-v5-c-label.pf-m-orange | --pf-v5-c-label--m-outline__content--link--focus--before--BorderColor | #d2d2d2 | ||
--pf-v5-c-label--m-outline__content--link--focus--before--BorderColor --pf-v5-c-label--m-outline--m-orange__content--link--focus--before--BorderColor --pf-v5-global--BorderColor--100 $pf-v5-global--BorderColor--100 $pf-v5-color-black-300 #d2d2d2 | ||||
| .pf-v5-c-label.pf-m-orange | --pf-v5-c-label--m-editable__content--before--BorderColor | #f4b678 | ||
--pf-v5-c-label--m-editable__content--before--BorderColor --pf-v5-c-label--m-orange__content--before--BorderColor --pf-v5-global--palette--orange-100 $pf-v5-color-orange-100 #f4b678 | ||||
| .pf-v5-c-label.pf-m-orange | --pf-v5-c-label--m-editable__content--hover--before--BorderColor | #f4b678 | ||
--pf-v5-c-label--m-editable__content--hover--before--BorderColor --pf-v5-c-label--m-orange__content--before--BorderColor --pf-v5-global--palette--orange-100 $pf-v5-color-orange-100 #f4b678 | ||||
| .pf-v5-c-label.pf-m-orange | --pf-v5-c-label--m-editable__content--focus--before--BorderColor | #f4b678 | ||
--pf-v5-c-label--m-editable__content--focus--before--BorderColor --pf-v5-c-label--m-orange__content--before--BorderColor --pf-v5-global--palette--orange-100 $pf-v5-color-orange-100 #f4b678 | ||||
| .pf-v5-c-label.pf-m-red | --pf-v5-c-label--BackgroundColor | #faeae8 | ||
--pf-v5-c-label--BackgroundColor --pf-v5-c-label--m-red--BackgroundColor --pf-v5-global--palette--red-50 $pf-v5-color-red-50 #faeae8 | ||||
| .pf-v5-c-label.pf-m-red | --pf-v5-c-label__icon--Color | #c9190b | ||
--pf-v5-c-label__icon--Color --pf-v5-c-label--m-red__icon--Color --pf-v5-global--danger-color--100 $pf-v5-global--danger-color--100 $pf-v5-color-red-100 #c9190b | ||||
| .pf-v5-c-label.pf-m-red | --pf-v5-c-label__content--Color | #7d1007 | ||
--pf-v5-c-label__content--Color --pf-v5-c-label--m-red__content--Color --pf-v5-global--palette--red-300 $pf-v5-color-red-300 #7d1007 | ||||
| .pf-v5-c-label.pf-m-red | --pf-v5-c-label__content--before--BorderColor | #c9190b | ||
--pf-v5-c-label__content--before--BorderColor --pf-v5-c-label--m-red__content--before--BorderColor --pf-v5-global--palette--red-100 $pf-v5-color-red-100 #c9190b | ||||
| .pf-v5-c-label.pf-m-red | --pf-v5-c-label__content--link--hover--before--BorderColor | #c9190b | ||
--pf-v5-c-label__content--link--hover--before--BorderColor --pf-v5-c-label--m-red__content--link--hover--before--BorderColor --pf-v5-global--danger-color--100 $pf-v5-global--danger-color--100 $pf-v5-color-red-100 #c9190b | ||||
| .pf-v5-c-label.pf-m-red | --pf-v5-c-label__content--link--focus--before--BorderColor | #c9190b | ||
--pf-v5-c-label__content--link--focus--before--BorderColor --pf-v5-c-label--m-red__content--link--focus--before--BorderColor --pf-v5-global--danger-color--100 $pf-v5-global--danger-color--100 $pf-v5-color-red-100 #c9190b | ||||
| .pf-v5-c-label.pf-m-red | --pf-v5-c-label--m-outline__content--Color | #c9190b | ||
--pf-v5-c-label--m-outline__content--Color --pf-v5-c-label--m-outline--m-red__content--Color --pf-v5-global--danger-color--100 $pf-v5-global--danger-color--100 $pf-v5-color-red-100 #c9190b | ||||
| .pf-v5-c-label.pf-m-red | --pf-v5-c-label--m-outline__content--before--BorderColor | #d2d2d2 | ||
--pf-v5-c-label--m-outline__content--before--BorderColor --pf-v5-c-label--m-outline--m-red__content--before--BorderColor --pf-v5-global--BorderColor--100 $pf-v5-global--BorderColor--100 $pf-v5-color-black-300 #d2d2d2 | ||||
| .pf-v5-c-label.pf-m-red | --pf-v5-c-label--m-outline__content--link--hover--before--BorderColor | #d2d2d2 | ||
--pf-v5-c-label--m-outline__content--link--hover--before--BorderColor --pf-v5-c-label--m-outline--m-red__content--link--hover--before--BorderColor --pf-v5-global--BorderColor--100 $pf-v5-global--BorderColor--100 $pf-v5-color-black-300 #d2d2d2 | ||||
| .pf-v5-c-label.pf-m-red | --pf-v5-c-label--m-outline__content--link--focus--before--BorderColor | #d2d2d2 | ||
--pf-v5-c-label--m-outline__content--link--focus--before--BorderColor --pf-v5-c-label--m-outline--m-red__content--link--focus--before--BorderColor --pf-v5-global--BorderColor--100 $pf-v5-global--BorderColor--100 $pf-v5-color-black-300 #d2d2d2 | ||||
| .pf-v5-c-label.pf-m-red | --pf-v5-c-label--m-editable__content--before--BorderColor | #c9190b | ||
--pf-v5-c-label--m-editable__content--before--BorderColor --pf-v5-c-label--m-red__content--before--BorderColor --pf-v5-global--palette--red-100 $pf-v5-color-red-100 #c9190b | ||||
| .pf-v5-c-label.pf-m-red | --pf-v5-c-label--m-editable__content--hover--before--BorderColor | #c9190b | ||
--pf-v5-c-label--m-editable__content--hover--before--BorderColor --pf-v5-c-label--m-red__content--before--BorderColor --pf-v5-global--palette--red-100 $pf-v5-color-red-100 #c9190b | ||||
| .pf-v5-c-label.pf-m-red | --pf-v5-c-label--m-editable__content--focus--before--BorderColor | #c9190b | ||
--pf-v5-c-label--m-editable__content--focus--before--BorderColor --pf-v5-c-label--m-red__content--before--BorderColor --pf-v5-global--palette--red-100 $pf-v5-color-red-100 #c9190b | ||||
| .pf-v5-c-label.pf-m-purple | --pf-v5-c-label--BackgroundColor | #f2f0fc | ||
--pf-v5-c-label--BackgroundColor --pf-v5-c-label--m-purple--BackgroundColor --pf-v5-global--palette--purple-50 $pf-v5-color-purple-50 #f2f0fc | ||||
| .pf-v5-c-label.pf-m-purple | --pf-v5-c-label__icon--Color | #6753ac | ||
--pf-v5-c-label__icon--Color --pf-v5-c-label--m-purple__icon--Color --pf-v5-global--palette--purple-500 $pf-v5-color-purple-500 #6753ac | ||||
| .pf-v5-c-label.pf-m-purple | --pf-v5-c-label__content--Color | #1f0066 | ||
--pf-v5-c-label__content--Color --pf-v5-c-label--m-purple__content--Color --pf-v5-global--palette--purple-700 $pf-v5-color-purple-700 #1f0066 | ||||
| .pf-v5-c-label.pf-m-purple | --pf-v5-c-label__content--before--BorderColor | #cbc1ff | ||
--pf-v5-c-label__content--before--BorderColor --pf-v5-c-label--m-purple__content--before--BorderColor --pf-v5-global--palette--purple-100 $pf-v5-color-purple-100 #cbc1ff | ||||
| .pf-v5-c-label.pf-m-purple | --pf-v5-c-label__content--link--hover--before--BorderColor | #6753ac | ||
--pf-v5-c-label__content--link--hover--before--BorderColor --pf-v5-c-label--m-purple__content--link--hover--before--BorderColor --pf-v5-global--palette--purple-500 $pf-v5-color-purple-500 #6753ac | ||||
| .pf-v5-c-label.pf-m-purple | --pf-v5-c-label__content--link--focus--before--BorderColor | #6753ac | ||
--pf-v5-c-label__content--link--focus--before--BorderColor --pf-v5-c-label--m-purple__content--link--focus--before--BorderColor --pf-v5-global--palette--purple-500 $pf-v5-color-purple-500 #6753ac | ||||
| .pf-v5-c-label.pf-m-purple | --pf-v5-c-label--m-outline__content--Color | #6753ac | ||
--pf-v5-c-label--m-outline__content--Color --pf-v5-c-label--m-outline--m-purple__content--Color --pf-v5-global--palette--purple-500 $pf-v5-color-purple-500 #6753ac | ||||
| .pf-v5-c-label.pf-m-purple | --pf-v5-c-label--m-outline__content--before--BorderColor | #d2d2d2 | ||
--pf-v5-c-label--m-outline__content--before--BorderColor --pf-v5-c-label--m-outline--m-purple__content--before--BorderColor --pf-v5-global--BorderColor--100 $pf-v5-global--BorderColor--100 $pf-v5-color-black-300 #d2d2d2 | ||||
| .pf-v5-c-label.pf-m-purple | --pf-v5-c-label--m-outline__content--link--hover--before--BorderColor | #d2d2d2 | ||
--pf-v5-c-label--m-outline__content--link--hover--before--BorderColor --pf-v5-c-label--m-outline--m-purple__content--link--hover--before--BorderColor --pf-v5-global--BorderColor--100 $pf-v5-global--BorderColor--100 $pf-v5-color-black-300 #d2d2d2 | ||||
| .pf-v5-c-label.pf-m-purple | --pf-v5-c-label--m-outline__content--link--focus--before--BorderColor | #d2d2d2 | ||
--pf-v5-c-label--m-outline__content--link--focus--before--BorderColor --pf-v5-c-label--m-outline--m-purple__content--link--focus--before--BorderColor --pf-v5-global--BorderColor--100 $pf-v5-global--BorderColor--100 $pf-v5-color-black-300 #d2d2d2 | ||||
| .pf-v5-c-label.pf-m-purple | --pf-v5-c-label--m-editable__content--before--BorderColor | #cbc1ff | ||
--pf-v5-c-label--m-editable__content--before--BorderColor --pf-v5-c-label--m-purple__content--before--BorderColor --pf-v5-global--palette--purple-100 $pf-v5-color-purple-100 #cbc1ff | ||||
| .pf-v5-c-label.pf-m-purple | --pf-v5-c-label--m-editable__content--hover--before--BorderColor | #cbc1ff | ||
--pf-v5-c-label--m-editable__content--hover--before--BorderColor --pf-v5-c-label--m-purple__content--before--BorderColor --pf-v5-global--palette--purple-100 $pf-v5-color-purple-100 #cbc1ff | ||||
| .pf-v5-c-label.pf-m-purple | --pf-v5-c-label--m-editable__content--focus--before--BorderColor | #cbc1ff | ||
--pf-v5-c-label--m-editable__content--focus--before--BorderColor --pf-v5-c-label--m-purple__content--before--BorderColor --pf-v5-global--palette--purple-100 $pf-v5-color-purple-100 #cbc1ff | ||||
| .pf-v5-c-label.pf-m-cyan | --pf-v5-c-label--BackgroundColor | #f2f9f9 | ||
--pf-v5-c-label--BackgroundColor --pf-v5-c-label--m-cyan--BackgroundColor --pf-v5-global--palette--cyan-50 $pf-v5-color-cyan-50 #f2f9f9 | ||||
| .pf-v5-c-label.pf-m-cyan | --pf-v5-c-label__icon--Color | #009596 | ||
--pf-v5-c-label__icon--Color --pf-v5-c-label--m-cyan__icon--Color --pf-v5-global--custom-color--200 $pf-v5-global--custom-color--200 $pf-v5-color-cyan-300 #009596 | ||||
| .pf-v5-c-label.pf-m-cyan | --pf-v5-c-label__content--Color | #003737 | ||
--pf-v5-c-label__content--Color --pf-v5-c-label--m-cyan__content--Color --pf-v5-global--custom-color--300 $pf-v5-global--custom-color--300 $pf-v5-color-cyan-500 #003737 | ||||
| .pf-v5-c-label.pf-m-cyan | --pf-v5-c-label__content--before--BorderColor | #a2d9d9 | ||
--pf-v5-c-label__content--before--BorderColor --pf-v5-c-label--m-cyan__content--before--BorderColor --pf-v5-global--palette--cyan-100 $pf-v5-color-cyan-100 #a2d9d9 | ||||
| .pf-v5-c-label.pf-m-cyan | --pf-v5-c-label__content--link--hover--before--BorderColor | #009596 | ||
--pf-v5-c-label__content--link--hover--before--BorderColor --pf-v5-c-label--m-cyan__content--link--hover--before--BorderColor --pf-v5-global--custom-color--200 $pf-v5-global--custom-color--200 $pf-v5-color-cyan-300 #009596 | ||||
| .pf-v5-c-label.pf-m-cyan | --pf-v5-c-label__content--link--focus--before--BorderColor | #009596 | ||
--pf-v5-c-label__content--link--focus--before--BorderColor --pf-v5-c-label--m-cyan__content--link--focus--before--BorderColor --pf-v5-global--custom-color--200 $pf-v5-global--custom-color--200 $pf-v5-color-cyan-300 #009596 | ||||
| .pf-v5-c-label.pf-m-cyan | --pf-v5-c-label--m-outline__content--Color | #005f60 | ||
--pf-v5-c-label--m-outline__content--Color --pf-v5-c-label--m-outline--m-cyan__content--Color --pf-v5-global--palette--cyan-400 $pf-v5-color-cyan-400 #005f60 | ||||
| .pf-v5-c-label.pf-m-cyan | --pf-v5-c-label--m-outline__content--before--BorderColor | #d2d2d2 | ||
--pf-v5-c-label--m-outline__content--before--BorderColor --pf-v5-c-label--m-outline--m-cyan__content--before--BorderColor --pf-v5-global--BorderColor--100 $pf-v5-global--BorderColor--100 $pf-v5-color-black-300 #d2d2d2 | ||||
| .pf-v5-c-label.pf-m-cyan | --pf-v5-c-label--m-outline__content--link--hover--before--BorderColor | #d2d2d2 | ||
--pf-v5-c-label--m-outline__content--link--hover--before--BorderColor --pf-v5-c-label--m-outline--m-cyan__content--link--hover--before--BorderColor --pf-v5-global--BorderColor--100 $pf-v5-global--BorderColor--100 $pf-v5-color-black-300 #d2d2d2 | ||||
| .pf-v5-c-label.pf-m-cyan | --pf-v5-c-label--m-outline__content--link--focus--before--BorderColor | #d2d2d2 | ||
--pf-v5-c-label--m-outline__content--link--focus--before--BorderColor --pf-v5-c-label--m-outline--m-cyan__content--link--focus--before--BorderColor --pf-v5-global--BorderColor--100 $pf-v5-global--BorderColor--100 $pf-v5-color-black-300 #d2d2d2 | ||||
| .pf-v5-c-label.pf-m-cyan | --pf-v5-c-label--m-editable__content--before--BorderColor | #a2d9d9 | ||
--pf-v5-c-label--m-editable__content--before--BorderColor --pf-v5-c-label--m-cyan__content--before--BorderColor --pf-v5-global--palette--cyan-100 $pf-v5-color-cyan-100 #a2d9d9 | ||||
| .pf-v5-c-label.pf-m-cyan | --pf-v5-c-label--m-editable__content--hover--before--BorderColor | #a2d9d9 | ||
--pf-v5-c-label--m-editable__content--hover--before--BorderColor --pf-v5-c-label--m-cyan__content--before--BorderColor --pf-v5-global--palette--cyan-100 $pf-v5-color-cyan-100 #a2d9d9 | ||||
| .pf-v5-c-label.pf-m-cyan | --pf-v5-c-label--m-editable__content--focus--before--BorderColor | #a2d9d9 | ||
--pf-v5-c-label--m-editable__content--focus--before--BorderColor --pf-v5-c-label--m-cyan__content--before--BorderColor --pf-v5-global--palette--cyan-100 $pf-v5-color-cyan-100 #a2d9d9 | ||||
| .pf-v5-c-label.pf-m-gold | --pf-v5-c-label--BackgroundColor | #fdf7e7 | ||
--pf-v5-c-label--BackgroundColor --pf-v5-c-label--m-gold--BackgroundColor --pf-v5-global--palette--gold-50 $pf-v5-color-gold-50 #fdf7e7 | ||||
| .pf-v5-c-label.pf-m-gold | --pf-v5-c-label__icon--Color | #f0ab00 | ||
--pf-v5-c-label__icon--Color --pf-v5-c-label--m-gold__icon--Color --pf-v5-global--palette--gold-400 $pf-v5-color-gold-400 #f0ab00 | ||||
| .pf-v5-c-label.pf-m-gold | --pf-v5-c-label__content--Color | #3d2c00 | ||
--pf-v5-c-label__content--Color --pf-v5-c-label--m-gold__content--Color --pf-v5-global--palette--gold-700 $pf-v5-color-gold-700 #3d2c00 | ||||
| .pf-v5-c-label.pf-m-gold | --pf-v5-c-label__content--before--BorderColor | #f9e0a2 | ||
--pf-v5-c-label__content--before--BorderColor --pf-v5-c-label--m-gold__content--before--BorderColor --pf-v5-global--palette--gold-100 $pf-v5-color-gold-100 #f9e0a2 | ||||
| .pf-v5-c-label.pf-m-gold | --pf-v5-c-label__content--link--hover--before--BorderColor | #f4c145 | ||
--pf-v5-c-label__content--link--hover--before--BorderColor --pf-v5-c-label--m-gold__content--link--hover--before--BorderColor --pf-v5-global--palette--gold-300 $pf-v5-color-gold-300 #f4c145 | ||||
| .pf-v5-c-label.pf-m-gold | --pf-v5-c-label__content--link--focus--before--BorderColor | #f4c145 | ||
--pf-v5-c-label__content--link--focus--before--BorderColor --pf-v5-c-label--m-gold__content--link--focus--before--BorderColor --pf-v5-global--palette--gold-300 $pf-v5-color-gold-300 #f4c145 | ||||
| .pf-v5-c-label.pf-m-gold | --pf-v5-c-label--m-outline__content--Color | #795600 | ||
--pf-v5-c-label--m-outline__content--Color --pf-v5-c-label--m-outline--m-gold__content--Color --pf-v5-global--palette--gold-600 $pf-v5-color-gold-600 #795600 | ||||
| .pf-v5-c-label.pf-m-gold | --pf-v5-c-label--m-outline__content--before--BorderColor | #d2d2d2 | ||
--pf-v5-c-label--m-outline__content--before--BorderColor --pf-v5-c-label--m-outline--m-gold__content--before--BorderColor --pf-v5-global--BorderColor--100 $pf-v5-global--BorderColor--100 $pf-v5-color-black-300 #d2d2d2 | ||||
| .pf-v5-c-label.pf-m-gold | --pf-v5-c-label--m-outline__content--link--hover--before--BorderColor | #d2d2d2 | ||
--pf-v5-c-label--m-outline__content--link--hover--before--BorderColor --pf-v5-c-label--m-outline--m-gold__content--link--hover--before--BorderColor --pf-v5-global--BorderColor--100 $pf-v5-global--BorderColor--100 $pf-v5-color-black-300 #d2d2d2 | ||||
| .pf-v5-c-label.pf-m-gold | --pf-v5-c-label--m-outline__content--link--focus--before--BorderColor | #d2d2d2 | ||
--pf-v5-c-label--m-outline__content--link--focus--before--BorderColor --pf-v5-c-label--m-outline--m-gold__content--link--focus--before--BorderColor --pf-v5-global--BorderColor--100 $pf-v5-global--BorderColor--100 $pf-v5-color-black-300 #d2d2d2 | ||||
| .pf-v5-c-label.pf-m-gold | --pf-v5-c-label--m-editable__content--before--BorderColor | #f9e0a2 | ||
--pf-v5-c-label--m-editable__content--before--BorderColor --pf-v5-c-label--m-gold__content--before--BorderColor --pf-v5-global--palette--gold-100 $pf-v5-color-gold-100 #f9e0a2 | ||||
| .pf-v5-c-label.pf-m-gold | --pf-v5-c-label--m-editable__content--hover--before--BorderColor | #f9e0a2 | ||
--pf-v5-c-label--m-editable__content--hover--before--BorderColor --pf-v5-c-label--m-gold__content--before--BorderColor --pf-v5-global--palette--gold-100 $pf-v5-color-gold-100 #f9e0a2 | ||||
| .pf-v5-c-label.pf-m-gold | --pf-v5-c-label--m-editable__content--focus--before--BorderColor | #f9e0a2 | ||
--pf-v5-c-label--m-editable__content--focus--before--BorderColor --pf-v5-c-label--m-gold__content--before--BorderColor --pf-v5-global--palette--gold-100 $pf-v5-color-gold-100 #f9e0a2 | ||||
| .pf-v5-c-label.pf-m-outline | --pf-v5-c-label__content--Color | #151515 | ||
--pf-v5-c-label__content--Color --pf-v5-c-label--m-outline__content--Color --pf-v5-global--Color--100 $pf-v5-global--Color--100 $pf-v5-color-black-900 #151515 | ||||
| .pf-v5-c-label.pf-m-outline | --pf-v5-c-label__content--before--BorderWidth | 1px | ||
--pf-v5-c-label__content--before--BorderWidth --pf-v5-c-label--m-outline__content--before--BorderWidth --pf-v5-global--BorderWidth--sm $pf-v5-global--BorderWidth--sm 1px | ||||
| .pf-v5-c-label.pf-m-outline | --pf-v5-c-label__content--before--BorderColor | #d2d2d2 | ||
--pf-v5-c-label__content--before--BorderColor --pf-v5-c-label--m-outline__content--before--BorderColor --pf-v5-global--BorderColor--100 $pf-v5-global--BorderColor--100 $pf-v5-color-black-300 #d2d2d2 | ||||
| .pf-v5-c-label.pf-m-outline | --pf-v5-c-label--BackgroundColor | #fff | ||
--pf-v5-c-label--BackgroundColor --pf-v5-c-label--m-outline--BackgroundColor --pf-v5-global--BackgroundColor--100 $pf-v5-global--BackgroundColor--100 $pf-v5-color-white #fff | ||||
| .pf-v5-c-label.pf-m-outline | --pf-v5-c-label--m-editable__content--before--BorderColor | #d2d2d2 | ||
--pf-v5-c-label--m-editable__content--before--BorderColor --pf-v5-c-label--m-outline__content--before--BorderColor --pf-v5-global--BorderColor--100 $pf-v5-global--BorderColor--100 $pf-v5-color-black-300 #d2d2d2 | ||||
| .pf-v5-c-label.pf-m-outline | --pf-v5-c-label--m-editable__content--hover--before--BorderColor | #d2d2d2 | ||
--pf-v5-c-label--m-editable__content--hover--before--BorderColor --pf-v5-c-label--m-outline__content--before--BorderColor --pf-v5-global--BorderColor--100 $pf-v5-global--BorderColor--100 $pf-v5-color-black-300 #d2d2d2 | ||||
| .pf-v5-c-label.pf-m-outline | --pf-v5-c-label--m-editable__content--focus--before--BorderColor | #d2d2d2 | ||
--pf-v5-c-label--m-editable__content--focus--before--BorderColor --pf-v5-c-label--m-outline__content--before--BorderColor --pf-v5-global--BorderColor--100 $pf-v5-global--BorderColor--100 $pf-v5-color-black-300 #d2d2d2 | ||||
| .pf-v5-c-label.pf-m-overflow:hover | --pf-v5-c-label__content--before--BorderWidth | 2px | ||
--pf-v5-c-label__content--before--BorderWidth --pf-v5-c-label--m-outline__content--link--hover--before--BorderWidth --pf-v5-global--BorderWidth--md $pf-v5-global--BorderWidth--md 2px | ||||
| .pf-v5-c-label.pf-m-overflow:hover | --pf-v5-c-label__content--before--BorderColor | #d2d2d2 | ||
--pf-v5-c-label__content--before--BorderColor --pf-v5-c-label--m-outline__content--link--hover--before--BorderColor --pf-v5-global--BorderColor--100 $pf-v5-global--BorderColor--100 $pf-v5-color-black-300 #d2d2d2 | ||||
| .pf-v5-c-label.pf-m-overflow:focus | --pf-v5-c-label__content--before--BorderWidth | 2px | ||
--pf-v5-c-label__content--before--BorderWidth --pf-v5-c-label--m-outline__content--link--focus--before--BorderWidth --pf-v5-global--BorderWidth--md $pf-v5-global--BorderWidth--md 2px | ||||
| .pf-v5-c-label.pf-m-overflow:focus | --pf-v5-c-label__content--before--BorderColor | #d2d2d2 | ||
--pf-v5-c-label__content--before--BorderColor --pf-v5-c-label--m-outline__content--link--focus--before--BorderColor --pf-v5-global--BorderColor--100 $pf-v5-global--BorderColor--100 $pf-v5-color-black-300 #d2d2d2 | ||||
| .pf-v5-c-label.pf-m-editable | --pf-v5-c-label__content--MaxWidth | 16ch | ||
--pf-v5-c-label__content--MaxWidth --pf-v5-c-label--m-editable__content--MaxWidth 16ch | ||||
| .pf-v5-c-label.pf-m-editable | --pf-v5-c-label__content--before--BorderWidth | 1px | ||
--pf-v5-c-label__content--before--BorderWidth --pf-v5-c-label--m-editable__content--before--BorderWidth --pf-v5-global--BorderWidth--sm $pf-v5-global--BorderWidth--sm 1px | ||||
| .pf-v5-c-label.pf-m-editable | --pf-v5-c-label__content--before--BorderColor | #d2d2d2 | ||
--pf-v5-c-label__content--before--BorderColor --pf-v5-c-label--m-editable__content--before--BorderColor --pf-v5-global--BorderColor--100 $pf-v5-global--BorderColor--100 $pf-v5-color-black-300 #d2d2d2 | ||||
| .pf-v5-c-label.pf-m-editable | --pf-v5-c-label__content--link--hover--before--BorderWidth | 1px | ||
--pf-v5-c-label__content--link--hover--before--BorderWidth --pf-v5-c-label--m-editable__content--hover--before--BorderWidth --pf-v5-global--BorderWidth--sm $pf-v5-global--BorderWidth--sm 1px | ||||
| .pf-v5-c-label.pf-m-editable | --pf-v5-c-label__content--link--hover--before--BorderColor | #d2d2d2 | ||
--pf-v5-c-label__content--link--hover--before--BorderColor --pf-v5-c-label--m-editable__content--hover--before--BorderColor --pf-v5-global--BorderColor--100 $pf-v5-global--BorderColor--100 $pf-v5-color-black-300 #d2d2d2 | ||||
| .pf-v5-c-label.pf-m-editable | --pf-v5-c-label__content--link--focus--before--BorderWidth | 1px | ||
--pf-v5-c-label__content--link--focus--before--BorderWidth --pf-v5-c-label--m-editable__content--focus--before--BorderWidth --pf-v5-global--BorderWidth--sm $pf-v5-global--BorderWidth--sm 1px | ||||
| .pf-v5-c-label.pf-m-editable | --pf-v5-c-label__content--link--focus--before--BorderColor | #d2d2d2 | ||
--pf-v5-c-label__content--link--focus--before--BorderColor --pf-v5-c-label--m-editable__content--focus--before--BorderColor --pf-v5-global--BorderColor--100 $pf-v5-global--BorderColor--100 $pf-v5-color-black-300 #d2d2d2 | ||||
| .pf-v5-c-label.pf-m-editable | --pf-v5-c-label--m-outline__content--link--hover--before--BorderWidth | 1px | ||
--pf-v5-c-label--m-outline__content--link--hover--before--BorderWidth --pf-v5-c-label--m-editable__content--before--BorderWidth --pf-v5-global--BorderWidth--sm $pf-v5-global--BorderWidth--sm 1px | ||||
| .pf-v5-c-label.pf-m-editable | --pf-v5-c-label--m-outline__content--link--focus--before--BorderWidth | 1px | ||
--pf-v5-c-label--m-outline__content--link--focus--before--BorderWidth --pf-v5-c-label--m-editable__content--before--BorderWidth --pf-v5-global--BorderWidth--sm $pf-v5-global--BorderWidth--sm 1px | ||||
| .pf-v5-c-label.pf-m-editable:hover | --pf-v5-c-label--m-editable--TextDecorationColor | #151515 | ||
--pf-v5-c-label--m-editable--TextDecorationColor --pf-v5-c-label--m-editable--hover--TextDecorationColor --pf-v5-global--Color--100 $pf-v5-global--Color--100 $pf-v5-color-black-900 #151515 | ||||
| .pf-v5-c-label.pf-m-editable:focus | --pf-v5-c-label--m-editable--TextDecorationColor | #151515 | ||
--pf-v5-c-label--m-editable--TextDecorationColor --pf-v5-c-label--m-editable--focus--TextDecorationColor --pf-v5-global--Color--100 $pf-v5-global--Color--100 $pf-v5-color-black-900 #151515 | ||||
| .pf-v5-c-label.pf-m-editable-active | --pf-v5-c-label--m-editable--Cursor | auto | ||
--pf-v5-c-label--m-editable--Cursor --pf-v5-c-label--m-editable--m-editable-active--Cursor auto | ||||
| .pf-v5-c-label.pf-m-editable-active | --pf-v5-c-label--m-editable--TextDecoration | none | ||
--pf-v5-c-label--m-editable--TextDecoration --pf-v5-c-label--m-editable--m-editable-active--TextDecoration none | ||||
| .pf-v5-c-label.pf-m-editable-active | --pf-v5-c-label--BackgroundColor | transparent | ||
--pf-v5-c-label--BackgroundColor --pf-v5-c-label--m-editable--m-editable-active--BackgroundColor transparent | ||||
| .pf-v5-c-label.pf-m-overflow | --pf-v5-c-label__content--Color | #06c | ||
--pf-v5-c-label__content--Color --pf-v5-c-label--m-overflow__content--Color --pf-v5-global--link--Color $pf-v5-global--link--Color $pf-v5-global--primary-color--100 $pf-v5-color-blue-400 #06c | ||||
| .pf-v5-c-label.pf-m-overflow | --pf-v5-c-label--BackgroundColor | #fff | ||
--pf-v5-c-label--BackgroundColor --pf-v5-c-label--m-overflow__content--BackgroundColor --pf-v5-global--BackgroundColor--100 $pf-v5-global--BackgroundColor--100 $pf-v5-color-white #fff | ||||
| .pf-v5-c-label.pf-m-overflow | --pf-v5-c-label__content--before--BorderWidth | 1px | ||
--pf-v5-c-label__content--before--BorderWidth --pf-v5-c-label--m-overflow__content--before--BorderWidth --pf-v5-global--BorderWidth--sm $pf-v5-global--BorderWidth--sm 1px | ||||
| .pf-v5-c-label.pf-m-overflow | --pf-v5-c-label__content--before--BorderColor | #f0f0f0 | ||
--pf-v5-c-label__content--before--BorderColor --pf-v5-c-label--m-overflow__content--before--BorderColor --pf-v5-global--BorderColor--300 $pf-v5-global--BorderColor--300 $pf-v5-color-black-200 #f0f0f0 | ||||
| .pf-v5-c-label.pf-m-overflow | --pf-v5-c-label__content--link--hover--before--BorderWidth | 2px | ||
--pf-v5-c-label__content--link--hover--before--BorderWidth --pf-v5-c-label--m-overflow__content--link--hover--before--BorderWidth --pf-v5-global--BorderWidth--md $pf-v5-global--BorderWidth--md 2px | ||||
| .pf-v5-c-label.pf-m-overflow | --pf-v5-c-label__content--link--hover--before--BorderColor | #f0f0f0 | ||
--pf-v5-c-label__content--link--hover--before--BorderColor --pf-v5-c-label--m-overflow__content--link--hover--before--BorderColor --pf-v5-global--BorderColor--300 $pf-v5-global--BorderColor--300 $pf-v5-color-black-200 #f0f0f0 | ||||
| .pf-v5-c-label.pf-m-overflow | --pf-v5-c-label__content--link--focus--before--BorderWidth | 2px | ||
--pf-v5-c-label__content--link--focus--before--BorderWidth --pf-v5-c-label--m-overflow__content--link--focus--before--BorderWidth --pf-v5-global--BorderWidth--md $pf-v5-global--BorderWidth--md 2px | ||||
| .pf-v5-c-label.pf-m-overflow | --pf-v5-c-label__content--link--focus--before--BorderColor | #f0f0f0 | ||
--pf-v5-c-label__content--link--focus--before--BorderColor --pf-v5-c-label--m-overflow__content--link--focus--before--BorderColor --pf-v5-global--BorderColor--300 $pf-v5-global--BorderColor--300 $pf-v5-color-black-200 #f0f0f0 | ||||
| .pf-v5-c-label.pf-m-disabled | --pf-v5-c-label--BackgroundColor | #d2d2d2 | ||
--pf-v5-c-label--BackgroundColor --pf-v5-c-label--m-disabled--BackgroundColor --pf-v5-global--disabled-color--200 $pf-v5-global--disabled-color--200 $pf-v5-color-black-300 #d2d2d2 | ||||
| .pf-v5-c-label.pf-m-disabled | --pf-v5-c-label__content--Color | #6a6e73 | ||
--pf-v5-c-label__content--Color --pf-v5-c-label--m-disabled__content--Color --pf-v5-global--disabled-color--100 $pf-v5-global--disabled-color--100 $pf-v5-color-black-600 #6a6e73 | ||||
| .pf-v5-c-label.pf-m-disabled | --pf-v5-c-label__icon--Color | #6a6e73 | ||
--pf-v5-c-label__icon--Color --pf-v5-c-label--m-disabled__icon--Color --pf-v5-global--disabled-color--100 $pf-v5-global--disabled-color--100 $pf-v5-color-black-600 #6a6e73 | ||||
| .pf-v5-c-label.pf-m-disabled | --pf-v5-c-label__content--before--BorderWidth | 0 | ||
| .pf-v5-c-label.pf-m-disabled .pf-v5-c-button | --pf-v5-c-button--m-plain--disabled--Color | #6a6e73 | ||
--pf-v5-c-button--m-plain--disabled--Color --pf-v5-c-label--c-button--m-disabled--Color --pf-v5-global--disabled-color--100 $pf-v5-global--disabled-color--100 $pf-v5-color-black-600 #6a6e73 | ||||
| a.pf-v5-c-label__content:hover | --pf-v5-c-label__content--before--BorderWidth | 2px | ||
--pf-v5-c-label__content--before--BorderWidth --pf-v5-c-label__content--link--hover--before--BorderWidth --pf-v5-global--BorderWidth--md $pf-v5-global--BorderWidth--md 2px | ||||
| a.pf-v5-c-label__content:hover | --pf-v5-c-label__content--before--BorderColor | #8a8d90 | ||
--pf-v5-c-label__content--before--BorderColor --pf-v5-c-label__content--link--hover--before--BorderColor --pf-v5-global--BorderColor--200 $pf-v5-global--BorderColor--200 $pf-v5-color-black-500 #8a8d90 | ||||
| a.pf-v5-c-label__content:focus | --pf-v5-c-label__content--before--BorderWidth | 2px | ||
--pf-v5-c-label__content--before--BorderWidth --pf-v5-c-label__content--link--focus--before--BorderWidth --pf-v5-global--BorderWidth--md $pf-v5-global--BorderWidth--md 2px | ||||
| a.pf-v5-c-label__content:focus | --pf-v5-c-label__content--before--BorderColor | #8a8d90 | ||
--pf-v5-c-label__content--before--BorderColor --pf-v5-c-label__content--link--focus--before--BorderColor --pf-v5-global--BorderColor--200 $pf-v5-global--BorderColor--200 $pf-v5-color-black-500 #8a8d90 | ||||
| .pf-v5-c-label__actions .pf-v5-c-button | --pf-v5-c-button--FontSize | 0.75rem | ||
--pf-v5-c-button--FontSize --pf-v5-c-label__actions--c-button--FontSize --pf-v5-global--FontSize--xs $pf-v5-global--FontSize--xs pf-font-prem(12px) 0.75rem | ||||
| .pf-v5-c-label__actions .pf-v5-c-button | --pf-v5-c-button--PaddingTop | 0.25rem | ||
--pf-v5-c-button--PaddingTop --pf-v5-c-label__actions--c-button--PaddingTop --pf-v5-global--spacer--xs $pf-v5-global--spacer--xs pf-size-prem(4px) 0.25rem | ||||
| .pf-v5-c-label__actions .pf-v5-c-button | --pf-v5-c-button--PaddingRight | 0.5rem | ||
--pf-v5-c-button--PaddingRight --pf-v5-c-label__actions--c-button--PaddingRight --pf-v5-global--spacer--sm $pf-v5-global--spacer--sm pf-size-prem(8px) 0.5rem | ||||
| .pf-v5-c-label__actions .pf-v5-c-button | --pf-v5-c-button--PaddingBottom | 0.25rem | ||
--pf-v5-c-button--PaddingBottom --pf-v5-c-label__actions--c-button--PaddingBottom --pf-v5-global--spacer--xs $pf-v5-global--spacer--xs pf-size-prem(4px) 0.25rem | ||||
| .pf-v5-c-label__actions .pf-v5-c-button | --pf-v5-c-button--PaddingLeft | 0.5rem | ||
--pf-v5-c-button--PaddingLeft --pf-v5-c-label__actions--c-button--PaddingLeft --pf-v5-global--spacer--sm $pf-v5-global--spacer--sm pf-size-prem(8px) 0.5rem | ||||
Prefixed with 'pf-v5-c-label-group'
| Expand or collapse column | Selector | Variable | Value | |
|---|---|---|---|---|
| .pf-v5-c-label-group | --pf-v5-c-label-group--RowGap | 0.5rem | ||
--pf-v5-c-label-group--RowGap --pf-v5-global--spacer--sm $pf-v5-global--spacer--sm pf-size-prem(8px) 0.5rem | ||||
| .pf-v5-c-label-group | --pf-v5-c-label-group--ColumnGap | 0 | ||
| .pf-v5-c-label-group | --pf-v5-c-label-group--m-vertical--RowGap | 0.5rem | ||
--pf-v5-c-label-group--m-vertical--RowGap --pf-v5-global--spacer--sm $pf-v5-global--spacer--sm pf-size-prem(8px) 0.5rem | ||||
| .pf-v5-c-label-group | --pf-v5-c-label-group--m-vertical--ColumnGap | 0.5rem | ||
--pf-v5-c-label-group--m-vertical--ColumnGap --pf-v5-global--spacer--sm $pf-v5-global--spacer--sm pf-size-prem(8px) 0.5rem | ||||
| .pf-v5-c-label-group | --pf-v5-c-label-group__main--RowGap | 0.25rem | ||
--pf-v5-c-label-group__main--RowGap --pf-v5-global--spacer--xs $pf-v5-global--spacer--xs pf-size-prem(4px) 0.25rem | ||||
| .pf-v5-c-label-group | --pf-v5-c-label-group__main--ColumnGap | 0.5rem | ||
--pf-v5-c-label-group__main--ColumnGap --pf-v5-global--spacer--sm $pf-v5-global--spacer--sm pf-size-prem(8px) 0.5rem | ||||
| .pf-v5-c-label-group | --pf-v5-c-label-group--m-vertical__main--RowGap | 0.5rem | ||
--pf-v5-c-label-group--m-vertical__main--RowGap --pf-v5-global--spacer--sm $pf-v5-global--spacer--sm pf-size-prem(8px) 0.5rem | ||||
| .pf-v5-c-label-group | --pf-v5-c-label-group--m-vertical__main--ColumnGap | 0.25rem | ||
--pf-v5-c-label-group--m-vertical__main--ColumnGap --pf-v5-global--spacer--xs $pf-v5-global--spacer--xs pf-size-prem(4px) 0.25rem | ||||
| .pf-v5-c-label-group | --pf-v5-c-label-group__list--RowGap | 0.25rem | ||
--pf-v5-c-label-group__list--RowGap --pf-v5-global--spacer--xs $pf-v5-global--spacer--xs pf-size-prem(4px) 0.25rem | ||||
| .pf-v5-c-label-group | --pf-v5-c-label-group__list--ColumnGap | 0.25rem | ||
--pf-v5-c-label-group__list--ColumnGap --pf-v5-global--spacer--xs $pf-v5-global--spacer--xs pf-size-prem(4px) 0.25rem | ||||
| .pf-v5-c-label-group | --pf-v5-c-label-group--m-vertical__list--RowGap | 0.25rem | ||
--pf-v5-c-label-group--m-vertical__list--RowGap --pf-v5-global--spacer--xs $pf-v5-global--spacer--xs pf-size-prem(4px) 0.25rem | ||||
| .pf-v5-c-label-group | --pf-v5-c-label-group--m-vertical__list--ColumnGap | 0.25rem | ||
--pf-v5-c-label-group--m-vertical__list--ColumnGap --pf-v5-global--spacer--xs $pf-v5-global--spacer--xs pf-size-prem(4px) 0.25rem | ||||
| .pf-v5-c-label-group | --pf-v5-c-label-group--m-category--PaddingTop | 0.25rem | ||
--pf-v5-c-label-group--m-category--PaddingTop --pf-v5-global--spacer--xs $pf-v5-global--spacer--xs pf-size-prem(4px) 0.25rem | ||||
| .pf-v5-c-label-group | --pf-v5-c-label-group--m-category--PaddingRight | 0.25rem | ||
--pf-v5-c-label-group--m-category--PaddingRight --pf-v5-global--spacer--xs $pf-v5-global--spacer--xs pf-size-prem(4px) 0.25rem | ||||
| .pf-v5-c-label-group | --pf-v5-c-label-group--m-category--PaddingBottom | 0.25rem | ||
--pf-v5-c-label-group--m-category--PaddingBottom --pf-v5-global--spacer--xs $pf-v5-global--spacer--xs pf-size-prem(4px) 0.25rem | ||||
| .pf-v5-c-label-group | --pf-v5-c-label-group--m-category--PaddingLeft | 0.5rem | ||
--pf-v5-c-label-group--m-category--PaddingLeft --pf-v5-global--spacer--sm $pf-v5-global--spacer--sm pf-size-prem(8px) 0.5rem | ||||
| .pf-v5-c-label-group | --pf-v5-c-label-group--m-vertical--m-category--PaddingRight | 0.5rem | ||
--pf-v5-c-label-group--m-vertical--m-category--PaddingRight --pf-v5-global--spacer--sm $pf-v5-global--spacer--sm pf-size-prem(8px) 0.5rem | ||||
| .pf-v5-c-label-group | --pf-v5-c-label-group--m-category--BorderRadius | 3px | ||
--pf-v5-c-label-group--m-category--BorderRadius --pf-v5-global--BorderRadius--sm $pf-v5-global--BorderRadius--sm 3px | ||||
| .pf-v5-c-label-group | --pf-v5-c-label-group--m-category--BorderWidth | 1px | ||
--pf-v5-c-label-group--m-category--BorderWidth --pf-v5-global--BorderWidth--sm $pf-v5-global--BorderWidth--sm 1px | ||||
| .pf-v5-c-label-group | --pf-v5-c-label-group--m-category--BorderColor | #f0f0f0 | ||
--pf-v5-c-label-group--m-category--BorderColor --pf-v5-global--BorderColor--300 $pf-v5-global--BorderColor--300 $pf-v5-color-black-200 #f0f0f0 | ||||
| .pf-v5-c-label-group | --pf-v5-c-label-group--m-category--BackgroundColor | #fff | ||
--pf-v5-c-label-group--m-category--BackgroundColor --pf-v5-global--BackgroundColor--100 $pf-v5-global--BackgroundColor--100 $pf-v5-color-white #fff | ||||
| .pf-v5-c-label-group | --pf-v5-c-label-group__label--FontSize | 0.875rem | ||
--pf-v5-c-label-group__label--FontSize --pf-v5-global--FontSize--sm $pf-v5-global--FontSize--sm pf-font-prem(14px) 0.875rem | ||||
| .pf-v5-c-label-group | --pf-v5-c-label-group__label--MaxWidth | 18ch | ||
| .pf-v5-c-label-group | --pf-v5-c-label-group__close--MarginTop | calc(0.25rem * -1) | ||
--pf-v5-c-label-group__close--MarginTop calc(--pf-v5-global--spacer--xs * -1) calc($pf-v5-global--spacer--xs * -1) calc(pf-size-prem(4px) * -1) calc(0.25rem * -1) | ||||
| .pf-v5-c-label-group | --pf-v5-c-label-group__close--MarginBottom | calc(0.25rem * -1) | ||
--pf-v5-c-label-group__close--MarginBottom calc(--pf-v5-global--spacer--xs * -1) calc($pf-v5-global--spacer--xs * -1) calc(pf-size-prem(4px) * -1) calc(0.25rem * -1) | ||||
| .pf-v5-c-label-group | --pf-v5-c-label-group--m-vertical__close--MarginTop | calc(0.375rem * -1) | ||
--pf-v5-c-label-group--m-vertical__close--MarginTop calc(--pf-v5-global--spacer--form-element * -1) calc($pf-v5-global--spacer--form-element * -1) calc(pf-size-prem(6px) * -1) calc(0.375rem * -1) | ||||
| .pf-v5-c-label-group | --pf-v5-c-label-group--m-vertical__close--MarginRight | calc(0.375rem * -1) | ||
--pf-v5-c-label-group--m-vertical__close--MarginRight calc(--pf-v5-global--spacer--form-element * -1) calc($pf-v5-global--spacer--form-element * -1) calc(pf-size-prem(6px) * -1) calc(0.375rem * -1) | ||||
| .pf-v5-c-label-group | --pf-v5-c-label-group--m-vertical__close--c-button--PaddingRight | 0.5rem | ||
--pf-v5-c-label-group--m-vertical__close--c-button--PaddingRight --pf-v5-global--spacer--sm $pf-v5-global--spacer--sm pf-size-prem(8px) 0.5rem | ||||
| .pf-v5-c-label-group | --pf-v5-c-label-group--m-vertical__close--c-button--PaddingLeft | 0.5rem | ||
--pf-v5-c-label-group--m-vertical__close--c-button--PaddingLeft --pf-v5-global--spacer--sm $pf-v5-global--spacer--sm pf-size-prem(8px) 0.5rem | ||||
| .pf-v5-c-label-group | --pf-v5-c-label-group__textarea--MinWidth | 12.5rem | ||
| .pf-v5-c-label-group | --pf-v5-c-label-group__textarea--PaddingTop | 0.125rem | ||
| .pf-v5-c-label-group | --pf-v5-c-label-group__textarea--PaddingRight | 0.25rem | ||
--pf-v5-c-label-group__textarea--PaddingRight --pf-v5-global--spacer--xs $pf-v5-global--spacer--xs pf-size-prem(4px) 0.25rem | ||||
| .pf-v5-c-label-group | --pf-v5-c-label-group__textarea--PaddingBottom | 0 | ||
| .pf-v5-c-label-group | --pf-v5-c-label-group__textarea--PaddingLeft | 0.25rem | ||
--pf-v5-c-label-group__textarea--PaddingLeft --pf-v5-global--spacer--xs $pf-v5-global--spacer--xs pf-size-prem(4px) 0.25rem | ||||
| .pf-v5-c-label-group.pf-m-vertical | --pf-v5-c-label-group--RowGap | 0.5rem | ||
--pf-v5-c-label-group--RowGap --pf-v5-c-label-group--m-vertical--RowGap --pf-v5-global--spacer--sm $pf-v5-global--spacer--sm pf-size-prem(8px) 0.5rem | ||||
| .pf-v5-c-label-group.pf-m-vertical | --pf-v5-c-label-group--ColumnGap | 0.5rem | ||
--pf-v5-c-label-group--ColumnGap --pf-v5-c-label-group--m-vertical--ColumnGap --pf-v5-global--spacer--sm $pf-v5-global--spacer--sm pf-size-prem(8px) 0.5rem | ||||
| .pf-v5-c-label-group.pf-m-vertical | --pf-v5-c-label-group__main--RowGap | 0.5rem | ||
--pf-v5-c-label-group__main--RowGap --pf-v5-c-label-group--m-vertical__main--RowGap --pf-v5-global--spacer--sm $pf-v5-global--spacer--sm pf-size-prem(8px) 0.5rem | ||||
| .pf-v5-c-label-group.pf-m-vertical | --pf-v5-c-label-group__main--ColumnGap | 0.25rem | ||
--pf-v5-c-label-group__main--ColumnGap --pf-v5-c-label-group--m-vertical__main--ColumnGap --pf-v5-global--spacer--xs $pf-v5-global--spacer--xs pf-size-prem(4px) 0.25rem | ||||
| .pf-v5-c-label-group.pf-m-vertical | --pf-v5-c-label-group__list--RowGap | 0.25rem | ||
--pf-v5-c-label-group__list--RowGap --pf-v5-c-label-group--m-vertical__list--RowGap --pf-v5-global--spacer--xs $pf-v5-global--spacer--xs pf-size-prem(4px) 0.25rem | ||||
| .pf-v5-c-label-group.pf-m-vertical | --pf-v5-c-label-group__list--ColumnGap | 0.25rem | ||
--pf-v5-c-label-group__list--ColumnGap --pf-v5-c-label-group--m-vertical__list--ColumnGap --pf-v5-global--spacer--xs $pf-v5-global--spacer--xs pf-size-prem(4px) 0.25rem | ||||
| .pf-v5-c-label-group.pf-m-vertical | --pf-v5-c-label-group__close--MarginTop | calc(0.375rem * -1) | ||
--pf-v5-c-label-group__close--MarginTop --pf-v5-c-label-group--m-vertical__close--MarginTop calc(--pf-v5-global--spacer--form-element * -1) calc($pf-v5-global--spacer--form-element * -1) calc(pf-size-prem(6px) * -1) calc(0.375rem * -1) | ||||
| .pf-v5-c-label-group.pf-m-vertical | --pf-v5-c-label-group__close--MarginLeft | undefined | ||
--pf-v5-c-label-group__close--MarginLeft --pf-v5-c-label-group--m-vertical__close--MarginLeft undefined | ||||
| .pf-v5-c-label-group.pf-m-vertical | --pf-v5-c-label-group__close--MarginBottom | 0 | ||
| .pf-v5-c-label-group.pf-m-vertical | --pf-v5-c-label-group__close--MarginRight | calc(0.375rem * -1) | ||
--pf-v5-c-label-group__close--MarginRight --pf-v5-c-label-group--m-vertical__close--MarginRight calc(--pf-v5-global--spacer--form-element * -1) calc($pf-v5-global--spacer--form-element * -1) calc(pf-size-prem(6px) * -1) calc(0.375rem * -1) | ||||
| .pf-v5-c-label-group.pf-m-vertical | --pf-v5-c-label-group--m-category--PaddingRight | 0.5rem | ||
--pf-v5-c-label-group--m-category--PaddingRight --pf-v5-c-label-group--m-vertical--m-category--PaddingRight --pf-v5-global--spacer--sm $pf-v5-global--spacer--sm pf-size-prem(8px) 0.5rem | ||||
| .pf-v5-c-label-group.pf-m-vertical .pf-v5-c-label-group__close .pf-v5-c-button | --pf-v5-c-button--PaddingLeft | 0.5rem | ||
--pf-v5-c-button--PaddingLeft --pf-v5-c-label-group--m-vertical__close--c-button--PaddingLeft --pf-v5-global--spacer--sm $pf-v5-global--spacer--sm pf-size-prem(8px) 0.5rem | ||||
| .pf-v5-c-label-group.pf-m-vertical .pf-v5-c-label-group__close .pf-v5-c-button | --pf-v5-c-button--PaddingRight | 0.5rem | ||
--pf-v5-c-button--PaddingRight --pf-v5-c-label-group--m-vertical__close--c-button--PaddingRight --pf-v5-global--spacer--sm $pf-v5-global--spacer--sm pf-size-prem(8px) 0.5rem | ||||
View source on GitHub
