From bf0578090d8b050b5476bff38b970d05d238a3b5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ana=20Mar=C3=ADa=20Mart=C3=ADnez=20G=C3=B3mez?= Date: Mon, 11 Jun 2018 11:51:32 +0200 Subject: [PATCH] Add without-arrow class for navbar items (#1919) * Add is-arrowless class for navbar items It removes the arrow in the items of the Navbar. Closes https://github.com/jgthms/bulma/issues/1833 * Add documentation for is-arrowless class * Add is-arrowless to the changelog --- CHANGELOG.md | 1 + docs/documentation/components/navbar.html | 62 +++++++++++++++++++++++ sass/components/navbar.sass | 2 +- 3 files changed, 64 insertions(+), 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 7452f219..7acd90aa 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -7,6 +7,7 @@ * #1884 New `$navbar-burger-color` variable * #1679 Add breakpoint based column gaps * #1905 Fix `modal` for IE11 #1902 +* #1919 New `is-arrowless` class for navbar items ### Bug fixes diff --git a/docs/documentation/components/navbar.html b/docs/documentation/components/navbar.html index 0393ac63..b82097e3 100644 --- a/docs/documentation/components/navbar.html +++ b/docs/documentation/components/navbar.html @@ -952,6 +952,68 @@ document.addEventListener('DOMContentLoaded', function () { + +{% assign vernum = site.data.meta.version | downcase | remove: "." | plus: 0 %} + +{% if vernum >= 72 %} + +

+ Dropdown without arrow +

+ +
+

+ You can remove the arrow in the items of the Navbar by addind the navbar-dropdown class to them. +

+
+ +{% highlight html %} + +{% endhighlight %} + +{% capture navbar_dropup_without_arrow_example %} + +{% endcapture %} + +
+
+
+ {{ navbar_dropup_without_arrow_example }} +
+
+ +
+ {% highlight html %}{{ navbar_dropup_without_arrow_example }}{% endhighlight %} +
+
+ +{% endif %} + +

Styles for the dropdown menu

diff --git a/sass/components/navbar.sass b/sass/components/navbar.sass index 407fd2c5..1e0a7e1e 100644 --- a/sass/components/navbar.sass +++ b/sass/components/navbar.sass @@ -198,7 +198,7 @@ a.navbar-item, flex-grow: 1 flex-shrink: 1 -.navbar-link +.navbar-link:not(.is-arrowless) padding-right: 2.5em &::after +arrow($navbar-dropdown-arrow)