From 7b395a8ad8a38c787d728543d70e7e34b57b8f9e Mon Sep 17 00:00:00 2001 From: Jeremy Thomas Date: Thu, 20 Jul 2017 20:01:55 +0100 Subject: [PATCH] Add dropdown button --- docs/_javascript/main.js | 22 +++++- docs/css/bulma-docs.css | 58 +++++++++++++++ docs/documentation/components/dropdown.html | 79 +++++++++++++++++++++ docs/lib/main.js | 22 +++++- sass/components/_all.sass | 3 +- sass/components/dropdown.sass | 64 +++++++++++++++++ sass/layout/section.sass | 1 + 7 files changed, 246 insertions(+), 3 deletions(-) create mode 100644 docs/documentation/components/dropdown.html create mode 100644 sass/components/dropdown.sass diff --git a/docs/_javascript/main.js b/docs/_javascript/main.js index de53afc9..b48aed22 100644 --- a/docs/_javascript/main.js +++ b/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 => { diff --git a/docs/css/bulma-docs.css b/docs/css/bulma-docs.css index 92942ad4..20a8b704 100644 --- a/docs/css/bulma-docs.css +++ b/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; } diff --git a/docs/documentation/components/dropdown.html b/docs/documentation/components/dropdown.html new file mode 100644 index 00000000..51288378 --- /dev/null +++ b/docs/documentation/components/dropdown.html @@ -0,0 +1,79 @@ +--- +layout: documentation +doc-tab: components +doc-subtab: dropdown +--- + +{% capture dropdown_example %} +
+
+ + Click me + + + + +
+
+
+ + Overview + + + Modifiers + + + Grid + + + Form + + + Elements + + + Components + + + Layout + +
+ + More + +
+
+
+{% endcapture %} + +{% capture dropdown_info_example %} +
+
+ + Hover me + + + + +
+
+
+
+

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

+
+
+
+
+{% endcapture %} + +
+
+

Dropdown

+

An interactive dropdown menu for discoverable content

+ +
+ + {{dropdown_example}} + {{dropdown_info_example}} +
+
diff --git a/docs/lib/main.js b/docs/lib/main.js index f73bfd80..66b584b1 100644 --- a/docs/lib/main.js +++ b/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) { diff --git a/sass/components/_all.sass b/sass/components/_all.sass index 3dba893e..ed5276e2 100644 --- a/sass/components/_all.sass +++ b/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" \ No newline at end of file +@import "tabs.sass" diff --git a/sass/components/dropdown.sass b/sass/components/dropdown.sass new file mode 100644 index 00000000..c12cb3f9 --- /dev/null +++ b/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 diff --git a/sass/layout/section.sass b/sass/layout/section.sass index 7139cfb5..5ceea15c 100644 --- a/sass/layout/section.sass +++ b/sass/layout/section.sass @@ -1,5 +1,6 @@ .section background-color: $white + min-height: 100vh padding: 3rem 1.5rem // Responsiveness +desktop