mirror of
https://github.com/jgthms/bulma.git
synced 2024-10-17 09:04:18 +00:00
Add dropdown button
This commit is contained in:
Jeremy Thomas
parent
3f8c12bfbb
commit
7b395a8ad8
@ -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 => {
|
||||
|
||||
@ -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;
|
||||
}
|
||||
|
||||
|
||||
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 () {
|
||||
|
||||
// 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) {
|
||||
|
||||
@ -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"
|
||||
@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
|
||||
background-color: $white
|
||||
min-height: 100vh
|
||||
padding: 3rem 1.5rem
|
||||
// Responsiveness
|
||||
+desktop
|
||||
|
||||
Loading…
Reference in New Issue
Block a user