Add the inactive state to the search bar

h/static/scripts/directives.coffee

@@ -418,7 +418,7 @@ simpleSearch = ['$parse', ($parse) ->
 
   restrict: 'C'
   template: '''
-            <form class="simple-search-form" name="searchBox" ng-submit="dosearch()">
+            <form class="simple-search-form" ng-class="!searchtext && 'simple-search-inactive'" name="searchBox" ng-submit="dosearch()">
               <i class="simple-search-icon icon-search"></i>
               <input class="simple-search-input" type="text" ng-model="searchtext" name="searchText" />
               <button class="simple-search-clear" type="reset" ng-hide="!searchtext" ng-click="reset($event)">

h/static/styles/simple-search.scss

@@ -19,13 +19,14 @@
 }
 
 .simple-search-input {
+  outline: none;
   height: 26px; // Temporary fix for FF.
   width: 100%;
   border-radius: 15px;
-  border-color: #C5C5C5 !important; // Override base input styles.
+  border: 1px solid $gray-lighter !important; // Override base input styles.
   padding-left: 2em;
 
-  .simple-search-inactive & {
+  .simple-search-inactive &:not(:focus) {
     background-color: $gray-lightest;
     border-color: $gray-lightest !important;
   }
@@ -41,6 +42,7 @@
   }
 
   position: absolute;
+  outline: none;
   right: 5px;
   top: 50%;
   border: none;

tests/js/directives-test.coffee

@@ -168,8 +168,19 @@ describe 'h.directives', ->
       $element.find('.simple-search-clear').click()
       assert($scope.clear.called)
 
-    it 'clear clears the search-bar', ->
+    it 'clears the search-bar', ->
       $scope.query = {query: "Test query"}
       $scope.$digest()
       $element.find('.simple-search-clear').click()
       assert.equal($scope.searchtext, '')
+
+    it 'adds a class to the form when there is no input value', ->
+      $form = $element.find('.simple-search-form')
+      assert.include($form.prop('className'), 'simple-search-inactive')
+
+    it 'removes the class from the form when there is an input value', ->
+      $scope.query = {query: "Test query"}
+      $scope.$digest()
+
+      $form = $element.find('.simple-search-form')
+      assert.notInclude($form.prop('className'), 'simple-search-inactive')