From 301208b935ab9bcb0c52e94a1e4242427a6b3c5f Mon Sep 17 00:00:00 2001 From: Dan Cormier Date: Wed, 6 Oct 2021 15:22:27 -0400 Subject: [PATCH 1/5] Add anchor underline in high contrast See also: - https://github.com/StackEng/StackOverflow/pull/9535 - https://github.com/StackEng/StackOverflow/pull/9526 Addresses: https://meta.stackoverflow.com/a/411839/652353 --- lib/css/base/_stacks-reset-normalize.less | 3 +++ lib/css/components/_stacks-buttons.less | 8 +++++++- lib/css/components/_stacks-link-previews.less | 4 ++++ lib/css/components/_stacks-links.less | 6 ++++++ lib/css/components/_stacks-navigation.less | 8 ++++++++ lib/css/components/_stacks-pagination.less | 2 ++ lib/css/components/_stacks-tags.less | 2 ++ 7 files changed, 32 insertions(+), 1 deletion(-) diff --git a/lib/css/base/_stacks-reset-normalize.less b/lib/css/base/_stacks-reset-normalize.less index d81f5cb2dc..ca1d4c0a70 100644 --- a/lib/css/base/_stacks-reset-normalize.less +++ b/lib/css/base/_stacks-reset-normalize.less @@ -99,11 +99,14 @@ pre { /** * 1. Remove the gray background on active links in IE 10. * 2. Remove gaps in links underline in iOS 8+ and Safari 8+. + * 3. Adds underline to links in high contrast */ a { background-color: transparent; /* 1 */ -webkit-text-decoration-skip: objects; /* 2 */ + + .highcontrast-mode({ text-decoration: underline; }); } /** diff --git a/lib/css/components/_stacks-buttons.less b/lib/css/components/_stacks-buttons.less index e54d492c65..d96a982211 100644 --- a/lib/css/components/_stacks-buttons.less +++ b/lib/css/components/_stacks-buttons.less @@ -34,7 +34,13 @@ cursor: pointer; user-select: none; - .highcontrast-mode({ border-color: currentColor; }); + .highcontrast-mode({ + border-color: currentColor; + + &:not(.s-btn__link):not(.s-btn__unset) { + text-decoration: none; + } + }); button &, button[type="submit"] &, diff --git a/lib/css/components/_stacks-link-previews.less b/lib/css/components/_stacks-link-previews.less index c6ceb8552e..d127e13300 100644 --- a/lib/css/components/_stacks-link-previews.less +++ b/lib/css/components/_stacks-link-previews.less @@ -44,6 +44,8 @@ a.s-link-preview--title { &.s-link__visited:visited { color: var(--theme-link-color); text-decoration: none; + + .highcontrast-mode({ text-decoration: underline; }); } &:hover, @@ -52,6 +54,8 @@ a.s-link-preview--title { &.s-link__visited:active { color: var(--theme-link-color-hover); text-decoration: none; + + .highcontrast-mode({ text-decoration: underline; }); } } diff --git a/lib/css/components/_stacks-links.less b/lib/css/components/_stacks-links.less index 36c705390f..00bd8cc4c0 100644 --- a/lib/css/components/_stacks-links.less +++ b/lib/css/components/_stacks-links.less @@ -21,9 +21,13 @@ a, cursor: pointer; user-select: auto; + .highcontrast-mode({ text-decoration: underline; }); + &.s-link__visited:visited { color: var(--theme-link-color-visited); text-decoration: none; + + .highcontrast-mode({ text-decoration: underline; }); } &:hover, @@ -32,6 +36,8 @@ a, &.s-link__visited:active { color: var(--theme-link-color-hover); text-decoration: none; + + .highcontrast-mode({ text-decoration: underline; }); } &.s-link__grayscale { diff --git a/lib/css/components/_stacks-navigation.less b/lib/css/components/_stacks-navigation.less index af14547479..ccf999f3e3 100644 --- a/lib/css/components/_stacks-navigation.less +++ b/lib/css/components/_stacks-navigation.less @@ -56,6 +56,14 @@ &.is-selected { background: var(--theme-primary-color); color: var(--white); + + .highcontrast-mode({ text-decoration: none; }); + + &:hover, + &:active { + background: var(--theme-primary-600); + color: var(--white); + } } &.s-navigation--item__dropdown { diff --git a/lib/css/components/_stacks-pagination.less b/lib/css/components/_stacks-pagination.less index 1732e843c2..28bf349527 100644 --- a/lib/css/components/_stacks-pagination.less +++ b/lib/css/components/_stacks-pagination.less @@ -30,6 +30,8 @@ line-height: @lh-xl; color: var(--fc-medium); + .highcontrast-mode({ text-decoration: none; }); + &:hover { border-color: var(--bc-darker); background-color: var(--black-100); diff --git a/lib/css/components/_stacks-tags.less b/lib/css/components/_stacks-tags.less index e9031f9d44..c5c5d99ab0 100644 --- a/lib/css/components/_stacks-tags.less +++ b/lib/css/components/_stacks-tags.less @@ -84,6 +84,8 @@ .s-tag-styles(@tags-border, @tags-background, @tags-color); + .highcontrast-mode({ text-decoration: none; }); + &.is-selected { .s-tag-selected-styles(@tags-selected-border, @tags-selected-background, @tags-selected-color); } From bff2c2efe748d3bb796a420bbf0f5dcfe5ba6c25 Mon Sep 17 00:00:00 2001 From: Dan Cormier Date: Wed, 6 Oct 2021 18:26:08 -0400 Subject: [PATCH 2/5] Move anchor underline to _stacks-links.less Addresses: https://github.com/StackExchange/Stacks/pull/769#discussion_r723684016 --- lib/css/base/_stacks-reset-normalize.less | 2 -- 1 file changed, 2 deletions(-) diff --git a/lib/css/base/_stacks-reset-normalize.less b/lib/css/base/_stacks-reset-normalize.less index ca1d4c0a70..b050bcf4b0 100644 --- a/lib/css/base/_stacks-reset-normalize.less +++ b/lib/css/base/_stacks-reset-normalize.less @@ -105,8 +105,6 @@ pre { a { background-color: transparent; /* 1 */ -webkit-text-decoration-skip: objects; /* 2 */ - - .highcontrast-mode({ text-decoration: underline; }); } /** From b05605ea4316192a232541699f59a194aae0c5fb Mon Sep 17 00:00:00 2001 From: Dan Cormier Date: Tue, 19 Oct 2021 15:20:09 -0400 Subject: [PATCH 3/5] Add code comment mentioning hc underline Co-authored-by: Aaron Shekey --- lib/css/base/_stacks-reset-normalize.less | 1 - 1 file changed, 1 deletion(-) diff --git a/lib/css/base/_stacks-reset-normalize.less b/lib/css/base/_stacks-reset-normalize.less index b050bcf4b0..d81f5cb2dc 100644 --- a/lib/css/base/_stacks-reset-normalize.less +++ b/lib/css/base/_stacks-reset-normalize.less @@ -99,7 +99,6 @@ pre { /** * 1. Remove the gray background on active links in IE 10. * 2. Remove gaps in links underline in iOS 8+ and Safari 8+. - * 3. Adds underline to links in high contrast */ a { From 54bfe58c455099f2faaf932d17669adc0c34eccb Mon Sep 17 00:00:00 2001 From: Aaron Shekey Date: Mon, 8 Nov 2021 08:46:06 -0600 Subject: [PATCH 4/5] Try simplifying the link definition --- lib/css/components/_stacks-links.less | 10 +++------- 1 file changed, 3 insertions(+), 7 deletions(-) diff --git a/lib/css/components/_stacks-links.less b/lib/css/components/_stacks-links.less index 00bd8cc4c0..739decaf20 100644 --- a/lib/css/components/_stacks-links.less +++ b/lib/css/components/_stacks-links.less @@ -21,13 +21,12 @@ a, cursor: pointer; user-select: auto; - .highcontrast-mode({ text-decoration: underline; }); + .highcontrast-mode({ + text-decoration: underline; + }); &.s-link__visited:visited { color: var(--theme-link-color-visited); - text-decoration: none; - - .highcontrast-mode({ text-decoration: underline; }); } &:hover, @@ -35,9 +34,6 @@ a, &:active, &.s-link__visited:active { color: var(--theme-link-color-hover); - text-decoration: none; - - .highcontrast-mode({ text-decoration: underline; }); } &.s-link__grayscale { From c6222490229997ca60bcc8eafcc9047f442ac2ec Mon Sep 17 00:00:00 2001 From: Aaron Shekey Date: Mon, 8 Nov 2021 08:53:56 -0600 Subject: [PATCH 5/5] Address card links --- lib/css/components/_stacks-cards.less | 18 +++++++----------- 1 file changed, 7 insertions(+), 11 deletions(-) diff --git a/lib/css/components/_stacks-cards.less b/lib/css/components/_stacks-cards.less index bff619edb3..63f95fa893 100644 --- a/lib/css/components/_stacks-cards.less +++ b/lib/css/components/_stacks-cards.less @@ -24,17 +24,6 @@ } } -// ============================================================================ -// $ LINKED CARDS -// ---------------------------------------------------------------------------- -a.s-card:not(.s-card__muted) { - &:hover, - &:focus, - &:active { - border-color: var(--bc-darker); - } -} - // ============================================================================ // $ MODIFIERS // ---------------------------------------------------------------------------- @@ -46,3 +35,10 @@ a.s-card:not(.s-card__muted) { opacity: 0.65; } } + +// ============================================================================ +// $ LINKED CARDS +// ---------------------------------------------------------------------------- +a.s-card { + text-decoration: none !important; +}