Add dropdown button

This commit is contained in:
Jeremy Thomas 2017-07-20 20:01:55 +01:00
parent 3f8c12bfbb
commit 7b395a8ad8
7 changed files with 246 additions and 3 deletions

View File

@ -1,9 +1,29 @@
document.addEventListener('DOMContentLoaded', () => { 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 // Toggles
const $burgers = getAll('.burger'); const $burgers = getAll('.burger');
const $fries = getAll('.fries');
if ($burgers.length > 0) { if ($burgers.length > 0) {
$burgers.forEach($el => { $burgers.forEach($el => {

View File

@ -3761,6 +3761,63 @@ input[type="submit"].button {
margin-bottom: 0.75rem; 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 { .level-item {
align-items: center; align-items: center;
display: flex; display: flex;
@ -7444,6 +7501,7 @@ label.panel-block:hover {
.section { .section {
background-color: white; background-color: white;
min-height: 100vh;
padding: 3rem 1.5rem; padding: 3rem 1.5rem;
} }

View File

@ -0,0 +1,79 @@
---
layout: documentation
doc-tab: components
doc-subtab: dropdown
---
{% capture dropdown_example %}
<div class="dropdown">
<div class="dropdown-trigger">
<a class="button is-primary">
<span>Click me</span>
<span class="icon is-small">
<i class="fa fa-angle-down"></i>
</span>
</a>
</div>
<div class="dropdown-container">
<div class="dropdown-content">
<a class="dropdown-item">
Overview
</a>
<a class="dropdown-item">
Modifiers
</a>
<a class="dropdown-item">
Grid
</a>
<a class="dropdown-item">
Form
</a>
<a class="dropdown-item">
Elements
</a>
<a class="dropdown-item">
Components
</a>
<a class="dropdown-item">
Layout
</a>
<hr class="dropdown-divider">
<a class="dropdown-item">
More
</a>
</div>
</div>
</div>
{% endcapture %}
{% capture dropdown_info_example %}
<div class="dropdown is-hoverable">
<div class="dropdown-trigger">
<a class="button is-info">
<span>Hover me</span>
<span class="icon is-small">
<i class="fa fa-angle-down"></i>
</span>
</a>
</div>
<div class="dropdown-container">
<div class="dropdown-content">
<div class="dropdown-item">
<p>You can insert <strong>any type of content</strong> within the dropdown menu.</p>
</div>
</div>
</div>
</div>
{% endcapture %}
<section class="section">
<div class="container">
<h1 class="title">Dropdown</h1>
<h2 class="subtitle">An interactive <strong>dropdown menu</strong> for discoverable content</h2>
<hr>
{{dropdown_example}}
{{dropdown_info_example}}
</div>
</section>

View File

@ -2,10 +2,30 @@
document.addEventListener('DOMContentLoaded', function () { 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 // Toggles
var $burgers = getAll('.burger'); var $burgers = getAll('.burger');
var $fries = getAll('.fries');
if ($burgers.length > 0) { if ($burgers.length > 0) {
$burgers.forEach(function ($el) { $burgers.forEach(function ($el) {

View File

@ -2,6 +2,7 @@
@import "breadcrumb.sass" @import "breadcrumb.sass"
@import "card.sass" @import "card.sass"
@import "dropdown.sass"
@import "level.sass" @import "level.sass"
@import "media.sass" @import "media.sass"
@import "menu.sass" @import "menu.sass"

View File

@ -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

View File

@ -1,5 +1,6 @@
.section .section
background-color: $white background-color: $white
min-height: 100vh
padding: 3rem 1.5rem padding: 3rem 1.5rem
// Responsiveness // Responsiveness
+desktop +desktop