Add more dropdown doc

diff --git a/docs/_javascript/main.js b/docs/_javascript/main.js
index 9a45848aa1bca5d2b20776dad1719c49e5cbf1b1..2517f490f88ae7f3c11d9ad78eb7d7a7faa51a3d 100644 (file)
--- a/docs/_javascript/main.js
+++ b/docs/_javascript/main.js
@@ -2,7 +2,7 @@ document.addEventListener('DOMContentLoaded', () => {
 
   // Dropdowns
 
-  const $dropdowns = getAll('.dropdown');
+  const $dropdowns = getAll('.dropdown:not(.is-hoverable)');
 
   if ($dropdowns.length > 0) {
     $dropdowns.forEach($el => {

diff --git a/docs/css/bulma-docs.css b/docs/css/bulma-docs.css
index 298efb3d45525f7b318aceef0a5c7630b8088177..a4a7dcd0faa8d082b70842dddcbb450ebe63ca68 100644 (file)
--- a/docs/css/bulma-docs.css
+++ b/docs/css/bulma-docs.css
@@ -3816,11 +3816,16 @@ a.dropdown-item {
   white-space: nowrap;
 }
 
-a.dropdown-item:hover, a.dropdown-item.is-active {
+a.dropdown-item:hover {
   background-color: whitesmoke;
   color: #0a0a0a;
 }
 
+a.dropdown-item.is-active {
+  background-color: #00d1b2;
+  color: #fff;
+}
+
 .dropdown-divider {
   background-color: #dbdbdb;
   border: none;

diff --git a/docs/documentation/components/dropdown.html b/docs/documentation/components/dropdown.html
index 11a544b0e59f0ab7e243a76bd54f362dfb914017..311ea8e875fd030bbaabecbc81fc0329d5a6aded 100644 (file)
--- a/docs/documentation/components/dropdown.html
+++ b/docs/documentation/components/dropdown.html
@@ -5,7 +5,7 @@ doc-subtab: dropdown
 ---
 
 {% capture dropdown_example %}
-<div class="dropdown">
+<div class="dropdown is-active">
   <div class="dropdown-trigger">
     <a class="button">
       <span>Dropdown button</span>
@@ -22,6 +22,12 @@ doc-subtab: dropdown
       <a class="dropdown-item">
         Other dropdown item
       </a>
+      <a class="dropdown-item is-active">
+        Active dropdown item
+      </a>
+      <a class="dropdown-item">
+        Other dropdown item
+      </a>
       <hr class="dropdown-divider">
       <a class="dropdown-item">
         With a divider
@@ -31,6 +37,34 @@ doc-subtab: dropdown
 </div>
 {% endcapture %}
 
+{% capture dropdown_content_example %}
+<div class="dropdown is-active">
+  <div class="dropdown-trigger">
+    <a class="button is-info">
+      <span>Content</span>
+      <span class="icon is-small">
+        <i class="fa fa-angle-down"></i>
+      </span>
+    </a>
+  </div>
+  <div class="dropdown-menu">
+    <div class="dropdown-content">
+      <div class="dropdown-item">
+        <p>You can insert <strong>any type of content</strong> within the dropdown menu.</p>
+      </div>
+      <hr class="dropdown-divider">
+      <div class="dropdown-item">
+        <p>You simply need to use a <code>&lt;div&gt;</code> instead.</p>
+      </div>
+      <hr class="dropdown-divider">
+      <a class="dropdown-item">
+        This is a link
+      </a>
+    </div>
+  </div>
+</div>
+{% endcapture %}
+
 {% capture dropdown_click_example %}
 <div class="dropdown">
   <div class="dropdown-trigger">
@@ -157,7 +191,60 @@ doc-subtab: dropdown
       </div>
     </div>
 
-    {{dropdown_click_example}}
-    {{dropdown_info_example}}
+    <hr>
+
+    <h3 class="title">
+      Dropdown content
+    </h3>
+
+    <div class="content">
+      <p>
+        While the <code>dropdown-item</code> can be used as an anchor link <code>&lt;a&gt;</code>, you can also use a <code>&lt;div&gt;</code> and insert almost <strong>any type of content</strong>.
+      </p>
+    </div>
+
+    <div class="columns">
+      <div class="column is-half">
+        {{dropdown_content_example}}
+      </div>
+      <div class="column is-half">
+        {% highlight html %}{{dropdown_content_example}}{% endhighlight %}
+      </div>
+    </div>
+
+    <hr>
+
+    <h3 class="title">
+      Hoverable or Toggable
+    </h3>
+
+    <div class="content">
+      <p>
+        The <code>dropdown</code> component has <strong>2 additional modifiers</strong>
+      </p>
+      <ul>
+        <li>
+          <code>is-hoverable</code>: the dropdown will show up when <strong>hovering</strong> the <code>dropdown-trigger</code>
+        </li>
+        <li>
+          <code>is-active</code>: the dropdown will show up <strong>all the time</strong>
+        </li>
+      </ul>
+    </div>
+
+    <div class="message is-success">
+      <p class="message-body">
+        While the CSS <code>:hover</code> implementation works perfectly, the <code>is-active</code> class is available for users who want to control the display of the dropdown with <strong>JavaScript</strong>.
+      </p>
+    </div>
+
+    <div class="columns">
+      <div class="column is-half">
+        {{dropdown_click_example}}{{dropdown_info_example}}
+      </div>
+      <div class="column is-half">
+        {% highlight html %}{{dropdown_click_example}}{{dropdown_info_example}}{% endhighlight %}
+      </div>
+    </div>
   </div>
 </section>

diff --git a/docs/lib/main.js b/docs/lib/main.js
index 1b970f77adad9f60de2946b7a9d1ce8cc04a9dfa..07bd60a9d10d38fb56b3794e8d6dd493ae0a3110 100644 (file)
--- a/docs/lib/main.js
+++ b/docs/lib/main.js
@@ -4,7 +4,7 @@ document.addEventListener('DOMContentLoaded', function () {
 
   // Dropdowns
 
-  var $dropdowns = getAll('.dropdown');
+  var $dropdowns = getAll('.dropdown:not(.is-hoverable)');
 
   if ($dropdowns.length > 0) {
     $dropdowns.forEach(function ($el) {

diff --git a/sass/components/dropdown.sass b/sass/components/dropdown.sass
index 0f919eb9924e605403ed721a34f092fd3377b6af..dffe90f7c630c760b2a4fd835f9f15aba76e896f 100644 (file)
--- a/sass/components/dropdown.sass
+++ b/sass/components/dropdown.sass
@@ -8,8 +8,8 @@ $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-item-active: $primary-invert !default
+$dropdown-item-active-background: $primary !default
 
 $dropdown-divider-background: $border !default
 
@@ -51,10 +51,12 @@ $dropdown-divider-background: $border !default
 a.dropdown-item
   padding-right: 3rem
   white-space: nowrap
-  &:hover,
-  &.is-active
+  &:hover
     background-color: $dropdown-item-hover-background
     color: $dropdown-item-hover
+  &.is-active
+    background-color: $dropdown-item-active-background
+    color: $dropdown-item-active
 
 .dropdown-divider
   background-color: $dropdown-divider-background