From: Ana María Martínez Gómez <ammartinez@suse.de>
Date: Mon, 11 Jun 2018 09:51:32 +0000 (+0200)
Subject:  Add without-arrow class for navbar items (#1919)
X-Git-Tag: 0.7.2~104
X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=bf0578090d8b050b5476bff38b970d05d238a3b5;p=thirdparty%2Fbulma.git

 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
---

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 7452f219a..7acd90aa3 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 0393ac63e..b82097e39 100644
--- a/docs/documentation/components/navbar.html
+++ b/docs/documentation/components/navbar.html
@@ -952,6 +952,68 @@ document.addEventListener('DOMContentLoaded', function () {
   </div>
 </div>
 
+
+{% assign vernum = site.data.meta.version | downcase | remove: "." | plus: 0 %}
+
+{% if vernum >= 72 %}
+
+<h4 class="title is-4">
+  Dropdown without arrow
+</h4>
+
+<div class="content">
+  <p>
+    You can remove the arrow in the items of the Navbar by addind the <code>navbar-dropdown</code> class to them.
+  </p>
+</div>
+
+{% highlight html %}
+<div class="navbar-item has-dropdown is-hoverable">
+  <a class="navbar-link is-arrowless">
+    Docs
+  </a>
+  <!-- navbar-dropdowns -->
+</div>
+{% endhighlight %}
+
+{% capture navbar_dropup_without_arrow_example %}
+<div class="navbar-item has-dropdown is-hoverable">
+  <a class="navbar-link is-arrowless">
+    Link without arrow
+  </a>
+  <div class="navbar-dropdown">
+    <a class="navbar-item">
+      Overview
+    </a>
+    <a class="navbar-item">
+      Elements
+    </a>
+    <a class="navbar-item">
+      Components
+    </a>
+    <hr class="navbar-divider">
+    <div class="navbar-item">
+      Version {{ site.data.meta.version }}
+    </div>
+  </div>
+</div>
+{% endcapture %}
+
+<div class="columns">
+  <div class="column">
+    <div class="bd-example is-paddingless">
+      {{ navbar_dropup_without_arrow_example }}
+    </div>
+  </div>
+
+  <div class="column">
+    {% highlight html %}{{ navbar_dropup_without_arrow_example }}{% endhighlight %}
+  </div>
+</div>
+
+{% endif %}
+
+
 <h4 class="title is-4">
   Styles for the dropdown menu
 </h4>
diff --git a/sass/components/navbar.sass b/sass/components/navbar.sass
index 407fd2c53..1e0a7e1e8 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)