From f16dcec6ab747d717b76dad579149a0d44725b51 Mon Sep 17 00:00:00 2001
From: Kevin Paxman <kpaxman@uwaterloo.ca>
Date: Fri, 24 Mar 2023 16:06:47 -0400
Subject: [PATCH] ISTWCMS-6187: fix display of inner links in a timeline
---
src/patterns/04-components/timeline/_timeline.scss | 13 ++++++++++++-
1 file changed, 12 insertions(+), 1 deletion(-)
diff --git a/src/patterns/04-components/timeline/_timeline.scss b/src/patterns/04-components/timeline/_timeline.scss
index 9c319e47..dae0de7c 100644
--- a/src/patterns/04-components/timeline/_timeline.scss
+++ b/src/patterns/04-components/timeline/_timeline.scss
@@ -34,7 +34,7 @@
font-family: var(--font-secondary);
font-size: var(--font-size-00);
}
-
+
li {
margin: 0;
padding: 0;
@@ -89,11 +89,22 @@
padding: var(--size-sm) var(--size-2) var(--size-4);
position: relative;
+ /* Affordance for links inside of links, which can happen because
+ * they don't have to have an outer link, and can put links in the text,
+ * but sometimes people have done both, which is not allowed by web standards, and causes issues.
+ * This makes sure the clickable bits are at least visible.
+ */
a {
+ text-decoration: underline;
+ }
+ /* Only put the timeline link styling on the outer link. */
+ > a {
display: block;
/* Margin/padding tricks to make links cover the padding of the li */
margin: -1rem -1rem -2rem;
padding: var(--size-2) var(--size-2) var(--size-2);
+ /* Undo the link underline for the "real" link. */
+ text-decoration: none;
&:hover,
&:focus{
--
GitLab