feat: add external link CSS based on USWDS example, apply to footer link

uses CSS keyword 'currentColor' to achieve hover and visited styles
cal-itp · Jul 17, 2023 · 179246c · 179246c
1 parent 6d24a70
commit 179246c
Show file tree

Hide file tree

Showing 3 changed files with 32 additions and 1 deletion.
diff --git a/benefits/core/templates/core/base.html b/benefits/core/templates/core/base.html
@@ -108,7 +108,8 @@ <h1>{{ page.headline }}</h1>
             <a class="m-0 ps-5 ps-lg-0" href="{% url "core:help" %}">{% translate "core.buttons.help" %}</a>
           </li>
           <li>
-            <a class="m-0 ps-5 ps-lg-0" href="https://cdt.ca.gov/privacy-policy/" target="_blank" rel="noopener noreferrer">{% translate "core.buttons.privacy" %}</a>
+            <a class="m-0 ps-5 ps-lg-0 external-link" href="https://cdt.ca.gov/privacy-policy/" target="_blank" rel="noopener noreferrer">{% translate "core.buttons.privacy" %}
+            </a>
           </li>
         </ul>
       </div>

diff --git 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