mirror of
https://github.com/jgthms/bulma.git
synced 2024-11-14 11:14:24 +00:00
Add dropdown button
This commit is contained in:
Jeremy Thomas
parent
3f8c12bfbb
commit
7b395a8ad8
@ -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 => {
|
||||||
|
|||||||
@ -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;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
79
docs/documentation/components/dropdown.html
Normal file
79
docs/documentation/components/dropdown.html
Normal 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>
|
||||||
@ -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) {
|
||||||
|
|||||||
@ -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"
|
||||||
@ -11,4 +12,4 @@
|
|||||||
@import "navbar.sass"
|
@import "navbar.sass"
|
||||||
@import "pagination.sass"
|
@import "pagination.sass"
|
||||||
@import "panel.sass"
|
@import "panel.sass"
|
||||||
@import "tabs.sass"
|
@import "tabs.sass"
|
||||||
|
|||||||
64
sass/components/dropdown.sass
Normal file
64
sass/components/dropdown.sass
Normal 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
|
||||||
@ -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
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user