From 28d22d97dffbc91c3cdf537c50043b4c44a46950 Mon Sep 17 00:00:00 2001 From: Jeremy Thomas Date: Mon, 24 Jul 2017 12:34:43 +0200 Subject: [PATCH] Add more dropdown doc --- docs/_javascript/main.js | 2 +- docs/css/bulma-docs.css | 7 +- docs/documentation/components/dropdown.html | 93 ++++++++++++++++++++- docs/lib/main.js | 2 +- sass/components/dropdown.sass | 10 ++- 5 files changed, 104 insertions(+), 10 deletions(-) diff --git a/docs/_javascript/main.js b/docs/_javascript/main.js index 9a45848a..2517f490 100644 --- 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 298efb3d..a4a7dcd0 100644 --- 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 11a544b0..311ea8e8 100644 --- a/docs/documentation/components/dropdown.html +++ b/docs/documentation/components/dropdown.html @@ -5,7 +5,7 @@ doc-subtab: dropdown --- {% capture dropdown_example %} -
+
Dropdown button @@ -22,6 +22,12 @@ doc-subtab: dropdown Other dropdown item + + Active dropdown item + + + Other dropdown item +
With a divider @@ -31,6 +37,34 @@ doc-subtab: dropdown
{% endcapture %} +{% capture dropdown_content_example %} +
+
+ + Content + + + + +
+
+
+
+

You can insert any type of content within the dropdown menu.

+
+
+
+

You simply need to use a <div> instead.

+
+
+ + This is a link + +
+
+
+{% endcapture %} + {% capture dropdown_click_example %}
@@ -157,7 +191,60 @@ doc-subtab: dropdown
- {{dropdown_click_example}} - {{dropdown_info_example}} +
+ +

+ Dropdown content +

+ +
+

+ While the dropdown-item can be used as an anchor link <a>, you can also use a <div> and insert almost any type of content. +

+
+ +
+
+ {{dropdown_content_example}} +
+
+ {% highlight html %}{{dropdown_content_example}}{% endhighlight %} +
+
+ +
+ +

+ Hoverable or Toggable +

+ +
+

+ The dropdown component has 2 additional modifiers +

+
    +
  • + is-hoverable: the dropdown will show up when hovering the dropdown-trigger +
    • +
  • + is-active: the dropdown will show up all the time +
    • +
+
+ +
+

+ While the CSS :hover implementation works perfectly, the is-active class is available for users who want to control the display of the dropdown with JavaScript. +

+
+ +
+
+ {{dropdown_click_example}}{{dropdown_info_example}} +
+
+ {% highlight html %}{{dropdown_click_example}}{{dropdown_info_example}}{% endhighlight %} +
+
diff --git a/docs/lib/main.js b/docs/lib/main.js index 1b970f77..07bd60a9 100644 --- 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 0f919eb9..dffe90f7 100644 --- 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