From: Jeremy Thomas <bbxdesign@gmail.com>
Date: Sat, 9 Sep 2017 21:56:54 +0000 (+0200)
Subject: Navbar colors docs
X-Git-Tag: 0.5.2~5
X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=83892a21e3f4888b64f8a4a5fa25f978393e8e40;p=thirdparty%2Fbulma.git

Navbar colors docs
---

diff --git a/docs/_sass/highlight.sass b/docs/_sass/highlight.sass
index 343201ac7..c12b790e2 100644
--- a/docs/_sass/highlight.sass
+++ b/docs/_sass/highlight.sass
@@ -126,3 +126,6 @@
   margin-left: 0
   margin-right: 0
   text-align: left
+
+.content li .highlight
+  margin: 0
diff --git a/docs/css/bulma-docs.css b/docs/css/bulma-docs.css
index ef9d53027..1b8b01d97 100644
--- a/docs/css/bulma-docs.css
+++ b/docs/css/bulma-docs.css
@@ -2262,10 +2262,19 @@ a.box:active {
 }
 
 .content figure {
-  margin: 2em;
+  margin-left: 2em;
+  margin-right: 2em;
   text-align: center;
 }
 
+.content figure:not(:first-child) {
+  margin-top: 2em;
+}
+
+.content figure:not(:last-child) {
+  margin-bottom: 2em;
+}
+
 .content figure img {
   display: inline-block;
 }
