Start designing toolbar

4 files changed, 34 insertions, 0 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;