feat(core): use standard external link icon fo external links

Have to polyfill because it is still a long way to go until being standardized in core
Related: T261391
This commit is contained in:
alistair3149 2022-05-17 22:08:02 -04:00
parent 9d711d4ee2
commit 95a4609c17
No known key found for this signature in database
GPG key ID: 94D081060FD3DD9C
5 changed files with 30 additions and 16 deletions

View file

@ -140,10 +140,20 @@ figcaption,
// External links
.mw-parser-output {
a.external {
padding-right: 13px;
background-image: url( images/external-link-ltr-icon.svg );
background-position: center right;
background-repeat: no-repeat;
&:after {
display: inline-block;
width: 0.75em;
height: 0.75em;
margin-left: 0.25em;
background-color: currentcolor;
content: '';
/* @embed */
-webkit-mask: url( images/linkExternal-ltr.svg ) no-repeat 50% 50%;
/* @embed */
mask: url( images/linkExternal-ltr.svg ) no-repeat 50% 50%;
-webkit-mask-size: contain;
mask-size: contain;
}
}
}

View file

@ -1,6 +0,0 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12">
<path fill="#fff" stroke="#36c" d="M1.5 4.518h5.982V10.5H1.5z"/>
<path fill="#36c" d="M5.765 1H11v5.39L9.427 7.937l-1.31-1.31L5.393 9.35l-2.69-2.688 2.81-2.808L4.2 2.544z"/>
<path fill="#fff" d="m9.995 2.004.022 4.885L8.2 5.07 5.32 7.95 4.09 6.723l2.882-2.88-1.85-1.852z"/>
</svg>

Before

Width:  |  Height:  |  Size: 393 B

View file

@ -1,6 +0,0 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12">
<path fill="#fff" stroke="#36c" d="M10.5 4.518H4.518V10.5H10.5z"/>
<path fill="#36c" d="M6.234 1H1v5.39l1.57 1.546 1.31-1.31L6.607 9.35l2.69-2.688-2.81-2.808L7.8 2.544z"/>
<path fill="#fff" d="M2.004 2.004 1.982 6.89 3.8 5.07l2.88 2.88 1.228-1.227-2.88-2.88 1.85-1.852z"/>
</svg>

Before

Width:  |  Height:  |  Size: 392 B

View file

@ -0,0 +1,8 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20">
<title>
external link
</title>
<path d="M17 17H3V3h5V1H3a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-5h-2z"/>
<path d="m11 1 3.29 3.29-5.73 5.73 1.42 1.42 5.73-5.73L19 9V1z"/>
</svg>

After

Width:  |  Height:  |  Size: 323 B

View file

@ -0,0 +1,8 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20">
<title>
external link
</title>
<path d="M3 12H1v5c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V3c0-1.1-.9-2-2-2h-5v2h5v14H3z"/>
<path d="m1 9 3.3-3.3 5.7 5.7 1.4-1.4-5.7-5.7L9 1H1z"/>
</svg>

After

Width:  |  Height:  |  Size: 313 B