Merge branch 'master' of https://github.com/TelescopeJS/Telescope

Author: SachaG

packages/telescope-search/lib/client/views/search.js

@@ -25,17 +25,17 @@ Meteor.startup(function () {
     'keyup, search .search-field': function(e){
       e.preventDefault();
       var val = $(e.target).val(),
-          $search = $('.search'); 
-      if(val==''){
-        // if search field is empty, just do nothing and show an empty template 
+          $search = $('.search');
+      if (val === '') {
+        // if search field is empty, just do nothing and show an empty template
         $search.addClass('empty');
         Session.set('searchQuery', '');
         Router.go('/search', null, {replaceState: true});
-      }else{
-        // if search field is not empty, add a delay to avoid firing new searches for every keystroke 
+      } else {
+        $search.removeClass('empty');
+        // if search field is not empty, add a delay to avoid firing new searches for every keystroke
         delay(function(){
           Session.set('searchQuery', val);
-          $search.removeClass('empty');
 
           // Update the querystring.
           var opts = {query: 'q=' + encodeURIComponent(val)};

packages/telescope-theme-hubble/lib/client/scss/modules/_nav.scss

@@ -84,40 +84,43 @@
 	}
 }
 
-.search{
+.search {
+	$compressed-width: 120px;
+	$expanded-width: 200px;
+
 	position: relative;
-	.search-field{
+	.search-field {
 		font-size: 14px;
 		padding: 4px 12px;
 		line-height: 1.3;
 		border-radius: 20px;
 		border: 0px;
-		width: 120px;
-	 	-webkit-appearance: textfield;
-		-webkit-transition: 0.2s all;
-		-moz-transition: 0.2s all;
+		width: $expanded-width;
+		transition: 0.2s all;
 		-webkit-appearance: textfield;
 		background: white;
-		&:focus{
-			outline:none;
+		&:focus {
+			outline: none;
 		}
 	}
-	&.empty{
-		.search-field{
+	&.empty {
+		.search-field {
+			width: $compressed-width;
 			background: white(0.1);
-			&:focus{
+			&:focus {
 				background: white;
+				width: $expanded-width;
 			}
 		}
 	}
 }
 
 .has-dropdown .user-menu .dropdown-menu{
-  left:auto;
+  left: auto;
   right: 10px;
  }
  .has-dropdown .notifications-menu .dropdown-menu{
-  left:auto;
+  left: auto;
   right: 10px;
  }
  .newsletter-dismiss{