From cffd4941077d4fed0e83ed83bbc58580edbc0679 Mon Sep 17 00:00:00 2001 From: Volker E Date: Tue, 19 Jul 2022 12:25:18 -0700 Subject: [PATCH] styles: Unify on standard external link icon Unify on using standard OOUI 'linkExternal' icon, which is directly replacing Vector's image without relying on ResourceLoader. Please note that the icon features standard link color `#36c` which is implemented in a later step. Due to the small icon size and the fact that current external link icon is also not using the legacy color, this seems acceptable to move forward with. Also using relative `em` instead of `px` to support user text zoom capabilities and introducing a `@size-indicator` variable to be replaced by WikimediaUI Base variables later. Alternative to I49de3bfff45. Replacing images and image names to make quicker lookup with icon collection possible future-facing. Note that CSSJanus is flipping the `ltr` string in the background image rule to `rtl`, therefore making sure that both icons are available. Bug: T261391 Change-Id: Ibd15517f3adf06010807901e8fb3299e2046a473 --- resources/common/images/external-link-ltr-icon.svg | 6 ------ resources/common/images/external-link-rtl-icon.svg | 6 ------ .../common/images/link-external-ltr-progressive.svg | 8 ++++++++ .../common/images/link-external-rtl-progressive.svg | 8 ++++++++ resources/common/typography.less | 10 +++++++--- resources/common/variables.less | 1 + 6 files changed, 24 insertions(+), 15 deletions(-) delete mode 100644 resources/common/images/external-link-ltr-icon.svg delete mode 100644 resources/common/images/external-link-rtl-icon.svg create mode 100644 resources/common/images/link-external-ltr-progressive.svg create mode 100644 resources/common/images/link-external-rtl-progressive.svg diff --git a/resources/common/images/external-link-ltr-icon.svg b/resources/common/images/external-link-ltr-icon.svg deleted file mode 100644 index 526f9993..00000000 --- a/resources/common/images/external-link-ltr-icon.svg +++ /dev/null @@ -1,6 +0,0 @@ - - - - - - diff --git a/resources/common/images/external-link-rtl-icon.svg b/resources/common/images/external-link-rtl-icon.svg deleted file mode 100644 index 54fb18e8..00000000 --- a/resources/common/images/external-link-rtl-icon.svg +++ /dev/null @@ -1,6 +0,0 @@ - - - - - - diff --git a/resources/common/images/link-external-ltr-progressive.svg b/resources/common/images/link-external-ltr-progressive.svg new file mode 100644 index 00000000..17d10dd7 --- /dev/null +++ b/resources/common/images/link-external-ltr-progressive.svg @@ -0,0 +1,8 @@ + + + + external link + + + + diff --git a/resources/common/images/link-external-rtl-progressive.svg b/resources/common/images/link-external-rtl-progressive.svg new file mode 100644 index 00000000..2ba11397 --- /dev/null +++ b/resources/common/images/link-external-rtl-progressive.svg @@ -0,0 +1,8 @@ + + + + external link + + + + diff --git a/resources/common/typography.less b/resources/common/typography.less index 73bf3002..aaef3f9e 100644 --- a/resources/common/typography.less +++ b/resources/common/typography.less @@ -140,10 +140,14 @@ pre, } // External links -// Use of `a` element selector due to its widespread usage and for limiting generic class scope. +// Use of `a` element selector for limiting generic class scope due to `.external` widespread usage. .mw-parser-output a.external { - background-image: url( images/external-link-ltr-icon.svg ); + // Use copy of Codex/OOUI WikimediaUI theme's 'linkExternal' icon in progressive color. + // Note that CSSJanus is flipping the `ltr` in the URL to `rtl`. + // Therefore make sure that both icons are available and up-to-date. + background-image: url( images/link-external-ltr-progressive.svg ); background-position: center right; background-repeat: no-repeat; - padding-right: 13px; + background-size: @size-indicator; + padding-right: 1em; } diff --git a/resources/common/variables.less b/resources/common/variables.less index f1fb566b..f5f544d0 100644 --- a/resources/common/variables.less +++ b/resources/common/variables.less @@ -63,6 +63,7 @@ @size-sidebar-button: unit( 44 / @font-size-browser, em ); // Equals `2.75em`. @size-icon: unit( 20 / @font-size-browser, em ); +@size-indicator: unit( 12 / @font-size-browser, em ); @background-position-nav-personal-icon: left unit( 4 / @font-size-browser / @font-size-nav-personal, em ); @background-size-nav-personal-icon: unit( 14 / @font-size-browser / @font-size-nav-personal, em );