diff --git a/.changeset/eighty-windows-exist.md b/.changeset/eighty-windows-exist.md new file mode 100644 index 0000000000..db70ff5905 --- /dev/null +++ b/.changeset/eighty-windows-exist.md @@ -0,0 +1,5 @@ +--- +"@rhds/elements": patch +--- + +Added --rh-health-index-z-index custom prop to allow implementers to patch z-index conflicts diff --git a/elements/rh-health-index/rh-health-index.css b/elements/rh-health-index/rh-health-index.css index 8528649f2f..bd5c6dbc0c 100644 --- a/elements/rh-health-index/rh-health-index.css +++ b/elements/rh-health-index/rh-health-index.css @@ -15,8 +15,9 @@ line-height: var(--_box-size); text-transform: uppercase; - /* sizing */ + /* size & positioning */ --_box-size: var(--rh-space-xl, 24px); + --_z-index: var(--rh-health-index-z-index, 10); /* colors */ --_color-text-active: var(--rh-color-gray-95, #151515); @@ -52,7 +53,7 @@ .box.active { color: var(--_color-text-active); - z-index: 10; + z-index: var(--_z-index); } :is(.sm,.md) .box.active { @@ -120,7 +121,7 @@ display: block; content: ''; min-height: var(--rh-length-xs, 4px); - z-index: 10; + z-index: var(--_z-index); background-color: var(--_color-20); }