Merge pull request #512 from YellowKirby/fix-icon-size

Use consistent icon size for search and twitter icons
GSA · Mar 10, 2018 · dca5149 · dca5149
2 parents eaa33c5 + 052dabc
commit dca5149
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 23 deletions.
diff --git a/src/app/components/header-navigation/header-navigation.style.scss b/src/app/components/header-navigation/header-navigation.style.scss
@@ -83,6 +83,16 @@
         }
       }
     }
+
+    a {
+      cursor: pointer;
+    }
+
+    i {
+      color: $color-gray;
+      font-size: 1.5em;
+      line-height: 40px;
+    }
   }
 }
 
@@ -142,19 +152,6 @@
   }
 }
 
-.toggle-search-box-button {
-  color: $color-gray;
-  cursor: pointer;
-  display: none;
-  float: right;
-  font-size: 1.5em;
-  line-height: 40px;
-
-  @media screen and (min-width: $small-screen) {
-    display: block;
-  }
-}
-
 .close-search-box-button {
   color: $color-white;
   cursor: pointer;

diff --git a/src/app/components/header-navigation/header-navigation.template.html b/src/app/components/header-navigation/header-navigation.template.html
@@ -3,6 +3,16 @@
   <a class="svg-container" title="Code.gov Home" routerLink="/">
     <svg role="img" aria-label="Code.gov Home" id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 628.17 152.05"><defs><style>.cls-1{fill:#485567;}.cls-2{fill:#0ac0bb;}</style></defs><title>code.gov</title><path class="cls-1" d="M73,113.49q0-5.11,5.19-5.11H90.61q5.19,0,5.19,5.15v4.12q0,33-33.21,33h-28q-33.21,0-33.21-32.9V74.53q0-32.9,33.21-32.9h28q33.21,0,33.21,32.95V78.7q0,5.15-5.19,5.15H78.16Q73,83.85,73,78.74V75.67q0-6.13-3.63-9.71t-9.86-3.58H37.68q-6.23,0-9.86,3.58t-3.63,9.71v40.88q0,6.13,3.63,9.71t9.86,3.58H59.48q6.23,0,9.86-3.58T73,116.56Z"/><path class="cls-1" d="M120.71,74.53q0-32.9,33.21-32.9H184q33.21,0,33.21,32.9v43.18q0,32.89-33.21,32.9h-30.1q-33.21,0-33.21-32.9Zm22.83,42q0,6.13,3.63,9.71t9.86,3.58H180.9q6.23,0,9.86-3.58t3.63-9.71V75.68q0-6.13-3.63-9.71t-9.86-3.58H157q-6.23,0-9.86,3.58t-3.63,9.71Z"/><path class="cls-1" d="M315.81,42.67V9.33q0-5.05,5.19-5.05h12.45q5.19,0,5.19,5.19V144.38q0,5.19-5.19,5.19H321q-5.19,0-5.19-5.43V138.7h-1a19.33,19.33,0,0,1-4.57,6,28.11,28.11,0,0,1-6.43,4.07A22.58,22.58,0,0,1,294,150.6H277.41q-33.21,0-33.21-33.21V75.88q0-33.2,33.21-33.21Zm0,20.76H280.52q-6.23,0-9.86,3.63T267,76.92v39.44q0,6.23,3.63,9.86t9.86,3.63h17.64q7.88,0,12.77-4.88t4.88-12.77Z"/><path class="cls-1" d="M439.3,118.43q0-5.19,5.19-5.19h12.45q5.19,0,5.19,5.19,0,15.57-8.41,23.87t-24.8,8.3h-28q-33.21,0-33.21-32.9V74.53q0-32.9,33.21-32.9h28q33.21,0,33.21,32.66V98.8q0,5.11-5.19,5.11H390.53v12.45q0,6.23,3.63,9.86t9.86,3.63h23.87Q439.3,129.85,439.3,118.43ZM390.53,84.19H439.3V75.27q0-5.95-3.63-9.41t-9.86-3.47H404q-6.23,0-9.86,3.47t-3.63,9.41Z"/><rect class="cls-2" x="485.66" y="126.41" width="139.23" height="24.13" rx="3" ry="3"/></svg>
   </a>
+  <ul class="app-links app-links--right usa-unstyled-list">
+    <li class="app-link">
+      <a (click)="toggleSearchBox()">
+        <i class="fa fa-search"></i>
+      </a>
+    </li>
+    <li class="app-link social-link">
+      <a href="https://twitter.com/codedotgov" title="Follow us on Twitter"><i class="fa fa-twitter"></i></a>
+    </li>
+  </ul>
   <ul class="app-links usa-unstyled-list">
     <li class="app-link">
       <a
@@ -70,16 +80,6 @@
       <a class="link link--contrast" href="https://bit.ly/2pnRlYN" rel="noopener">Join Mailing List</a>
     </li>
   </ul>
-  <ul class="app-links app-links--right usa-unstyled-list">
-    <li class="app-link">
-      <a class="toggle-search-box-button" (click)="toggleSearchBox()">
-        <i class="fa fa-search"></i>
-      </a>
-    </li>
-    <li class="app-link social-link">
-      <a href="https://twitter.com/codedotgov" title="Follow us on Twitter"><i class="fa fa-twitter"></i></a>
-    </li>
-  </ul>
 </nav>
 <div class="search-box" [ngClass]="{'active': isSearchBoxShown}">
   <a class="close-search-box-button" (click)="hideSearchBox()">