[design] improve dropdown menu

Author: zombieFox

src/css/form.css

@@ -1243,14 +1243,15 @@ 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.5em0;
 position: absolute;
 top:calc(100%+calc(var(--layout-line-width) *2));
 left:0;
 width:100%;
 min-width:12em;
 box-shadow:var(--layout-shadow-large);
 z-index:var(--z-index-dropdown);
+overflow: hidden;
 display: none;
 }
 

src/style-guide.html

@@ -53,28 +53,43 @@
 <inputid="radius" class="style-guide-control radius" type="range" min="0" max="500" value="0" step="20" tabindex="-1">
 </div>
 <hr>
-<divclass="button-wrap">
+<divclass="button-wrap form-inline">
 <buttonclass="button button-small mb-0" tabindex="1">Button Small</button>
 </div>
-<divclass="button-wrap">
+<divclass="button-wrap form-inline">
 <buttonclass="button mb-0" tabindex="1">Button Medium</button>
 </div>
-<divclass="button-wrap">
+<divclass="button-wrap form-inline">
 <buttonclass="button button-large mb-0" tabindex="1">Button Large</button>
 </div>
 <hr>
-<divclass="input-wrap input-button">
+<divclass="input-wrap input-button form-inline">
 <inputid="style-guide-input-button-1" type="checkbox" tabindex="1">
 <labelfor="style-guide-input-button-1" class="mb-0">Checkbox Button</label>
 </div>
-<divclass="input-wrap input-button input-hide">
+<divclass="input-wrap input-button input-hide form-inline">
 <inputid="style-guide-input-button-2" type="checkbox" tabindex="1">
 <labelfor="style-guide-input-button-2" class="mb-0">Checkbox Hidden Button</label>
 </div>
-<divclass="input-wrap input-button input-button-inline input-color-dot">
+<divclass="input-wrap input-button form-inline input-color-dot">
 <inputid="style-guide-input-button-3" type="color" tabindex="1">
 <labelfor="style-guide-input-button-3">Input Colour Button</label>
 </div>
+<divclass="button-wrap form-inline">
+<divclass="style-guide-form-dropdown form-dropdown">
+<buttonclass="form-dropdown-toggle button mb-0" tabindex="1">
+<spanclass="button-text">Button Dropdown</span>
+</button>
+<ulclass="list-unstyled form-dropdown-menu">
+<li>
+<buttonclass="button button-block text-left form-dropdown-menu-item" tabindex="1"><spanclass="button-text">Option 1</span></button>
+</li>
+<li>
+<buttonclass="button button-block text-left form-dropdown-menu-item" tabindex="1"><spanclass="button-text">Option 2</span></button>
+</li>
+</ul>
+</div>
+</div>
 <hr>
 <divclass="input-wrap">
 <inputid="style-guide-checkbox" type="checkbox" tabindex="1">
@@ -259,6 +274,9 @@
 varhtml=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>