VOTE-1899: implement new language selector style (#890)

usagov · Aug 14, 2023 · a2d2567 · a2d2567
1 parent 3c2b823
commit a2d2567
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 2 deletions.
diff --git a/assets/styles/component/language-switcher.scss b/assets/styles/component/language-switcher.scss
@@ -2,6 +2,29 @@
   display: flex;
   justify-content: flex-end;
   padding: 0.5rem 1rem 0.5rem 0;
+  .usa-button {
+    a {
+      color: #fff;
+    }
+  }
+}
+
+.usa-language__submenu {
+  padding: 20px;
+  width: auto;
+  border-radius: 3px;
+  white-space: nowrap;
+  @media (max-width: 768px) {
+    overflow: auto;
+    height: 80vh;
+  }
+  @media (min-width: 768px) {
+    columns: 2 auto;
+  }
+}
+.usa-language__submenu-item {
+  padding: 8px;
+  border: unset;
 }
 
 .switcher-desktop {
@@ -23,8 +46,8 @@ li.usa-language__submenu-item[data-lang="lang-nv"] {
 
 .usa-language__primary-item:last-of-type .usa-language__submenu {
   [dir="rtl"] & {
+    position: absolute;
     right: unset;
     left: 0;
-    padding-right: 0;
   }
 }
diff --git a/layouts/partials/language-switcher.html b/layouts/partials/language-switcher.html
@@ -17,7 +17,7 @@
       {{ range .AllTranslations }}
         <li class="usa-language__submenu-item" data-lang="lang-{{ .Language.Lang | replaceRE "-[a-z]+" "" }}">
           <a href="{{ .Permalink | relURL }}" title="{{ .Permalink | relURL }}"><span lang="{{ .Language.Lang | replaceRE "-[a-z]+" "" }}"
-            xml:lang="{{ .Language.Lang | replaceRE "-[a-z]+" "" }}"><strong>{{ .Language.LanguageName }} {{ if not (eq .Site.Params.english_languageName "") }}({{ .Site.Params.english_languageName }}){{ end }}</strong></span></a>
+            xml:lang="{{ .Language.Lang | replaceRE "-[a-z]+" "" }}"><strong>{{ .Language.LanguageName }}</strong> {{ if not (eq .Site.Params.english_languageName "") }}({{ .Site.Params.english_languageName }}){{ end }}</span></a>
         </li>
       {{ end }}
       </ul>