Skip to content

Commit aa7d62f

Browse files
stephaniehobsonstephaniehobson
committed
Remove :hover:visited styles (Fix #1071)
1 parent 8f45bb5 commit aa7d62f

File tree

12 files changed

+58
-83
lines changed

12 files changed

+58
-83
lines changed

‎CHANGELOG.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,11 @@
1212

1313
* Breadcrumb updates do not require any changes, however if you have local customizations double check them.
1414

15+
* Remove `:hover:visited` styles (#1071)
16+
* This will decrease the specificity of Protocol's link and button components, hopefully making local overrides easier, no need to change anything you already have in place.
17+
* Removal of `:link` pseudo classes in some places will mean that `<a>` elements which do not have a `href` value could now have link styles when previously they would not have. But, like, maybe don't do that?
18+
* Removed `:visted` styles for `.mzp-c-button`, if you have `:visited` styles defined for your buttons check 'em
19+
* Removed the text colour change from `:link:focus` styles. Rely on the focus ring for a focus indicator instead.
1520

1621
# 21.1.0
1722

‎assets/sass/protocol/base/elements/_links.scss‎

Lines changed: 7 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -8,8 +8,11 @@
88
color: $link-color;
99
text-decoration: underline;
1010

11+
&:visited {
12+
color: $link-color-visited;
13+
}
14+
1115
&:hover,
12-
&:focus,
1316
&:active {
1417
color: $link-color-hover;
1518
text-decoration: none;
@@ -22,30 +25,13 @@
2225
@supports (--css: variables) {
2326
color: var(--link-color);
2427

25-
&:hover,
26-
&:focus,
27-
&:active {
28-
color: var(--link-color-hover);
28+
&:visited {
29+
color: var(--link-color-visited);
2930
}
30-
}
31-
}
32-
33-
:visited {
34-
color: $link-color-visited;
35-
36-
&:hover,
37-
&:focus,
38-
&:active {
39-
color: $link-color-visited-hover;
40-
}
41-
42-
@supports (--css: variables) {
43-
color: var(--link-color-visited);
4431

4532
&:hover,
46-
&:focus,
4733
&:active {
48-
color: var(--link-color-visited-hover);
34+
color: var(--link-color-hover);
4935
}
5036
}
5137
}

‎assets/sass/protocol/components/_button.scss‎

Lines changed: 3 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -135,8 +135,7 @@ a.mzp-c-button {
135135
// Primary
136136

137137
.mzp-c-button,
138-
a.mzp-c-button:link,
139-
a.mzp-c-button:visited {
138+
a.mzp-c-button {
140139
background-color: $color-black;
141140
border: 2px solid $color-black;
142141
color: $color-white;
@@ -180,8 +179,7 @@ a.mzp-c-button {
180179
// Product Buttons
181180

182181
.mzp-c-button.mzp-t-product,
183-
a.mzp-c-button.mzp-t-product:link,
184-
a.mzp-c-button.mzp-t-product:visited {
182+
a.mzp-c-button.mzp-t-product {
185183
background-color: $color-blue-50;
186184
border-color: transparent;
187185
color: $color-white;
@@ -274,8 +272,7 @@ a.mzp-c-button {
274272
display: block;
275273
margin-top: forms.$info-v-spacing;
276274

277-
a:link,
278-
a:visited {
275+
a:link {
279276
color: inherit;
280277
text-decoration: none;
281278
}

‎assets/sass/protocol/components/_footer.scss‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -25,12 +25,12 @@
2525
a:visited {
2626
font-weight: normal;
2727
text-decoration: underline;
28+
}
2829

29-
&:hover,
30-
&:focus,
31-
&:active {
32-
text-decoration: none;
33-
}
30+
a:hover,
31+
a:focus,
32+
a:active {
33+
text-decoration: none;
3434
}
3535
}
3636

‎assets/sass/protocol/components/_notification-bar.scss‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -36,18 +36,18 @@
3636
font-size: inherit;
3737
font-weight: 700;
3838

39-
&:hover,
40-
&:active,
41-
&:focus {
42-
color: inherit;
43-
text-decoration: none;
44-
}
45-
4639
&.mzp-c-notification-bar-cta {
4740
margin: 0 $spacing-sm;
4841
}
4942
}
5043

44+
a:hover,
45+
a:active,
46+
a:focus {
47+
color: inherit;
48+
text-decoration: none;
49+
}
50+
5151
&.mzp-is-sticky {
5252
left: $spacing-md;
5353
margin: $spacing-md 0;

‎assets/sass/protocol/includes/_themes-sass.scss‎

Lines changed: 0 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -43,8 +43,6 @@ $body-text-color: tokens.$color-black;
4343
$link-color-hover-inverse: tokens.$color-blue-05;
4444
$link-color-hover: tokens.$color-link-hover;
4545
$link-color-inverse: tokens.$color-blue-10;
46-
$link-color-visited-hover-inverse: tokens.$color-violet-05;
47-
$link-color-visited-hover: tokens.$color-link-hover;
4846
$link-color-visited-inverse: tokens.$color-violet-10;
4947
$link-color-visited: tokens.$color-link-visited;
5048
$link-color: tokens.$color-link;
@@ -127,8 +125,6 @@ $theme-colors-firefox: (
127125
link-color-hover-inverse: tokens.$color-blue-05,
128126
link-color-hover: tokens.$color-link-hover,
129127
link-color-inverse: tokens.$color-blue-10,
130-
link-color-visited-hover-inverse: tokens.$color-violet-05,
131-
link-color-visited-hover: tokens.$color-link-hover,
132128
link-color-visited-inverse: tokens.$color-violet-10,
133129
link-color-visited: tokens.$color-link-visited,
134130
link-color: tokens.$color-link,
@@ -149,8 +145,6 @@ $theme-colors-mozilla: (
149145
link-color-hover-inverse: tokens.$color-blue-05,
150146
link-color-hover: tokens.$color-link-hover,
151147
link-color-inverse: tokens.$color-blue-10,
152-
link-color-visited-hover-inverse: tokens.$color-violet-05,
153-
link-color-visited-hover: tokens.$color-link-hover,
154148
link-color-visited-inverse: tokens.$color-violet-10,
155149
link-color-visited: tokens.$color-link-visited,
156150
link-color: tokens.$color-link,

‎assets/sass/protocol/includes/mixins/_utils.scss‎

Lines changed: 0 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -238,12 +238,6 @@
238238
color: themes.$link-color-hover-inverse;
239239
}
240240

241-
a:visited:hover,
242-
a:visited:focus,
243-
a:visited:active {
244-
color: themes.$link-color-visited-hover-inverse;
245-
}
246-
247241
@supports (--css: variables) {
248242
a:link {
249243
color: var(--link-color-inverse);
@@ -258,12 +252,6 @@
258252
a:active {
259253
color: var(--link-color-hover-inverse);
260254
}
261-
262-
a:visited:hover,
263-
a:visited:focus,
264-
a:visited:active {
265-
color: var(--link-color-visited-hover-inverse);
266-
}
267255
}
268256
}
269257

‎assets/sass/protocol/includes/themes/_firefox.scss‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -24,8 +24,6 @@
2424
--link-color-hover-inverse: #{tokens.$color-blue-05};
2525
--link-color-hover: #{tokens.$color-link-hover};
2626
--link-color-inverse: #{tokens.$color-blue-10};
27-
--link-color-visited-hover-inverse: #{tokens.$color-violet-05};
28-
--link-color-visited-hover: #{tokens.$color-link-hover};
2927
--link-color-visited-inverse: #{tokens.$color-violet-10};
3028
--link-color-visited: #{tokens.$color-link-visited};
3129
--link-color: #{tokens.$color-link};

‎assets/sass/protocol/includes/themes/_mozilla.scss‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -29,8 +29,6 @@
2929
--link-color-hover-inverse: #{tokens.$color-blue-05};
3030
--link-color-hover: #{tokens.$color-link-hover};
3131
--link-color-inverse: #{tokens.$color-blue-10};
32-
--link-color-visited-hover-inverse: #{tokens.$color-violet-05};
33-
--link-color-visited-hover: #{tokens.$color-link-hover};
3432
--link-color-visited-inverse: #{tokens.$color-violet-10};
3533
--link-color-visited: #{tokens.$color-link-visited};
3634
--link-color: #{tokens.$color-link};

‎components/button/button.html‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,33 @@
99
# iconStart - markup
1010
# iconEnd - markup
1111
#}
12+
13+
<p><a href="https://www.mozilla.org">Visited</a></p>
14+
<p><a href="https://www.example.com/test">Unvisited</a></p>
15+
<p><button>button</button></p>
16+
17+
<p><a href="https://www.mozilla.org" class="mzp-c-button">Visited</a></p>
18+
<p><a href="https://www.example.com/test" class="mzp-c-button">Unvisited</a></p>
19+
<p><button class="mzp-c-button">button</button></p>
20+
21+
<p><a href="https://www.mozilla.org" class="mzp-c-button mzp-t-product">Visited</a></p>
22+
<p><a href="https://www.example.com/test" class="mzp-c-button mzp-t-product">Unvisited</a></p>
23+
<p><button class="mzp-c-button mzp-t-product">button</button></p>
24+
25+
<div style="background-color: #000;">
26+
27+
<p><a href="https://www.mozilla.org" class="mzp-c-button mzp-t-dark">Visited</a></p>
28+
<p><a href="https://www.example.com/test" class="mzp-c-button mzp-t-dark">Unvisited</a></p>
29+
<p><button class="mzp-c-button mzp-t-dark">button</button></p>
30+
31+
<p><a href="https://www.mozilla.org" class="mzp-c-button mzp-t-product mzp-t-secondary mzp-t-dark">Visited</a></p>
32+
<p><a href="https://www.example.com/test" class="mzp-c-button mzp-t-product mzp-t-secondary mzp-t-dark">Unvisited</a></p>
33+
<p><button class="mzp-c-button mzp-t-product mzp-t-secondary mzp-t-dark">button</button></p>
34+
35+
36+
</div>
37+
38+
1239
{%- if link -%}
1340
<a class="mzp-c-button{% if class %} {{ class }}{% endif %}" href="{{ link }}">
1441
{%- if iconStart %}

0 commit comments

Comments
 (0)