From 9e294874a27c7279d114562f214047611567f0c1 Mon Sep 17 00:00:00 2001
From: Yan Sern <hey@yansern.io>
Date: Sat, 7 Oct 2017 18:02:49 +0200
Subject: [PATCH] Added .is-up modifier for dropdown. (#1254)

---
 docs/documentation/components/dropdown.html | 37 +++++++++++++++++++++
 sass/components/dropdown.sass               |  6 ++++
 2 files changed, 43 insertions(+)

diff --git a/docs/documentation/components/dropdown.html b/docs/documentation/components/dropdown.html
index 0bea49ae..32f65594 100644
--- a/docs/documentation/components/dropdown.html
+++ b/docs/documentation/components/dropdown.html
@@ -192,6 +192,26 @@ variables:
 </div>
 {% endcapture %}
 
+{% capture dropdown_up_example %}
+<div class="dropdown is-up is-active">
+  <div class="dropdown-trigger">
+    <button class="button is-info" aria-haspopup="true" aria-controls="dropdown-menu7">
+      <span>Dropup button</span>
+      <span class="icon is-small">
+        <i class="fa fa-angle-up" aria-hidden="true"></i>
+      </span>
+    </button>
+  </div>
+  <div class="dropdown-menu" id="dropdown-menu7" role="menu">
+    <div class="dropdown-content">
+      <div class="dropdown-item">
+        <p>You can add the <code>is-up</code> modifier to have a dropdown menu that appears above the dropdown button.</p>
+      </div>
+    </div>
+  </div>
+</div>
+{% endcapture %}
+
 {% include subnav-components.html %}
 
 <section class="section">
@@ -329,6 +349,23 @@ variables:
       </div>
     </div>
 
+    {% include anchor.html name="Dropup" %}
+
+    <div class="content">
+      <p>
+        You can add the <code>is-up</code> modifier to have a dropdown menu that appears above the dropdown button.
+      </p>
+    </div>
+
+    <div class="columns">
+      <div class="column is-half" style="display: flex; align-items: flex-end;">
+        {{dropdown_up_example}}
+      </div>
+      <div class="column is-half">
+        {% highlight html %}{{dropdown_up_example}}{% endhighlight %}
+      </div>
+    </div>
+
     {% include variables.html %}
 
   </div>
diff --git a/sass/components/dropdown.sass b/sass/components/dropdown.sass
index 5ff922df..e8ff4a4b 100644
--- a/sass/components/dropdown.sass
+++ b/sass/components/dropdown.sass
@@ -25,6 +25,12 @@ $dropdown-divider-background-color: $border !default
     .dropdown-menu
       left: auto
       right: 0
+  &.is-up
+    .dropdown-menu
+      top: auto
+      bottom: 100%
+      padding-top: unset
+      padding-bottom: $dropdown-content-offset
 
 .dropdown-menu
   display: none