From f4fcd78f47022583700581f613f73a1f0b950540 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Benny=20Powers=20-=20=D7=A2=D7=9D=20=D7=99=D7=A9=D7=A8?= =?UTF-8?q?=D7=90=D7=9C=20=D7=97=D7=99!?= Date: Tue, 3 Sep 2024 20:23:56 +0300 Subject: [PATCH] fix(back-to-top): position (#1816) --- .changeset/whole-pillows-run.md | 4 ++++ elements/rh-back-to-top/rh-back-to-top.css | 11 ++++++----- elements/rh-back-to-top/rh-back-to-top.ts | 3 --- 3 files changed, 10 insertions(+), 8 deletions(-) create mode 100644 .changeset/whole-pillows-run.md diff --git a/.changeset/whole-pillows-run.md b/.changeset/whole-pillows-run.md new file mode 100644 index 0000000000..0ed5f94c8c --- /dev/null +++ b/.changeset/whole-pillows-run.md @@ -0,0 +1,4 @@ +--- +"@rhds/elements": patch +--- +``: builds-in the style guidelines in: back to top is fixed and always on top. Note that this change removes previously undocumented CSS custom properties `--rh-back-to-top-position-right` and `--rh-back-to-top-position-bottom`. diff --git a/elements/rh-back-to-top/rh-back-to-top.css b/elements/rh-back-to-top/rh-back-to-top.css index 01dd4a74f9..de9cfdde28 100644 --- a/elements/rh-back-to-top/rh-back-to-top.css +++ b/elements/rh-back-to-top/rh-back-to-top.css @@ -1,7 +1,8 @@ :host { - position: absolute; - right: var(--rh-space-xl, 24px); - bottom: var(--rh-space-xl, 24px); + position: fixed; + z-index: 1000; + inset-inline-end: var(--rh-space-xl, 24px); + inset-block-end: var(--rh-space-xl, 24px); } [part="trigger"] { @@ -54,7 +55,7 @@ span { @media (min-width: 768px) { :host { - right: var(--rh-back-to-top-position-right, var(--rh-space-3xl, 48px)); - bottom: var(--rh-back-to-top-position-bottom, var(--rh-space-3xl, 48px)); + inset-inline-end: var(--rh-space-3xl, 48px); + inset-block-end: var(--rh-space-3xl, 48px); } } diff --git a/elements/rh-back-to-top/rh-back-to-top.ts b/elements/rh-back-to-top/rh-back-to-top.ts index fc8344a993..09b2a99d1a 100644 --- a/elements/rh-back-to-top/rh-back-to-top.ts +++ b/elements/rh-back-to-top/rh-back-to-top.ts @@ -15,11 +15,8 @@ import styles from './rh-back-to-top.css'; * to the top of a lengthy content page. * * @summary A shortcut to the top of the page content - * * @csspart trigger - back to top link anchor element - * @slot - Text for the back to top link - * */ @customElement('rh-back-to-top') export class RhBackToTop extends LitElement {