Add feature: is-expanded to navbar-item (#1320)

This commit is contained in:
Donát Nagy 2017-10-26 13:12:25 +02:00 committed by Jeremy Thomas
parent 8792984f8e
commit cddf8712b3
3 changed files with 7 additions and 0 deletions

View File

@ -7,6 +7,7 @@
* 🎉 [List of buttons](https://bulma.io/documentation/elements/button/#list-of-buttons) * 🎉 [List of buttons](https://bulma.io/documentation/elements/button/#list-of-buttons)
* 🎉 #1235 Support for five column grid: `.is-one-fifth, .is-two-fifths, .is-three-fifths, .is-four-fifths` * 🎉 #1235 Support for five column grid: `.is-one-fifth, .is-two-fifths, .is-three-fifths, .is-four-fifths`
* 🎉 #1287 New `.is-invisible` helper * 🎉 #1287 New `.is-invisible` helper
* 🎉 #1255 New `.is-expanded` modifier for `navbar-item`
### Improvements ### Improvements

View File

@ -736,6 +736,9 @@ document.addEventListener('DOMContentLoaded', function () {
<code>navbar-dropdown</code> <code>navbar-dropdown</code>
</li> </li>
</ul> </ul>
<p>
You can add the modifier class <code>is-expanded</code> to turn it into a full-width element.
</p>
</div> </div>
{% include anchor.html name="Transparent navbar" %} {% include anchor.html name="Transparent navbar" %}

View File

@ -130,6 +130,9 @@ a.navbar-item,
max-height: $navbar-item-img-max-height max-height: $navbar-item-img-max-height
&.has-dropdown &.has-dropdown
padding: 0 padding: 0
&.is-expanded
flex-grow: 1
flex-shrink: 1
&.is-tab &.is-tab
border-bottom: 1px solid transparent border-bottom: 1px solid transparent
min-height: $navbar-height min-height: $navbar-height