From c2d20faf0706bd422bc2c006c4b4028ce6109c56 Mon Sep 17 00:00:00 2001 From: Angela Tran Date: Mon, 17 Jul 2023 22:15:00 +0000 Subject: [PATCH 1/4] feat: add external link CSS based on USWDS example, apply to footer link uses CSS keyword 'currentColor' to achieve hover and visited styles --- benefits/core/templates/core/base.html | 2 +- benefits/static/css/styles.css | 19 +++++++++++++++++++ benefits/static/img/external-link.svg | 11 +++++++++++ 3 files changed, 31 insertions(+), 1 deletion(-) create mode 100644 benefits/static/img/external-link.svg diff --git a/benefits/core/templates/core/base.html b/benefits/core/templates/core/base.html index 69e401459..cff20eb86 100644 --- a/benefits/core/templates/core/base.html +++ b/benefits/core/templates/core/base.html @@ -108,7 +108,7 @@

{{ page.headline }}

{% translate "core.buttons.help" %}
  • - {% translate "core.buttons.privacy" %} + {% translate "core.buttons.privacy" %}
    • diff --git a/benefits/static/css/styles.css b/benefits/static/css/styles.css index e2c2a6dd5..601fcc023 100644 --- a/benefits/static/css/styles.css +++ b/benefits/static/css/styles.css @@ -142,6 +142,25 @@ a:visited:not(.btn) { color: var(--selected-color); } +.external-link::after { + content: " "; + background-color: currentColor; + + mask-image: url("/static/img/external-link.svg"), + linear-gradient(transparent, transparent); + mask-position: center center; + -webkit-mask-image: url("/static/img/external-link.svg"), + linear-gradient(transparent, transparent); + -webkit-mask-position: center center; + + display: inline-block; + position: relative; + width: 24px; + height: 24px; + margin-left: 2px; + vertical-align: text-bottom; +} + /* Headlines */ /* All headlines */ /* All headlines share font-weight, letter-spacing, line-height and margin */ diff --git a/benefits/static/img/external-link.svg b/benefits/static/img/external-link.svg new file mode 100644 index 000000000..e409ee892 --- /dev/null +++ b/benefits/static/img/external-link.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + From d98ce3395fba467801cef72483c70c4518be99a0 Mon Sep 17 00:00:00 2001 From: Angela Tran Date: Mon, 17 Jul 2023 22:20:05 +0000 Subject: [PATCH 2/4] refactor: adjust CSS selector to apply to any external link --- benefits/core/templates/core/base.html | 2 +- benefits/static/css/styles.css | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/benefits/core/templates/core/base.html b/benefits/core/templates/core/base.html index cff20eb86..69e401459 100644 --- a/benefits/core/templates/core/base.html +++ b/benefits/core/templates/core/base.html @@ -108,7 +108,7 @@

    {{ page.headline }}

    {% translate "core.buttons.help" %}
  • - {% translate "core.buttons.privacy" %} + {% translate "core.buttons.privacy" %}
    • diff --git a/benefits/static/css/styles.css b/benefits/static/css/styles.css index 601fcc023..c113e7907 100644 --- a/benefits/static/css/styles.css +++ b/benefits/static/css/styles.css @@ -142,7 +142,7 @@ a:visited:not(.btn) { color: var(--selected-color); } -.external-link::after { +[target="_blank"]::after { content: " "; background-color: currentColor; From c1483c1d8f2979687477ca11085a16fb40e3f535 Mon Sep 17 00:00:00 2001 From: Angela Tran Date: Mon, 17 Jul 2023 22:43:08 +0000 Subject: [PATCH 3/4] fix: set target to browsing context name _target https://html.spec.whatwg.org/multipage/document-sequences.html#browsing-context-names --- benefits/locale/en/LC_MESSAGES/django.po | 2 +- benefits/locale/es/LC_MESSAGES/django.po | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/benefits/locale/en/LC_MESSAGES/django.po b/benefits/locale/en/LC_MESSAGES/django.po index d0167d84b..d07484d63 100644 --- a/benefits/locale/en/LC_MESSAGES/django.po +++ b/benefits/locale/en/LC_MESSAGES/django.po @@ -199,7 +199,7 @@ msgstr "" "tool to support the Courtesy Card program. This benefit may need to be " "renewed in the future based on the expiration date of the Courtesy Card. " "Learn more at the MST Riders Guide." +"card/' target=\"_blank\" rel=\"noopener noreferrer\">MST Riders Guide." msgid "core.pages.help.littlepay" msgstr "What is Littlepay?" diff --git a/benefits/locale/es/LC_MESSAGES/django.po b/benefits/locale/es/LC_MESSAGES/django.po index 7918aeaaa..5b336cb4c 100644 --- a/benefits/locale/es/LC_MESSAGES/django.po +++ b/benefits/locale/es/LC_MESSAGES/django.po @@ -207,7 +207,7 @@ msgstr "" "Tarjeta de Cortesía. Es posible que este beneficio deba renovarse en el " "futuro según la fecha de vencimiento de la Tarjeta de Cortesía. Obtenga más " "información MST Riders Guide." +"card/' target=\"_blank\" rel=\"noopener noreferrer\">MST Riders Guide." msgid "core.pages.help.littlepay" msgstr "¿Qué es Littlepay?" From 228acc1cc08e95f35ee0855a40b30b6314db2eeb Mon Sep 17 00:00:00 2001 From: Angela Tran Date: Tue, 18 Jul 2023 21:48:26 +0000 Subject: [PATCH 4/4] refactor: specify element in selector for external link style --- benefits/static/css/styles.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/benefits/static/css/styles.css b/benefits/static/css/styles.css index c113e7907..d26011d88 100644 --- a/benefits/static/css/styles.css +++ b/benefits/static/css/styles.css @@ -142,7 +142,7 @@ a:visited:not(.btn) { color: var(--selected-color); } -[target="_blank"]::after { +a[target="_blank"]::after { content: " "; background-color: currentColor;