Start style for dropdowns

5 files changed, 93 insertions, 29 deletions

diff --git a/packages/gitbook-plugin-theme-default/less/Button.less b/packages/gitbook-plugin-theme-default/less/Button.less
index 476bdf7..336d16e 100644
--- a/packages/gitbook-plugin-theme-default/less/Button.less
+++ b/packages/gitbook-plugin-theme-default/less/Button.less
@@ -16,3 +16,7 @@
         outline: none;
     }
 }
+
+.GitBook-ButtonGroup {
+    display: inline-block;
+}
diff --git a/packages/gitbook-plugin-theme-default/less/Dropdown.less b/packages/gitbook-plugin-theme-default/less/Dropdown.less
new file mode 100644
index 0000000..ca56aee
--- /dev/null
+++ b/packages/gitbook-plugin-theme-default/less/Dropdown.less
@@ -0,0 +1,51 @@
+.GitBook-Dropdown {
+    display: inline-block;
+    position: relative;
+}
+
+.GitBook-DropdownMenu {
+    position: absolute;
+    top: 100%;
+    right: 0;
+    z-index: 300;
+    border: 1px solid @dropdown-border-color;
+    margin: 5px;
+    margin-top: 0px;
+    border-radius: 3px;
+
+    &:before {
+        content: " ";
+        width: 0;
+        height: 0;
+        border-left: @dropdown-arrow-width solid transparent;
+        border-right: @dropdown-arrow-width solid transparent;
+        border-bottom: @dropdown-arrow-width solid @dropdown-border-color;
+        position: absolute;
+        top: -@dropdown-arrow-width;
+        right: 10px;
+    }
+
+    &:after {
+        content: " ";
+        width: 0;
+        height: 0;
+        border-left: (@dropdown-arrow-width - 1) solid transparent;
+        border-right: (@dropdown-arrow-width - 1) solid transparent;
+        border-bottom: (@dropdown-arrow-width - 1) solid #fff;
+        position: absolute;
+        top: -(@dropdown-arrow-width - 1);
+        right: 11px;
+    }
+}
+
+.GitBook-DropdownItem {
+    padding: @dropdown-padding-v @dropdown-padding-h;
+}
+
+.GitBook-DropdownItemLink {
+    width: 100%;
+    display: inline-block;
+    padding: 6px 20px;
+    text-align: center;
+    color: #aaa;
+}
diff --git a/packages/gitbook-plugin-theme-default/less/Summary.less b/packages/gitbook-plugin-theme-default/less/Summary.less
index d6ad42d..1e1e8ba 100644
--- a/packages/gitbook-plugin-theme-default/less/Summary.less
+++ b/packages/gitbook-plugin-theme-default/less/Summary.less
@@ -7,8 +7,8 @@
 }
 
 .SummaryPart-Title {
-    padding: @summary-article-padding-v @summary-article-padding-h;
-    padding-top: 20px;
+    margin: 0px;
+    padding: 2*@summary-article-padding-v @summary-article-padding-h;
     text-transform: uppercase;
     color: @summary-header-color;
     font-size: inherit;
@@ -42,9 +42,10 @@
         color: @summary-article-hover-color;
     }
 
-    &.active, {
+    &.active, &.active:hover {
         a {
-            color: @summary-article-hover-color;
+            color: @summary-article-active-color;
+            background: @summary-article-active-background;
         }
     }
 }
diff --git a/packages/gitbook-plugin-theme-default/less/main.less b/packages/gitbook-plugin-theme-default/less/main.less
index cb5d07d..6b50858 100644
--- a/packages/gitbook-plugin-theme-default/less/main.less
+++ b/packages/gitbook-plugin-theme-default/less/main.less
@@ -13,6 +13,7 @@
 @import "Toolbar.less";
 @import "Search.less";
 @import "Body.less";
+@import "Dropdown.less";
 
 * {
     .box-sizing(border-box);
diff --git a/packages/gitbook-plugin-theme-default/less/variables.less b/packages/gitbook-plugin-theme-default/less/variables.less
index 8604993..2b5c74f 100644
--- a/packages/gitbook-plugin-theme-default/less/variables.less
+++ b/packages/gitbook-plugin-theme-default/less/variables.less
@@ -1,32 +1,39 @@
 // Fonts
-@font-family-serif:           Georgia, serif;
-@font-family-sans:            "Helvetica Neue", Helvetica, Arial, sans-serif;
-@font-family-base:            @font-family-sans;
+@font-family-serif:                 Georgia, serif;
+@font-family-sans:                  "Helvetica Neue", Helvetica, Arial, sans-serif;
+@font-family-base:                  @font-family-sans;
 // 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);
+@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);
+@sidebar-background:                rgb(250, 250, 250);
+@sidebar-border-color:              rgba(0, 0, 0, 0.0666667);
 // Summary
-@summary-header-color:        #939da3;
-@summary-article-padding-v:   10px;
-@summary-article-padding-h:   15px;
-@summary-article-color:       hsl(207, 15%, 25%);
-@summary-article-hover-color: hsl(207, 100%, 50%);
+@summary-header-color:              #939da3;
+@summary-article-padding-v:         10px;
+@summary-article-padding-h:         15px;
+@summary-article-color:             hsl(207, 15%, 25%);
+@summary-article-hover-color:       hsl(207, 100%, 50%);
+@summary-article-active-color:      @summary-article-color;
+@summary-article-active-background: #f5f5f5;
 // Page
-@page-width:                  800px;
-@page-color:                  #333333;
-@page-line-height:            1.7;
+@page-width:                        800px;
+@page-color:                        #333333;
+@page-line-height:                  1.7;
 // Button
-@button-padding:              19px;
-@button-background:           transparent;
-@button-color:                #ddd;
-@button-hover-color:          #bbb;
+@button-padding:                    19px;
+@button-background:                 transparent;
+@button-color:                      #ddd;
+@button-hover-color:                #bbb;
+// Dropdown
+@dropdown-padding-v:                6px;
+@dropdown-padding-h:                10px;
+@dropdown-arrow-width:              8px;
+@dropdown-border-color:             #e5e5e5;
 // Font awesome
-@path-assets:                 '.';
-@path-fonts:                  '@{path-assets}/fonts';
-@fa-font-path:                '@{path-fonts}/fontawesome';
+@path-assets:                       '.';
+@path-fonts:                        '@{path-assets}/fonts';
+@fa-font-path:                      '@{path-fonts}/fontawesome';