Start style for dropdowns

7 files changed, 116 insertions, 75 deletions

diff --git a/packages/gitbook-core/src/components/Dropdown.js b/packages/gitbook-core/src/components/Dropdown.js
index 68fb619..78bad8d 100644
--- a/packages/gitbook-core/src/components/Dropdown.js
+++ b/packages/gitbook-core/src/components/Dropdown.js
@@ -11,13 +11,6 @@ const classNames = require('classnames');
  *     <Dropdown.Menu>
  *         <Dropdown.Item href={...}> ... </Dropdown.Item>
  *         <Dropdown.Item onClick={...}> ... </Dropdown.Item>
- *
- *         <Dropdown.Item> A submenu
- *              <Dropdown.Menu>
- *                  <Dropdown.Item href={...}> Subitem </Dropdown.Item>
- *              </Dropdown.Menu>
- *         </Dropdown.Item>
- *
  *     </Dropdown.Menu>
  * </Dropdown.Container>
  */
@@ -71,39 +64,27 @@ const DropdownItem = React.createClass({
     },
 
     render() {
-        const {
-            children, href,
-            ...otherProps
-        } = this.props;
-        delete otherProps.onCLick;
+        const { children, href, onClick, ...otherProps } = this.props;
 
-        const submenu = filterChildren(children, isDropdownMenu);
-        const inner = filterChildren(children, (child) => !isDropdownMenu(child));
+        let inner = children;
 
-        return (
-            <li className="GitBook-DropdownItem">
-                <a href={href || '#'} onClick={this.onClick} {...otherProps} >
+        if (href || onClick) {
+            inner = (
+                <a className="GitBook-DropdownItemLink" href={href || '#'} onClick={this.onClick} {...otherProps} >
                     {inner}
                 </a>
-                {submenu}
-            </li>
+            );
+        }
+
+        return (
+            <div className="GitBook-DropdownItem">
+                {inner}
+            </div>
         );
     }
 });
 
 /**
- * @param {Node} children
- * @param {Function} predicate
- * @return {Node} children that pass the predicate
- */
-function filterChildren(children, predicate) {
-    return React.Children.map(
-        children,
-        (child) => predicate(child) ? child : null
-    );
-}
-
-/**
  * A DropdownMenu to display DropdownItems. Must be inside a
  * DropdownContainer.
  */
@@ -118,17 +99,13 @@ const DropdownMenu = React.createClass({
         className = classNames('GitBook-DropdownMenu', className);
 
         return (
-            <ul className={className}>
+            <div className={className}>
                 {children}
-            </ul>
+            </div>
         );
     }
 });
 
-function isDropdownMenu(child) {
-    return (child && child.type && child.type.displayName === 'DropdownMenu');
-}
-
 const Dropdown = {
     Item: DropdownItem,
     Menu: DropdownMenu,
diff --git a/packages/gitbook-plugin-sharing/src/components/ShareButton.js b/packages/gitbook-plugin-sharing/src/components/ShareButton.js
index 6757d67..cd55169 100644
--- a/packages/gitbook-plugin-sharing/src/components/ShareButton.js
+++ b/packages/gitbook-plugin-sharing/src/components/ShareButton.js
@@ -25,20 +25,20 @@ const ShareButton = React.createClass({
 
         return (
             <Dropdown.Container>
+                {open ? <Backdrop onClose={this.onToggle} /> : null}
+
                 <GitBook.Button onClick={this.onToggle}>
                     <GitBook.Icon id="share-alt" />
                 </GitBook.Button>
 
                 {open ? (
-                    <Backdrop onClose={this.onToggle}>
-                        <Dropdown.Menu>
-                            {siteIds.map((id) => (
-                                <Dropdown.Item onClick={() => onShare(SITES[id])} key={id}>
-                                    {SITES[id].label}
-                                </Dropdown.Item>
-                            ))}
-                        </Dropdown.Menu>
-                    </Backdrop>) : null}
+                    <Dropdown.Menu>
+                        {siteIds.map((id) => (
+                            <Dropdown.Item onClick={() => onShare(SITES[id])} key={id}>
+                                {SITES[id].label}
+                            </Dropdown.Item>
+                        ))}
+                    </Dropdown.Menu>) : null}
             </Dropdown.Container>
         );
     }
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';