diff --git a/_includes/components/icon-list.html b/_includes/components/icon-list.html index 54a308d71..be8b1c6e5 100644 --- a/_includes/components/icon-list.html +++ b/_includes/components/icon-list.html @@ -8,7 +8,7 @@ {% for item in include.items %}
  • - {% include components/icon.html shape=include.icon_shape %} + {% include components/icon.html icon=include.icon_shape %}
    {{ item |markdownify | remove: '

    ' | remove: '

    ' }} diff --git a/_includes/components/icon.html b/_includes/components/icon.html index ffe7484d5..79afa21e0 100644 --- a/_includes/components/icon.html +++ b/_includes/components/icon.html @@ -1,3 +1,17 @@ - - + {% include components/icon.html icon='language' %} + {{ site.data.[page.lang].settings.global.language }} + {% include components/icon.html icon='expand_more' size=3 class='language-picker__expander' %} {% else %}
    diff --git a/_sass/components/_language-picker.scss b/_sass/components/_language-picker.scss index c5c5786ea..a783bd1db 100644 --- a/_sass/components/_language-picker.scss +++ b/_sass/components/_language-picker.scss @@ -36,22 +36,30 @@ .language-picker__label--button { @include typeset($theme-button-font-family, null, 1); @include u-radius($theme-button-border-radius); - background-position: right units(1.5) center; - background-position-y: calc(50% + 2px); - padding: units(1.5); - padding-right: units(3); + padding: units(1); + padding-left: units(1.5); &.usa-accordion__button[aria-expanded='false'], &.usa-accordion__button[aria-expanded='true'] { - background-size: 0.8125rem; + background-image: none; } - &.usa-accordion__button[aria-expanded='false'] { - background-image: url(../img/angle-arrow-down.svg); + .language-picker__label-text { + margin-left: units(1); + margin-right: units(0.5); } +} - &.usa-accordion__button[aria-expanded='true'] { - background-image: url(../img/angle-arrow-up.svg); +.language-picker__expander { + margin: -1px 0; + transition: transform $project-easing; + + @media (prefers-reduced-motion) { + transition: none; + } + + .usa-accordion__button[aria-expanded='true'] & { + transform: rotate(-180deg); } }