Collapse search input on tablets. closes flarum/core#162

While this solution isn't perfect (perhaps a search icon which opens a
dropdown would be better, like Discourse does) - it'll do for now :)

framework/core/js/forum/src/components/Search.js

@@ -77,6 +77,7 @@ export default class Search extends Component {
     return (
       <div className={'Search ' + classList({
         open: this.value() && this.hasFocus,
+        focused: this.hasFocus,
         active: !!currentSearch,
         loading: !!this.loadingSources
       })}>

framework/core/less/lib/App.less

@@ -266,6 +266,18 @@
   }
 }
 
+@media @tablet {
+  .Header-secondary .Search {
+    input {
+      width: 1px;
+      background: transparent;
+    }
+    &:not(.active) input {
+      padding-right: 0;
+    }
+  }
+}
+
 // ------------------------------------
 // Content Area
 

framework/core/less/lib/Search.less

@@ -2,8 +2,11 @@
   position: relative;
 }
 @media @tablet-up {
-  .Search {
+  .Search.focused {
-    input:focus, &.active input, .Search-results {
+    margin-left: -400px;
+    .transition(all 0.4s);
+
+    input, .Search-results {
       width: 400px;
     }
   }
@@ -51,9 +54,9 @@
   input {
     float: left;
     width: 225px;
-    padding-left: 36px;
+    padding-left: 32px;
-    padding-right: 36px;
+    padding-right: 32px;
-    .transition(~"all 0.4s");
+    .transition(all 0.4s);
   }
   .Button {
     float: left;