refactor search field

app/styles/app.scss

@@ -42,10 +42,12 @@
 @import "app/tabs";
 @import "app/tipsy";
 
+@import "app/components/section";
 @import "app/components/loader";
 @import "app/components/tiles";
 @import "app/components/travis-switch";
 @import "app/components/buttons";
+@import "app/components/search";
 
 @import "app/layout";
 @import "app/layouts/dashboard";

app/styles/app/components/search.sass

@@ -0,0 +1,29 @@
+.search
+  @include grid-column(3)
+  float : right
+  ul
+    text-align   : left
+    margin       : 0
+    padding-left : 0
+    list-style   : none
+  li
+    position     : relative
+    display      : inline-block
+    padding      : 9px 0 8px 0
+    margin-top   : 0
+    width        : 158px
+    line-height  : 17px
+
+.search-field
+  display: inline-block
+  padding: 0.5em
+  width: 100%
+  border: none;
+  background:
+    image   : url('/images/dashboard/search-icon.svg')
+    repeat  : no-repeat
+    position: right 5px center
+    size    : 16px 16px
+  &:focus,
+  &:active
+    box-shadow: 0 0 50% 1em

app/styles/app/components/section.sass

@@ -0,0 +1,9 @@
+.section
+  font-size: $font-size-normal
+  padding: .35em 0
+
+.section--white
+  background-color: $white
+
+.section--maxheight
+  max-height: 44px

app/styles/app/layouts/dashboard.sass

@@ -18,12 +18,6 @@
   vertical-align: top
   margin : -5px 5px 0 0
 
-#filters-search
-  background    : $white
-  font-size     : 14px
-  padding       : 5px 0 5px 0
-  max-height    : 44px
-
 #filters
   float : left
 
@@ -161,31 +155,4 @@
   border-right : 5px solid transparent
   border-top   : 5px solid $dashboard-text-color
 
-#search
-  float : right
-
-#search ul
-  text-align   : left
-  margin       : 0
-  padding-left : 0
-  list-style   : none
-
-#search ul li
-  position     : relative
-  display      : inline-block
-  padding      : 9px 0 8px 0
-  margin-top   : 0
-  width        : 158px
-  line-height  : 17px
-
-.search-field
-  background-image   : url('/images/dashboard/search-icon.svg')
-  background-repeat  : no-repeat
-  background-position: right 5px center
-  display            : inline-block
-  float              : right
-  border             : 1px solid #666
-  padding            : 0.5em
-  width              : 300px
-  background-size    : 16px 16px
 

app/templates/dashboard/repositories.hbs

@@ -1,4 +1,4 @@
-<div id="filters-search">
+<div id="filters-search" class="section section--white section--maxheight">
   <div class="row">
     <!--
     <div class="small-6 medium-3 large-2 columns" id="filters">
@@ -29,8 +29,10 @@
         </li>
       </ul>
     </div> -->
-    {{filter-input placeholder="Search all repositories" class="search-field"
-        action="updateFilter" on="key-up"}}
+    <div class="search">
+      {{filter-input placeholder="Search all repositories" class="search-field"
+          action="updateFilter" on="key-up"}}
+    </div>
   </div>
 </div>
 

app/templates/layouts/dashboard.hbs

@@ -1,9 +1,7 @@
 <div class="centered">
   <div class="wrapper wrapper-dashboard">
     <header id="top" class="top">
-      
-        {{render "top"}}
-      
+      {{render "top"}}
     </header>
 
     {{yield}}