Fix message colors

diff --git a/CHANGELOG.md b/CHANGELOG.md
index eec48ba1502b7653d12f97ccadef21529112353c..adeda541745bbffcb0e25d8a90c5907039754b89 100644 (file)
--- 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 2dceb2698e965dbc7bf2604a41ce9c1907f8abd8..ccb529e1741421b4d449110b37db649f09fab4d9 100644 (file)
--- 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 74a3aebec2b91006434b11164a5ece0d1e2ba436..6e962954833dcf89f5d854c3b9a74ced3defdd79 100644 (file)
--- 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 3cc61f2cbda7d1fc6c5445a660a982e4dc7ad836..146a54544d9933bf6079a9da1f93c0b8ca8f5dc1 100644 (file)
--- 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 db82e8ac2551ee81ee4dc446c5d54b7e9899ed89..e5aa69415fdcd3c40d8b9c7abb66404dee134f48 100644 (file)
--- 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 7ec59828e84ed12a41b6f70dba72f4790d6f6632..a7ea49477620f8d3e85f4cd1fa3c593ec254c052 100644 (file)
--- 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 c2c6daace8249bd22427e049b83f3d4e96b926c4..f38786b5dafb945cb10b01236818b5ae6c21900f 100644 (file)
--- 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 1de82daf8741373c76a72ee0faef736c7390342d..8158ce828de82820c632dff89abce3943481e28a 100644 (file)
--- 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