From 72b2b334744be17feeb5d3a8a7d969cad5f0a070 Mon Sep 17 00:00:00 2001 From: Steven Spriggs Date: Tue, 23 Jul 2024 12:28:51 -0400 Subject: [PATCH 1/3] docs: add version number to masthead --- .../_includes/partials/component/masthead.njk | 5 +-- .../elements/uxdot-masthead-lightdom.css | 35 +++++++------------ .../javascript/elements/uxdot-masthead.js | 33 +++++------------ 3 files changed, 25 insertions(+), 48 deletions(-) diff --git a/docs/_includes/partials/component/masthead.njk b/docs/_includes/partials/component/masthead.njk index 0e4ab9878e..996544d2d9 100755 --- a/docs/_includes/partials/component/masthead.njk +++ b/docs/_includes/partials/component/masthead.njk @@ -6,7 +6,8 @@ Red Hat Design System logo - - Contribute on Github + Contribute on Github + + v{{ pkg.version }} diff --git a/docs/assets/javascript/elements/uxdot-masthead-lightdom.css b/docs/assets/javascript/elements/uxdot-masthead-lightdom.css index 590bf30a1e..4136f25e6c 100644 --- a/docs/assets/javascript/elements/uxdot-masthead-lightdom.css +++ b/docs/assets/javascript/elements/uxdot-masthead-lightdom.css @@ -3,29 +3,20 @@ uxdot-masthead { container-name: uxdot-masthead; } -uxdot-masthead [slot="links"] span { - border: 0 !important; - clip: rect(1px, 1px, 1px, 1px) !important; /* 1 */ - clip-path: inset(50%) !important; /* 2 */ - height: 1px !important; - margin: -1px !important; - overflow: hidden !important; - padding: 0 !important; - position: absolute !important; - width: 1px !important; - white-space: nowrap !important; +uxdot-masthead a[slot="links"] { + color: var(--rh-color-text-primary-on-dark, #ffffff) !important; +} + +uxdot-masthead a[slot="links"]:is(:hover, :focus) { + color: var(--rh-color-icon-subtle-hover, #a3a3a3) !important; +} + +uxdot-masthead [slot="links"] span.display-xs { + display: none; } @container uxdot-masthead (min-width: 576px) { - uxdot-masthead [slot="links"] span { - clip: unset !important; - clip-path: unset !important; - height: unset !important; - margin: unset !important; - overflow: unset !important; - padding: unset !important; - position: unset !important; - width: unset !important; - white-space: unset !important; + uxdot-masthead [slot="links"] span.display-xs { + display: inline; } -} \ No newline at end of file +} diff --git a/docs/assets/javascript/elements/uxdot-masthead.js b/docs/assets/javascript/elements/uxdot-masthead.js index 3a526c1491..2c12efd0cb 100644 --- a/docs/assets/javascript/elements/uxdot-masthead.js +++ b/docs/assets/javascript/elements/uxdot-masthead.js @@ -16,7 +16,7 @@ class UxdotMasthead extends LitElement { #container { display: grid; - gap: var(--rh-space-lg, 16px); + column-gap: var(--rh-space-lg, 16px); grid-template-columns: max-content 1fr max-content; max-height: var(--uxdot-masthead-max-height, 72px); margin-inline: var(--rh-space-md, 8px); @@ -56,22 +56,22 @@ class UxdotMasthead extends LitElement { display: flex; flex-direction: row; align-items: center; + justify-self: flex-start; gap: var(--rh-space-md, 8px); } - slot[name="links"]::slotted(a) { - --pf-icon--size: 28px; + slot[name="links"] { + --pf-icon--size: 24px; + display: flex; + flex-direction: row; + column-gap: var(--rh-space-lg, 16px); + } + slot[name="links"]::slotted(a) { display: flex; flex-direction: row; gap: var(--rh-space-lg, 16px); align-items: center; - color: var(--rh-color-text-on-dark, #ffffff) !important; - } - - slot[name="links"]:hover::slotted(a), - slot[name="links"]::slotted(a:hover) { - color: var(--rh-color-icon-subtle-hover, #a3a3a3) !important; } @container (min-width: 576px) { @@ -79,16 +79,6 @@ class UxdotMasthead extends LitElement { gap: var(--rh-space-lg, 16px); margin: var(--rh-space-lg, 16px); } - - slot[name="links"]::slotted(span) { - clip: rect(0 0 0 0); - clip-path: inset(50%); - height: 1px; - overflow: hidden; - position: absolute; - white-space: nowrap; - width: 1px; - } } @container (min-width: 992px) { @@ -103,11 +93,6 @@ class UxdotMasthead extends LitElement { slot[name="logo"]::slotted(a) { margin-inline-start: var(--rh-space-lg, 16px); } - - slot[name="links"]::slotted(a) { - - gap: var(--rh-space-md, 8px); - } } `; From f5746e7a40f49ceff9390a70dfe51da2bc7eb7a8 Mon Sep 17 00:00:00 2001 From: Steven Spriggs Date: Tue, 23 Jul 2024 14:05:22 -0400 Subject: [PATCH 2/3] docs: masthead style tweaks --- docs/assets/javascript/elements/uxdot-masthead-lightdom.css | 4 ++++ docs/assets/javascript/elements/uxdot-masthead.js | 2 +- 2 files changed, 5 insertions(+), 1 deletion(-) diff --git a/docs/assets/javascript/elements/uxdot-masthead-lightdom.css b/docs/assets/javascript/elements/uxdot-masthead-lightdom.css index 4136f25e6c..5d22be7a37 100644 --- a/docs/assets/javascript/elements/uxdot-masthead-lightdom.css +++ b/docs/assets/javascript/elements/uxdot-masthead-lightdom.css @@ -15,6 +15,10 @@ uxdot-masthead [slot="links"] span.display-xs { display: none; } +uxdot-masthead a[slot="links"]:last-of-type { + margin-inline-end: var(--rh-space-md, 8px); +} + @container uxdot-masthead (min-width: 576px) { uxdot-masthead [slot="links"] span.display-xs { display: inline; diff --git a/docs/assets/javascript/elements/uxdot-masthead.js b/docs/assets/javascript/elements/uxdot-masthead.js index 2c12efd0cb..7e27652168 100644 --- a/docs/assets/javascript/elements/uxdot-masthead.js +++ b/docs/assets/javascript/elements/uxdot-masthead.js @@ -83,7 +83,7 @@ class UxdotMasthead extends LitElement { @container (min-width: 992px) { #container { - grid-template-columns: 1fr max-content max-content; + grid-template-columns: 1fr max-content; } slot[name="hamburger"] { From 0f2073737435e17922c2284e71bf9db4f97f97c1 Mon Sep 17 00:00:00 2001 From: Steven Spriggs Date: Tue, 23 Jul 2024 15:59:44 -0400 Subject: [PATCH 3/3] docs: add title and aria-label --- docs/_includes/partials/component/masthead.njk | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/_includes/partials/component/masthead.njk b/docs/_includes/partials/component/masthead.njk index 996544d2d9..aef3cfc82c 100755 --- a/docs/_includes/partials/component/masthead.njk +++ b/docs/_includes/partials/component/masthead.njk @@ -9,5 +9,5 @@ Contribute on Github - v{{ pkg.version }} + v{{ pkg.version }}