channel search

@@ -6,17 +6,18 @@
 var $ = require('jquery');
 
 var $searchBox = $('.search-box'),
+    $box = $('.box'),
     $indexSearch = $('.index-search'),
     $indexLogo = $('.index-logo');
 
 var $search = $searchBox.children('input[type="text"]'),
-    $cancelSearch = $indexSearch.children('.no-search'),
+    $cancelSearch = $box.children('.no-search'),
     $searchIcon = $searchBox.children('.search-icon');
 
 require('../common');
 
 $search.on('focus', function() {
-    $indexSearch.addClass('action');
+    $box.addClass('action');
     $indexLogo.addClass('action');
 }).on('input', function() {
     if ($search.val() === '') {
@@ -27,7 +28,7 @@ $search.on('focus', function() {
 });
 
 $cancelSearch.on('touchstart', function() {
-    $indexSearch.removeClass('action');
+    $box.removeClass('action');
     $indexLogo.removeClass('action');
 
     $search.blur();

@@ -3,6 +3,7 @@
     overflow: hidden;
     margin: 0 auto;
     .index-header {
+        box-sizing: border-box;
         padding: 0 20rem / $pxConvertRem;
         width: 100%;
         height: 96rem / $pxConvertRem;
@@ -22,40 +23,39 @@
             }
         }
 
-        .index-search {
-            position: absolute;
-            top: 0;
-            right: 0;
-            width: 384rem / $pxConvertRem;
-            height: 96rem / $pxConvertRem;
-            background: #fff;
+        .box {
+            position: relative;
             overflow: hidden;
-            z-index: 3;
-            @include transition(width .4s);
+            z-index: 1;
 
             &.action {
-                width: 620rem / $pxConvertRem;
                 .no-search, .clear-text {
                     display: block;
                 }
 
                 .search-box {
-                    width: 512rem / $pxConvertRem;
+                    margin-left: 80rem / $pxConvertRem;
+                }
             }
         }
 
+        .index-search {
+            height: 96rem / $pxConvertRem;
+            background: #fff;
+            overflow: hidden;
+            @include transition(width .4s);
+
             .search-box {
-                float: left;
                 position: relative;
                 top: 20rem / $pxConvertRem;
-                width: 352rem / $pxConvertRem;
                 height: 56rem / $pxConvertRem;
                 padding-right: 80rem / $pxConvertRem;
-                z-index: 1;
                 transition: width 400ms;
                 box-sizing: border-box;
                 border: 1px solid #ccc;
                 overflow: hidden;
+
+                @include transition(margin-left 0.4s);
             }
             input {
                 float: left;
@@ -65,6 +65,7 @@
                 color: #999;
                 overflow: hidden;
                 border: none;
+                -webkit-appearance: none;
             }
             .iconfont {
                 position: absolute;
@@ -90,11 +91,13 @@
         }
 
         .no-search {
+            position: absolute;
             display: none;
             float: left;
             margin-right: 10rem / $pxConvertRem;
             color: #999;
             font-size: 28rem / $pxConvertRem;
+            @inlcude transition(display .4s);
         }
     }
     .index-container {

@@ -3,8 +3,9 @@
     <div class="index-container">
         <div class="index-header clearfix">
             <div class="iconfont index-logo">&#xe60e;</div>
-            <form action="{{searchUrl}}" class="index-search">
+            <div class="box">
                 <a href="javascript:void(0);" class="no-search">取消</a>
+                <form action="{{searchUrl}}" class="index-search">
                     <div class="search-box">
                         <input type="hidden" name="from" value="search">
                         <input type="text" name="query" placeholder="搜索" autocomplete="off">
@@ -13,6 +14,7 @@
                     </div>
                 </form>
             </div>
+        </div>
         <div class="index-channel">
             <img class="img" src="{{background}}">
             <div class="index-channel-list">