Fix message colors

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
 

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 {

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>

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>

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

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

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

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