From 16f22fb7a64a75bf371bec4081963b9c6128ba8c Mon Sep 17 00:00:00 2001
From: Matthias Kretschmann <m@kretschmann.io>
Date: Fri, 6 Apr 2018 10:41:46 +0200
Subject: [PATCH] more menu tweaks

---
 _src/_assets/styles/bigchain/_dropdowns.scss  | 17 +++++-
 _src/_assets/styles/bigchain/_menus.scss      |  1 +
 .../_select2-bigchaindb/_multiple.scss        |  7 ---
 _src/_includes/menu-footer.html               | 12 +++-
 _src/_includes/menu-main.html                 | 56 +++++++++----------
 _src/styleguide.md                            |  6 +-
 6 files changed, 57 insertions(+), 42 deletions(-)

diff --git a/_src/_assets/styles/bigchain/_dropdowns.scss b/_src/_assets/styles/bigchain/_dropdowns.scss
index e7b9c5c..4919776 100644
--- a/_src/_assets/styles/bigchain/_dropdowns.scss
+++ b/_src/_assets/styles/bigchain/_dropdowns.scss
@@ -5,6 +5,14 @@
 }
 
 .dropdown-toggle {
+    box-shadow: none;
+    cursor: default;
+
+    &:hover,
+    &:focus {
+        background: transparent;
+    }
+
     &:after {
         content: '';
         display: inline-block;
@@ -22,7 +30,7 @@
     top: 100%;
     left: 0;
     z-index: 10;
-    display: none;
+    display: block;
     float: left;
     min-width: 10rem;
     padding: $spacer / 4 0;
@@ -39,6 +47,10 @@
     max-height: 20rem;
     overflow-y: auto;
     -webkit-overflow-scrolling: touch;
+    transition: .2s $timing-bounce;
+    opacity: 0;
+    transform: scale(1, 0);
+    transform-origin: top;
 
     @media (max-width: 27rem), (max-height: 27rem) {
         max-height: 11.25rem;
@@ -73,7 +85,8 @@
 
 .dropdown-menu.show,
 .dropdown:hover > .dropdown-menu {
-    display: block;
+    transform: scale(1, 1);
+    opacity: 1;
 }
 
 .dropdown > .dropdown-toggle:active {
diff --git a/_src/_assets/styles/bigchain/_menus.scss b/_src/_assets/styles/bigchain/_menus.scss
index dcbdc03..a1f9a1e 100644
--- a/_src/_assets/styles/bigchain/_menus.scss
+++ b/_src/_assets/styles/bigchain/_menus.scss
@@ -161,6 +161,7 @@
     @media ($screen-md) {
         padding-top: 0;
         padding-bottom: 0;
+        text-align: right;
     }
 }
 
diff --git a/_src/_assets/styles/bigchain/_select2-bigchaindb/_multiple.scss b/_src/_assets/styles/bigchain/_select2-bigchaindb/_multiple.scss
index 0ead5d3..44e378a 100644
--- a/_src/_assets/styles/bigchain/_select2-bigchaindb/_multiple.scss
+++ b/_src/_assets/styles/bigchain/_select2-bigchaindb/_multiple.scss
@@ -17,9 +17,7 @@
 
     .select2-selection__placeholder {
         color: #999;
-
         margin-top: 5px;
-
         float: left;
     }
 
@@ -33,13 +31,10 @@
 
     .select2-selection__choice {
         background-color: #e4e4e4;
-
         border: 1px solid #aaa;
         border-radius: 4px;
         cursor: default;
-
         float: left;
-
         margin-right: 5px;
         margin-top: 5px;
         padding: 0 5px;
@@ -48,10 +43,8 @@
     .select2-selection__choice__remove {
         color: #999;
         cursor: pointer;
-
         display: inline-block;
         font-weight: $font-weight-bold;
-
         margin-right: 2px;
 
         &:hover {
diff --git a/_src/_includes/menu-footer.html b/_src/_includes/menu-footer.html
index 1cbc740..ff4c63a 100644
--- a/_src/_includes/menu-footer.html
+++ b/_src/_includes/menu-footer.html
@@ -19,7 +19,18 @@
                     {% assign active = 'active' %}
                 {% endif %}
 
+                {% unless link.items %}
                 <a class="menu__link {{ active }} js-tracking-menu" href="{{ link.url }}">{{ link.title }}</a>
+                {% endunless %}
+
+                {% for item in link.items %}
+                    {% assign active = nil %}
+                    {% if page.url contains item.url %}
+                        {% assign active = 'active' %}
+                    {% endif %}
+
+                    <a class="menu__link menu__link--secondary {{ active }} js-tracking-menu" href="{{ item.url }}">{{ item.title }}</a>
+                {% endfor %}
 
             {% endfor %}
         </div>
@@ -34,7 +45,6 @@
 
                 <a class="menu__link {{ active }} js-tracking-menu" href="{{ link.url }}">{{ link.title }}</a>
 
-
             {% endfor %}
         </div>
 
diff --git a/_src/_includes/menu-main.html b/_src/_includes/menu-main.html
index 808eb04..7e43730 100644
--- a/_src/_includes/menu-main.html
+++ b/_src/_includes/menu-main.html
@@ -19,39 +19,37 @@
 
             <div class="grid__col grid__col--4">
 
-                <div class="menu-overflow">
-                    {% for link in site.data.menus.main %}
+                {% for link in site.data.menus.main %}
 
-                        {% assign active = nil %}
-                        {% if page.url contains link.url %}
-                            {% assign active = 'active' %}
-                        {% endif %}
+                    {% assign active = nil %}
+                    {% if page.url contains link.url %}
+                        {% assign active = 'active' %}
+                    {% endif %}
 
-                        {% if link.items %}
-                            <div class="dropdown">
-                                <a  class="menu__link {{ active }} js-tracking-menu dropdown-toggle"
-                                    data-toggle="dropdown"
-                                    aria-haspopup="true"
-                                    aria-expanded="false"
-                                    id="dropdownMenuButton"
-                                    href="{{ link.url }}">{{ link.title }}
-                                </a>
-                                <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
-                                    {% for item in link.items %}
-                                         {% assign active = nil %}
-                                         {% if page.url contains item.url %}
-                                            {% assign active = 'active' %}
-                                        {% endif %}
-                                        <a class="dropdown-item {{ active }}" href="{{ item.url }}">{{ item.title }}</a>
-                                    {% endfor %}
-                                </div>
+                    {% if link.items %}
+                        <div class="dropdown dropdown--hover">
+                            <a  class="menu__link {{ active }} js-tracking-menu dropdown-toggle"
+                                data-toggle="dropdown"
+                                aria-haspopup="true"
+                                aria-expanded="false"
+                                id="dropdownMenuButton"
+                                href="{{ link.url }}">{{ link.title }}
+                            </a>
+                            <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
+                                {% for item in link.items %}
+                                        {% assign active = nil %}
+                                        {% if page.url contains item.url %}
+                                        {% assign active = 'active' %}
+                                    {% endif %}
+                                    <a class="dropdown-item {{ active }}" href="{{ item.url }}">{{ item.title }}</a>
+                                {% endfor %}
                             </div>
-                        {% else %}
-                            <a class="menu__link {{ active }} js-tracking-menu" href="{{ link.url }}">{{ link.title }}</a>
-                        {% endif %}
+                        </div>
+                    {% else %}
+                        <a class="menu__link {{ active }} js-tracking-menu" href="{{ link.url }}">{{ link.title }}</a>
+                    {% endif %}
 
-                    {% endfor %}
-                </div>
+                {% endfor %}
 
             </div>
         </div>
diff --git a/_src/styleguide.md b/_src/styleguide.md
index 1e551f3..41c63d1 100644
--- a/_src/styleguide.md
+++ b/_src/styleguide.md
@@ -325,9 +325,9 @@ Logo can be used with a base class and modifier classes for size & color:
 ### Dropdowns
 
 <div class="dropdown">
-  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
-    Dropdown button
-  </button>
+  <a class="dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+    Hover me
+  </a>
   <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
     <a class="dropdown-item" href="#">Action</a>
     <a class="dropdown-item" href="#">Another action</a>