diff --git a/_src/_assets/javascripts/bigchain/dropdowns.js b/_src/_assets/javascripts/bigchain/dropdowns.js new file mode 100644 index 0000000..0070fd0 --- /dev/null +++ b/_src/_assets/javascripts/bigchain/dropdowns.js @@ -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) +}) diff --git a/_src/_assets/javascripts/page-styleguide.js b/_src/_assets/javascripts/page-styleguide.js new file mode 100644 index 0000000..196ed9f --- /dev/null +++ b/_src/_assets/javascripts/page-styleguide.js @@ -0,0 +1 @@ +//=include bigchain/dropdowns.js diff --git a/_src/_assets/styles/bigchain.scss b/_src/_assets/styles/bigchain.scss index 12dc21b..df98e71 100644 --- a/_src/_assets/styles/bigchain.scss +++ b/_src/_assets/styles/bigchain.scss @@ -36,6 +36,7 @@ @import 'bigchain/timeline'; @import 'bigchain/terminal'; @import 'bigchain/nyan'; +@import 'bigchain/dropdowns'; @import 'bigchain/utilities'; // Content types diff --git a/_src/_assets/styles/bigchain/_dropdowns.scss b/_src/_assets/styles/bigchain/_dropdowns.scss new file mode 100644 index 0000000..e7b9c5c --- /dev/null +++ b/_src/_assets/styles/bigchain/_dropdowns.scss @@ -0,0 +1,82 @@ +// The dropdown wrapper (`
`) +.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; +} diff --git a/_src/_assets/styles/bigchain/_menus.scss b/_src/_assets/styles/bigchain/_menus.scss index 4fd01e9..f7c08b7 100644 --- a/_src/_assets/styles/bigchain/_menus.scss +++ b/_src/_assets/styles/bigchain/_menus.scss @@ -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; diff --git a/_src/_includes/menu-footer.html b/_src/_includes/menu-footer.html index 3803f4d..1cbc740 100644 --- a/_src/_includes/menu-footer.html +++ b/_src/_includes/menu-footer.html @@ -34,6 +34,7 @@ {{ link.title }} + {% endfor %}
diff --git a/_src/_includes/menu-main.html b/_src/_includes/menu-main.html index c0a947b..808eb04 100644 --- a/_src/_includes/menu-main.html +++ b/_src/_includes/menu-main.html @@ -27,7 +27,28 @@ {% assign active = 'active' %} {% endif %} - {{ link.title }} + {% if link.items %} +
+ +
+ {% for item in link.items %} + {% assign active = nil %} + {% if page.url contains item.url %} + {% assign active = 'active' %} + {% endif %} + {{ item.title }} + {% endfor %} +
+
+ {% else %} + {{ link.title }} + {% endif %} {% endfor %} diff --git a/_src/services.html b/_src/services.html index bf83643..dbd1a3b 100644 --- a/_src/services.html +++ b/_src/services.html @@ -124,7 +124,7 @@ contact:
- Get in touch + Get in touch
diff --git a/_src/styleguide.md b/_src/styleguide.md index 8876f39..1e551f3 100644 --- a/_src/styleguide.md +++ b/_src/styleguide.md @@ -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 ``` + +### Dropdowns + +
+ +
+ Action + Another action + Something else here +
+
+
+ +```html +
+ +
+ Action + Another action + Something else here +
+
+``` diff --git a/package.json b/package.json index c07de11..a9fb1be 100644 --- a/package.json +++ b/package.json @@ -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",