Add dropdown button

docs/_javascript/main.js

@@ -1,9 +1,29 @@
 document.addEventListener('DOMContentLoaded', () => {
 
+  // Dropdowns
+
+  const $dropdowns = getAll('.dropdown');
+
+  if ($dropdowns.length > 0) {
+    $dropdowns.forEach($el => {
+      $el.addEventListener('click', event => {
+        console.log('dropdown', event);
+        event.stopPropagation();
+        $el.classList.toggle('is-active');
+      });
+    });
+
+    document.addEventListener('click', event => {
+      console.log('document', event);
+      $dropdowns.forEach($el => {
+        $el.classList.remove('is-active');
+      });
+    });
+  }
+
   // Toggles
 
   const $burgers = getAll('.burger');
-  const $fries = getAll('.fries');
 
   if ($burgers.length > 0) {
     $burgers.forEach($el => {

docs/css/bulma-docs.css

@@ -3761,6 +3761,63 @@ input[type="submit"].button {
   margin-bottom: 0.75rem;
 }
 
+.dropdown {
+  display: inline-flex;
+  position: relative;
+  vertical-align: top;
+}
+
+.dropdown.is-active .dropdown-container, .dropdown.is-hoverable:hover .dropdown-container {
+  display: block;
+}
+
+.dropdown-container {
+  display: none;
+  left: 0;
+  max-width: 20rem;
+  min-width: 12rem;
+  padding-top: 4px;
+  position: absolute;
+  top: 100%;
+  width: 100%;
+  z-index: 20;
+}
+
+.dropdown-content {
+  background-color: white;
+  border-radius: 3px;
+  box-shadow: 0 2px 3px rgba(10, 10, 10, 0.1), 0 0 0 1px rgba(10, 10, 10, 0.1);
+  padding-bottom: 0.5rem;
+  padding-top: 0.5rem;
+}
+
+.dropdown-item {
+  color: #4a4a4a;
+  display: block;
+  font-size: 0.875rem;
+  line-height: 1.5;
+  padding: 0.375rem 1rem;
+  position: relative;
+}
+
+a.dropdown-item {
+  padding-right: 3rem;
+  white-space: nowrap;
+}
+
+a.dropdown-item:hover, a.dropdown-item.is-active {
+  background-color: whitesmoke;
+  color: #0a0a0a;
+}
+
+.dropdown-divider {
+  background-color: #dbdbdb;
+  border: none;
+  display: block;
+  height: 1px;
+  margin: 0.5rem 0;
+}
+
 .level-item {
   align-items: center;
   display: flex;
@@ -7444,6 +7501,7 @@ label.panel-block:hover {
 
 .section {
   background-color: white;
+  min-height: 100vh;
   padding: 3rem 1.5rem;
 }
 

docs/documentation/components/dropdown.html

@@ -0,0 +1,79 @@
+---
+layout: documentation
+doc-tab: components
+doc-subtab: dropdown
+---
+
+{% capture dropdown_example %}
+<div class="dropdown">
+  <div class="dropdown-trigger">
+    <a class="button is-primary">
+      <span>Click me</span>
+      <span class="icon is-small">
+        <i class="fa fa-angle-down"></i>
+      </span>
+    </a>
+  </div>
+  <div class="dropdown-container">
+    <div class="dropdown-content">
+      <a class="dropdown-item">
+        Overview
+      </a>
+      <a class="dropdown-item">
+        Modifiers
+      </a>
+      <a class="dropdown-item">
+        Grid
+      </a>
+      <a class="dropdown-item">
+        Form
+      </a>
+      <a class="dropdown-item">
+        Elements
+      </a>
+      <a class="dropdown-item">
+        Components
+      </a>
+      <a class="dropdown-item">
+        Layout
+      </a>
+      <hr class="dropdown-divider">
+      <a class="dropdown-item">
+        More
+      </a>
+    </div>
+  </div>
+</div>
+{% endcapture %}
+
+{% capture dropdown_info_example %}
+<div class="dropdown is-hoverable">
+  <div class="dropdown-trigger">
+    <a class="button is-info">
+      <span>Hover me</span>
+      <span class="icon is-small">
+        <i class="fa fa-angle-down"></i>
+      </span>
+    </a>
+  </div>
+  <div class="dropdown-container">
+    <div class="dropdown-content">
+      <div class="dropdown-item">
+        <p>You can insert <strong>any type of content</strong> within the dropdown menu.</p>
+      </div>
+    </div>
+  </div>
+</div>
+{% endcapture %}
+
+<section class="section">
+  <div class="container">
+    <h1 class="title">Dropdown</h1>
+    <h2 class="subtitle">An interactive <strong>dropdown menu</strong> for discoverable content</h2>
+
+    <hr>
+
+    {{dropdown_example}}
+    {{dropdown_info_example}}
+  </div>
+</section>

docs/lib/main.js

@@ -2,10 +2,30 @@
 
 document.addEventListener('DOMContentLoaded', function () {
 
+  // Dropdowns
+
+  var $dropdowns = getAll('.dropdown');
+
+  if ($dropdowns.length > 0) {
+    $dropdowns.forEach(function ($el) {
+      $el.addEventListener('click', function (event) {
+        console.log('dropdown', event);
+        event.stopPropagation();
+        $el.classList.toggle('is-active');
+      });
+    });
+
+    document.addEventListener('click', function (event) {
+      console.log('document', event);
+      $dropdowns.forEach(function ($el) {
+        $el.classList.remove('is-active');
+      });
+    });
+  }
+
   // Toggles
 
   var $burgers = getAll('.burger');
-  var $fries = getAll('.fries');
 
   if ($burgers.length > 0) {
     $burgers.forEach(function ($el) {

sass/components/_all.sass

@@ -2,6 +2,7 @@
 
 @import "breadcrumb.sass"
 @import "card.sass"
+@import "dropdown.sass"
 @import "level.sass"
 @import "media.sass"
 @import "menu.sass"
@@ -11,4 +12,4 @@
 @import "navbar.sass"
 @import "pagination.sass"
 @import "panel.sass"
-@import "tabs.sass"
+@import "tabs.sass"

sass/components/dropdown.sass

@@ -0,0 +1,64 @@
+$dropdown-content-background: $white !default
+$dropdown-content-arrow: $link !default
+$dropdown-content-offset: 4px !default
+$dropdown-content-radius: $radius !default
+$dropdown-content-shadow: 0 2px 3px rgba($black, 0.1), 0 0 0 1px rgba($black, 0.1) !default
+$dropdown-content-z: 20 !default
+
+$dropdown-item: $grey-dark !default
+$dropdown-item-hover: $black !default
+$dropdown-item-hover-background: $background !default
+$dropdown-item-active: $black !default
+$dropdown-item-active-background: transparent !default
+
+$dropdown-divider-background: $border !default
+
+.dropdown
+  display: inline-flex
+  position: relative
+  vertical-align: top
+  &.is-active,
+  &.is-hoverable:hover
+    .dropdown-container
+      display: block
+
+.dropdown-container
+  display: none
+  left: 0
+  max-width: 20rem
+  min-width: 12rem
+  padding-top: $dropdown-content-offset
+  position: absolute
+  top: 100%
+  width: 100%
+  z-index: $dropdown-content-z
+
+.dropdown-content
+  background-color: $dropdown-content-background
+  border-radius: $dropdown-content-radius
+  box-shadow: $dropdown-content-shadow
+  padding-bottom: 0.5rem
+  padding-top: 0.5rem
+
+.dropdown-item
+  color: $dropdown-item
+  display: block
+  font-size: 0.875rem
+  line-height: 1.5
+  padding: 0.375rem 1rem
+  position: relative
+
+a.dropdown-item
+  padding-right: 3rem
+  white-space: nowrap
+  &:hover,
+  &.is-active
+    background-color: $dropdown-item-hover-background
+    color: $dropdown-item-hover
+
+.dropdown-divider
+  background-color: $dropdown-divider-background
+  border: none
+  display: block
+  height: 1px
+  margin: 0.5rem 0

sass/layout/section.sass

@@ -1,5 +1,6 @@
 .section
   background-color: $white
+  min-height: 100vh
   padding: 3rem 1.5rem
   // Responsiveness
   +desktop