Add style for search input in default theme

7 files changed, 30 insertions, 7 deletions

diff --git a/packages/gitbook-core/src/components/Button.js b/packages/gitbook-core/src/components/Button.js
index 6a8fd6f..1252e8a 100644
--- a/packages/gitbook-core/src/components/Button.js
+++ b/packages/gitbook-core/src/components/Button.js
@@ -12,7 +12,7 @@ const Button = React.createClass({
 
     render() {
         const { children, active, onClick } = this.props;
-        const className = classNames('GitBook/Button', this.props.className, {
+        const className = classNames('GitBook-Button', this.props.className, {
             active
         });
 
diff --git a/packages/gitbook-core/src/components/Icon.js b/packages/gitbook-core/src/components/Icon.js
index fac446a..5f2c751 100644
--- a/packages/gitbook-core/src/components/Icon.js
+++ b/packages/gitbook-core/src/components/Icon.js
@@ -18,7 +18,7 @@ const Icon = React.createClass({
         let { className } = this.props;
 
         if (id) {
-            className = type + ' ' + type + '-' + id;
+            className = 'GitBook-Icon ' + type + ' ' + type + '-' + id;
         }
 
         return <i className={className}/>;
diff --git a/packages/gitbook-plugin-search/src/components/Input.js b/packages/gitbook-plugin-search/src/components/Input.js
index cf832b9..8bee215 100644
--- a/packages/gitbook-plugin-search/src/components/Input.js
+++ b/packages/gitbook-plugin-search/src/components/Input.js
@@ -21,7 +21,7 @@ const SearchInput = React.createClass({
         const { i18n, query } = this.props;
 
         return (
-            <div className="Search/Input">
+            <div className="Search-Input">
                 <input
                     type="text"
                     value={query}
diff --git a/packages/gitbook-plugin-search/src/components/Results.js b/packages/gitbook-plugin-search/src/components/Results.js
index 53fc512..89fb531 100644
--- a/packages/gitbook-plugin-search/src/components/Results.js
+++ b/packages/gitbook-plugin-search/src/components/Results.js
@@ -10,7 +10,7 @@ const Result = React.createClass({
         const { result } = this.props;
 
         return (
-            <div className="Search/Result">
+            <div className="Search-Result">
                 <h3>{result.title}</h3>
                 <p>{result.body}</p>
             </div>
@@ -34,7 +34,7 @@ const SearchResults = React.createClass({
         }
 
         return (
-            <div className="Search/ResultsContainer">
+            <div className="Search-ResultsContainer">
                 <h1>{i18n.t('SEARCH_RESULTS_TITLE', { query, count: results.size })}</h1>
                 <div className="Search/Results">
                     {results.map((result, i) => {
diff --git a/packages/gitbook-plugin-theme-default/less/Button.less b/packages/gitbook-plugin-theme-default/less/Button.less
index 0983dcb..476bdf7 100644
--- a/packages/gitbook-plugin-theme-default/less/Button.less
+++ b/packages/gitbook-plugin-theme-default/less/Button.less
@@ -1,4 +1,4 @@
-.GitBook\/Button {
+.GitBook-Button {
     border: 0;
     background-color: transparent;
     background: @button-background;
diff --git a/packages/gitbook-plugin-theme-default/less/Search.less b/packages/gitbook-plugin-theme-default/less/Search.less
new file mode 100644
index 0000000..b094dc5
--- /dev/null
+++ b/packages/gitbook-plugin-theme-default/less/Search.less
@@ -0,0 +1,23 @@
+.Search-Input {
+    padding: 6px;
+    background: transparent;
+    transition: top 0.5s ease;
+    background: #fff;
+    border-bottom: 1px solid @sidebar-border-color;
+    border-top: 1px solid @sidebar-border-color;
+    margin-bottom: 10px;
+
+    // Move top to hide top border
+    margin-top: -1px;
+
+    input, input:focus, input:hover {
+        width: 100%;
+        background: transparent;
+        border: 1px solid transparent;
+        box-shadow: none;
+        outline: none;
+        line-height: 22px;
+        padding: 7px 7px;
+        color: inherit;
+    }
+}
diff --git a/packages/gitbook-plugin-theme-default/less/main.less b/packages/gitbook-plugin-theme-default/less/main.less
index 8a52e2b..9858a2f 100644
--- a/packages/gitbook-plugin-theme-default/less/main.less
+++ b/packages/gitbook-plugin-theme-default/less/main.less
@@ -7,11 +7,11 @@
 @import "variables.less";
 
 @import "Button.less";
-
 @import "Sidebar.less";
 @import "Summary.less";
 @import "Page.less";
 @import "Toolbar.less";
+@import "Search.less";
 
 * {
     .box-sizing(border-box);