Fix #1168

CHANGELOG.md

@@ -11,6 +11,7 @@
 
 ### Issues closed
 
+* #1168 Undefined variable: `$navbar-item`
 * #331 Support for third party icons
 * #930 Remove `vertical-align: top` for icons
 * #735 Font awesome custom `font-size`

docs/_includes/examples/navbar-color.html

@@ -0,0 +1,74 @@
+<nav class="navbar is-{{ include.color }}">
+  <div class="navbar-brand">
+    <a class="navbar-item" href="{{ site.url }}">
+      <img src="{{ site.url }}/images/bulma-logo-white.png" alt="Bulma: a modern CSS framework based on Flexbox" width="112" height="28">
+    </a>
+    <div class="navbar-burger burger" data-target="navMenuColor{{ include.color }}-example">
+      <span></span>
+      <span></span>
+      <span></span>
+    </div>
+  </div>
+
+  <div id="navMenuColor{{ include.color }}-example" class="navbar-menu">
+    <div class="navbar-start">
+      <a class="navbar-item" href="{{ site.url }}/">
+        Home
+      </a>
+      <div class="navbar-item has-dropdown is-hoverable">
+        <a class="navbar-link" href="/documentation/overview/start/">
+          Docs
+        </a>
+        <div class="navbar-dropdown">
+          <a class="navbar-item" href="/documentation/overview/start/">
+            Overview
+          </a>
+          <a class="navbar-item" href="{{ site.url }}/documentation/modifiers/syntax/">
+            Modifiers
+          </a>
+          <a class="navbar-item" href="{{ site.url }}/documentation/columns/basics/">
+            Columns
+          </a>
+          <a class="navbar-item" href="{{ site.url }}/documentation/layout/container/">
+            Layout
+          </a>
+          <a class="navbar-item" href="{{ site.url }}/documentation/form/general/">
+            Form
+          </a>
+          <hr class="navbar-divider">
+          <a class="navbar-item" href="{{ site.url }}/documentation/elements/box/">
+            Elements
+          </a>
+          <a class="navbar-item is-active" href="{{ site.url }}/documentation/components/breadcrumb/">
+            Components
+          </a>
+        </div>
+      </div>
+    </div>
+
+    <div class="navbar-end">
+      <div class="navbar-item">
+        <div class="field is-grouped">
+          <p class="control">
+            <a class="bd-tw-button button" data-social-network="Twitter" data-social-action="tweet" data-social-target="http://localhost:4000" target="_blank" href="https://twitter.com/intent/tweet?text=Bulma: a modern CSS framework based on Flexbox&amp;hashtags=bulmaio&amp;url=http://localhost:4000&amp;via=jgthms">
+              <span class="icon">
+                <i class="fa fa-twitter"></i>
+              </span>
+              <span>
+                Tweet
+              </span>
+            </a>
+          </p>
+          <p class="control">
+            <a class="button is-primary" href="https://github.com/jgthms/bulma/archive/0.5.1.zip">
+              <span class="icon">
+                <i class="fa fa-download"></i>
+              </span>
+              <span>Download</span>
+            </a>
+          </p>
+        </div>
+      </div>
+    </div>
+  </div>
+</nav>

docs/documentation/components/navbar.html

@@ -68,7 +68,7 @@ variables:
 {% capture navbar_brand_example %}
 <nav class="navbar" role="navigation" aria-label="main navigation">
   <div class="navbar-brand">
-    <!-- navbar items, navbar burger ... -->
+    <!-- navbar items, navbar burger... -->
   </div>
 </nav>
 {% endcapture %}
@@ -100,7 +100,7 @@ variables:
 {% capture navbar_menu_example %}
 <nav class="navbar" role="navigation" aria-label="main navigation">
   <div class="navbar-brand">
-    <!-- navbar items, navbar burger ... -->
+    <!-- navbar items, navbar burger... -->
   </div>
   <div class="navbar-menu">
     <!-- navbar start, navbar end -->
@@ -517,129 +517,9 @@ document.addEventListener('DOMContentLoaded', function () {
 });
 {% endcapture %}
 
