Skip to content

Commit 9e81e70

Browse files
stephaniehobsonstephaniehobson
committed
Remove :hover:visited styles (Fix #1071)
reduce specificity in components
1 parent d18c956 commit 9e81e70

File tree

16 files changed

+120
-163
lines changed

16 files changed

+120
-163
lines changed

‎CHANGELOG.md‎

Lines changed: 14 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -11,17 +11,20 @@
1111

1212
## Migration Tips
1313

14-
* Breadcrumb updates do not require any changes, however if you have local customizations double check them.
15-
16-
* Icons used internally with Protocol components have been updated but any icons used in consumer projects will have to consider the following:
17-
18-
* New and updated icons have intrinsic width of 16x16 instead of 24x24. If you were relying on SVG width and height attributes for sizing, you may need to update by CSS sizing.
19-
20-
* Updated icons are still square but do not have padding around the icon. This is particularly noticeable with menu and arrows. If you were relying on the icon for spacing, you may need to update to re-add that spacing through CSS.
21-
22-
* Icons formerly known as "arrow" are now known as "caret" and there are new icon designs for "arrow" name. You will need to update naming to keep the "caret" design.
23-
24-
* Find and replace `$url-image-arrow-down-` with `$url-image-caret-down-`
14+
* Breadcrumb updates do not require any changes unless you have local customizations.
15+
16+
* Icon updates
17+
* Icons used internally with Protocol components have been updated but any icons used in consumer projects will have to consider the following:
18+
* New and updated icons have intrinsic width of 16x16 instead of 24x24. If you were relying on SVG width and height attributes for sizing, you may need to update by CSS sizing.
19+
* Updated icons are still square but do not have padding around the icon. This is particularly noticeable with menu and arrows. If you were relying on the icon for spacing, you may need to update to re-add that spacing through CSS.
20+
* Icons formerly known as "arrow" are now known as "caret" and there are new icon designs for "arrow" name. You will need to update naming to keep the "caret" design.
21+
* Find and replace `$url-image-arrow-down-` with `$url-image-caret-down-`
22+
23+
* Remove `:hover:visited` styles & decrease base link specificity (#1071)
24+
* 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.
25+
* 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?
26+
* Removed `:visted` styles for `.mzp-c-button` they should match unvisited styles, if you have `:visited` styles defined check they are still legible without the expected inherited styles.
27+
* Removed the text colour change from `:link:focus` styles. Rely on the focus ring for a focus indicator instead.
2528

2629
# 21.1.0
2730

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

Lines changed: 14 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -4,12 +4,21 @@
44

55
@use '../../includes/lib' as *;
66

7-
:link {
7+
// Rely on source order for the stateful style overrides
8+
// 1. Visited
9+
// 2. Hover
10+
// 3. Active
11+
// 4. Focus
12+
13+
a {
814
color: $link-color;
915
text-decoration: underline;
1016

17+
&:visited {
18+
color: $link-color-visited;
19+
}
20+
1121
&:hover,
12-
&:focus,
1322
&:active {
1423
color: $link-color-hover;
1524
text-decoration: none;
@@ -22,30 +31,13 @@
2231
@supports (--css: variables) {
2332
color: var(--link-color);
2433

25-
&:hover,
26-
&:focus,
27-
&:active {
28-
color: var(--link-color-hover);
34+
&:visited {
35+
color: var(--link-color-visited);
2936
}
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);
4437

4538
&:hover,
46-
&:focus,
4739
&:active {
48-
color: var(--link-color-visited-hover);
40+
color: var(--link-color-hover);
4941
}
5042
}
5143
}

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

Lines changed: 1 addition & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -39,10 +39,7 @@
3939
}
4040

4141
a {
42-
&:link,
43-
&:visited {
44-
text-decoration: underline;
45-
}
42+
text-decoration: underline;
4643

4744
&:hover,
4845
&:active,

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

Lines changed: 10 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -72,8 +72,8 @@
7272
// * -------------------------------------------------------------------------- */
7373
// Button shape and size
7474

75-
.mzp-c-button, /* stylelint-disable-line no-duplicate-selectors */
76-
a.mzp-c-button {
75+
.mzp-c-button,
76+
a.mzp-c-button { /* stylelint-disable-line no-duplicate-selectors */
7777
@include border-box;
7878
@include font-size(16px);
7979
@include transition(background-color 100ms, box-shadow 100ms, color 100ms);
@@ -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,16 +272,15 @@ a.mzp-c-button {
274272
display: block;
275273
margin-top: forms.$info-v-spacing;
276274

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

283-
a:hover,
284-
a:active,
285-
a:focus {
286-
text-decoration: underline;
279+
&:hover,
280+
&:active,
281+
&:focus {
282+
text-decoration: underline;
283+
}
287284
}
288285
}
289286

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

Lines changed: 10 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -93,15 +93,11 @@
9393
.mzp-c-card-block-link {
9494
border-radius: $border-radius-xs;
9595
display: block;
96+
color: $color-black;
97+
text-decoration: none;
9698

97-
&:link,
98-
&:visited {
99-
color: $color-black;
100-
text-decoration: none;
101-
102-
.mzp-c-card-cta-text {
103-
color: $color-link;
104-
}
99+
.mzp-c-card-cta-text {
100+
color: $color-link;
105101
}
106102

107103
&:hover,
@@ -147,19 +143,16 @@
147143
}
148144

149145
.mzp-c-card-block-link {
146+
color: $body-text-color-inverse;
147+
150148
&:hover,
151149
&:active,
152150
&:focus {
153151
box-shadow: 0 0 0 4px $color-marketing-gray-80;
154152
}
155153

156-
&:link,
157-
&:visited {
154+
.mzp-c-card-cta-text {
158155
color: $body-text-color-inverse;
159-
160-
.mzp-c-card-cta-text {
161-
color: $body-text-color-inverse;
162-
}
163156
}
164157
}
165158

@@ -173,13 +166,10 @@
173166
}
174167

175168
.mzp-c-card-block-link {
176-
&:link,
177-
&:visited {
178-
color: var(--body-text-color-inverse);
169+
color: var(--body-text-color-inverse);
179170

180-
.mzp-c-card-cta-text {
181-
color: var(--body-text-color-inverse);
182-
}
171+
.mzp-c-card-cta-text {
172+
color: var(--body-text-color-inverse);
183173
}
184174
}
185175
}

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

Lines changed: 4 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -21,8 +21,7 @@
2121
margin: 0;
2222
width: 100%;
2323

24-
a:link,
25-
a:visited {
24+
a {
2625
font-weight: normal;
2726
text-decoration: underline;
2827

@@ -89,8 +88,7 @@
8988
margin-bottom: 0;
9089
}
9190

92-
a:link,
93-
a:visited {
91+
a {
9492
text-decoration: none;
9593

9694
&:hover,
@@ -190,8 +188,7 @@
190188
}
191189
}
192190

193-
a:link,
194-
a:visited {
191+
a {
195192
font-weight: bold;
196193
}
197194

@@ -234,8 +231,7 @@
234231
position: relative;
235232
color: $color-light-gray-50;
236233

237-
a:link,
238-
a:visited {
234+
a {
239235
color: $color-light-gray-50;
240236

241237
&:hover,

‎assets/sass/protocol/components/_menu-item.scss‎

Lines changed: 14 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -12,16 +12,8 @@ $icon-size: 24px;
1212

1313
.mzp-c-menu-item-link {
1414
display: block;
15-
16-
&:link,
17-
&:visited {
18-
color: $color-black;
19-
text-decoration: none;
20-
21-
.mzp-c-menu-item-title {
22-
border-bottom: 2px solid transparent;
23-
}
24-
}
15+
color: $color-black;
16+
text-decoration: none;
2517

2618
&:hover,
2719
&:active,
@@ -32,6 +24,10 @@ $icon-size: 24px;
3224
color: $color-black;
3325
}
3426
}
27+
28+
.mzp-c-menu-item-title {
29+
border-bottom: 2px solid transparent;
30+
}
3531
}
3632

3733
.mzp-c-menu-item-head {
@@ -80,19 +76,19 @@ $icon-size: 24px;
8076
word-wrap: break-word;
8177
}
8278

83-
a:link,
84-
a:visited {
79+
a {
8580
color: $color-black;
8681
text-decoration: none;
87-
}
8882

89-
a:hover,
90-
a:active,
91-
a:focus {
92-
color: $color-black;
93-
text-decoration: underline;
83+
&:hover,
84+
&:active,
85+
&:focus {
86+
color: $color-black;
87+
text-decoration: underline;
88+
}
9489
}
9590

91+
9692
@media #{$mq-sm} {
9793
li {
9894
@include bidi(((float, left, right),));

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -65,7 +65,7 @@
6565
text-decoration: underline;
6666
}
6767

68-
&:link:active {
68+
&:active {
6969
background: none;
7070
}
7171
}

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -29,8 +29,7 @@
2929
margin: 0 auto;
3030
}
3131

32-
a:link,
33-
a:visited {
32+
a {
3433
color: inherit;
3534
display: inline-block;
3635
font-size: inherit;
@@ -48,6 +47,7 @@
4847
}
4948
}
5049

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,

0 commit comments

Comments
 (0)