Examples
Documentation
Overview
This component puts a backdrop over the entire viewport.
Usage
Class | Applied to | Outcome |
|---|---|---|
.pf-v5-c-backdrop | <div> | Initiates backdrop. Required |
.pf-v5-c-backdrop__open | <body> | Lock scrolling when backdrop is active. This class should be set on <body> while backdrop is active and removed while backdrop is inactive. Required |
CSS variables
| Expand or collapse column | Selector | Variable | Value | |
|---|---|---|---|---|
| .pf-v5-c-backdrop | --pf-v5-c-backdrop--Position | fixed | ||
| .pf-v5-c-backdrop | --pf-v5-c-backdrop--ZIndex | 400 | ||
--pf-v5-c-backdrop--ZIndex --pf-v5-global--ZIndex--lg $pf-v5-global--ZIndex--lg 400 | ||||
| .pf-v5-c-backdrop | --pf-v5-c-backdrop--BackgroundColor | rgba(#030303, .62) | ||
--pf-v5-c-backdrop--BackgroundColor --pf-v5-global--BackgroundColor--dark-transparent-100 $pf-v5-global--BackgroundColor--dark-transparent-100 rgba($pf-v5-color-black-1000, .62) rgba(#030303, .62) | ||||
View source on GitHub