-{% capture navbar_color_default %}
-<nav class="navbar">
-  <div class="navbar-brand">
-    <a class="navbar-item" href="{{ site.url }}">
-      <img src="{{ site.url }}/images/bulma-logo-white.png" alt="Bulma: a modern CSS framework based on Flexbox" width="112" height="28">
-    </a>
-    <div class="navbar-burger burger" data-target="navMenuColorDefault-example">
-      <span></span>
-      <span></span>
-      <span></span>
-    </div>
-  </div>
-
-  <div id="navMenuColorDefault-example" class="navbar-menu">
-    <div class="navbar-start">
-      <div class="navbar-item has-dropdown is-active">
-        <a class="navbar-link" href="/documentation/overview/start/">
-          Docs
-        </a>
-        <div class="navbar-dropdown">
-          <a class="navbar-item" href="/documentation/overview/start/">
-            Overview
-          </a>
-          <a class="navbar-item" href="{{ site.url }}/documentation/modifiers/syntax/">
-            Modifiers
-          </a>
-          <a class="navbar-item" href="{{ site.url }}/documentation/columns/basics/">
-            Columns
-          </a>
-          <a class="navbar-item" href="{{ site.url }}/documentation/layout/container/">
-            Layout
-          </a>
-          <a class="navbar-item" href="{{ site.url }}/documentation/form/general/">
-            Form
-          </a>
-          <hr class="navbar-divider">
-          <a class="navbar-item" href="{{ site.url }}/documentation/elements/box/">
-            Elements
-          </a>
-          <a class="navbar-item is-active" href="{{ site.url }}/documentation/components/breadcrumb/">
-            Components
-          </a>
-        </div>
-      </div>
-    </div>
-  </div>
-</nav>
-{% endcapture %}
-
-{% capture navbar_color_primary %}
-<nav class="navbar is-info">
-  <div class="navbar-brand">
-    <a class="navbar-item" href="{{ site.url }}">
-      <img src="{{ site.url }}/images/bulma-logo-white.png" alt="Bulma: a modern CSS framework based on Flexbox" width="112" height="28">
-    </a>
-    <div class="navbar-burger burger" data-target="navMenuColor-example">
-      <span></span>
-      <span></span>
-      <span></span>
-    </div>
-  </div>
-
-  <div id="navMenuColor-example" class="navbar-menu">
-    <div class="navbar-start">
-      <a class="navbar-item" href="{{ site.url }}/">
-        Home
-      </a>
-      <div class="navbar-item has-dropdown is-active">
-        <a class="navbar-link" href="/documentation/overview/start/">
-          Docs
-        </a>
-        <div class="navbar-dropdown">
-          <a class="navbar-item" href="/documentation/overview/start/">
-            Overview
-          </a>
-          <a class="navbar-item" href="{{ site.url }}/documentation/modifiers/syntax/">
-            Modifiers
-          </a>
-          <a class="navbar-item" href="{{ site.url }}/documentation/columns/basics/">
-            Columns
-          </a>
-          <a class="navbar-item" href="{{ site.url }}/documentation/layout/container/">
-            Layout
-          </a>
-          <a class="navbar-item" href="{{ site.url }}/documentation/form/general/">
-            Form
-          </a>
-          <hr class="navbar-divider">
-          <a class="navbar-item" href="{{ site.url }}/documentation/elements/box/">
-            Elements
-          </a>
-          <a class="navbar-item is-active" href="{{ site.url }}/documentation/components/breadcrumb/">
-            Components
-          </a>
-        </div>
-      </div>
-    </div>
-
-    <div class="navbar-end">
-      <div class="navbar-item">
-        <div class="field is-grouped">
-          <p class="control">
-            <a class="bd-tw-button button" data-social-network="Twitter" data-social-action="tweet" data-social-target="http://localhost:4000" target="_blank" href="https://twitter.com/intent/tweet?text=Bulma: a modern CSS framework based on Flexbox&amp;hashtags=bulmaio&amp;url=http://localhost:4000&amp;via=jgthms">
-              <span class="icon">
-                <i class="fa fa-twitter"></i>
-              </span>
-              <span>
-                Tweet
-              </span>
-            </a>
-          </p>
-          <p class="control">
-            <a class="button is-primary" href="https://github.com/jgthms/bulma/archive/0.5.1.zip">
-              <span class="icon">
-                <i class="fa fa-download"></i>
-              </span>
-              <span>Download</span>
-            </a>
-          </p>
-        </div>
-      </div>
-    </div>
-  </div>
+{% capture navbar_color_markup %}
+<nav class="navbar is-primary">
+  <!-- navbar brand, navbar menu... -->
 </nav>
 {% endcapture %}
 
@@ -717,18 +597,6 @@ document.addEventListener('DOMContentLoaded', function () {
       </ul>
     </div>
 
-    <div class="bd-example is-paddingless">
-      {{ navbar_color_default }}
-    </div>
-
-    {% highlight html %}{{ navbar_color_default }}{% endhighlight %}
-
-    <div class="bd-example is-paddingless">
-      {{ navbar_color_primary }}
-    </div>
-
-    {% highlight html %}{{ navbar_color_primary }}{% endhighlight %}
-
     {% include anchor.html name="Navbar brand" %}
 
     <div class="content">
@@ -1144,11 +1012,27 @@ document.addEventListener('DOMContentLoaded', function () {
       <span class="tag is-info">0.5.2</span>
     </div>
 
+    {% highlight html %}{{ navbar_color_markup }}{% endhighlight %}
+
+    <div class="bd-example is-paddingless">
+      {% include examples/navbar-color.html color="primary" %}
+    </div>
+
+    <div class="bd-example is-paddingless">
+      {% include examples/navbar-color.html color="info" %}
+    </div>
+
     <div class="bd-example is-paddingless">
-      {{ navbar_color_primary }}
+      {% include examples/navbar-color.html color="success" %}
     </div>
 
-    {% highlight html %}{{ navbar_color_primary }}{% endhighlight %}
+    <div class="bd-example is-paddingless">
+      {% include examples/navbar-color.html color="warning" %}
+    </div>
+
+    <div class="bd-example is-paddingless">
+      {% include examples/navbar-color.html color="danger" %}
+    </div>
 
     {% include variables.html %}
 

sass/components/navbar.sass

@@ -48,23 +48,20 @@ $navbar-divider-background-color: $border !default
         .navbar-start,
         .navbar-end
           & > .navbar-item,
-          & > .navbar-link
+          .navbar-link
             color: $color-invert
           & > a.navbar-item,
-          & > .navbar-link
+          .navbar-link
             &:hover,
             &.is-active
-              background-color: darken($color, 2.5%)
+              background-color: darken($color, 5%)
               color: $color-invert
           .navbar-link
             &::after
               border-color: $color-invert
-        // .navbar-dropdown a.navbar-item:not(.is-active):not(:hover),
-        // .navbar-dropdown .navbar-item:not(a)
-        //   color: $color
         .navbar-item.has-dropdown:hover .navbar-link,
         .navbar-item.has-dropdown.is-active .navbar-link
-          background-color: darken($color, 2.5%)
+          background-color: darken($color, 5%)
           color: $color-invert
         .navbar-dropdown
           a.navbar-item