bigchaindb
/
site
mirror of https://github.com/bigchaindb/site.git
1
0
Fork 0
Code Releases Activity

make dropdowns open on click by default, hover modifier

This commit is contained in:
Matthias Kretschmann 2018-04-06 11:40:26 +02:00
parent 7ee013a8fe
commit 39cd8e703b
Signed by: m
GPG Key ID: 606EEEF3C479A91F
3 changed files with 30 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
_src/_assets/javascripts/bigchain/dropdowns.js
View File

@ -2,8 +2,8 @@
//=include bootstrap/js/dist/util.js
//=include bootstrap/js/dist/dropdown.js
$('body').on('mouseenter mouseleave', '.dropdown', function(e) {
var _d = $(e.target).closest('.dropdown')
$('body').on('mouseenter mouseleave', '.dropdown--hover', function(e) {
var _d = $(e.target).closest('.dropdown--hover')
_d.addClass('show')

4
_src/_assets/styles/bigchain/_dropdowns.scss
View File

@ -84,12 +84,12 @@
}
.dropdown-menu.show,
.dropdown:hover > .dropdown-menu {
.dropdown--hover:hover > .dropdown-menu {
transform: scale(1, 1);
opacity: 1;
}
.dropdown > .dropdown-toggle:active {
.dropdown--hover > .dropdown-toggle:active {
// Without this, clicking will make it sticky
pointer-events: none;
}

27
_src/styleguide.md
View File

@ -313,7 +313,7 @@ Logo can be used with a base class and modifier classes for size & color:
<div class="dropdown">
<a class="dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Hover me
Click me
</a>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" href="#">Action</a>
@ -335,3 +335,28 @@ Logo can be used with a base class and modifier classes for size & color:
</div>
</div>
```
<div class="dropdown dropdown--hover">
<a class="dropdown-toggle" type="button" id="dropdownMenuButton2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Hover me
</a>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton2">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>
<br />
```html
<div class="dropdown dropdown--hover">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown button
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton2">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>
```