Ark/bulma
1
0
Fork 0
mirror of https://github.com/jgthms/bulma synced 2026-03-22 05:04:28 -07:00
Code Issues Packages Projects Releases Wiki Activity

Fix message colors

Browse Source
This commit is contained in:
Jeremy Thomas
2016-10-30 19:20:51 +00:00
parent 4a40ad0059
commit 0e5c14ac26
8 changed files with 215 additions and 297 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
CHANGELOG.md
View File

@@ -14,6 +14,9 @@
* Input icons require the `.icon` container * Input icons require the `.icon` container
* Deprecate `.media-number` * Deprecate `.media-number`
* Fix `.level-item` height * Fix `.level-item` height
* Fix `.menu` spacing
* Deprecate `.menu-nav`
* Fix message colors (!)
## 0.2.2 ## 0.2.2

121
docs/css/bulma-docs.css
View File

@@ -95,7 +95,7 @@ th {
html { html {
background-color: whitesmoke; background-color: whitesmoke;
font-size: 1rem; font-size: 16px;
-moz-osx-font-smoothing: grayscale; -moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
min-width: 300px; min-width: 300px;
@@ -3215,16 +3215,19 @@ a.box:active {
padding-top: 1.5rem; padding-top: 1.5rem;
} }
.menu-nav a { .menu {
display: block; font-size: 1rem;
padding: 5px 10px; }
.menu-list {
line-height: 1.25;
} }
.menu-list a { .menu-list a {
border-radius: 2px; border-radius: 2px;
color: #4a4a4a; color: #4a4a4a;
display: block; display: block;
padding: 5px 10px; padding: 0.5em 0.75em;
} }
.menu-list a:hover { .menu-list a:hover {
@@ -3239,51 +3242,29 @@ a.box:active {
.menu-list li ul { .menu-list li ul {
border-left: 1px solid #dbdbdb; border-left: 1px solid #dbdbdb;
margin: 10px; margin: 0.75em;
padding-left: 10px; padding-left: 0.75em;
} }
.menu-label { .menu-label {
color: #7a7a7a; color: #7a7a7a;
font-size: 0.75rem; font-size: 0.75em;
letter-spacing: 1px; letter-spacing: 1px;
margin-bottom: 5px;
text-transform: uppercase; text-transform: uppercase;
} }
.menu-label:not(:first-child) { .menu-label:not(:first-child) {
margin-top: 20px; margin-top: 1em;
} }
.message-body { .menu-label:not(:last-child) {
border: 1px solid #dbdbdb; margin-bottom: 1em;
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;
}
.message-header + .message-body {
border-radius: 0 0 3px 3px;
border-top: none;
} }
.message { .message {
background-color: whitesmoke; background-color: whitesmoke;
border-radius: 3px; border-radius: 3px;
font-size: 1rem;
} }
.message:not(:last-child) { .message:not(:last-child) {
@@ -3301,11 +3282,11 @@ a.box:active {
.message.is-white .message-body { .message.is-white .message-body {
border-color: white; border-color: white;
color: #666666; color: #4d4d4d;
} }
.message.is-black { .message.is-black {
background-color: whitesmoke; background-color: #fafafa;
} }
.message.is-black .message-header { .message.is-black .message-header {
@@ -3315,11 +3296,11 @@ a.box:active {
.message.is-black .message-body { .message.is-black .message-body {
border-color: #0a0a0a; border-color: #0a0a0a;
color: gray; color: #090909;
} }
.message.is-light { .message.is-light {
background-color: whitesmoke; background-color: #fafafa;
} }
.message.is-light .message-header { .message.is-light .message-header {
@@ -3329,11 +3310,11 @@ a.box:active {
.message.is-light .message-body { .message.is-light .message-body {
border-color: whitesmoke; border-color: whitesmoke;
color: #666666; color: #505050;
} }
.message.is-dark { .message.is-dark {
background-color: whitesmoke; background-color: #fafafa;
} }
.message.is-dark .message-header { .message.is-dark .message-header {
@@ -3343,11 +3324,11 @@ a.box:active {
.message.is-dark .message-body { .message.is-dark .message-body {
border-color: #363636; border-color: #363636;
color: gray; color: #2a2a2a;
} }
.message.is-primary { .message.is-primary {
background-color: #ebfffc; background-color: #f5fffd;
} }
.message.is-primary .message-header { .message.is-primary .message-header {
@@ -3357,11 +3338,11 @@ a.box:active {
.message.is-primary .message-body { .message.is-primary .message-body {
border-color: #00d1b2; border-color: #00d1b2;
color: gray; color: #021310;
} }
.message.is-info { .message.is-info {
background-color: #eef3fc; background-color: #f6f9fe;
} }
.message.is-info .message-header { .message.is-info .message-header {
@@ -3371,11 +3352,11 @@ a.box:active {
.message.is-info .message-body { .message.is-info .message-body {
border-color: #3273dc; border-color: #3273dc;
color: gray; color: #22509a;
} }
.message.is-success { .message.is-success {
background-color: #eefcf3; background-color: #f6fef9;
} }
.message.is-success .message-header { .message.is-success .message-header {
@@ -3385,11 +3366,11 @@ a.box:active {
.message.is-success .message-body { .message.is-success .message-body {
border-color: #23d160; border-color: #23d160;
color: gray; color: #0e301a;
} }
.message.is-warning { .message.is-warning {
background-color: #fffbeb; background-color: #fffdf5;
} }
.message.is-warning .message-header { .message.is-warning .message-header {
@@ -3399,11 +3380,11 @@ a.box:active {
.message.is-warning .message-body { .message.is-warning .message-body {
border-color: #ffdd57; border-color: #ffdd57;
color: gray; color: #3b3108;
} }
.message.is-danger { .message.is-danger {
background-color: #ffebef; background-color: #fff5f7;
} }
.message.is-danger .message-header { .message.is-danger .message-header {
@@ -3413,7 +3394,45 @@ a.box:active {
.message.is-danger .message-body { .message.is-danger .message-body {
border-color: #ff3860; 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 { .modal-background {

77
docs/documentation/components/menu.html
View File

@@ -13,79 +13,52 @@ doc-subtab: menu
<hr> <hr>
<div class="columns"> {% capture menu_example %}
<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 %}
<aside class="menu"> <aside class="menu">
<p class="menu-label"> <p class="menu-label">
General General
</p> </p>
<ul class="menu-list"> <ul class="menu-list">
<li><a href="#">Dashboard</a></li> <li><a>Dashboard</a></li>
<li><a href="#">Customers</a></li> <li><a>Customers</a></li>
</ul> </ul>
<p class="menu-label"> <p class="menu-label">
Administration Administration
</p> </p>
<ul class="menu-list"> <ul class="menu-list">
<li><a href="#">Team Settings</a></li> <li><a>Team Settings</a></li>
<li> <li>
<a class="is-active" href="#">Manage Your Team</a> <a class="is-active">Manage Your Team</a>
<ul> <ul>
<li><a href="#">Members</a></li> <li><a>Members</a></li>
<li><a href="#">Plugins</a></li> <li><a>Plugins</a></li>
<li><a href="#">Add a member</a></li> <li><a>Add a member</a></li>
</ul> </ul>
</li> </li>
<li><a href="#">Invitations</a></li> <li><a>Invitations</a></li>
<li><a href="#">Authentication</a></li> <li><a>Cloud Storage Environment Settings</a></li>
<li><a>Authentication</a></li>
</ul> </ul>
<p class="menu-label"> <p class="menu-label">
Transactions Transactions
</p> </p>
<ul class="menu-list"> <ul class="menu-list">
<li><a href="#">Payments</a></li> <li><a>Payments</a></li>
<li><a href="#">Transfers</a></li> <li><a>Transfers</a></li>
<li><a href="#">Balance</a></li> <li><a>Balance</a></li>
</ul> </ul>
</aside> </aside>
{% endcapture %}
<div class="columns">
<div class="column is-3">
{{menu_example}}
</div>
<div class="column">
{% highlight html %}
{{menu_example}}
{% endhighlight %} {% endhighlight %}
</div> </div>
</div> </div>
</div> </div>
</section> </section>

216
docs/documentation/components/message.html
View File

@@ -15,206 +15,99 @@ doc-subtab: message
<hr> <hr>
<div class="columns"> {% capture message_example %}
<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 %}
<article class="message"> <article class="message">
<div class="message-header"> <div class="message-header">
Hello World <p>Hello World</p>
<button class="delete"></button>
</div> </div>
<div class="message-body"> <div class="message-body">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. 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.
Pellentesque risus mi, tempus quis placerat ut, porta nec </div>
nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam </article>
gravida purus diam, et dictum felis venenatis efficitur. <article class="message is-dark">
Aenean ac eleifend lacus, in mollis lectus. Donec sodales, <div class="message-header">
arcu et sollicitudin porttitor, tortor urna tempor ligula, <p>Dark</p>
id porttitor mi magna a neque. Donec dui urna, vehicula et <button class="delete"></button>
sem eget, facilisis sodales sem. </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> </div>
</article> </article>
<article class="message is-primary"> <article class="message is-primary">
<div class="message-header"> <div class="message-header">
Primary <p>Primary</p>
<button class="delete"></button>
</div> </div>
<div class="message-body"> <div class="message-body">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. 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.
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> </div>
</article> </article>
<article class="message is-info"> <article class="message is-info">
<div class="message-header"> <div class="message-header">
Info <p>Info</p>
<button class="delete"></button>
</div> </div>
<div class="message-body"> <div class="message-body">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. 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.
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> </div>
</article> </article>
<article class="message is-success"> <article class="message is-success">
<div class="message-header"> <div class="message-header">
Success <p>Success</p>
<button class="delete"></button>
</div> </div>
<div class="message-body"> <div class="message-body">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. 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.
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> </div>
</article> </article>
<article class="message is-warning"> <article class="message is-warning">
<div class="message-header"> <div class="message-header">
Warning <p>Warning</p>
<button class="delete"></button>
</div> </div>
<div class="message-body"> <div class="message-body">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. 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.
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> </div>
</article> </article>
<article class="message is-danger"> <article class="message is-danger">
<div class="message-header"> <div class="message-header">
Danger <p>Danger</p>
<button class="delete"></button>
</div> </div>
<div class="message-body"> <div class="message-body">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. 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.
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> </div>
</article> </article>
{% endcapture %}
<div class="columns">
<div class="column is-half">
{{message_example}}
</div>
<div class="column is-half">
{% highlight html %}
{{message_example}}
{% endhighlight %} {% endhighlight %}
</div> </div>
</div> </div>
<hr> <hr>
<h3 class="subtitle">Message body only</h3> <h3 class="subtitle">Message body only</h3>
<div class="content">
<div class="content"> <p>You can <strong>omit</strong> the message header:</p>
<p>You can <strong>omit</strong> the message header:</p> </div>
</div> {% capture message_body_example %}
<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 %}
<article class="message"> <article class="message">
<div class="message-body"> <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> </div>
</article> </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"> <article class="message is-primary">
<div class="message-body"> <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.
@@ -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. 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> </div>
</article> </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 %} {% endhighlight %}
</div> </div>
</div> </div>
</div> </div>
</section> </section>

12
docs/documentation/elements/delete.html
View File

@@ -74,12 +74,22 @@ doc-subtab: delete
<button class="delete"></button> <button class="delete"></button>
Lorem ipsum dolor sit amet, consectetur adipiscing elit lorem ipsum dolor sit amet, consectetur adipiscing elit Lorem ipsum dolor sit amet, consectetur adipiscing elit lorem ipsum dolor sit amet, consectetur adipiscing elit
</div> </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 %} {% endcapture %}
<div class="columns"> <div class="columns">
<div class="column"> <div class="column">
<div class="content"> <div class="content">
<p> <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> </p>
</div> </div>
{{cross_elements_example}} {{cross_elements_example}}

3
sass/base/generic.sass
View File

@@ -1,8 +1,9 @@
$body-background: $white-ter !default $body-background: $white-ter !default
$body-size: $size-6 !default
html html
background-color: $body-background background-color: $body-background
font-size: $size-normal font-size: $body-size
-moz-osx-font-smoothing: grayscale -moz-osx-font-smoothing: grayscale
-webkit-font-smoothing: antialiased -webkit-font-smoothing: antialiased
min-width: 300px min-width: 300px

20
sass/components/menu.sass
View File

@@ -1,14 +1,13 @@
.menu-nav .menu
a font-size: $size-normal
display: block
padding: 5px 10px
.menu-list .menu-list
line-height: 1.25
a a
border-radius: $radius-small border-radius: $radius-small
color: $text color: $text
display: block display: block
padding: 5px 10px padding: 0.5em 0.75em
&:hover &:hover
background-color: $background background-color: $background
color: $link color: $link
@@ -19,14 +18,15 @@
li li
ul ul
border-left: 1px solid $border border-left: 1px solid $border
margin: 10px margin: 0.75em
padding-left: 10px padding-left: 0.75em
.menu-label .menu-label
color: $text-light color: $text-light
font-size: $size-small font-size: 0.75em
letter-spacing: 1px letter-spacing: 1px
margin-bottom: 5px
text-transform: uppercase text-transform: uppercase
&:not(:first-child) &:not(:first-child)
margin-top: 20px margin-top: 1em
&:not(:last-child)
margin-bottom: 1em

60
sass/components/message.sass
View File

@@ -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 .message
+block +block
background-color: $background background-color: $background
border-radius: $radius border-radius: $radius
font-size: $size-normal
// Colors // Colors
@each $name, $pair in $colors @each $name, $pair in $colors
$color: nth($pair, 1) $color: nth($pair, 1)
$color-invert: nth($pair, 2) $color-invert: nth($pair, 2)
$lightning: max((100% - lightness($color)) - 4%, 0%) $color-lightning: max((100% - lightness($color)) - 2%, 0%)
$darkness: max(lightness($color) - 10%, lightness($color)) $color-luminance: colorLuminance($color)
$darken-percentage: $color-luminance * 70%
$desaturate-percentage: $color-luminance * 30%
&.is-#{$name} &.is-#{$name}
background-color: lighten($color, $lightning) background-color: lighten($color, $color-lightning)
.message-header .message-header
background-color: $color background-color: $color
color: $color-invert color: $color-invert
.message-body .message-body
border-color: $color border-color: $color
@if (colorLuminance($color) > 0.8) color: desaturate(darken($color, $darken-percentage), $desaturate-percentage)
color: desaturate(lighten(darken($color, 100%), 40%), 40%)
@else .message-header
color: desaturate(lighten(darken($color, 100%), 50%), 30%) 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