mirror of
https://github.com/bigchaindb/site.git
synced 2024-11-22 01:36:55 +01:00
dropdown menu
This commit is contained in:
parent
e1ef5a436e
commit
029f7812ed
GPG Key ID:
606EEEF3C479A91F
13
_src/_assets/javascripts/bigchain/dropdowns.js
Normal file
13
_src/_assets/javascripts/bigchain/dropdowns.js
Normal file
@ -0,0 +1,13 @@
|
||||
//=include popper.js/dist/umd/popper.js
|
||||
//=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')
|
||||
|
||||
_d.addClass('show')
|
||||
|
||||
setTimeout(function () {
|
||||
_d[_d.is(':hover') ? 'addClass' : 'removeClass']('show')
|
||||
}, 300)
|
||||
})
|
||||
1
_src/_assets/javascripts/page-styleguide.js
Normal file
1
_src/_assets/javascripts/page-styleguide.js
Normal file
@ -0,0 +1 @@
|
||||
//=include bigchain/dropdowns.js
|
||||
@ -36,6 +36,7 @@
|
||||
@import 'bigchain/timeline';
|
||||
@import 'bigchain/terminal';
|
||||
@import 'bigchain/nyan';
|
||||
@import 'bigchain/dropdowns';
|
||||
@import 'bigchain/utilities';
|
||||
|
||||
// Content types
|
||||
|
||||
82
_src/_assets/styles/bigchain/_dropdowns.scss
Normal file
82
_src/_assets/styles/bigchain/_dropdowns.scss
Normal file
@ -0,0 +1,82 @@
|
||||
// The dropdown wrapper (`<div>`)
|
||||
.dropdown {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.dropdown-toggle {
|
||||
&:after {
|
||||
content: '';
|
||||
display: inline-block;
|
||||
height: 0;
|
||||
width: 0;
|
||||
border: .3rem solid transparent;
|
||||
border-top-color: inherit;
|
||||
margin-bottom: -.2rem;
|
||||
}
|
||||
}
|
||||
|
||||
// The dropdown menu
|
||||
.dropdown-menu {
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
left: 0;
|
||||
z-index: 10;
|
||||
display: none;
|
||||
float: left;
|
||||
min-width: 10rem;
|
||||
padding: $spacer / 4 0;
|
||||
margin: 0;
|
||||
font-size: $font-size-base;
|
||||
color: $body-bg;
|
||||
text-align: left;
|
||||
list-style: none;
|
||||
border-radius: $border-radius;
|
||||
box-shadow: 0 3px 10px rgba(0, 0, 0, .3);
|
||||
background: $gray-dark;
|
||||
background-clip: padding-box;
|
||||
border: 0;
|
||||
max-height: 20rem;
|
||||
overflow-y: auto;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
|
||||
@media (max-width: 27rem), (max-height: 27rem) {
|
||||
max-height: 11.25rem;
|
||||
}
|
||||
}
|
||||
|
||||
// Links, buttons, and more within the dropdown menu
|
||||
.dropdown-item {
|
||||
display: block;
|
||||
width: 100%;
|
||||
padding: $spacer / 2 $spacer;
|
||||
clear: both;
|
||||
font-weight: $font-weight-normal;
|
||||
color: $brand-main-gray-light;
|
||||
text-align: inherit;
|
||||
white-space: nowrap;
|
||||
background-color: transparent;
|
||||
border: 0;
|
||||
box-shadow: none;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
&.active {
|
||||
background: $brand-main-gray-light;
|
||||
color: $gray-dark;
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown-menu.show,
|
||||
.dropdown:hover > .dropdown-menu {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.dropdown > .dropdown-toggle:active {
|
||||
// Without this, clicking will make it sticky
|
||||
pointer-events: none;
|
||||
}
|
||||
@ -5,6 +5,10 @@
|
||||
width: 100%;
|
||||
align-self: flex-start;
|
||||
text-align: left;
|
||||
|
||||
.dropdown-menu {
|
||||
position: absolute;
|
||||
}
|
||||
}
|
||||
|
||||
.menu__link {
|
||||
@ -26,7 +30,7 @@
|
||||
}
|
||||
|
||||
// link line
|
||||
&:after {
|
||||
&:not(.dropdown-toggle):after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
height: 2px;
|
||||
|
||||
@ -34,6 +34,7 @@
|
||||
|
||||
<a class="menu__link {{ active }} js-tracking-menu" href="{{ link.url }}">{{ link.title }}</a>
|
||||
|
||||
|
||||
{% endfor %}
|
||||
</div>
|
||||
|
||||
|
||||
@ -27,7 +27,28 @@
|
||||
{% assign active = 'active' %}
|
||||
{% endif %}
|
||||
|
||||
<a class="menu__link {{ active }} js-tracking-menu" href="{{ link.url }}">{{ link.title }}</a>
|
||||
{% if link.items %}
|
||||
<div class="dropdown">
|
||||
<a class="menu__link {{ active }} js-tracking-menu dropdown-toggle"
|
||||
data-toggle="dropdown"
|
||||
aria-haspopup="true"
|
||||
aria-expanded="false"
|
||||
id="dropdownMenuButton"
|
||||
href="{{ link.url }}">{{ link.title }}
|
||||
</a>
|
||||
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
|
||||
{% for item in link.items %}
|
||||
{% assign active = nil %}
|
||||
{% if page.url contains item.url %}
|
||||
{% assign active = 'active' %}
|
||||
{% endif %}
|
||||
<a class="dropdown-item {{ active }}" href="{{ item.url }}">{{ item.title }}</a>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
{% else %}
|
||||
<a class="menu__link {{ active }} js-tracking-menu" href="{{ link.url }}">{{ link.title }}</a>
|
||||
{% endif %}
|
||||
|
||||
{% endfor %}
|
||||
</div>
|
||||
|
||||
@ -124,7 +124,7 @@ contact:
|
||||
</div>
|
||||
|
||||
<div class="actions">
|
||||
<a class="btn btn-blue" href="#contact">Get in touch</a>
|
||||
<a class="btn btn-blue" data-scroll href="#contact">Get in touch</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
@ -3,6 +3,8 @@ layout: page
|
||||
|
||||
title: Style Guide
|
||||
sitemap: false
|
||||
|
||||
js: page-styleguide.min.js
|
||||
---
|
||||
|
||||
## Colors
|
||||
@ -319,3 +321,30 @@ Logo can be used with a base class and modifier classes for size & color:
|
||||
Lucas ipsum dolor sit amet kenobi ubese yaka weequay aka trioculus
|
||||
</div>
|
||||
```
|
||||
|
||||
### Dropdowns
|
||||
|
||||
<div class="dropdown">
|
||||
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
Dropdown button
|
||||
</button>
|
||||
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
|
||||
<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">
|
||||
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
Dropdown button
|
||||
</button>
|
||||
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
|
||||
<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>
|
||||
```
|
||||
|
||||
@ -26,6 +26,7 @@
|
||||
],
|
||||
"dependencies": {
|
||||
"bigchaindb-driver": "^4.0.0",
|
||||
"bootstrap": "^4.0.0",
|
||||
"clipboard": "^2.0.0",
|
||||
"gumshoe": "github:cferdinandi/gumshoe",
|
||||
"is-in-viewport": "^3.0.0",
|
||||
@ -33,6 +34,7 @@
|
||||
"normalize-css": "^2.3.1",
|
||||
"normalize-opentype.css": "^0.2.4",
|
||||
"parsleyjs": "^2.8.1",
|
||||
"popper.js": "^1.14.3",
|
||||
"select2": "^4.0.5",
|
||||
"smooth-scroll": "^12.1.5",
|
||||
"svg4everybody": "^2.1.9",
|
||||
|
||||
Loading…
Reference in New Issue
Block a user