From: Jeremy Thomas Date: Fri, 30 Jun 2017 22:47:22 +0000 (+0100) Subject: Add dropdown options X-Git-Tag: 0.4.3~3^2~10 X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=082d05c8df65ecd04f6441c03b8118ff1583477f;p=thirdparty%2Fbulma.git Add dropdown options --- diff --git a/docs/_includes/navbar.html b/docs/_includes/navbar.html index 617a1b161..c54788028 100644 --- a/docs/_includes/navbar.html +++ b/docs/_includes/navbar.html @@ -17,19 +17,19 @@ - -

- -

diff --git a/docs/_layouts/default.html b/docs/_layouts/default.html index 39dbb71b4..ffac58e76 100644 --- a/docs/_layouts/default.html +++ b/docs/_layouts/default.html @@ -3,5 +3,6 @@ {% include head.html %} {{ content }} + diff --git a/docs/css/bulma-docs.css b/docs/css/bulma-docs.css index 3d5141aba..110b4dd79 100644 --- a/docs/css/bulma-docs.css +++ b/docs/css/bulma-docs.css @@ -4379,6 +4379,10 @@ a.nav-item.is-tab.is-active { transform-origin: left bottom; } +.navbar-menu { + display: none; +} + .navbar-item, .navbar-link { color: #4a4a4a; @@ -4391,6 +4395,7 @@ a.nav-item.is-tab.is-active { a.navbar-item:hover, .navbar-link:hover { background-color: whitesmoke; + color: #363636; } .navbar-item { @@ -4426,6 +4431,10 @@ a.navbar-item:hover, padding-right: 1.5rem; } +.navbar-dropdown a.navbar-item:hover { + background-color: whitesmoke; +} + .navbar-divider { background-color: #dbdbdb; border: none; @@ -4442,6 +4451,9 @@ a.navbar-item:hover, .navbar-menu { padding: 0.5rem 0; } + .navbar-menu.is-active { + display: block; + } } @media screen and (min-width: 1000px) { @@ -4481,9 +4493,13 @@ a.navbar-item:hover, right: 1.125em; top: 50%; } - .navbar-item.has-dropdown:hover .navbar-dropdown { + .navbar-item.is-active .navbar-dropdown, .navbar-item.is-hoverable:hover .navbar-dropdown { display: block; } + a.navbar-item:hover, + .navbar-link:hover { + background-color: transparent; + } .navbar-menu { flex-grow: 1; flex-shrink: 0; @@ -4498,16 +4514,14 @@ a.navbar-item:hover, } .navbar-dropdown { background-color: white; - border-bottom-left-radius: 5px; - border-bottom-right-radius: 5px; - border-top: 1px solid #dbdbdb; - box-shadow: 0 8px 8px rgba(10, 10, 10, 0.1); + border-radius: 5px; + box-shadow: 0 8px 8px rgba(10, 10, 10, 0.1), 0 0 0 1px rgba(10, 10, 10, 0.1); display: none; font-size: 0.875rem; left: 0; min-width: 100%; position: absolute; - top: 100%; + top: calc(100% + (-4px)); z-index: 20; } .navbar-dropdown .navbar-item { diff --git a/docs/index.html b/docs/index.html index 0793b99fe..8b28ed697 100644 --- a/docs/index.html +++ b/docs/index.html @@ -3,13 +3,9 @@ layout: default route: index --- -

- {% include header.html %} -

+{% include navbar.html %} +

diff --git a/docs/javascript/main.js b/docs/javascript/main.js new file mode 100644 index 000000000..9df2d1dde --- /dev/null +++ b/docs/javascript/main.js @@ -0,0 +1,13 @@ +document.addEventListener('DOMContentLoaded', () => { + + const $navBurger = document.getElementById('navBurger'); + const $navMenu = document.getElementById('navMenu'); + + if ($navBurger) { + $navBurger.addEventListener('click', () => { + $navBurger.classList.toggle('is-active'); + $navMenu.classList.toggle('is-active'); + }); + } + +}); diff --git a/sass/components/navbar.sass b/sass/components/navbar.sass index 6cf38e466..d3220a4dc 100644 --- a/sass/components/navbar.sass +++ b/sass/components/navbar.sass @@ -1,8 +1,19 @@ -$navbar-color: $grey-dark !default $navbar-background: $white !default +$navbar-height: 3.25rem !default + +$navbar-item: $grey-dark !default +$navbar-item-hover: $grey-darker !default +$navbar-item-hover-background: $background !default +$navbar-item-desktop-hover-background: transparent !default + $navbar-dropdown-background: $white !default +$navbar-dropdown-offset: -4px !default +$navbar-dropdown-arrow: $link !default +$navbar-dropdown-radius: $radius-large !default -$navbar-height: 3.25rem !default +$navbar-dropdown-item-hover-background: $background !default + +$navbar-divider-background: $border !default .navbar background-color: $navbar-background @@ -18,9 +29,12 @@ $navbar-height: 3.25rem !default +hamburger($navbar-height) margin-left: auto +.navbar-menu + display: none + .navbar-item, .navbar-link - color: $navbar-color + color: $navbar-item display: block line-height: 1.5 padding: 0.5rem 1rem @@ -29,7 +43,8 @@ $navbar-height: 3.25rem !default a.navbar-item, .navbar-link &:hover - background-color: $background + background-color: $navbar-item-hover-background + color: $navbar-item-hover .navbar-item flex-grow: 0 @@ -53,9 +68,11 @@ a.navbar-item, .navbar-item padding-left: 1.5rem padding-right: 1.5rem + a.navbar-item:hover + background-color: $navbar-dropdown-item-hover-background .navbar-divider - background-color: $border + background-color: $navbar-divider-background border: none display: none height: 1px @@ -68,6 +85,8 @@ a.navbar-item, display: flex .navbar-menu padding: 0.5rem 0 + &.is-active + display: block +desktop .navbar, @@ -88,13 +107,18 @@ a.navbar-item, &.has-dropdown align-items: stretch &::after - +arrow($input-arrow) + +arrow($navbar-dropdown-arrow) margin-top: -0.375em right: 1.125em top: 50% - &:hover + &.is-active, + &.is-hoverable:hover .navbar-dropdown display: block + a.navbar-item, + .navbar-link + &:hover + background-color: $navbar-item-desktop-hover-background .navbar-menu flex-grow: 1 flex-shrink: 0 @@ -106,16 +130,14 @@ a.navbar-item, margin-left: auto .navbar-dropdown background-color: $navbar-dropdown-background - border-bottom-left-radius: $radius-large - border-bottom-right-radius: $radius-large - border-top: 1px solid $border - box-shadow: 0 8px 8px rgba($black, 0.1) + border-radius: $navbar-dropdown-radius + box-shadow: 0 8px 8px rgba($black, 0.1), 0 0 0 1px rgba($black, 0.1) display: none font-size: 0.875rem left: 0 min-width: 100% position: absolute - top: 100% + top: calc(100% + (#{$navbar-dropdown-offset})) z-index: 20 .navbar-item padding: 0.375rem 1rem @@ -124,4 +146,4 @@ a.navbar-item, display: block .container > .navbar margin-left: -1rem - margin-right: -1rem \ No newline at end of file + margin-right: -1rem