mirror of
https://github.com/jgthms/bulma.git
synced 2024-11-14 11:14:24 +00:00
Add lighter and darker
This commit is contained in:
Jeremy Thomas
parent
770bae827f
commit
a1a6a048a1
@ -375,7 +375,7 @@ a:hover {
|
||||
}
|
||||
|
||||
code {
|
||||
background-color: whitesmoke;
|
||||
background-color: #fafafa;
|
||||
color: #ff3860;
|
||||
font-size: 0.875em;
|
||||
font-weight: normal;
|
||||
@ -383,7 +383,7 @@ code {
|
||||
}
|
||||
|
||||
hr {
|
||||
background-color: whitesmoke;
|
||||
background-color: #fafafa;
|
||||
border: none;
|
||||
display: block;
|
||||
height: 2px;
|
||||
@ -420,7 +420,7 @@ fieldset {
|
||||
|
||||
pre {
|
||||
-webkit-overflow-scrolling: touch;
|
||||
background-color: whitesmoke;
|
||||
background-color: #fafafa;
|
||||
color: #4a4a4a;
|
||||
font-size: 0.875em;
|
||||
overflow-x: auto;
|
||||
@ -1640,12 +1640,12 @@ a.box:active {
|
||||
}
|
||||
|
||||
.button.is-text:hover, .button.is-text.is-hovered, .button.is-text:focus, .button.is-text.is-focused {
|
||||
background-color: whitesmoke;
|
||||
background-color: #fafafa;
|
||||
color: #363636;
|
||||
}
|
||||
|
||||
.button.is-text:active, .button.is-text.is-active {
|
||||
background-color: #e8e8e8;
|
||||
background-color: #ededed;
|
||||
color: #363636;
|
||||
}
|
||||
|
||||
@ -2888,7 +2888,7 @@ fieldset[disabled] .button {
|
||||
}
|
||||
|
||||
.content blockquote {
|
||||
background-color: whitesmoke;
|
||||
background-color: #fafafa;
|
||||
border-left: 5px solid #dbdbdb;
|
||||
padding: 1.25em 1.5em;
|
||||
}
|
||||
@ -3073,8 +3073,8 @@ fieldset[disabled] .input,
|
||||
.textarea[disabled],
|
||||
fieldset[disabled]
|
||||
.textarea {
|
||||
background-color: whitesmoke;
|
||||
border-color: whitesmoke;
|
||||
background-color: #fafafa;
|
||||
border-color: #fafafa;
|
||||
box-shadow: none;
|
||||
color: #7a7a7a;
|
||||
}
|
||||
@ -3401,8 +3401,8 @@ fieldset[disabled]
|
||||
|
||||
.select select[disabled],
|
||||
fieldset[disabled] .select select {
|
||||
background-color: whitesmoke;
|
||||
border-color: whitesmoke;
|
||||
background-color: #fafafa;
|
||||
border-color: #fafafa;
|
||||
box-shadow: none;
|
||||
color: #7a7a7a;
|
||||
}
|
||||
@ -3433,7 +3433,7 @@ fieldset[disabled] .select select:-ms-input-placeholder {
|
||||
|
||||
.select select[disabled]:hover,
|
||||
fieldset[disabled] .select select:hover {
|
||||
border-color: whitesmoke;
|
||||
border-color: #fafafa;
|
||||
}
|
||||
|
||||
.select select:not([multiple]) {
|
||||
@ -4585,7 +4585,7 @@ fieldset[disabled] .select select:hover {
|
||||
}
|
||||
|
||||
.notification {
|
||||
background-color: whitesmoke;
|
||||
background-color: #fafafa;
|
||||
border-radius: 4px;
|
||||
padding: 1.25rem 2.5rem 1.25rem 1.5rem;
|
||||
position: relative;
|
||||
@ -5167,7 +5167,7 @@ fieldset[disabled] .select select:hover {
|
||||
|
||||
.tag:not(body) {
|
||||
align-items: center;
|
||||
background-color: whitesmoke;
|
||||
background-color: #fafafa;
|
||||
border-radius: 4px;
|
||||
color: #4a4a4a;
|
||||
display: inline-flex;
|
||||
@ -5291,11 +5291,11 @@ fieldset[disabled] .select select:hover {
|
||||
}
|
||||
|
||||
.tag:not(body).is-delete:hover, .tag:not(body).is-delete:focus {
|
||||
background-color: #e8e8e8;
|
||||
background-color: #ededed;
|
||||
}
|
||||
|
||||
.tag:not(body).is-delete:active {
|
||||
background-color: #dbdbdb;
|
||||
background-color: #e0e0e0;
|
||||
}
|
||||
|
||||
.tag:not(body).is-rounded {
|
||||
@ -5447,7 +5447,7 @@ a.tag:hover {
|
||||
|
||||
.number {
|
||||
align-items: center;
|
||||
background-color: whitesmoke;
|
||||
background-color: #fafafa;
|
||||
border-radius: 290486px;
|
||||
display: inline-flex;
|
||||
font-size: 1.25rem;
|
||||
@ -5681,7 +5681,7 @@ button.dropdown-item {
|
||||
|
||||
a.dropdown-item:hover,
|
||||
button.dropdown-item:hover {
|
||||
background-color: whitesmoke;
|
||||
background-color: #fafafa;
|
||||
color: #0a0a0a;
|
||||
}
|
||||
|
||||
@ -5846,7 +5846,7 @@ button.dropdown-item.is-active {
|
||||
}
|
||||
|
||||
a.list-item {
|
||||
background-color: whitesmoke;
|
||||
background-color: #fafafa;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
@ -5946,7 +5946,7 @@ a.list-item {
|
||||
}
|
||||
|
||||
.menu-list a:hover {
|
||||
background-color: whitesmoke;
|
||||
background-color: #fafafa;
|
||||
color: #363636;
|
||||
}
|
||||
|
||||
@ -5977,7 +5977,7 @@ a.list-item {
|
||||
}
|
||||
|
||||
.message {
|
||||
background-color: whitesmoke;
|
||||
background-color: #fafafa;
|
||||
border-radius: 4px;
|
||||
font-size: 1rem;
|
||||
}
|
||||
@ -6145,9 +6145,9 @@ a.list-item {
|
||||
|
||||
.message-header {
|
||||
align-items: center;
|
||||
background-color: #4a4a4a;
|
||||
background-color: white;
|
||||
border-radius: 4px 4px 0 0;
|
||||
color: #fff;
|
||||
color: #363636;
|
||||
display: flex;
|
||||
font-weight: 700;
|
||||
justify-content: space-between;
|
||||
@ -6242,7 +6242,7 @@ a.list-item {
|
||||
.modal-card-head,
|
||||
.modal-card-foot {
|
||||
align-items: center;
|
||||
background-color: whitesmoke;
|
||||
background-color: #fafafa;
|
||||
display: flex;
|
||||
flex-shrink: 0;
|
||||
justify-content: flex-start;
|
||||
@ -6918,7 +6918,7 @@ a.list-item {
|
||||
}
|
||||
|
||||
.navbar.has-shadow {
|
||||
box-shadow: 0 2px 0 0 whitesmoke;
|
||||
box-shadow: 0 2px 0 0 #fafafa;
|
||||
}
|
||||
|
||||
.navbar.is-fixed-bottom, .navbar.is-fixed-top {
|
||||
@ -6933,7 +6933,7 @@ a.list-item {
|
||||
}
|
||||
|
||||
.navbar.is-fixed-bottom.has-shadow {
|
||||
box-shadow: 0 -2px 0 0 whitesmoke;
|
||||
box-shadow: 0 -2px 0 0 #fafafa;
|
||||
}
|
||||
|
||||
.navbar.is-fixed-top {
|
||||
@ -7119,7 +7119,7 @@ a.navbar-item:focus, a.navbar-item:focus-within, a.navbar-item:hover, a.navbar-i
|
||||
}
|
||||
|
||||
.navbar-divider {
|
||||
background-color: whitesmoke;
|
||||
background-color: #fafafa;
|
||||
border: none;
|
||||
display: none;
|
||||
height: 2px;
|
||||
@ -7208,11 +7208,11 @@ a.navbar-item:focus, a.navbar-item:focus-within, a.navbar-item:hover, a.navbar-i
|
||||
background-color: transparent !important;
|
||||
}
|
||||
.navbar.is-transparent .navbar-dropdown a.navbar-item:focus, .navbar.is-transparent .navbar-dropdown a.navbar-item:hover {
|
||||
background-color: whitesmoke;
|
||||
background-color: #fafafa;
|
||||
color: #0a0a0a;
|
||||
}
|
||||
.navbar.is-transparent .navbar-dropdown a.navbar-item.is-active {
|
||||
background-color: whitesmoke;
|
||||
background-color: #fafafa;
|
||||
color: #3273dc;
|
||||
}
|
||||
.navbar-burger {
|
||||
@ -7282,11 +7282,11 @@ a.navbar-item:focus, a.navbar-item:focus-within, a.navbar-item:hover, a.navbar-i
|
||||
padding-right: 3rem;
|
||||
}
|
||||
.navbar-dropdown a.navbar-item:focus, .navbar-dropdown a.navbar-item:hover {
|
||||
background-color: whitesmoke;
|
||||
background-color: #fafafa;
|
||||
color: #0a0a0a;
|
||||
}
|
||||
.navbar-dropdown a.navbar-item.is-active {
|
||||
background-color: whitesmoke;
|
||||
background-color: #fafafa;
|
||||
color: #3273dc;
|
||||
}
|
||||
.navbar.is-spaced .navbar-dropdown, .navbar-dropdown.is-boxed {
|
||||
@ -7547,7 +7547,7 @@ a.navbar-item:focus, a.navbar-item:focus-within, a.navbar-item:hover, a.navbar-i
|
||||
}
|
||||
|
||||
.panel-heading {
|
||||
background-color: whitesmoke;
|
||||
background-color: #fafafa;
|
||||
border-radius: 4px 4px 0 0;
|
||||
color: #363636;
|
||||
font-size: 1.25em;
|
||||
@ -7620,7 +7620,7 @@ label.panel-block {
|
||||
|
||||
a.panel-block:hover,
|
||||
label.panel-block:hover {
|
||||
background-color: whitesmoke;
|
||||
background-color: #fafafa;
|
||||
}
|
||||
|
||||
.panel-icon {
|
||||
@ -7727,7 +7727,7 @@ label.panel-block:hover {
|
||||
}
|
||||
|
||||
.tabs.is-boxed a:hover {
|
||||
background-color: whitesmoke;
|
||||
background-color: #fafafa;
|
||||
border-bottom-color: #dbdbdb;
|
||||
}
|
||||
|
||||
@ -7751,7 +7751,7 @@ label.panel-block:hover {
|
||||
}
|
||||
|
||||
.tabs.is-toggle a:hover {
|
||||
background-color: whitesmoke;
|
||||
background-color: #fafafa;
|
||||
border-color: #b5b5b5;
|
||||
z-index: 2;
|
||||
}
|
||||
@ -10671,11 +10671,11 @@ label.panel-block:hover {
|
||||
}
|
||||
|
||||
.bd-prev-next a:hover {
|
||||
background-color: whitesmoke;
|
||||
background-color: #fafafa;
|
||||
}
|
||||
|
||||
.bd-prev-next-bis {
|
||||
border-top: 2px solid whitesmoke;
|
||||
border-top: 2px solid #fafafa;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-top: 3rem;
|
||||
@ -10973,7 +10973,7 @@ label.panel-block:hover {
|
||||
}
|
||||
|
||||
.highlight {
|
||||
background-color: whitesmoke;
|
||||
background-color: #fafafa;
|
||||
border-radius: 6px;
|
||||
color: #586e75;
|
||||
}
|
||||
@ -12528,7 +12528,7 @@ svg {
|
||||
}
|
||||
|
||||
.bd-box {
|
||||
border: 4px solid whitesmoke;
|
||||
border: 4px solid #fafafa;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
@ -12670,7 +12670,7 @@ svg {
|
||||
}
|
||||
|
||||
.bd-notification {
|
||||
background-color: whitesmoke;
|
||||
background-color: #fafafa;
|
||||
border-radius: 4px;
|
||||
color: #7a7a7a;
|
||||
font-weight: 600;
|
||||
@ -12762,7 +12762,7 @@ svg {
|
||||
.bd-example,
|
||||
.bd-structure,
|
||||
.bd-snippet {
|
||||
border: 2px solid whitesmoke;
|
||||
border: 2px solid #fafafa;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
@ -12978,7 +12978,7 @@ svg {
|
||||
right: 0;
|
||||
top: 0;
|
||||
background: rgba(10, 10, 10, 0.7);
|
||||
background: whitesmoke;
|
||||
background: #fafafa;
|
||||
border: 1px solid #dbdbdb;
|
||||
content: "";
|
||||
display: block;
|
||||
@ -13053,7 +13053,7 @@ svg {
|
||||
right: 0;
|
||||
top: 0;
|
||||
align-items: center;
|
||||
background-color: rgba(245, 245, 245, 0.7);
|
||||
background-color: rgba(250, 250, 250, 0.7);
|
||||
border: none;
|
||||
color: rgba(0, 0, 0, 0.5);
|
||||
cursor: pointer;
|
||||
@ -13114,7 +13114,7 @@ svg {
|
||||
}
|
||||
|
||||
.bd-callout {
|
||||
background-color: whitesmoke;
|
||||
background-color: #fafafa;
|
||||
border-radius: 4px;
|
||||
padding: 1.25rem 2.5rem 1.25rem 1.5rem;
|
||||
position: relative;
|
||||
@ -13596,7 +13596,7 @@ svg {
|
||||
}
|
||||
|
||||
.bd-testimonials {
|
||||
background-color: whitesmoke;
|
||||
background-color: #fafafa;
|
||||
}
|
||||
|
||||
.bd-testimonial {
|
||||
@ -13747,7 +13747,7 @@ svg {
|
||||
}
|
||||
|
||||
.bd-shoutout {
|
||||
background-color: whitesmoke;
|
||||
background-color: #fafafa;
|
||||
padding: 2rem;
|
||||
text-align: center;
|
||||
}
|
||||
@ -13861,7 +13861,7 @@ svg {
|
||||
}
|
||||
|
||||
.bd-bootstrap-comparison .table .bd-is-empty {
|
||||
background-color: whitesmoke;
|
||||
background-color: #fafafa;
|
||||
color: #7a7a7a;
|
||||
}
|
||||
|
||||
@ -13892,7 +13892,7 @@ svg {
|
||||
}
|
||||
|
||||
.bd-klmn-gap {
|
||||
background-color: whitesmoke;
|
||||
background-color: #fafafa;
|
||||
border-radius: 4px;
|
||||
color: #ff3860;
|
||||
font-family: monospace;
|
||||
|
||||
@ -27,16 +27,7 @@ meta:
|
||||
{% endcapture %}
|
||||
|
||||
{% capture message_colors_example %}
|
||||
<article class="message is-dark">
|
||||
<div class="message-header">
|
||||
<p>Dark</p>
|
||||
<button class="delete" aria-label="delete"></button>
|
||||
</div>
|
||||
<div class="message-body">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. <strong>Pellentesque risus mi</strong>, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam, et dictum <a>felis venenatis</a> efficitur. Aenean ac <em>eleifend lacus</em>, 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>
|
||||
{% for color in site.data.colors.allColors %}
|
||||
{% for color in site.data.colors.justColors %}
|
||||
<article class="message is-{{ color }}">
|
||||
<div class="message-header">
|
||||
<p>{{ color | capitalize }}</p>
|
||||
|
||||
@ -1,8 +1,8 @@
|
||||
$message-background-color: $background !default
|
||||
$message-radius: $radius !default
|
||||
|
||||
$message-header-background-color: $text !default
|
||||
$message-header-color: $text-invert !default
|
||||
$message-header-background-color: $white !default
|
||||
$message-header-color: $text-strong !default
|
||||
$message-header-weight: $weight-bold !default
|
||||
$message-header-padding: 0.75em 1em !default
|
||||
$message-header-radius: $radius !default
|
||||
|
||||
@ -63,7 +63,7 @@ $dark-dark: $darker !default
|
||||
|
||||
// General colors
|
||||
|
||||
$background: $white-ter !default
|
||||
$background: $white-bis !default
|
||||
|
||||
$border: $grey-lighter !default
|
||||
$border-hover: $grey-light !default
|
||||
|
||||
Loading…
Reference in New Issue
Block a user