Make icons 30% larger

Requires some small tweaks around various places we have icons in
use. In fact, this actually eliminates a lot of the small tweaks
in favor of more flexible alignment.

h/static/styles/common.scss

@@ -104,7 +104,6 @@ html {
 .close {
   cursor: pointer;
   float: right;
-  line-height: 1.4;
   opacity: .6;
   &:active, &:hover {
     opacity: 1;

h/static/styles/forms.scss

@@ -179,12 +179,10 @@
   float: right;
 
   > * {
-    float: left;
     margin-left: 10px;
-  }
-
-  > *:first-child {
-    margin-left: 0;
+    &:first-child {
+      margin-left: 0;
+    }
   }
 }
 
@@ -259,9 +257,7 @@
 
 // Positions the icon nicely within the button.
 .btn-icon {
-  position: relative;
-  top: 1px;
-  right: 3px;
+  vertical-align: middle;
 }
 
 // Absolutely positions a message/icon to the left of a button.
@@ -270,30 +266,21 @@
 }
 
 .btn-message {
-  font-size: 13px;
   font-style: italic;
   color: $gray-light;
-  margin-right: 6px;
+  margin-right: .5em;
   position: absolute;
   right: 100%;
-  top: 50%;
-  margin-top: -9px;
+  top: 0;
   white-space: nowrap;
 }
 
 .btn-message-icon {
   display: inline-block;
-  position: relative;
-  top: 0px;
   background: $success-green;
   border-radius: 50%;
   color: #FFF;
-  font-size: 12px;
-  height: 20px;
-  line-height: 13px;
-  margin-left: 4px;
-  padding: 4px;
-  width: 20px;
+  padding: 2px;
 }
 
 // Handles state transitions from "default" -> "loading" -> "success"
@@ -305,8 +292,8 @@
 
 [status-button-state=success] .btn-message-success,
 [status-button-state=loading] .btn-message-loading {
-  top: 50%;
   left: auto;
+  top: 0;
   right: 100%;
 }
 

h/static/styles/inject.scss

@@ -193,6 +193,7 @@ $base-font-size: 14px;
   border: solid 1px $gray-lighter;
   border-radius: 4px;
   left: 0;
+  font-size: 18px;
   margin-top: 5px;
   overflow: hidden;
   position: relative;
@@ -224,10 +225,13 @@ $base-font-size: 14px;
     @include single-transition(background-color, .25s, .25s);
     background: $white;
     color: $gray-light;
-    font-size: 18px;
     line-height: 28px;
-    padding: 5px;
     text-decoration: none;
+    height: 28px;
+    width: 28px;
+    position: absolute;
+    top: 0;
+    left: 0;
   }
 
   a:active {

h/static/styles/mixins/icons.scss

@@ -13,5 +13,8 @@
 @mixin icons {
   [class^="h-icon-"], [class*=" h-icon-"] {
     @content;
+    &:before {
+      font-size: 130%;
+    }
   }
 }

h/static/styles/simple-search.scss

@@ -18,13 +18,10 @@
 
 @include icons {
   &.simple-search-icon {
-    float: left;
-    display: inline;
-    font-size: 1.1em;
-    line-height: 2;
-    margin-left: -100%;
-    position: relative;
-    right: 19 / 14 * 1em;
+    line-height: inherit;
+    position: absolute;
+    left: 0;
+    top: 0;
   }
 }
 
@@ -36,9 +33,10 @@
   float: left;
   outline: none;
   color: $text-color;
+  line-height: inherit;
   width: 100%;
   border: none !important; // Override base input styles.
-  padding: .4615em 0 0;
+  padding: 0;
 
   .simple-search-inactive &:not(:focus) {
     border-color: #f3f3f3 !important;
@@ -46,27 +44,14 @@
 }
 
 .simple-search-clear {
-  @include icons {
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    margin-top: -.5em;
-    margin-left: -.5em;
-    font-size: 0.85em;
-  }
-
-  float: left;
-  position: relative;
-  top: 6 / 13 * 1em;
-  margin-right: -1.33em;
-  padding: 0;
-  outline: none;
+  position: absolute;
+  top: 0;
+  right: 0;
   border: none;
   background: none;
   color: $gray;
-  width: 1.33em;
-  height: 1.33em;
-  @include box-shadow(none);
+  line-height: inherit;
+  padding: 0;
 
   &:focus, &:hover, &:active:not([disabled]) {
     color: $text-color;