mirror of
https://github.com/jgthms/bulma.git
synced 2024-11-14 11:14:24 +00:00
Fix message colors
This commit is contained in:
Jeremy Thomas
parent
4a40ad0059
commit
0e5c14ac26
@ -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
|
||||
|
||||
|
||||
@ -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;
|
||||
margin-top: 1em;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
.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 {
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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}}
|
||||
|
||||
@ -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
|
||||
|
||||
@ -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
|
||||
|
||||
@ -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
|
||||
|
||||
Loading…
Reference in New Issue
Block a user