Merge pull request #1709 from Raader/master

Add styles to language selects

Author: Manishearth

src/styles/app.scss

@@ -624,3 +624,33 @@ blockquote::before {
   /* Tachyons is missing this class */
   max-height: 10rem;
 }
+
+.select {
+  display: inline-block;
+  position: relative;
+}
+
+.select select {
+  appearance: none;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  font-size: 1.25rem;
+  border: $gray 1px solid;
+  background-color: white;
+  padding: 2px 6px;
+  color: $gray;
+  box-sizing: border-box;
+}
+
+.select:after {
+  content: "";
+  position: absolute;
+  top: 50%;
+  right: 8px;
+  width: 0;
+  height: 0;
+  margin-top: -2px;
+  border-top: 5px solid $gray;
+  border-right: 5px solid transparent;
+  border-left: 5px solid transparent;
+}

templates/components/footer.hbs

@@ -9,10 +9,12 @@
           <li><a href="https://users.rust-lang.org">{{fluent "footer-ask"}}</a></li>
         </ul>
         <div class="languages">
+          <div class="select">
             <label for="language-footer" class="hidden">{{fluent "choose-language"}}</label>
             <select id="language-footer">
-                {{> components/languages-dropdown}}
+              {{> components/languages-dropdown}}
             </select>
+          </div>
         </div>
       </div>
       <div class="flex flex-column mw8 w-100 measure-wide-l pv2 pv5-m pv2-ns ph4-m ph4-l">

templates/components/nav.hbs

@@ -19,10 +19,12 @@
   </ul>
 
   <div class=" w-100 w-auto-l flex-none flex justify-center pv4 pv-0-l languages">
-    <label for="language-nav" class="hidden">{{fluent "choose-language"}}</label>
-    <select id="language-nav" data-current-lang="{{lang}}">
-      {{> components/languages-dropdown}}
-    </select>
+    <div class="select">
+      <label for="language-nav" class="hidden">{{fluent "choose-language"}}</label>
+      <select id="language-nav" data-current-lang="{{lang}}">
+        {{> components/languages-dropdown}}
+      </select>
+    </div>
   </div>
 
 </nav>