Merge pull request #876 from nwind/master

tweak: 优化搜索结果样式

examples/components/App.tsx

@@ -281,10 +281,11 @@ export class App extends React.PureComponent {
               }}
             />
           </div>
-        </div>
-        <div className={`${theme.ns}Layout-searchBar hidden-xs hidden-sm`}>
+
+          <div className="hidden-xs p-t pull-right">
             <DocSearch theme={this.state.theme.value} />
           </div>
+        </div>
 
         <a
           className="gh-icon"

examples/components/DocSearch.jsx

@@ -68,8 +68,9 @@ export default class DocSearch extends React.Component {
   render() {
     const searchResults = this.state.searchResults;
     return (
-      <div className="p-l p-t">
+      <div className="p-r">
         <SearchBox onSearch={this.onSearch} onCancel={this.onSearchCancel} />
+        {searchResults.length > 0 ? (
           <div className="search-result">
             {searchResults.map(item => {
               return (
@@ -80,6 +81,7 @@ export default class DocSearch extends React.Component {
               );
             })}
           </div>
+        ) : null}
       </div>
     );
   }

examples/style.scss

@@ -714,11 +714,19 @@ a {
 
 .search-result {
   background-color: #fff;
-  top: 45px;
+  top: 50px;
   bottom: 0;
   position: fixed;
   overflow-y: scroll;
   overflow-x: hidden;
+  box-shadow: 0px 2px 7px #888888;
+  a {
+    padding: 0 5px;
+    display: block;
+  }
+  a:hover {
+    background-color: $gray200;
+  }
 }
 
 .dark {