From 5c4a0492eaab285b809264434226987c1e2ce2c8 Mon Sep 17 00:00:00 2001
From: zombieFox <crudetoaster@gmail.com>
Date: Thu, 7 Nov 2019 16:52:11 +0000
Subject: [PATCH] [design] improve dropdown menu

---
 src/css/form.css     |  3 ++-
 src/style-guide.html | 30 ++++++++++++++++++++++++------
 2 files changed, 26 insertions(+), 7 deletions(-)

diff --git a/src/css/form.css b/src/css/form.css
index 9cc7c730..ba95c94b 100755
--- a/src/css/form.css
+++ b/src/css/form.css
@@ -1243,7 +1243,7 @@ input[type="range"]:disabled::-moz-range-progress {
 .form-dropdown-menu {
   background-color: rgb(var(--form-dropdown-background));
   border-radius: var(--theme-radius);
-  padding: var(--theme-radius) 0;
+  padding: 0.5em 0;
   position: absolute;
   top: calc(100% + calc(var(--layout-line-width) * 2));
   left: 0;
@@ -1251,6 +1251,7 @@ input[type="range"]:disabled::-moz-range-progress {
   min-width: 12em;
   box-shadow: var(--layout-shadow-large);
   z-index: var(--z-index-dropdown);
+  overflow: hidden;
   display: none;
 }
 
diff --git a/src/style-guide.html b/src/style-guide.html
index 15f99171..3237ee80 100644
--- a/src/style-guide.html
+++ b/src/style-guide.html
@@ -53,28 +53,43 @@
       <input id="radius" class="style-guide-control radius" type="range" min="0" max="500" value="0" step="20" tabindex="-1">
     </div>
     <hr>
-    <div class="button-wrap">
+    <div class="button-wrap form-inline">
       <button class="button button-small mb-0" tabindex="1">Button Small</button>
     </div>
-    <div class="button-wrap">
+    <div class="button-wrap form-inline">
       <button class="button mb-0" tabindex="1">Button Medium</button>
     </div>
-    <div class="button-wrap">
+    <div class="button-wrap form-inline">
       <button class="button button-large mb-0" tabindex="1">Button Large</button>
     </div>
     <hr>
-    <div class="input-wrap input-button">
+    <div class="input-wrap input-button form-inline">
       <input id="style-guide-input-button-1" type="checkbox" tabindex="1">
       <label for="style-guide-input-button-1" class="mb-0">Checkbox Button</label>
     </div>
-    <div class="input-wrap input-button input-hide">
+    <div class="input-wrap input-button input-hide form-inline">
       <input id="style-guide-input-button-2" type="checkbox" tabindex="1">
       <label for="style-guide-input-button-2" class="mb-0">Checkbox Hidden Button</label>
     </div>
-    <div class="input-wrap input-button input-button-inline input-color-dot">
+    <div class="input-wrap input-button form-inline input-color-dot">
       <input id="style-guide-input-button-3" type="color" tabindex="1">
       <label for="style-guide-input-button-3">Input Colour Button</label>
     </div>
+    <div class="button-wrap form-inline">
+      <div class="style-guide-form-dropdown form-dropdown">
+        <button class="form-dropdown-toggle button mb-0" tabindex="1">
+          <span class="button-text">Button Dropdown</span>
+        </button>
+        <ul class="list-unstyled form-dropdown-menu">
+          <li>
+            <button class="button button-block text-left form-dropdown-menu-item" tabindex="1"><span class="button-text">Option 1</span></button>
+          </li>
+          <li>
+            <button class="button button-block text-left form-dropdown-menu-item" tabindex="1"><span class="button-text">Option 2</span></button>
+          </li>
+        </ul>
+      </div>
+    </div>
     <hr>
     <div class="input-wrap">
       <input id="style-guide-checkbox" type="checkbox" tabindex="1">
@@ -259,6 +274,9 @@
       var html = helper.e("html");
       html.style.setProperty("--theme-radius", (parseInt(this.value, 10) / 100) + "rem");
     }, false);
+    helper.e(".style-guide-form-dropdown").addEventListener("click", function() {
+      helper.toggleClass(this, "form-dropdown-open");
+    }, false);
   </script>
 
 </body>