1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
|
// Link Styles
//
// Per ADR 04, Codex Links are implemented as a re-usable Less mixin rather
// than a Vue.js component. Users who wish to apply the Codex Link styles to
// elements on a page should call the mixin inside of the relevant selector in
// their own stylesheets. Variants (underlined links, red links) can be accessed
// by adding the appropriate modifier class (.is-underlined and .is-red-link,
// respectively).
//
// Code that needs to customize these modifier classes or otherwise customize the
// selectors used for these modifiers can use the following sub-mixins:
// - cdx-mixin-link-base(): base link styles
// - cdx-mixin-link-underlined(): underlined link (-base must also be applied)
// - cdx-mixin-link-red(): red link (-base must also be applied)
//
// Example usage:
//
// .my-link-class {
// .cdx-mixin-link-base();
//
// &.custom-underlined-class {
// .cdx-mixin-link-underlined();
// }
//
// &.custom-red-link-class {
// .cdx-mixin-link-red();
// }
// }
//
// Link styles can be used inside of other Vue components, or anywhere that Less
// is available; JS is not required.
.cdx-mixin-link-base() {
color: @color-progressive;
border-radius: @border-radius-base;
text-decoration: @text-decoration-none;
&:visited {
color: @color-visited;
&:hover {
color: @color-visited;
}
}
&:hover {
color: @color-progressive--hover;
text-decoration: @text-decoration-underline;
}
&:active {
color: @color-progressive--active;
text-decoration: @text-decoration-underline;
}
&:focus-visible {
outline: @border-style-base @border-width-thick @outline-color-progressive--focus;
}
@supports not selector( :focus-visible ) {
&:focus {
outline: @border-style-base @border-width-thick @outline-color-progressive--focus;
}
}
// Style external link icon.
// HACK: Make sure this doesn't apply to placeholder icons in TypeaheadSearch (T372420).
.cdx-icon:not( .cdx-thumbnail__placeholder__icon--vue ):last-child {
// Note, `@min-size-icon-x-small` & `@size-icon-small` are an approximation in our current
// 16/14 base font theme environment.
// We're faking it to make it, `@min-size-icon-x-small` is `12px` in both themes,
// `@size-icon-small` is `1em`, achieving the desired size.
min-width: @min-size-icon-x-small;
min-height: @min-size-icon-x-small;
width: @size-icon-small;
height: @size-icon-small;
padding-left: @spacing-25;
vertical-align: middle;
}
}
.cdx-mixin-link-underlined() {
text-decoration: @text-decoration-underline;
}
.cdx-mixin-link-red() {
color: @color-link-red;
&:visited {
color: @color-link-red--visited;
&:hover {
color: @color-link-red--visited;
}
}
&:hover {
color: @color-link-red--hover;
text-decoration: @text-decoration-underline;
}
&:active {
color: @color-link-red--active;
text-decoration: @text-decoration-underline;
}
&:focus {
outline-color: @outline-color-progressive--focus;
}
}
.cdx-mixin-link() {
.cdx-mixin-link-base();
// stylelint-disable-next-line selector-class-pattern
&.is-underlined {
.cdx-mixin-link-underlined();
}
// stylelint-disable-next-line selector-class-pattern
&.is-red-link {
.cdx-mixin-link-red();
}
}
|