@@ -5403,7 +5412,7 @@ a.dropdown-item.is-active {
 }
 
 .nav-toggle span {
-  background-color: #4a4a4a;
+  background-color: currentColor;
   display: block;
   height: 1px;
   left: 50%;
@@ -5428,11 +5437,7 @@ a.dropdown-item.is-active {
 }
 
 .nav-toggle:hover {
-  background-color: whitesmoke;
-}
-
-.nav-toggle.is-active span {
-  background-color: #00d1b2;
+  background-color: rgba(0, 0, 0, 0.05);
 }
 
 .nav-toggle.is-active span:nth-child(1) {
@@ -5624,31 +5629,42 @@ a.nav-item:not(.button).is-tab.is-active {
   color: #0a0a0a;
 }
 
-.navbar.is-white .navbar-item,
-.navbar.is-white .navbar-link {
-  color: #0a0a0a;
-}
-
-.navbar.is-white a.navbar-item:hover, .navbar.is-white a.navbar-item.is-active,
-.navbar.is-white .navbar-link:hover,
-.navbar.is-white .navbar-link.is-active {
-  background-color: #f9f9f9;
-  color: #0a0a0a;
-}
-
 @media screen and (min-width: 1024px) {
-  .navbar.is-white .navbar-link::after {
-    border-color: #0a0a0a;
+  .navbar.is-white .navbar-brand > .navbar-item,
+  .navbar.is-white .navbar-brand > .navbar-link,
+  .navbar.is-white .navbar-start > .navbar-item,
+  .navbar.is-white .navbar-start > .navbar-link,
+  .navbar.is-white .navbar-end > .navbar-item,
+  .navbar.is-white .navbar-end > .navbar-link {
+    color: #0a0a0a;
   }
-  .navbar.is-white .navbar-dropdown a.navbar-item:not(.is-active):not(:hover),
-  .navbar.is-white .navbar-dropdown .navbar-item:not(a) {
-    color: white;
+  .navbar.is-white .navbar-brand > a.navbar-item:hover, .navbar.is-white .navbar-brand > a.navbar-item.is-active,
+  .navbar.is-white .navbar-brand > .navbar-link:hover,
+  .navbar.is-white .navbar-brand > .navbar-link.is-active,
+  .navbar.is-white .navbar-start > a.navbar-item:hover,
+  .navbar.is-white .navbar-start > a.navbar-item.is-active,
+  .navbar.is-white .navbar-start > .navbar-link:hover,
+  .navbar.is-white .navbar-start > .navbar-link.is-active,
+  .navbar.is-white .navbar-end > a.navbar-item:hover,
+  .navbar.is-white .navbar-end > a.navbar-item.is-active,
+  .navbar.is-white .navbar-end > .navbar-link:hover,
+  .navbar.is-white .navbar-end > .navbar-link.is-active {
+    background-color: #f9f9f9;
+    color: #0a0a0a;
+  }
+  .navbar.is-white .navbar-brand .navbar-link::after,
+  .navbar.is-white .navbar-start .navbar-link::after,
+  .navbar.is-white .navbar-end .navbar-link::after {
+    border-color: #0a0a0a;
   }
   .navbar.is-white .navbar-item.has-dropdown:hover .navbar-link,
   .navbar.is-white .navbar-item.has-dropdown.is-active .navbar-link {
     background-color: #f9f9f9;
     color: #0a0a0a;
   }
+  .navbar.is-white .navbar-dropdown a.navbar-item.is-active {
+    color: white;
+  }
 }
 
 .navbar.is-black {
@@ -5656,31 +5672,42 @@ a.nav-item:not(.button).is-tab.is-active {
   color: white;
 }
 
-.navbar.is-black .navbar-item,
-.navbar.is-black .navbar-link {
-  color: white;
-}
-
-.navbar.is-black a.navbar-item:hover, .navbar.is-black a.navbar-item.is-active,
-.navbar.is-black .navbar-link:hover,
-.navbar.is-black .navbar-link.is-active {
-  background-color: #040404;
-  color: white;
-}
-
 @media screen and (min-width: 1024px) {
-  .navbar.is-black .navbar-link::after {
-    border-color: white;
+  .navbar.is-black .navbar-brand > .navbar-item,
+  .navbar.is-black .navbar-brand > .navbar-link,
+  .navbar.is-black .navbar-start > .navbar-item,
+  .navbar.is-black .navbar-start > .navbar-link,
+  .navbar.is-black .navbar-end > .navbar-item,
+  .navbar.is-black .navbar-end > .navbar-link {
+    color: white;
   }
-  .navbar.is-black .navbar-dropdown a.navbar-item:not(.is-active):not(:hover),
-  .navbar.is-black .navbar-dropdown .navbar-item:not(a) {
-    color: #0a0a0a;
+  .navbar.is-black .navbar-brand > a.navbar-item:hover, .navbar.is-black .navbar-brand > a.navbar-item.is-active,
+  .navbar.is-black .navbar-brand > .navbar-link:hover,
+  .navbar.is-black .navbar-brand > .navbar-link.is-active,
+  .navbar.is-black .navbar-start > a.navbar-item:hover,
+  .navbar.is-black .navbar-start > a.navbar-item.is-active,
+  .navbar.is-black .navbar-start > .navbar-link:hover,
+  .navbar.is-black .navbar-start > .navbar-link.is-active,
+  .navbar.is-black .navbar-end > a.navbar-item:hover,
+  .navbar.is-black .navbar-end > a.navbar-item.is-active,
+  .navbar.is-black .navbar-end > .navbar-link:hover,
+  .navbar.is-black .navbar-end > .navbar-link.is-active {
+    background-color: #040404;
+    color: white;
+  }
+  .navbar.is-black .navbar-brand .navbar-link::after,
+  .navbar.is-black .navbar-start .navbar-link::after,
+  .navbar.is-black .navbar-end .navbar-link::after {
+    border-color: white;
   }
   .navbar.is-black .navbar-item.has-dropdown:hover .navbar-link,
   .navbar.is-black .navbar-item.has-dropdown.is-active .navbar-link {
     background-color: #040404;
     color: white;
   }
+  .navbar.is-black .navbar-dropdown a.navbar-item.is-active {
+    color: #0a0a0a;
+  }
 }
 
 .navbar.is-light {
@@ -5688,31 +5715,42 @@ a.nav-item:not(.button).is-tab.is-active {
   color: #363636;
 }
 
-.navbar.is-light .navbar-item,
-.navbar.is-light .navbar-link {
-  color: #363636;
-}
-
-.navbar.is-light a.navbar-item:hover, .navbar.is-light a.navbar-item.is-active,
-.navbar.is-light .navbar-link:hover,
-.navbar.is-light .navbar-link.is-active {
-  background-color: #eeeeee;
-  color: #363636;
-}
-
 @media screen and (min-width: 1024px) {
-  .navbar.is-light .navbar-link::after {
-    border-color: #363636;
+  .navbar.is-light .navbar-brand > .navbar-item,
+  .navbar.is-light .navbar-brand > .navbar-link,
+  .navbar.is-light .navbar-start > .navbar-item,
+  .navbar.is-light .navbar-start > .navbar-link,
+  .navbar.is-light .navbar-end > .navbar-item,
+  .navbar.is-light .navbar-end > .navbar-link {
+    color: #363636;
   }
-  .navbar.is-light .navbar-dropdown a.navbar-item:not(.is-active):not(:hover),
-  .navbar.is-light .navbar-dropdown .navbar-item:not(a) {
-    color: whitesmoke;
+  .navbar.is-light .navbar-brand > a.navbar-item:hover, .navbar.is-light .navbar-brand > a.navbar-item.is-active,
+  .navbar.is-light .navbar-brand > .navbar-link:hover,
+  .navbar.is-light .navbar-brand > .navbar-link.is-active,
+  .navbar.is-light .navbar-start > a.navbar-item:hover,
+  .navbar.is-light .navbar-start > a.navbar-item.is-active,
+  .navbar.is-light .navbar-start > .navbar-link:hover,
+  .navbar.is-light .navbar-start > .navbar-link.is-active,
+  .navbar.is-light .navbar-end > a.navbar-item:hover,
+  .navbar.is-light .navbar-end > a.navbar-item.is-active,
+  .navbar.is-light .navbar-end > .navbar-link:hover,
+  .navbar.is-light .navbar-end > .navbar-link.is-active {
+    background-color: #eeeeee;
+    color: #363636;
+  }
+  .navbar.is-light .navbar-brand .navbar-link::after,
+  .navbar.is-light .navbar-start .navbar-link::after,
+  .navbar.is-light .navbar-end .navbar-link::after {
+    border-color: #363636;
   }
   .navbar.is-light .navbar-item.has-dropdown:hover .navbar-link,
   .navbar.is-light .navbar-item.has-dropdown.is-active .navbar-link {
     background-color: #eeeeee;
     color: #363636;
   }
+  .navbar.is-light .navbar-dropdown a.navbar-item.is-active {
+    color: whitesmoke;
+  }
 }
 
 .navbar.is-dark {
@@ -5720,31 +5758,42 @@ a.nav-item:not(.button).is-tab.is-active {
   color: whitesmoke;
 }
 
-.navbar.is-dark .navbar-item,
-.navbar.is-dark .navbar-link {
-  color: whitesmoke;
-}
-
-.navbar.is-dark a.navbar-item:hover, .navbar.is-dark a.navbar-item.is-active,
-.navbar.is-dark .navbar-link:hover,
-.navbar.is-dark .navbar-link.is-active {
-  background-color: #2f2f2f;
-  color: whitesmoke;
-}
-
 @media screen and (min-width: 1024px) {
-  .navbar.is-dark .navbar-link::after {
-    border-color: whitesmoke;
+  .navbar.is-dark .navbar-brand > .navbar-item,
+  .navbar.is-dark .navbar-brand > .navbar-link,
+  .navbar.is-dark .navbar-start > .navbar-item,
+  .navbar.is-dark .navbar-start > .navbar-link,
+  .navbar.is-dark .navbar-end > .navbar-item,
+  .navbar.is-dark .navbar-end > .navbar-link {
+    color: whitesmoke;
   }
-  .navbar.is-dark .navbar-dropdown a.navbar-item:not(.is-active):not(:hover),
-  .navbar.is-dark .navbar-dropdown .navbar-item:not(a) {
-    color: #363636;
+  .navbar.is-dark .navbar-brand > a.navbar-item:hover, .navbar.is-dark .navbar-brand > a.navbar-item.is-active,
+  .navbar.is-dark .navbar-brand > .navbar-link:hover,
+  .navbar.is-dark .navbar-brand > .navbar-link.is-active,
+  .navbar.is-dark .navbar-start > a.navbar-item:hover,
+  .navbar.is-dark .navbar-start > a.navbar-item.is-active,
+  .navbar.is-dark .navbar-start > .navbar-link:hover,
+  .navbar.is-dark .navbar-start > .navbar-link.is-active,
+  .navbar.is-dark .navbar-end > a.navbar-item:hover,
+  .navbar.is-dark .navbar-end > a.navbar-item.is-active,
+  .navbar.is-dark .navbar-end > .navbar-link:hover,
+  .navbar.is-dark .navbar-end > .navbar-link.is-active {
+    background-color: #2f2f2f;
+    color: whitesmoke;
+  }
+  .navbar.is-dark .navbar-brand .navbar-link::after,
+  .navbar.is-dark .navbar-start .navbar-link::after,
+  .navbar.is-dark .navbar-end .navbar-link::after {
+    border-color: whitesmoke;
   }
   .navbar.is-dark .navbar-item.has-dropdown:hover .navbar-link,
   .navbar.is-dark .navbar-item.has-dropdown.is-active .navbar-link {
     background-color: #2f2f2f;
     color: whitesmoke;
   }
+  .navbar.is-dark .navbar-dropdown a.navbar-item.is-active {
+    color: #363636;
+  }
 }
 
 .navbar.is-primary {
@@ -5752,31 +5801,42 @@ a.nav-item:not(.button).is-tab.is-active {
   color: #fff;
 }
 
-.navbar.is-primary .navbar-item,
-.navbar.is-primary .navbar-link {
-  color: #fff;
-}
-
-.navbar.is-primary a.navbar-item:hover, .navbar.is-primary a.navbar-item.is-active,
-.navbar.is-primary .navbar-link:hover,
-.navbar.is-primary .navbar-link.is-active {
-  background-color: #00c4a7;
-  color: #fff;
-}
-
 @media screen and (min-width: 1024px) {
-  .navbar.is-primary .navbar-link::after {
-    border-color: #fff;
+  .navbar.is-primary .navbar-brand > .navbar-item,
+  .navbar.is-primary .navbar-brand > .navbar-link,
+  .navbar.is-primary .navbar-start > .navbar-item,
+  .navbar.is-primary .navbar-start > .navbar-link,
+  .navbar.is-primary .navbar-end > .navbar-item,
+  .navbar.is-primary .navbar-end > .navbar-link {
+    color: #fff;
   }
-  .navbar.is-primary .navbar-dropdown a.navbar-item:not(.is-active):not(:hover),
-  .navbar.is-primary .navbar-dropdown .navbar-item:not(a) {
-    color: #00d1b2;
+  .navbar.is-primary .navbar-brand > a.navbar-item:hover, .navbar.is-primary .navbar-brand > a.navbar-item.is-active,
+  .navbar.is-primary .navbar-brand > .navbar-link:hover,
+  .navbar.is-primary .navbar-brand > .navbar-link.is-active,
+  .navbar.is-primary .navbar-start > a.navbar-item:hover,
+  .navbar.is-primary .navbar-start > a.navbar-item.is-active,
+  .navbar.is-primary .navbar-start > .navbar-link:hover,
+  .navbar.is-primary .navbar-start > .navbar-link.is-active,
+  .navbar.is-primary .navbar-end > a.navbar-item:hover,
+  .navbar.is-primary .navbar-end > a.navbar-item.is-active,
+  .navbar.is-primary .navbar-end > .navbar-link:hover,
+  .navbar.is-primary .navbar-end > .navbar-link.is-active {
+    background-color: #00c4a7;
+    color: #fff;
+  }
+  .navbar.is-primary .navbar-brand .navbar-link::after,
+  .navbar.is-primary .navbar-start .navbar-link::after,
+  .navbar.is-primary .navbar-end .navbar-link::after {
+    border-color: #fff;
   }
   .navbar.is-primary .navbar-item.has-dropdown:hover .navbar-link,
   .navbar.is-primary .navbar-item.has-dropdown.is-active .navbar-link {
     background-color: #00c4a7;
     color: #fff;
   }
+  .navbar.is-primary .navbar-dropdown a.navbar-item.is-active {
+    color: #00d1b2;
+  }
 }
 
 .navbar.is-info {
@@ -5784,31 +5844,42 @@ a.nav-item:not(.button).is-tab.is-active {
   color: #fff;
 }
 
-.navbar.is-info .navbar-item,
-.navbar.is-info .navbar-link {
-  color: #fff;
-}
-
-.navbar.is-info a.navbar-item:hover, .navbar.is-info a.navbar-item.is-active,
-.navbar.is-info .navbar-link:hover,
-.navbar.is-info .navbar-link.is-active {
-  background-color: #276cda;
-  color: #fff;
-}
-
 @media screen and (min-width: 1024px) {
-  .navbar.is-info .navbar-link::after {
-    border-color: #fff;
+  .navbar.is-info .navbar-brand > .navbar-item,
+  .navbar.is-info .navbar-brand > .navbar-link,
+  .navbar.is-info .navbar-start > .navbar-item,
+  .navbar.is-info .navbar-start > .navbar-link,
+  .navbar.is-info .navbar-end > .navbar-item,
+  .navbar.is-info .navbar-end > .navbar-link {
+    color: #fff;
   }
-  .navbar.is-info .navbar-dropdown a.navbar-item:not(.is-active):not(:hover),
-  .navbar.is-info .navbar-dropdown .navbar-item:not(a) {
-    color: #3273dc;
+  .navbar.is-info .navbar-brand > a.navbar-item:hover, .navbar.is-info .navbar-brand > a.navbar-item.is-active,
+  .navbar.is-info .navbar-brand > .navbar-link:hover,
+  .navbar.is-info .navbar-brand > .navbar-link.is-active,
+  .navbar.is-info .navbar-start > a.navbar-item:hover,
+  .navbar.is-info .navbar-start > a.navbar-item.is-active,
+  .navbar.is-info .navbar-start > .navbar-link:hover,
+  .navbar.is-info .navbar-start > .navbar-link.is-active,
+  .navbar.is-info .navbar-end > a.navbar-item:hover,
+  .navbar.is-info .navbar-end > a.navbar-item.is-active,
+  .navbar.is-info .navbar-end > .navbar-link:hover,
+  .navbar.is-info .navbar-end > .navbar-link.is-active {
+    background-color: #276cda;
+    color: #fff;
+  }
+  .navbar.is-info .navbar-brand .navbar-link::after,
+  .navbar.is-info .navbar-start .navbar-link::after,
+  .navbar.is-info .navbar-end .navbar-link::after {
+    border-color: #fff;
   }
   .navbar.is-info .navbar-item.has-dropdown:hover .navbar-link,
   .navbar.is-info .navbar-item.has-dropdown.is-active .navbar-link {
     background-color: #276cda;
     color: #fff;
   }
+  .navbar.is-info .navbar-dropdown a.navbar-item.is-active {
+    color: #3273dc;
+  }
 }
 
 .navbar.is-success {
@@ -5816,31 +5887,42 @@ a.nav-item:not(.button).is-tab.is-active {
   color: #fff;
 }
 
-.navbar.is-success .navbar-item,
-.navbar.is-success .navbar-link {
-  color: #fff;
-}
-
-.navbar.is-success a.navbar-item:hover, .navbar.is-success a.navbar-item.is-active,
-.navbar.is-success .navbar-link:hover,
-.navbar.is-success .navbar-link.is-active {
-  background-color: #22c65b;
-  color: #fff;
-}
-
 @media screen and (min-width: 1024px) {
-  .navbar.is-success .navbar-link::after {
-    border-color: #fff;
+  .navbar.is-success .navbar-brand > .navbar-item,
+  .navbar.is-success .navbar-brand > .navbar-link,
+  .navbar.is-success .navbar-start > .navbar-item,
+  .navbar.is-success .navbar-start > .navbar-link,
+  .navbar.is-success .navbar-end > .navbar-item,
+  .navbar.is-success .navbar-end > .navbar-link {
+    color: #fff;
   }
-  .navbar.is-success .navbar-dropdown a.navbar-item:not(.is-active):not(:hover),
-  .navbar.is-success .navbar-dropdown .navbar-item:not(a) {
-    color: #23d160;
+  .navbar.is-success .navbar-brand > a.navbar-item:hover, .navbar.is-success .navbar-brand > a.navbar-item.is-active,
+  .navbar.is-success .navbar-brand > .navbar-link:hover,
+  .navbar.is-success .navbar-brand > .navbar-link.is-active,
+  .navbar.is-success .navbar-start > a.navbar-item:hover,
+  .navbar.is-success .navbar-start > a.navbar-item.is-active,
+  .navbar.is-success .navbar-start > .navbar-link:hover,
+  .navbar.is-success .navbar-start > .navbar-link.is-active,
+  .navbar.is-success .navbar-end > a.navbar-item:hover,
+  .navbar.is-success .navbar-end > a.navbar-item.is-active,
+  .navbar.is-success .navbar-end > .navbar-link:hover,
+  .navbar.is-success .navbar-end > .navbar-link.is-active {
+    background-color: #22c65b;
+    color: #fff;
+  }
+  .navbar.is-success .navbar-brand .navbar-link::after,
+  .navbar.is-success .navbar-start .navbar-link::after,
+  .navbar.is-success .navbar-end .navbar-link::after {
+    border-color: #fff;
   }
   .navbar.is-success .navbar-item.has-dropdown:hover .navbar-link,
   .navbar.is-success .navbar-item.has-dropdown.is-active .navbar-link {
     background-color: #22c65b;
     color: #fff;
   }
+  .navbar.is-success .navbar-dropdown a.navbar-item.is-active {
+    color: #23d160;
+  }
 }
 
 .navbar.is-warning {
@@ -5848,31 +5930,42 @@ a.nav-item:not(.button).is-tab.is-active {
   color: rgba(0, 0, 0, 0.7);
 }
 
-.navbar.is-warning .navbar-item,
-.navbar.is-warning .navbar-link {
-  color: rgba(0, 0, 0, 0.7);
-}
-
-.navbar.is-warning a.navbar-item:hover, .navbar.is-warning a.navbar-item.is-active,
-.navbar.is-warning .navbar-link:hover,
-.navbar.is-warning .navbar-link.is-active {
-  background-color: #ffdb4a;
-  color: rgba(0, 0, 0, 0.7);
-}
-
 @media screen and (min-width: 1024px) {
-  .navbar.is-warning .navbar-link::after {
-    border-color: rgba(0, 0, 0, 0.7);
+  .navbar.is-warning .navbar-brand > .navbar-item,
+  .navbar.is-warning .navbar-brand > .navbar-link,
+  .navbar.is-warning .navbar-start > .navbar-item,
+  .navbar.is-warning .navbar-start > .navbar-link,
+  .navbar.is-warning .navbar-end > .navbar-item,
+  .navbar.is-warning .navbar-end > .navbar-link {
+    color: rgba(0, 0, 0, 0.7);
   }
-  .navbar.is-warning .navbar-dropdown a.navbar-item:not(.is-active):not(:hover),
-  .navbar.is-warning .navbar-dropdown .navbar-item:not(a) {
-    color: #ffdd57;
+  .navbar.is-warning .navbar-brand > a.navbar-item:hover, .navbar.is-warning .navbar-brand > a.navbar-item.is-active,
+  .navbar.is-warning .navbar-brand > .navbar-link:hover,
+  .navbar.is-warning .navbar-brand > .navbar-link.is-active,
+  .navbar.is-warning .navbar-start > a.navbar-item:hover,
+  .navbar.is-warning .navbar-start > a.navbar-item.is-active,
+  .navbar.is-warning .navbar-start > .navbar-link:hover,
+  .navbar.is-warning .navbar-start > .navbar-link.is-active,
+  .navbar.is-warning .navbar-end > a.navbar-item:hover,
+  .navbar.is-warning .navbar-end > a.navbar-item.is-active,
+  .navbar.is-warning .navbar-end > .navbar-link:hover,
+  .navbar.is-warning .navbar-end > .navbar-link.is-active {
+    background-color: #ffdb4a;
+    color: rgba(0, 0, 0, 0.7);
+  }
+  .navbar.is-warning .navbar-brand .navbar-link::after,
+  .navbar.is-warning .navbar-start .navbar-link::after,
+  .navbar.is-warning .navbar-end .navbar-link::after {
+    border-color: rgba(0, 0, 0, 0.7);
   }
   .navbar.is-warning .navbar-item.has-dropdown:hover .navbar-link,
   .navbar.is-warning .navbar-item.has-dropdown.is-active .navbar-link {
     background-color: #ffdb4a;
     color: rgba(0, 0, 0, 0.7);
   }
+  .navbar.is-warning .navbar-dropdown a.navbar-item.is-active {
+    color: #ffdd57;
+  }
 }
 
 .navbar.is-danger {
@@ -5880,31 +5973,42 @@ a.nav-item:not(.button).is-tab.is-active {
   color: #fff;
 }
 
-.navbar.is-danger .navbar-item,
-.navbar.is-danger .navbar-link {
-  color: #fff;
-}
-
-.navbar.is-danger a.navbar-item:hover, .navbar.is-danger a.navbar-item.is-active,
-.navbar.is-danger .navbar-link:hover,
-.navbar.is-danger .navbar-link.is-active {
-  background-color: #ff2b56;
-  color: #fff;
-}
-
 @media screen and (min-width: 1024px) {
-  .navbar.is-danger .navbar-link::after {
-    border-color: #fff;
+  .navbar.is-danger .navbar-brand > .navbar-item,
+  .navbar.is-danger .navbar-brand > .navbar-link,
+  .navbar.is-danger .navbar-start > .navbar-item,
+  .navbar.is-danger .navbar-start > .navbar-link,
+  .navbar.is-danger .navbar-end > .navbar-item,
+  .navbar.is-danger .navbar-end > .navbar-link {
+    color: #fff;
   }
-  .navbar.is-danger .navbar-dropdown a.navbar-item:not(.is-active):not(:hover),
-  .navbar.is-danger .navbar-dropdown .navbar-item:not(a) {
-    color: #ff3860;
+  .navbar.is-danger .navbar-brand > a.navbar-item:hover, .navbar.is-danger .navbar-brand > a.navbar-item.is-active,
+  .navbar.is-danger .navbar-brand > .navbar-link:hover,
+  .navbar.is-danger .navbar-brand > .navbar-link.is-active,
+  .navbar.is-danger .navbar-start > a.navbar-item:hover,
+  .navbar.is-danger .navbar-start > a.navbar-item.is-active,
+  .navbar.is-danger .navbar-start > .navbar-link:hover,
+  .navbar.is-danger .navbar-start > .navbar-link.is-active,
+  .navbar.is-danger .navbar-end > a.navbar-item:hover,
+  .navbar.is-danger .navbar-end > a.navbar-item.is-active,
+  .navbar.is-danger .navbar-end > .navbar-link:hover,
+  .navbar.is-danger .navbar-end > .navbar-link.is-active {
+    background-color: #ff2b56;
+    color: #fff;
+  }
+  .navbar.is-danger .navbar-brand .navbar-link::after,
+  .navbar.is-danger .navbar-start .navbar-link::after,
+  .navbar.is-danger .navbar-end .navbar-link::after {
+    border-color: #fff;
   }
   .navbar.is-danger .navbar-item.has-dropdown:hover .navbar-link,
   .navbar.is-danger .navbar-item.has-dropdown.is-active .navbar-link {
     background-color: #ff2b56;
     color: #fff;
   }
+  .navbar.is-danger .navbar-dropdown a.navbar-item.is-active {
+    color: #ff3860;
+  }
 }
 
 .navbar > .container {
@@ -5943,7 +6047,7 @@ a.nav-item:not(.button).is-tab.is-active {
 }
 
 .navbar-burger span {
-  background-color: #4a4a4a;
+  background-color: currentColor;
   display: block;
   height: 1px;
   left: 50%;
@@ -5968,11 +6072,7 @@ a.nav-item:not(.button).is-tab.is-active {
 }
 
 .navbar-burger:hover {
-  background-color: whitesmoke;
-}
-
-.navbar-burger.is-active span {
-  background-color: #00d1b2;
+  background-color: rgba(0, 0, 0, 0.05);
 }
 
 .navbar-burger.is-active span:nth-child(1) {
@@ -6082,6 +6182,7 @@ a.navbar-item:hover, a.navbar-item.is-active,
     display: flex;
   }
   .navbar-menu {
+    background-color: white;
     box-shadow: 0 8px 16px rgba(10, 10, 10, 0.1);
     padding: 0.5rem 0;
   }
@@ -9073,6 +9174,10 @@ label.panel-block:hover {
   text-align: left;
 }
 
+.content li .highlight {
+  margin: 0;
+}
+
 @media screen and (min-width: 769px), print {
   .button small {
     color: #4a4a4a;
diff --git a/docs/documentation/components/navbar.html b/docs/documentation/components/navbar.html
index 720f8cd30..0162a24f4 100644
--- a/docs/documentation/components/navbar.html
+++ b/docs/documentation/components/navbar.html
@@ -100,7 +100,7 @@ variables:
 {% capture navbar_menu_example %}
 <nav class="navbar" role="navigation" aria-label="main navigation">
   <div class="navbar-brand">
-    <!-- navbar items, nav burger ... -->
+    <!-- navbar items, navbar burger ... -->
   </div>
   <div class="navbar-menu">
     <!-- navbar start, navbar end -->
@@ -495,7 +495,7 @@ document.addEventListener('DOMContentLoaded', function () {
   // Get all "navbar-burger" elements
   var $navbarBurgers = Array.prototype.slice.call(document.querySelectorAll('.navbar-burger'), 0);
 
-  // Check if there are any nav burgers
+  // Check if there are any navbar burgers
   if ($navbarBurgers.length > 0) {
 
     // Add a click event on each of them
@@ -517,6 +517,132 @@ 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>
+</nav>
+{% endcapture %}
+
 <section class="section">
   <div class="container">
 
@@ -528,7 +654,7 @@ document.addEventListener('DOMContentLoaded', function () {
       include meta.html
       new=true
       since="0.4.3"
-      colors=false
+      colors=true
       sizes=false
       variables=true
     %}
@@ -592,10 +718,16 @@ document.addEventListener('DOMContentLoaded', function () {
     </div>
 
     <div class="bd-example is-paddingless">
-      {{navbar_example}}
+      {{ navbar_color_default }}
+    </div>
+
+    {% highlight html %}{{ navbar_color_default }}{% endhighlight %}
+
+    <div class="bd-example is-paddingless">
+      {{ navbar_color_primary }}
     </div>
 
-    {% highlight html %}{{navbar_example}}{% endhighlight %}
+    {% highlight html %}{{ navbar_color_primary }}{% endhighlight %}
 
     {% include anchor.html name="Navbar brand" %}
 
@@ -1005,6 +1137,19 @@ document.addEventListener('DOMContentLoaded', function () {
 
     {% highlight html %}{{ navbar_divider_example }}{% endhighlight %}
 
+    {% include anchor.html name="Colors" %}
+
+    <div class="tags has-addons">
+      <span class="tag">New!</span>
+      <span class="tag is-info">0.5.2</span>
+    </div>
+
+    <div class="bd-example is-paddingless">
+      {{ navbar_color_primary }}
+    </div>
+
+    {% highlight html %}{{ navbar_color_primary }}{% endhighlight %}
+
     {% include variables.html %}
 
   </div>
diff --git a/docs/images/bulma-logo-white.png b/docs/images/bulma-logo-white.png
new file mode 100644
index 000000000..a25f68479
Binary files /dev/null and b/docs/images/bulma-logo-white.png differ
diff --git a/sass/components/navbar.sass b/sass/components/navbar.sass
index 6938fa854..76eeadf8b 100644
--- a/sass/components/navbar.sass
+++ b/sass/components/navbar.sass
@@ -43,26 +43,33 @@ $navbar-divider-background-color: $border !default
     &.is-#{$name}
       background-color: $color
       color: $color-invert
-      .navbar-item,
-      .navbar-link
-        color: $color-invert
-      a.navbar-item,
-      .navbar-link
-        &:hover,
-        &.is-active
-          background-color: darken($color, 2.5%)
-          color: $color-invert
       +desktop
-        .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-brand,
+        .navbar-start,
+        .navbar-end
+          & > .navbar-item,
+          & > .navbar-link
+            color: $color-invert
+          & > a.navbar-item,
+          & > .navbar-link
+            &:hover,
+            &.is-active
+              background-color: darken($color, 2.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%)
           color: $color-invert
+        .navbar-dropdown
+          a.navbar-item
+            &.is-active
+              color: $color
   & > .container
     align-items: stretch
     display: flex
@@ -159,6 +166,7 @@ a.navbar-item,
       align-items: center
       display: flex
   .navbar-menu
+    background-color: $white
     box-shadow: 0 8px 16px rgba($black, 0.1)
     padding: 0.5rem 0
     &.is-active
diff --git a/sass/elements/content.sass b/sass/elements/content.sass
index f6b182a84..62438cd0e 100644
--- a/sass/elements/content.sass
+++ b/sass/elements/content.sass
@@ -86,8 +86,13 @@ $content-table-foot-cell-color: $text-strong !default
   dd
     margin-left: 2em
   figure
-    margin: 2em
+    margin-left: 2em
+    margin-right: 2em
     text-align: center
+    &:not(:first-child)
+      margin-top: 2em
+    &:not(:last-child)
+      margin-bottom: 2em
     img
       display: inline-block
     figcaption
diff --git a/sass/utilities/mixins.sass b/sass/utilities/mixins.sass
index 5997c1a66..29a87ca1c 100644
--- a/sass/utilities/mixins.sass
+++ b/sass/utilities/mixins.sass
@@ -110,7 +110,7 @@
   position: relative
   width: $dimensions
   span
-    background-color: $text
+    background-color: currentColor
     display: block
     height: 1px
     left: 50%
@@ -127,11 +127,10 @@
     &:nth-child(3)
       margin-top: 4px
   &:hover
-    background-color: $background
+    background-color: rgba(black, 0.05)
   // Modifers
   &.is-active
     span
-      background-color: $link
       &:nth-child(1)
         margin-left: -5px
         transform: rotate(45deg)