From f4355e0c200761434c0ccd2a4b9d3fa9e7cea1d2 Mon Sep 17 00:00:00 2001 From: Mark Caron Date: Thu, 17 Oct 2024 11:33:35 -0400 Subject: [PATCH] fix(health-index): add CSS custom prop to adjust z-index --- .changeset/eighty-windows-exist.md | 5 +++++ elements/rh-health-index/rh-health-index.css | 7 ++++--- 2 files changed, 9 insertions(+), 3 deletions(-) create mode 100644 .changeset/eighty-windows-exist.md 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); }