search text alignment

dist/ratchet.css

@@ -499,10 +499,16 @@ input[type=search] {
   height: 34px;
   padding: 0 10px;
   font-size: 14px;
+  text-align: center;
   border-radius: 6px;
   border-width: 0;
   background-color: rgba(0, 0, 0, 0.1);
   box-sizing: border-box;
+  transition: text-align 1s linear;
+}
+
+input[type=search]:focus {
+  text-align: left;
 }
 
 textarea {

lib/sass/forms.scss

@@ -45,11 +45,15 @@ input[type=search] {
   height: 34px;
   padding: 0 10px;
   font-size: 14px;
+  text-align: center;
   border-radius: 6px;
   border-width: 0;
   background-color: rgba(0,0,0,.1);
   box-sizing: border-box; // Override content-box in normalize
 }
+input[type=search]:focus {
+  text-align: left;
+}
 
 // Allow text area's height to grow larger than a normal input
 textarea {

test/app/checkout.html

@@ -24,6 +24,11 @@
     </a>
     <h1 class="title">Buy tickets</h1>
   </header>
+  <nav class="bar-standard bar-header-secondary">
+    <form>
+      <input type="search" placeholder="Search for movies">
+    </form>
+  </nav>
 
   <nav class="bar-tab">
     <ul class="tab-inner">