Start designing toolbar

6 files changed, 41 insertions, 3 deletions

diff --git a/packages/gitbook-plugin-theme-default/less/Button.less b/packages/gitbook-plugin-theme-default/less/Button.less
new file mode 100644
index 0000000..4b5ffcb
--- /dev/null
+++ b/packages/gitbook-plugin-theme-default/less/Button.less
@@ -0,0 +1,18 @@
+.GitBook\/Button {
+    border: 0;
+    background-color: transparent;
+    background: @button-background;
+    color: @button-color;
+    text-align: center;
+    line-height: @line-height-base;
+    padding: 8px 4px;
+    outline: none;
+
+    &:hover {
+        color: @button-hover-color;
+    }
+
+    &:focus, &:hover {
+        outline: none;
+    }
+}
diff --git a/packages/gitbook-plugin-theme-default/less/Toolbar.less b/packages/gitbook-plugin-theme-default/less/Toolbar.less
new file mode 100644
index 0000000..b396300
--- /dev/null
+++ b/packages/gitbook-plugin-theme-default/less/Toolbar.less
@@ -0,0 +1,3 @@
+.Toolbar {
+
+}
diff --git a/packages/gitbook-plugin-theme-default/less/main.less b/packages/gitbook-plugin-theme-default/less/main.less
index 8acbdf8..b2621f4 100644
--- a/packages/gitbook-plugin-theme-default/less/main.less
+++ b/packages/gitbook-plugin-theme-default/less/main.less
@@ -4,9 +4,12 @@
 @import "reset.less";
 @import "variables.less";
 
+@import "Button.less";
+
 @import "Sidebar.less";
 @import "Summary.less";
 @import "Page.less";
+@import "Toolbar.less";
 
 body, html {
     margin: 0px;
diff --git a/packages/gitbook-plugin-theme-default/less/variables.less b/packages/gitbook-plugin-theme-default/less/variables.less
index ff46cfc..aa1d591 100644
--- a/packages/gitbook-plugin-theme-default/less/variables.less
+++ b/packages/gitbook-plugin-theme-default/less/variables.less
@@ -1,3 +1,9 @@
+// Font sizes
+@font-size-base:              14px;
+@font-size-large:             ceil(@font-size-base * 1.25); // ~18px
+@font-size-small:             ceil(@font-size-base * 0.85); // ~12px
+@line-height-base:            1.428571429; // 20/14
+@line-height-computed:        floor(@font-size-base * @line-height-base);
 // Sidebar
 @sidebar-background:          rgb(250, 250, 250);
 @sidebar-border-color:        rgba(0, 0, 0, 0.0666667);
@@ -11,3 +17,7 @@
 @page-width:                  800px;
 @page-color:                  #333333;
 @page-line-height:            1.7;
+// Button
+@button-background:           transparent;
+@button-color:                #ddd;
+@button-hover-color:          #ccc;
diff --git a/packages/gitbook-plugin-theme-default/src/components/Toolbar.js b/packages/gitbook-plugin-theme-default/src/components/Toolbar.js
index 9a60ff4..a7958d6 100644
--- a/packages/gitbook-plugin-theme-default/src/components/Toolbar.js
+++ b/packages/gitbook-plugin-theme-default/src/components/Toolbar.js
@@ -19,8 +19,12 @@ const Toolbar = React.createClass({
                 <GitBook.Button onClick={this.onToggle}>
                     <GitBook.Icon id="align-justify" />
                 </GitBook.Button>
-                <GitBook.InjectedComponentSet matching={{ role: 'toolbar:buttons:left' }} />
-                <GitBook.InjectedComponentSet matching={{ role: 'toolbar:buttons:right' }} />
+                <div className="Toolbar-left">
+                    <GitBook.InjectedComponentSet matching={{ role: 'toolbar:buttons:left' }} />
+                </div>
+                <div className="Toolbar-right">
+                    <GitBook.InjectedComponentSet matching={{ role: 'toolbar:buttons:right' }} />
+                </div>
             </div>
         );
     }
diff --git a/packages/gitbook-plugin-theme-default/src/index.js b/packages/gitbook-plugin-theme-default/src/index.js
index 2ef5c63..a8eeb91 100644
--- a/packages/gitbook-plugin-theme-default/src/index.js
+++ b/packages/gitbook-plugin-theme-default/src/index.js
@@ -33,7 +33,7 @@ let ThemeBody = React.createClass({
                                 <Sidebar summary={summary} />
                             </GitBook.FlexBox>
                         ) : null}
-                        <GitBook.FlexBox col={9}>
+                        <GitBook.FlexBox col={sidebar.open ? 9 : 12}>
                             <Body page={page} />
                         </GitBook.FlexBox>
                     </GitBook.FlexLayout>