diff --git a/docs/_includes/navbar.html b/docs/_includes/navbar.html index 19eebb42..db13302c 100644 --- a/docs/_includes/navbar.html +++ b/docs/_includes/navbar.html @@ -66,7 +66,7 @@

- {{ post.date | date_to_string }} + {{ post.date | date_to_string }}

{{ post.title }}

diff --git a/docs/_layouts/default.html b/docs/_layouts/default.html index 39dbb71b..0521f28a 100644 --- a/docs/_layouts/default.html +++ b/docs/_layouts/default.html @@ -3,5 +3,6 @@ {% include head.html %} {{ content }} + {% include footer.html %} diff --git a/docs/_posts/2017-07-02-new-navbar-component.md b/docs/_posts/2017-07-02-new-navbar-component.md index fea4e2a0..f2916e34 100644 --- a/docs/_posts/2017-07-02-new-navbar-component.md +++ b/docs/_posts/2017-07-02-new-navbar-component.md @@ -1,6 +1,5 @@ --- layout: post title: "RIP nav; long live the navbar!" -published: true -introduction: "

The .control element has been a very versatile container for form controls. But it came at a cost: it was difficult to combine its block characteristics with its inline variations.

" +published: false --- diff --git a/docs/css/bulma-docs.css b/docs/css/bulma-docs.css index b150392f..c6aeec64 100644 --- a/docs/css/bulma-docs.css +++ b/docs/css/bulma-docs.css @@ -4391,13 +4391,9 @@ a.nav-item.is-tab.is-active { } a.navbar-item:hover, -.navbar-link:hover { - background-color: whitesmoke; - color: #0a0a0a; -} - a.navbar-item.is-active, -.navbar-link.is-active { +.navbar-item.has-dropdown:hover .navbar-link, +.navbar-item.has-dropdown.is-active .navbar-link { background-color: whitesmoke; color: #0a0a0a; } @@ -4435,16 +4431,6 @@ a.navbar-item.is-active, padding-right: 1.5rem; } -.navbar-dropdown a.navbar-item:hover { - background-color: whitesmoke; - color: #0a0a0a; -} - -.navbar-dropdown a.navbar-item.is-active { - background-color: whitesmoke; - color: #00d1b2; -} - .navbar-divider { background-color: #dbdbdb; border: none; @@ -4483,9 +4469,17 @@ a.navbar-item.is-active, .navbar.is-transparent .navbar-link.is-active { background-color: transparent; } - .navbar.is-transparent .navbar-item.is-active .navbar-link, .navbar.is-transparent .navbar-item.is-hoverable:hover .navbar-link { + .navbar.is-transparent .navbar-item.has-dropdown.is-active .navbar-link, .navbar.is-transparent .navbar-item.has-dropdown.is-hoverable:hover .navbar-link { background-color: transparent; } + .navbar.is-transparent .navbar-dropdown a.navbar-item:hover { + background-color: whitesmoke; + color: #0a0a0a; + } + .navbar.is-transparent .navbar-dropdown a.navbar-item.is-active { + background-color: whitesmoke; + color: #00d1b2; + } .navbar-burger { display: none; } @@ -4497,10 +4491,6 @@ a.navbar-item.is-active, .navbar-item.has-dropdown { align-items: stretch; } - .navbar-item.is-active .navbar-link, .navbar-item.is-hoverable:hover .navbar-link { - background-color: whitesmoke; - color: #0a0a0a; - } .navbar-item.is-active .navbar-dropdown, .navbar-item.is-hoverable:hover .navbar-dropdown { display: block; } @@ -4509,6 +4499,10 @@ a.navbar-item.is-active, pointer-events: auto; transform: translateY(0); } + a.navbar-item.is-active { + background-color: transparent; + color: #0a0a0a; + } .navbar-link::after { border: 1px solid #00d1b2; border-right: 0; @@ -4557,6 +4551,14 @@ a.navbar-item.is-active, .navbar-dropdown a.navbar-item { padding-right: 3rem; } + .navbar-dropdown a.navbar-item:hover { + background-color: whitesmoke; + color: #0a0a0a; + } + .navbar-dropdown a.navbar-item.is-active { + background-color: whitesmoke; + color: #00d1b2; + } .navbar-dropdown.is-boxed { border-radius: 5px; border-top: none; diff --git a/sass/components/navbar.sass b/sass/components/navbar.sass index 31ee0200..356ff09f 100644 --- a/sass/components/navbar.sass +++ b/sass/components/navbar.sass @@ -5,7 +5,7 @@ $navbar-item: $grey-dark !default $navbar-item-hover: $black !default $navbar-item-hover-background: $background !default $navbar-item-active: $black !default -$navbar-item-active-background: $background !default +$navbar-item-active-background: transparent !default $navbar-dropdown-background: $white !default $navbar-dropdown-border: $border !default @@ -46,14 +46,12 @@ $navbar-divider-background: $border !default padding: 0.5rem 1rem position: relative -a.navbar-item, -.navbar-link - &:hover - background-color: $navbar-item-hover-background - color: $navbar-item-hover - &.is-active - background-color: $navbar-item-active-background - color: $navbar-item-active +a.navbar-item:hover, +a.navbar-item.is-active, +.navbar-item.has-dropdown:hover .navbar-link, +.navbar-item.has-dropdown.is-active .navbar-link + background-color: $navbar-item-hover-background + color: $navbar-item-hover .navbar-item flex-grow: 0 @@ -77,13 +75,6 @@ a.navbar-item, .navbar-item padding-left: 1.5rem padding-right: 1.5rem - a.navbar-item - &:hover - background-color: $navbar-dropdown-item-hover-background - color: $navbar-dropdown-item-hover - &.is-active - background-color: $navbar-dropdown-item-active-background - color: $navbar-dropdown-item-active .navbar-divider background-color: $navbar-divider-background @@ -118,11 +109,19 @@ a.navbar-item, &:hover, &.is-active background-color: transparent - .navbar-item + .navbar-item.has-dropdown &.is-active, &.is-hoverable:hover .navbar-link background-color: transparent + .navbar-dropdown + a.navbar-item + &:hover + background-color: $navbar-dropdown-item-hover-background + color: $navbar-dropdown-item-hover + &.is-active + background-color: $navbar-dropdown-item-active-background + color: $navbar-dropdown-item-active .navbar-burger display: none .navbar-item, @@ -134,15 +133,15 @@ a.navbar-item, align-items: stretch &.is-active, &.is-hoverable:hover - .navbar-link - background-color: $navbar-item-active-background - color: $navbar-item-active .navbar-dropdown display: block &.is-boxed opacity: 1 pointer-events: auto transform: translateY(0) + a.navbar-item.is-active + background-color: $navbar-item-active-background + color: $navbar-item-active .navbar-link &::after +arrow($navbar-dropdown-arrow) @@ -176,6 +175,12 @@ a.navbar-item, white-space: nowrap a.navbar-item padding-right: 3rem + &:hover + background-color: $navbar-dropdown-item-hover-background + color: $navbar-dropdown-item-hover + &.is-active + background-color: $navbar-dropdown-item-active-background + color: $navbar-dropdown-item-active &.is-boxed border-radius: $navbar-dropdown-radius border-top: none