library-mirrors/bulma
1
0
Fork 0
mirror of https://github.com/jgthms/bulma.git synced 2024-11-14 11:14:24 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Add lighter and darker

Browse Source
This commit is contained in:
Jeremy Thomas 2019-05-18 11:54:58 +01:00
parent 770bae827f
commit a1a6a048a1
4 changed files with 51 additions and 60 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -375,7 +375,7 @@ a:hover {
} }
code { code {
background-color: whitesmoke; background-color: #fafafa;
color: #ff3860; color: #ff3860;
font-size: 0.875em; font-size: 0.875em;
font-weight: normal; font-weight: normal;
@ -383,7 +383,7 @@ code {
} }
hr { hr {
background-color: whitesmoke; background-color: #fafafa;
border: none; border: none;
display: block; display: block;
height: 2px; height: 2px;
@ -420,7 +420,7 @@ fieldset {
pre { pre {
-webkit-overflow-scrolling: touch; -webkit-overflow-scrolling: touch;
background-color: whitesmoke; background-color: #fafafa;
color: #4a4a4a; color: #4a4a4a;
font-size: 0.875em; font-size: 0.875em;
overflow-x: auto; 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 { .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; color: #363636;
} }
.button.is-text:active, .button.is-text.is-active { .button.is-text:active, .button.is-text.is-active {
background-color: #e8e8e8; background-color: #ededed;
color: #363636; color: #363636;
} }
@ -2888,7 +2888,7 @@ fieldset[disabled] .button {
} }
.content blockquote { .content blockquote {
background-color: whitesmoke; background-color: #fafafa;
border-left: 5px solid #dbdbdb; border-left: 5px solid #dbdbdb;
padding: 1.25em 1.5em; padding: 1.25em 1.5em;
} }
@ -3073,8 +3073,8 @@ fieldset[disabled] .input,
.textarea[disabled], .textarea[disabled],
fieldset[disabled] fieldset[disabled]
.textarea { .textarea {
background-color: whitesmoke; background-color: #fafafa;
border-color: whitesmoke; border-color: #fafafa;
box-shadow: none; box-shadow: none;
color: #7a7a7a; color: #7a7a7a;
} }
@ -3401,8 +3401,8 @@ fieldset[disabled]
.select select[disabled], .select select[disabled],
fieldset[disabled] .select select { fieldset[disabled] .select select {
background-color: whitesmoke; background-color: #fafafa;
border-color: whitesmoke; border-color: #fafafa;
box-shadow: none; box-shadow: none;
color: #7a7a7a; color: #7a7a7a;
} }
@ -3433,7 +3433,7 @@ fieldset[disabled] .select select:-ms-input-placeholder {
.select select[disabled]:hover, .select select[disabled]:hover,
fieldset[disabled] .select select:hover { fieldset[disabled] .select select:hover {
border-color: whitesmoke; border-color: #fafafa;
} }
.select select:not([multiple]) { .select select:not([multiple]) {
@ -4585,7 +4585,7 @@ fieldset[disabled] .select select:hover {
} }
.notification { .notification {
background-color: whitesmoke; background-color: #fafafa;
border-radius: 4px; border-radius: 4px;
padding: 1.25rem 2.5rem 1.25rem 1.5rem; padding: 1.25rem 2.5rem 1.25rem 1.5rem;
position: relative; position: relative;
@ -5167,7 +5167,7 @@ fieldset[disabled] .select select:hover {
.tag:not(body) { .tag:not(body) {
align-items: center; align-items: center;
background-color: whitesmoke; background-color: #fafafa;
border-radius: 4px; border-radius: 4px;
color: #4a4a4a; color: #4a4a4a;
display: inline-flex; display: inline-flex;
@ -5291,11 +5291,11 @@ fieldset[disabled] .select select:hover {
} }
.tag:not(body).is-delete:hover, .tag:not(body).is-delete:focus { .tag:not(body).is-delete:hover, .tag:not(body).is-delete:focus {
background-color: #e8e8e8; background-color: #ededed;
} }
.tag:not(body).is-delete:active { .tag:not(body).is-delete:active {
background-color: #dbdbdb; background-color: #e0e0e0;
} }
.tag:not(body).is-rounded { .tag:not(body).is-rounded {
@ -5447,7 +5447,7 @@ a.tag:hover {
.number { .number {
align-items: center; align-items: center;
background-color: whitesmoke; background-color: #fafafa;
border-radius: 290486px; border-radius: 290486px;
display: inline-flex; display: inline-flex;
font-size: 1.25rem; font-size: 1.25rem;
@ -5681,7 +5681,7 @@ button.dropdown-item {
a.dropdown-item:hover, a.dropdown-item:hover,
button.dropdown-item:hover { button.dropdown-item:hover {
background-color: whitesmoke; background-color: #fafafa;
color: #0a0a0a; color: #0a0a0a;
} }
@ -5846,7 +5846,7 @@ button.dropdown-item.is-active {
} }
a.list-item { a.list-item {
background-color: whitesmoke; background-color: #fafafa;
cursor: pointer; cursor: pointer;
} }
@ -5946,7 +5946,7 @@ a.list-item {
} }
.menu-list a:hover { .menu-list a:hover {
background-color: whitesmoke; background-color: #fafafa;
color: #363636; color: #363636;
} }
@ -5977,7 +5977,7 @@ a.list-item {
} }
.message { .message {
background-color: whitesmoke; background-color: #fafafa;
border-radius: 4px; border-radius: 4px;
font-size: 1rem; font-size: 1rem;
} }
@ -6145,9 +6145,9 @@ a.list-item {
.message-header { .message-header {
align-items: center; align-items: center;
background-color: #4a4a4a; background-color: white;
border-radius: 4px 4px 0 0; border-radius: 4px 4px 0 0;
color: #fff; color: #363636;
display: flex; display: flex;
font-weight: 700; font-weight: 700;
justify-content: space-between; justify-content: space-between;
@ -6242,7 +6242,7 @@ a.list-item {
.modal-card-head, .modal-card-head,
.modal-card-foot { .modal-card-foot {
align-items: center; align-items: center;
background-color: whitesmoke; background-color: #fafafa;
display: flex; display: flex;
flex-shrink: 0; flex-shrink: 0;
justify-content: flex-start; justify-content: flex-start;
@ -6918,7 +6918,7 @@ a.list-item {
} }
.navbar.has-shadow { .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 { .navbar.is-fixed-bottom, .navbar.is-fixed-top {
@ -6933,7 +6933,7 @@ a.list-item {
} }
.navbar.is-fixed-bottom.has-shadow { .navbar.is-fixed-bottom.has-shadow {
box-shadow: 0 -2px 0 0 whitesmoke; box-shadow: 0 -2px 0 0 #fafafa;
} }
.navbar.is-fixed-top { .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 { .navbar-divider {
background-color: whitesmoke; background-color: #fafafa;
border: none; border: none;
display: none; display: none;
height: 2px; 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; background-color: transparent !important;
} }
.navbar.is-transparent .navbar-dropdown a.navbar-item:focus, .navbar.is-transparent .navbar-dropdown a.navbar-item:hover { .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; color: #0a0a0a;
} }
.navbar.is-transparent .navbar-dropdown a.navbar-item.is-active { .navbar.is-transparent .navbar-dropdown a.navbar-item.is-active {
background-color: whitesmoke; background-color: #fafafa;
color: #3273dc; color: #3273dc;
} }
.navbar-burger { .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; padding-right: 3rem;
} }
.navbar-dropdown a.navbar-item:focus, .navbar-dropdown a.navbar-item:hover { .navbar-dropdown a.navbar-item:focus, .navbar-dropdown a.navbar-item:hover {
background-color: whitesmoke; background-color: #fafafa;
color: #0a0a0a; color: #0a0a0a;
} }
.navbar-dropdown a.navbar-item.is-active { .navbar-dropdown a.navbar-item.is-active {
background-color: whitesmoke; background-color: #fafafa;
color: #3273dc; color: #3273dc;
} }
.navbar.is-spaced .navbar-dropdown, .navbar-dropdown.is-boxed { .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 { .panel-heading {
background-color: whitesmoke; background-color: #fafafa;
border-radius: 4px 4px 0 0; border-radius: 4px 4px 0 0;
color: #363636; color: #363636;
font-size: 1.25em; font-size: 1.25em;
@ -7620,7 +7620,7 @@ label.panel-block {
a.panel-block:hover, a.panel-block:hover,
label.panel-block:hover { label.panel-block:hover {
background-color: whitesmoke; background-color: #fafafa;
} }
.panel-icon { .panel-icon {
@ -7727,7 +7727,7 @@ label.panel-block:hover {
} }
.tabs.is-boxed a:hover { .tabs.is-boxed a:hover {
background-color: whitesmoke; background-color: #fafafa;
border-bottom-color: #dbdbdb; border-bottom-color: #dbdbdb;
} }
@ -7751,7 +7751,7 @@ label.panel-block:hover {
} }
.tabs.is-toggle a:hover { .tabs.is-toggle a:hover {
background-color: whitesmoke; background-color: #fafafa;
border-color: #b5b5b5; border-color: #b5b5b5;
z-index: 2; z-index: 2;
} }
@ -10671,11 +10671,11 @@ label.panel-block:hover {
} }
.bd-prev-next a:hover { .bd-prev-next a:hover {
background-color: whitesmoke; background-color: #fafafa;
} }
.bd-prev-next-bis { .bd-prev-next-bis {
border-top: 2px solid whitesmoke; border-top: 2px solid #fafafa;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
margin-top: 3rem; margin-top: 3rem;
@ -10973,7 +10973,7 @@ label.panel-block:hover {
} }
.highlight { .highlight {
background-color: whitesmoke; background-color: #fafafa;
border-radius: 6px; border-radius: 6px;
color: #586e75; color: #586e75;
} }
@ -12528,7 +12528,7 @@ svg {
} }
.bd-box { .bd-box {
border: 4px solid whitesmoke; border: 4px solid #fafafa;
border-radius: 4px; border-radius: 4px;
} }
@ -12670,7 +12670,7 @@ svg {
} }
.bd-notification { .bd-notification {
background-color: whitesmoke; background-color: #fafafa;
border-radius: 4px; border-radius: 4px;
color: #7a7a7a; color: #7a7a7a;
font-weight: 600; font-weight: 600;
@ -12762,7 +12762,7 @@ svg {
.bd-example, .bd-example,
.bd-structure, .bd-structure,
.bd-snippet { .bd-snippet {
border: 2px solid whitesmoke; border: 2px solid #fafafa;
position: relative; position: relative;
} }
@ -12978,7 +12978,7 @@ svg {
right: 0; right: 0;
top: 0; top: 0;
background: rgba(10, 10, 10, 0.7); background: rgba(10, 10, 10, 0.7);
background: whitesmoke; background: #fafafa;
border: 1px solid #dbdbdb; border: 1px solid #dbdbdb;
content: ""; content: "";
display: block; display: block;
@ -13053,7 +13053,7 @@ svg {
right: 0; right: 0;
top: 0; top: 0;
align-items: center; align-items: center;
background-color: rgba(245, 245, 245, 0.7); background-color: rgba(250, 250, 250, 0.7);
border: none; border: none;
color: rgba(0, 0, 0, 0.5); color: rgba(0, 0, 0, 0.5);
cursor: pointer; cursor: pointer;
@ -13114,7 +13114,7 @@ svg {
} }
.bd-callout { .bd-callout {
background-color: whitesmoke; background-color: #fafafa;
border-radius: 4px; border-radius: 4px;
padding: 1.25rem 2.5rem 1.25rem 1.5rem; padding: 1.25rem 2.5rem 1.25rem 1.5rem;
position: relative; position: relative;
@ -13596,7 +13596,7 @@ svg {
} }
.bd-testimonials { .bd-testimonials {
background-color: whitesmoke; background-color: #fafafa;
} }
.bd-testimonial { .bd-testimonial {
@ -13747,7 +13747,7 @@ svg {
} }
.bd-shoutout { .bd-shoutout {
background-color: whitesmoke; background-color: #fafafa;
padding: 2rem; padding: 2rem;
text-align: center; text-align: center;
} }
@ -13861,7 +13861,7 @@ svg {
} }
.bd-bootstrap-comparison .table .bd-is-empty { .bd-bootstrap-comparison .table .bd-is-empty {
background-color: whitesmoke; background-color: #fafafa;
color: #7a7a7a; color: #7a7a7a;
} }
@ -13892,7 +13892,7 @@ svg {
} }
.bd-klmn-gap { .bd-klmn-gap {
background-color: whitesmoke; background-color: #fafafa;
border-radius: 4px; border-radius: 4px;
color: #ff3860; color: #ff3860;
font-family: monospace; font-family: monospace;

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

@ -27,16 +27,7 @@ meta:
{% endcapture %} {% endcapture %}
{% capture message_colors_example %} {% capture message_colors_example %}
<article class="message is-dark"> {% for color in site.data.colors.justColors %}
<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 %}
<article class="message is-{{ color }}"> <article class="message is-{{ color }}">
<div class="message-header"> <div class="message-header">
<p>{{ color | capitalize }}</p> <p>{{ color | capitalize }}</p>

4
sass/components/message.sass
View File

@ -1,8 +1,8 @@
$message-background-color: $background !default $message-background-color: $background !default
$message-radius: $radius !default $message-radius: $radius !default
$message-header-background-color: $text !default $message-header-background-color: $white !default
$message-header-color: $text-invert !default $message-header-color: $text-strong !default
$message-header-weight: $weight-bold !default $message-header-weight: $weight-bold !default
$message-header-padding: 0.75em 1em !default $message-header-padding: 0.75em 1em !default
$message-header-radius: $radius !default $message-header-radius: $radius !default

2
sass/utilities/derived-variables.sass
View File

@ -63,7 +63,7 @@ $dark-dark: $darker !default
// General colors // General colors
$background: $white-ter !default $background: $white-bis !default
$border: $grey-lighter !default $border: $grey-lighter !default
$border-hover: $grey-light !default $border-hover: $grey-light !default