Added .is-up modifier for dropdown. (#1254)

diff --git a/docs/documentation/components/dropdown.html b/docs/documentation/components/dropdown.html
index 0bea49ae5ea6467d4be49c97547b092eae8f2342..32f65594649afcda9c8a2a884b499c369a9bb9c5 100644 (file)
--- 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 5ff922dfa012cc001ccaa505bfd8409b5cac24eb..e8ff4a4b2a201c55f6b443e817109674ac1420e8 100644 (file)
--- 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