blob: a230e709d490730e8a1348de4bc19d3aebe0381c (
plain)
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
|
@use "../../abstracts/functions" as fun;
@use "../../abstracts/variables" as var;
%link {
background: linear-gradient(to top, var(--color-primary) 50%, transparent 50%)
0 0 / 100% 201% no-repeat;
color: var(--color-primary);
text-decoration-thickness: 0.15em;
text-underline-offset: 20%;
transition:
all 0.3s linear 0s,
text-decoration 0.18s ease-in-out 0s;
&:hover {
color: var(--color-primary-light);
text-decoration-thickness: 0.25em;
}
&:focus {
background-position: 0 100%;
color: var(--color-fg-inverted);
}
&:active {
background-position: 0 0;
color: var(--color-primary-dark);
text-decoration-thickness: 18%;
}
}
%link-with-icon {
&::after {
display: inline-block;
content: var(--is-lang-hidden, "\0000a0" var(--lang-icon, ""))
var(--is-icon-hidden, "\0000a0" var(--link-icon, ""));
font-size: var(--font-size-sm);
}
}
%link-with-lang {
--lang-icon: "[" attr(hreflang) "]";
}
%light-download-link {
// Prettier is removing spacing between attributes.
// prettier-ignore
--download-icon: url('#{fun.encode-svg('<svg width="13" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><path fill="#{var.$light-theme_blue}" d="m49 80.048-28.445-30.77 19.32 4.095V5.06h18.252v48.313l21.318-4.095z" /><path fill="#{var.$light-theme_blue}" d="M0 67.57v27.37h100V67.57H87.973v15.344H12.027V67.569z" /></svg>')}');
&:focus:not(:active) {
// Prettier is removing spacing between attributes.
// prettier-ignore
--download-icon: url('#{fun.encode-svg('<svg width="13" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><path fill="#{var.$light-theme_white}" d="m49 80.048-28.445-30.77 19.32 4.095V5.06h18.252v48.313l21.318-4.095z" /><path fill="#{var.$light-theme_white}" d="M0 67.57v27.37h100V67.57H87.973v15.344H12.027V67.569z" /></svg>')}');
}
}
%dark-download-link {
// Prettier is removing spacing between attributes.
// prettier-ignore
--download-icon: url('#{fun.encode-svg('<svg width="13" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><path fill="#{var.$dark-theme_blue}" d="m49 80.048-28.445-30.77 19.32 4.095V5.06h18.252v48.313l21.318-4.095z" /><path fill="#{var.$dark-theme_blue}" d="M0 67.57v27.37h100V67.57H87.973v15.344H12.027V67.569z" /></svg>')}');
&:focus:not(:active) {
// Prettier is removing spacing between attributes.
// prettier-ignore
--download-icon: url('#{fun.encode-svg('<svg width="13" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><path fill="#{var.$dark-theme_black}" d="m49 80.048-28.445-30.77 19.32 4.095V5.06h18.252v48.313l21.318-4.095z" /><path fill="#{var.$dark-theme_black}" d="M0 67.57v27.37h100V67.57H87.973v15.344H12.027V67.569z" /></svg>')}');
}
}
%light-external-link {
// Prettier is removing spacing between attributes.
// prettier-ignore
--external-icon: url('#{fun.encode-svg('<svg width="13" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><path fill="#{var.$light-theme_blue}" d="M100 0 59.543 5.887l20.8 6.523-51.134 51.134 7.249 7.248L87.59 19.66l6.522 20.798z"/><path fill="#{var.$light-theme_blue}" d="M4 10a4 4 0 0 0-4 4v82a4 4 0 0 0 4 4h82a4 4 0 0 0 4-4V62.314h-8V92H8V18h29.686v-8z"/></svg>')}');
&:focus:not(:active) {
// Prettier is removing spacing between attributes.
// prettier-ignore
--external-icon: url('#{fun.encode-svg('<svg width="13" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><path fill="#{var.$light-theme_white}" d="M100 0 59.543 5.887l20.8 6.523-51.134 51.134 7.249 7.248L87.59 19.66l6.522 20.798z"/><path fill="#{var.$light-theme_white}" d="M4 10a4 4 0 0 0-4 4v82a4 4 0 0 0 4 4h82a4 4 0 0 0 4-4V62.314h-8V92H8V18h29.686v-8z"/></svg>')}');
}
}
%dark-external-link {
// Prettier is removing spacing between attributes.
// prettier-ignore
--external-icon: url('#{fun.encode-svg('<svg width="13" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><path fill="#{var.$dark-theme_blue}" d="M100 0 59.543 5.887l20.8 6.523-51.134 51.134 7.249 7.248L87.59 19.66l6.522 20.798z"/><path fill="#{var.$dark-theme_blue}" d="M4 10a4 4 0 0 0-4 4v82a4 4 0 0 0 4 4h82a4 4 0 0 0 4-4V62.314h-8V92H8V18h29.686v-8z"/></svg>')}');
&:focus:not(:active) {
// Prettier is removing spacing between attributes.
// prettier-ignore
--external-icon: url('#{fun.encode-svg('<svg width="13" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><path fill="#{var.$dark-theme_black}" d="M100 0 59.543 5.887l20.8 6.523-51.134 51.134 7.249 7.248L87.59 19.66l6.522 20.798z"/><path fill="#{var.$dark-theme_black}" d="M4 10a4 4 0 0 0-4 4v82a4 4 0 0 0 4 4h82a4 4 0 0 0 4-4V62.314h-8V92H8V18h29.686v-8z"/></svg>')}');
}
}
%download-link {
--link-icon: var(--download-icon);
}
%external-link {
--link-icon: var(--external-icon);
}
%external-download-link {
--link-icon: var(--download-icon) "\0000a0" var(--external-icon);
}
|
