From: Jeremy Thomas <bbxdesign@gmail.com>
Date: Sun, 30 Oct 2016 19:20:51 +0000 (+0000)
Subject: Fix message colors
X-Git-Tag: 0.3.0^2~24
X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=0e5c14ac26e11353818bbd60cf91043d5939addc;p=thirdparty%2Fbulma.git

Fix message colors
---

diff --git a/CHANGELOG.md b/CHANGELOG.md
index eec48ba15..adeda5417 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -14,6 +14,9 @@
 * Input icons require the `.icon` container
 * Deprecate `.media-number`
 * Fix `.level-item` height
+* Fix `.menu` spacing
+* Deprecate `.menu-nav`
+* Fix message colors (!)
 
 ## 0.2.2
 
diff --git a/docs/css/bulma-docs.css b/docs/css/bulma-docs.css
index 2dceb2698..ccb529e17 100644
--- a/docs/css/bulma-docs.css
+++ b/docs/css/bulma-docs.css
@@ -95,7 +95,7 @@ th {
 
 html {
   background-color: whitesmoke;
-  font-size: 1rem;
+  font-size: 16px;
   -moz-osx-font-smoothing: grayscale;
   -webkit-font-smoothing: antialiased;
   min-width: 300px;
@@ -3215,16 +3215,19 @@ a.box:active {
   padding-top: 1.5rem;
 }
 
-.menu-nav a {
-  display: block;
-  padding: 5px 10px;
+.menu {
+  font-size: 1rem;
+}
+
+.menu-list {
+  line-height: 1.25;
 }
 
 .menu-list a {
   border-radius: 2px;
   color: #4a4a4a;
   display: block;
-  padding: 5px 10px;
+  padding: 0.5em 0.75em;
 }
 
 .menu-list a:hover {
@@ -3239,51 +3242,29 @@ a.box:active {
 
 .menu-list li ul {
   border-left: 1px solid #dbdbdb;
-  margin: 10px;
-  padding-left: 10px;
+  margin: 0.75em;
+  padding-left: 0.75em;
 }
 
 .menu-label {
   color: #7a7a7a;
-  font-size: 0.75rem;
+  font-size: 0.75em;
   letter-spacing: 1px;
-  margin-bottom: 5px;
   text-transform: uppercase;
 }
 
 .menu-label:not(:first-child) {
-  margin-top: 20px;
-}
-
-.message-body {
-  border: 1px solid #dbdbdb;
-  border-radius: 3px;
-  padding: 0.8rem 1rem;
-}
-
-.message-body strong {
-  color: inherit;
-}
-
-.message-header {
-  background-color: #4a4a4a;
-  border-radius: 3px 3px 0 0;
-  color: #fff;
-  padding: 0.4rem 0.8rem;
-}
-
-.message-header strong {
-  color: inherit;
+  margin-top: 1em;
 }
 
-.message-header + .message-body {
-  border-radius: 0 0 3px 3px;
-  border-top: none;
+.menu-label:not(:last-child) {
+  margin-bottom: 1em;
 }
 
 .message {
   background-color: whitesmoke;
   border-radius: 3px;
+  font-size: 1rem;
 }
 
 .message:not(:last-child) {
@@ -3301,11 +3282,11 @@ a.box:active {
 
 .message.is-white .message-body {
   border-color: white;
-  color: #666666;
+  color: #4d4d4d;
 }
 
 .message.is-black {
-  background-color: whitesmoke;
+  background-color: #fafafa;
 }
 
 .message.is-black .message-header {
@@ -3315,11 +3296,11 @@ a.box:active {
 
 .message.is-black .message-body {
   border-color: #0a0a0a;
-  color: gray;
+  color: #090909;
 }
 
 .message.is-light {
-  background-color: whitesmoke;
+  background-color: #fafafa;
 }
 
 .message.is-light .message-header {
@@ -3329,11 +3310,11 @@ a.box:active {
 
 .message.is-light .message-body {
   border-color: whitesmoke;
-  color: #666666;
+  color: #505050;
 }
 
 .message.is-dark {
-  background-color: whitesmoke;
+  background-color: #fafafa;
 }
 
 .message.is-dark .message-header {
@@ -3343,11 +3324,11 @@ a.box:active {
 
 .message.is-dark .message-body {
   border-color: #363636;
-  color: gray;
+  color: #2a2a2a;
 }
 
 .message.is-primary {
-  background-color: #ebfffc;
+  background-color: #f5fffd;
 }
 
 .message.is-primary .message-header {
@@ -3357,11 +3338,11 @@ a.box:active {
 
 .message.is-primary .message-body {
   border-color: #00d1b2;
-  color: gray;
+  color: #021310;
 }
 
 .message.is-info {
-  background-color: #eef3fc;
+  background-color: #f6f9fe;
 }
 
 .message.is-info .message-header {
@@ -3371,11 +3352,11 @@ a.box:active {
 
 .message.is-info .message-body {
   border-color: #3273dc;
-  color: gray;
+  color: #22509a;
 }
 
 .message.is-success {
-  background-color: #eefcf3;
+  background-color: #f6fef9;
 }
 
 .message.is-success .message-header {
@@ -3385,11 +3366,11 @@ a.box:active {
 
 .message.is-success .message-body {
   border-color: #23d160;
-  color: gray;
+  color: #0e301a;
 }
 
 .message.is-warning {
-  background-color: #fffbeb;
+  background-color: #fffdf5;
 }
 
 .message.is-warning .message-header {
@@ -3399,11 +3380,11 @@ a.box:active {
 
 .message.is-warning .message-body {
   border-color: #ffdd57;
-  color: gray;
+  color: #3b3108;
 }
 
 .message.is-danger {
-  background-color: #ffebef;
+  background-color: #fff5f7;
 }
 
 .message.is-danger .message-header {
@@ -3413,7 +3394,45 @@ a.box:active {
 
 .message.is-danger .message-body {
   border-color: #ff3860;
-  color: gray;
+  color: #cd0930;
+}
+
+.message-header {
+  align-items: center;
+  background-color: #4a4a4a;
+  border-radius: 3px 3px 0 0;
+  color: #fff;
+  display: flex;
+  justify-content: space-between;
+  line-height: 1.25;
+  padding: 0.5em 0.75em;
+  position: relative;
+}
+
+.message-header strong {
+  color: inherit;
+}
+
+.message-header .delete {
+  flex-grow: 0;
+  flex-shrink: 0;
+  margin-left: 0.75em;
+}
+
+.message-header + .message-body {
+  border-radius: 0 0 3px 3px;
+  border-top: none;
+}
+
+.message-body {
+  border: 1px solid #dbdbdb;
+  border-radius: 3px;
+  color: #4a4a4a;
+  padding: 1em 1.25em;
+}
+
+.message-body strong {
+  color: inherit;
 }
 
 .modal-background {
diff --git a/docs/documentation/components/menu.html b/docs/documentation/components/menu.html
index 74a3aebec..6e9629548 100644
--- a/docs/documentation/components/menu.html
+++ b/docs/documentation/components/menu.html
@@ -13,79 +13,52 @@ doc-subtab: menu
 
     <hr>
 
-    <div class="columns">
-      <div class="column is-3">
-        <aside class="menu">
-          <p class="menu-label">
-            General
-          </p>
-          <ul class="menu-list">
-            <li><a href="#">Dashboard</a></li>
-            <li><a href="#">Customers</a></li>
-          </ul>
-          <p class="menu-label">
-            Administration
-          </p>
-          <ul class="menu-list">
-            <li><a href="#">Team Settings</a></li>
-            <li>
-              <a class="is-active" href="#">Manage Your Team</a>
-              <ul>
-                <li><a href="#">Members</a></li>
-                <li><a href="#">Plugins</a></li>
-                <li><a href="#">Add a member</a></li>
-              </ul>
-            </li>
-            <li><a href="#">Invitations</a></li>
-            <li><a href="#">Authentication</a></li>
-          </ul>
-          <p class="menu-label">
-            Transactions
-          </p>
-          <ul class="menu-list">
-            <li><a href="#">Payments</a></li>
-            <li><a href="#">Transfers</a></li>
-            <li><a href="#">Balance</a></li>
-          </ul>
-        </aside>
-      </div>
-      <div class="column">
-{% highlight html %}
+{% capture menu_example %}
 <aside class="menu">
   <p class="menu-label">
     General
   </p>
   <ul class="menu-list">
-    <li><a href="#">Dashboard</a></li>
-    <li><a href="#">Customers</a></li>
+    <li><a>Dashboard</a></li>
+    <li><a>Customers</a></li>
   </ul>
   <p class="menu-label">
     Administration
   </p>
   <ul class="menu-list">
-    <li><a href="#">Team Settings</a></li>
+    <li><a>Team Settings</a></li>
     <li>
-      <a class="is-active" href="#">Manage Your Team</a>
+      <a class="is-active">Manage Your Team</a>
       <ul>
-        <li><a href="#">Members</a></li>
-        <li><a href="#">Plugins</a></li>
-        <li><a href="#">Add a member</a></li>
+        <li><a>Members</a></li>
+        <li><a>Plugins</a></li>
+        <li><a>Add a member</a></li>
       </ul>
     </li>
-    <li><a href="#">Invitations</a></li>
-    <li><a href="#">Authentication</a></li>
+    <li><a>Invitations</a></li>
+    <li><a>Cloud Storage Environment Settings</a></li>
+    <li><a>Authentication</a></li>
   </ul>
   <p class="menu-label">
     Transactions
   </p>
   <ul class="menu-list">
-    <li><a href="#">Payments</a></li>
-    <li><a href="#">Transfers</a></li>
-    <li><a href="#">Balance</a></li>
+    <li><a>Payments</a></li>
+    <li><a>Transfers</a></li>
+    <li><a>Balance</a></li>
   </ul>
 </aside>
+{% endcapture %}
+<div class="columns">
+  <div class="column is-3">
+{{menu_example}}
+  </div>
+  <div class="column">
+{% highlight html %}
+{{menu_example}}
 {% endhighlight %}
-      </div>
-    </div>
+  </div>
+</div>
+
   </div>
 </section>
diff --git a/docs/documentation/components/message.html b/docs/documentation/components/message.html
index 3cc61f2cb..146a54544 100644
--- a/docs/documentation/components/message.html
+++ b/docs/documentation/components/message.html
@@ -15,206 +15,99 @@ doc-subtab: message
 
     <hr>
 
-    <div class="columns">
-      <div class="column is-half">
-        <article class="message">
-          <div class="message-header">
-            Hello World
-          </div>
-          <div class="message-body">
-            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque risus mi, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam, et dictum felis venenatis efficitur. Aenean ac eleifend lacus, in mollis lectus. Donec sodales, arcu et sollicitudin porttitor, tortor urna tempor ligula, id porttitor mi magna a neque. Donec dui urna, vehicula et sem eget, facilisis sodales sem.
-          </div>
-        </article>
-        <article class="message is-primary">
-          <div class="message-header">
-            Primary
-          </div>
-          <div class="message-body">
-            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque risus mi, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam, et dictum felis venenatis efficitur. Aenean ac eleifend lacus, in mollis lectus. Donec sodales, arcu et sollicitudin porttitor, tortor urna tempor ligula, id porttitor mi magna a neque. Donec dui urna, vehicula et sem eget, facilisis sodales sem.
-          </div>
-        </article>
-        <article class="message is-info">
-          <div class="message-header">
-            Info
-          </div>
-          <div class="message-body">
-            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque risus mi, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam, et dictum felis venenatis efficitur. Aenean ac eleifend lacus, in mollis lectus. Donec sodales, arcu et sollicitudin porttitor, tortor urna tempor ligula, id porttitor mi magna a neque. Donec dui urna, vehicula et sem eget, facilisis sodales sem.
-          </div>
-        </article>
-        <article class="message is-success">
-          <div class="message-header">
-            Success
-          </div>
-          <div class="message-body">
-            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque risus mi, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam, et dictum felis venenatis efficitur. Aenean ac eleifend lacus, in mollis lectus. Donec sodales, arcu et sollicitudin porttitor, tortor urna tempor ligula, id porttitor mi magna a neque. Donec dui urna, vehicula et sem eget, facilisis sodales sem.
-          </div>
-        </article>
-        <article class="message is-warning">
-          <div class="message-header">
-            Warning
-          </div>
-          <div class="message-body">
-            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque risus mi, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam, et dictum felis venenatis efficitur. Aenean ac eleifend lacus, in mollis lectus. Donec sodales, arcu et sollicitudin porttitor, tortor urna tempor ligula, id porttitor mi magna a neque. Donec dui urna, vehicula et sem eget, facilisis sodales sem.
-          </div>
-        </article>
-        <article class="message is-danger">
-          <div class="message-header">
-            Danger
-          </div>
-          <div class="message-body">
-            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque risus mi, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam, et dictum felis venenatis efficitur. Aenean ac eleifend lacus, in mollis lectus. Donec sodales, arcu et sollicitudin porttitor, tortor urna tempor ligula, id porttitor mi magna a neque. Donec dui urna, vehicula et sem eget, facilisis sodales sem.
-          </div>
-        </article>
-      </div>
-      <div class="column is-half">
-{% highlight html %}
+{% capture message_example %}
 <article class="message">
   <div class="message-header">
-    Hello World
+    <p>Hello World</p>
+    <button class="delete"></button>
   </div>
   <div class="message-body">
-    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
-    Pellentesque risus mi, tempus quis placerat ut, porta nec
-    nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam
-    gravida purus diam, et dictum felis venenatis efficitur.
-    Aenean ac eleifend lacus, in mollis lectus. Donec sodales,
-    arcu et sollicitudin porttitor, tortor urna tempor ligula,
-    id porttitor mi magna a neque. Donec dui urna, vehicula et
-    sem eget, facilisis sodales sem.
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque risus mi, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam, et dictum felis venenatis efficitur. Aenean ac eleifend lacus, in mollis lectus. Donec sodales, arcu et sollicitudin porttitor, tortor urna tempor ligula, id porttitor mi magna a neque. Donec dui urna, vehicula et sem eget, facilisis sodales sem.
+  </div>
+</article>
+<article class="message is-dark">
+  <div class="message-header">
+    <p>Dark</p>
+    <button class="delete"></button>
+  </div>
+  <div class="message-body">
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque risus mi, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam, et dictum felis venenatis efficitur. Aenean ac eleifend lacus, in mollis lectus. Donec sodales, arcu et sollicitudin porttitor, tortor urna tempor ligula, id porttitor mi magna a neque. Donec dui urna, vehicula et sem eget, facilisis sodales sem.
   </div>
 </article>
-
 <article class="message is-primary">
   <div class="message-header">
-    Primary
+    <p>Primary</p>
+    <button class="delete"></button>
   </div>
   <div class="message-body">
-    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
-    Pellentesque risus mi, tempus quis placerat ut, porta nec
-    nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam
-    gravida purus diam, et dictum felis venenatis efficitur.
-    Aenean ac eleifend lacus, in mollis lectus. Donec sodales,
-    arcu et sollicitudin porttitor, tortor urna tempor ligula,
-    id porttitor mi magna a neque. Donec dui urna, vehicula et
-    sem eget, facilisis sodales sem.
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque risus mi, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam, et dictum felis venenatis efficitur. Aenean ac eleifend lacus, in mollis lectus. Donec sodales, arcu et sollicitudin porttitor, tortor urna tempor ligula, id porttitor mi magna a neque. Donec dui urna, vehicula et sem eget, facilisis sodales sem.
   </div>
 </article>
-
 <article class="message is-info">
   <div class="message-header">
-    Info
+    <p>Info</p>
+    <button class="delete"></button>
   </div>
   <div class="message-body">
-    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
-    Pellentesque risus mi, tempus quis placerat ut, porta nec
-    nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam
-    gravida purus diam, et dictum felis venenatis efficitur.
-    Aenean ac eleifend lacus, in mollis lectus. Donec sodales,
-    arcu et sollicitudin porttitor, tortor urna tempor ligula,
-    id porttitor mi magna a neque. Donec dui urna, vehicula et
-    sem eget, facilisis sodales sem.
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque risus mi, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam, et dictum felis venenatis efficitur. Aenean ac eleifend lacus, in mollis lectus. Donec sodales, arcu et sollicitudin porttitor, tortor urna tempor ligula, id porttitor mi magna a neque. Donec dui urna, vehicula et sem eget, facilisis sodales sem.
   </div>
 </article>
-
 <article class="message is-success">
   <div class="message-header">
-    Success
+    <p>Success</p>
+    <button class="delete"></button>
   </div>
   <div class="message-body">
-    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
-    Pellentesque risus mi, tempus quis placerat ut, porta nec
-    nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam
-    gravida purus diam, et dictum felis venenatis efficitur.
-    Aenean ac eleifend lacus, in mollis lectus. Donec sodales,
-    arcu et sollicitudin porttitor, tortor urna tempor ligula,
-    id porttitor mi magna a neque. Donec dui urna, vehicula et
-    sem eget, facilisis sodales sem.
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque risus mi, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam, et dictum felis venenatis efficitur. Aenean ac eleifend lacus, in mollis lectus. Donec sodales, arcu et sollicitudin porttitor, tortor urna tempor ligula, id porttitor mi magna a neque. Donec dui urna, vehicula et sem eget, facilisis sodales sem.
   </div>
 </article>
-
 <article class="message is-warning">
   <div class="message-header">
-    Warning
+    <p>Warning</p>
+    <button class="delete"></button>
   </div>
   <div class="message-body">
-    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
-    Pellentesque risus mi, tempus quis placerat ut, porta nec
-    nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam
-    gravida purus diam, et dictum felis venenatis efficitur.
-    Aenean ac eleifend lacus, in mollis lectus. Donec sodales,
-    arcu et sollicitudin porttitor, tortor urna tempor ligula,
-    id porttitor mi magna a neque. Donec dui urna, vehicula et
-    sem eget, facilisis sodales sem.
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque risus mi, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam, et dictum felis venenatis efficitur. Aenean ac eleifend lacus, in mollis lectus. Donec sodales, arcu et sollicitudin porttitor, tortor urna tempor ligula, id porttitor mi magna a neque. Donec dui urna, vehicula et sem eget, facilisis sodales sem.
   </div>
 </article>
-
 <article class="message is-danger">
   <div class="message-header">
-    Danger
+    <p>Danger</p>
+    <button class="delete"></button>
   </div>
   <div class="message-body">
-    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
-    Pellentesque risus mi, tempus quis placerat ut, porta nec
-    nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam
-    gravida purus diam, et dictum felis venenatis efficitur.
-    Aenean ac eleifend lacus, in mollis lectus. Donec sodales,
-    arcu et sollicitudin porttitor, tortor urna tempor ligula,
-    id porttitor mi magna a neque. Donec dui urna, vehicula et
-    sem eget, facilisis sodales sem.
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque risus mi, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam, et dictum felis venenatis efficitur. Aenean ac eleifend lacus, in mollis lectus. Donec sodales, arcu et sollicitudin porttitor, tortor urna tempor ligula, id porttitor mi magna a neque. Donec dui urna, vehicula et sem eget, facilisis sodales sem.
   </div>
 </article>
+{% endcapture %}
+<div class="columns">
+  <div class="column is-half">
+{{message_example}}
+  </div>
+  <div class="column is-half">
+{% highlight html %}
+{{message_example}}
 {% endhighlight %}
-      </div>
-    </div>
+  </div>
+</div>
 
     <hr>
 
-    <h3 class="subtitle">Message body only</h3>
-
-    <div class="content">
-      <p>You can <strong>omit</strong> the message header:</p>
-    </div>
-
-    <div class="columns">
-      <div class="column is-half">
-        <article class="message">
-          <div class="message-body">
-            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque risus mi, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam, et dictum felis venenatis efficitur. Aenean ac eleifend lacus, in mollis lectus. Donec sodales, arcu et sollicitudin porttitor, tortor urna tempor ligula, id porttitor mi magna a neque. Donec dui urna, vehicula et sem eget, facilisis sodales sem.
-          </div>
-        </article>
-        <article class="message is-primary">
-          <div class="message-body">
-            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque risus mi, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam, et dictum felis venenatis efficitur. Aenean ac eleifend lacus, in mollis lectus. Donec sodales, arcu et sollicitudin porttitor, tortor urna tempor ligula, id porttitor mi magna a neque. Donec dui urna, vehicula et sem eget, facilisis sodales sem.
-          </div>
-        </article>
-        <article class="message is-info">
-          <div class="message-body">
-            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque risus mi, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam, et dictum felis venenatis efficitur. Aenean ac eleifend lacus, in mollis lectus. Donec sodales, arcu et sollicitudin porttitor, tortor urna tempor ligula, id porttitor mi magna a neque. Donec dui urna, vehicula et sem eget, facilisis sodales sem.
-          </div>
-        </article>
-        <article class="message is-success">
-          <div class="message-body">
-            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque risus mi, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam, et dictum felis venenatis efficitur. Aenean ac eleifend lacus, in mollis lectus. Donec sodales, arcu et sollicitudin porttitor, tortor urna tempor ligula, id porttitor mi magna a neque. Donec dui urna, vehicula et sem eget, facilisis sodales sem.
-          </div>
-        </article>
-        <article class="message is-warning">
-          <div class="message-body">
-            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque risus mi, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam, et dictum felis venenatis efficitur. Aenean ac eleifend lacus, in mollis lectus. Donec sodales, arcu et sollicitudin porttitor, tortor urna tempor ligula, id porttitor mi magna a neque. Donec dui urna, vehicula et sem eget, facilisis sodales sem.
-          </div>
-        </article>
-        <article class="message is-danger">
-          <div class="message-body">
-            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque risus mi, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam, et dictum felis venenatis efficitur. Aenean ac eleifend lacus, in mollis lectus. Donec sodales, arcu et sollicitudin porttitor, tortor urna tempor ligula, id porttitor mi magna a neque. Donec dui urna, vehicula et sem eget, facilisis sodales sem.
-          </div>
-        </article>
-      </div>
-      <div class="column is-half">
-{% highlight html %}
+<h3 class="subtitle">Message body only</h3>
+<div class="content">
+  <p>You can <strong>omit</strong> the message header:</p>
+</div>
+{% capture message_body_example %}
 <article class="message">
   <div class="message-body">
     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque risus mi, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam, et dictum felis venenatis efficitur. Aenean ac eleifend lacus, in mollis lectus. Donec sodales, arcu et sollicitudin porttitor, tortor urna tempor ligula, id porttitor mi magna a neque. Donec dui urna, vehicula et sem eget, facilisis sodales sem.
   </div>
 </article>
+<article class="message is-dark">
+  <div class="message-body">
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque risus mi, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam, et dictum felis venenatis efficitur. Aenean ac eleifend lacus, in mollis lectus. Donec sodales, arcu et sollicitudin porttitor, tortor urna tempor ligula, id porttitor mi magna a neque. Donec dui urna, vehicula et sem eget, facilisis sodales sem.
+  </div>
+</article>
 <article class="message is-primary">
   <div class="message-body">
     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque risus mi, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam, et dictum felis venenatis efficitur. Aenean ac eleifend lacus, in mollis lectus. Donec sodales, arcu et sollicitudin porttitor, tortor urna tempor ligula, id porttitor mi magna a neque. Donec dui urna, vehicula et sem eget, facilisis sodales sem.
@@ -240,8 +133,17 @@ doc-subtab: message
     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque risus mi, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam, et dictum felis venenatis efficitur. Aenean ac eleifend lacus, in mollis lectus. Donec sodales, arcu et sollicitudin porttitor, tortor urna tempor ligula, id porttitor mi magna a neque. Donec dui urna, vehicula et sem eget, facilisis sodales sem.
   </div>
 </article>
+{% endcapture %}
+<div class="columns">
+  <div class="column is-half">
+{{message_body_example}}
+  </div>
+  <div class="column is-half">
+{% highlight html %}
+{{message_body_example}}
 {% endhighlight %}
-      </div>
-    </div>
+  </div>
+</div>
+
   </div>
 </section>
diff --git a/docs/documentation/elements/delete.html b/docs/documentation/elements/delete.html
index db82e8ac2..e5aa69415 100644
--- a/docs/documentation/elements/delete.html
+++ b/docs/documentation/elements/delete.html
@@ -74,12 +74,22 @@ doc-subtab: delete
   <button class="delete"></button>
   Lorem ipsum dolor sit amet, consectetur adipiscing elit lorem ipsum dolor sit amet, consectetur adipiscing elit
 </div>
+
+<article class="message is-info">
+  <div class="message-header">
+    Info
+    <button class="delete"></button>
+  </div>
+  <div class="message-body">
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque risus mi, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam, et dictum felis venenatis efficitur. Aenean ac eleifend lacus, in mollis lectus. Donec sodales, arcu et sollicitudin porttitor, tortor urna tempor ligula, id porttitor mi magna a neque. Donec dui urna, vehicula et sem eget, facilisis sodales sem.
+  </div>
+</article>
 {% endcapture %}
 <div class="columns">
 <div class="column">
   <div class="content">
     <p>
-      Bulma uses it for the <a href="/documentation/elements/tag/">tags</a> and the <a href="/documentation/elements/notification/">notifications</a>:
+      Bulma uses it for the <a href="/documentation/elements/tag/">tags</a>, the <a href="/documentation/elements/notification/">notifications</a>, and the <a href="/documentation/components/message/">messages</a>:
     </p>
   </div>
   {{cross_elements_example}}
diff --git a/sass/base/generic.sass b/sass/base/generic.sass
index 7ec59828e..a7ea49477 100644
--- a/sass/base/generic.sass
+++ b/sass/base/generic.sass
@@ -1,8 +1,9 @@
 $body-background: $white-ter !default
+$body-size: $size-6 !default
 
 html
   background-color: $body-background
-  font-size: $size-normal
+  font-size: $body-size
   -moz-osx-font-smoothing: grayscale
   -webkit-font-smoothing: antialiased
   min-width: 300px
diff --git a/sass/components/menu.sass b/sass/components/menu.sass
index c2c6daace..f38786b5d 100644
--- a/sass/components/menu.sass
+++ b/sass/components/menu.sass
@@ -1,14 +1,13 @@
-.menu-nav
-  a
-    display: block
-    padding: 5px 10px
+.menu
+  font-size: $size-normal
 
 .menu-list
+  line-height: 1.25
   a
     border-radius: $radius-small
     color: $text
     display: block
-    padding: 5px 10px
+    padding: 0.5em 0.75em
     &:hover
       background-color: $background
       color: $link
@@ -19,14 +18,15 @@
   li
     ul
       border-left: 1px solid $border
-      margin: 10px
-      padding-left: 10px
+      margin: 0.75em
+      padding-left: 0.75em
 
 .menu-label
   color: $text-light
-  font-size: $size-small
+  font-size: 0.75em
   letter-spacing: 1px
-  margin-bottom: 5px
   text-transform: uppercase
   &:not(:first-child)
-    margin-top: 20px
+    margin-top: 1em
+  &:not(:last-child)
+    margin-bottom: 1em
diff --git a/sass/components/message.sass b/sass/components/message.sass
index 1de82daf8..8158ce828 100644
--- a/sass/components/message.sass
+++ b/sass/components/message.sass
@@ -1,39 +1,49 @@
-.message-body
-  border: 1px solid $border
-  border-radius: $radius
-  padding: 0.8rem 1rem
-  strong
-    color: inherit
-
-.message-header
-  background-color: $text
-  border-radius: $radius $radius 0 0
-  color: $text-invert
-  padding: 0.4rem 0.8rem
-  strong
-    color: inherit
-  & + .message-body
-    border-radius: 0 0 $radius $radius
-    border-top: none
-
 .message
   +block
   background-color: $background
   border-radius: $radius
+  font-size: $size-normal
   // Colors
   @each $name, $pair in $colors
     $color: nth($pair, 1)
     $color-invert: nth($pair, 2)
-    $lightning: max((100% - lightness($color)) - 4%, 0%)
-    $darkness: max(lightness($color) - 10%, lightness($color))
+    $color-lightning: max((100% - lightness($color)) - 2%, 0%)
+    $color-luminance: colorLuminance($color)
+    $darken-percentage: $color-luminance * 70%
+    $desaturate-percentage: $color-luminance * 30%
     &.is-#{$name}
-      background-color: lighten($color, $lightning)
+      background-color: lighten($color, $color-lightning)
       .message-header
         background-color: $color
         color: $color-invert
       .message-body
         border-color: $color
-        @if (colorLuminance($color) > 0.8)
-          color: desaturate(lighten(darken($color, 100%), 40%), 40%)
-        @else
-          color: desaturate(lighten(darken($color, 100%), 50%), 30%)
+        color: desaturate(darken($color, $darken-percentage), $desaturate-percentage)
+
+.message-header
+  align-items: center
+  background-color: $text
+  border-radius: $radius $radius 0 0
+  color: $text-invert
+  display: flex
+  justify-content: space-between
+  line-height: 1.25
+  padding: 0.5em 0.75em
+  position: relative
+  strong
+    color: inherit
+  .delete
+    flex-grow: 0
+    flex-shrink: 0
+    margin-left: 0.75em
+  & + .message-body
+    border-radius: 0 0 $radius $radius
+    border-top: none
+
+.message-body
+  border: 1px solid $border
+  border-radius: $radius
+  color: $text
+  padding: 1em 1.25em
+  strong
+    color: inherit