feat(core): update external link styles

This commit is contained in:
alistair3149 2022-11-08 13:51:39 -05:00
parent ee60b485f0
commit 8af7357f06
No known key found for this signature in database
4 changed files with 27 additions and 31 deletions

View file

@ -143,21 +143,19 @@ figcaption,
// External links
.mw-parser-output {
a.external {
&: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;
}
a.external:after {
display: inline-block;
width: 0.75em;
height: 0.75em;
margin-left: 0.25em;
background-color: currentcolor;
content: '';
/* @embed */
-webkit-mask: url( images/linkExternal.svg ) no-repeat 50% 50%;
/* @embed */
mask: url( images/linkExternal.svg ) no-repeat 50% 50%;
-webkit-mask-size: contain;
mask-size: contain;
}
.plainlinks a.external:after {
@ -165,6 +163,14 @@ figcaption,
}
}
.mw-content-rtl {
.mw-parser-output {
a.external:after {
transform: scaleX( -1 );
}
}
}
@media ( max-width: @width-breakpoint-tablet ) {
#mw-content-text {
figcaption,

View file

@ -1,8 +0,0 @@
<?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>

Before

Width:  |  Height:  |  Size: 323 B

View file

@ -1,8 +0,0 @@
<?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>

Before

Width:  |  Height:  |  Size: 313 B

View file

@ -0,0 +1,6 @@
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" aria-hidden="true" viewBox="0 0 20 20">
<g fill="currentColor">
<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"/>
</g>
</svg>

After

Width:  |  Height:  |  Size: 295 B