library-mirrors/bulma
1
0
Fork 0
mirror of https://github.com/jgthms/bulma.git synced 2025-01-09 15:44:25 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Use primary color in CSS variable for the message component

Browse Source
This commit is contained in:
Jeremy Thomas 2020-08-15 08:59:45 +01:00
parent 7d2dcba944
commit 0e4eda2d81
4 changed files with 124 additions and 120 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

226
css/bulma.css vendored
View File

@ -972,18 +972,18 @@ fieldset[disabled] .button.is-dark.is-inverted.is-outlined {
.button.is-primary {
background-color: var(--turquoise, #00d1b2);
border-color: transparent;
color: var(--turquoise, #00d1b2);
color: var(--white, #fff);
}
.button.is-primary:hover, .button.is-primary.is-hovered {
background-color: var(--turquoise, #00d1b2);
border-color: transparent;
color: var(--turquoise, #00d1b2);
color: var(--white, #fff);
}
.button.is-primary:focus, .button.is-primary.is-focused {
border-color: transparent;
color: var(--turquoise, #00d1b2);
color: var(--white, #fff);
}
.button.is-primary:focus:not(:active), .button.is-primary.is-focused:not(:active) {
@ -993,7 +993,7 @@ fieldset[disabled] .button.is-dark.is-inverted.is-outlined {
.button.is-primary:active, .button.is-primary.is-active {
background-color: var(--turquoise, #00d1b2);
border-color: transparent;
color: var(--turquoise, #00d1b2);
color: var(--white, #fff);
}
.button.is-primary[disabled],
@ -1004,24 +1004,24 @@ fieldset[disabled] .button.is-primary {
}
.button.is-primary.is-inverted {
background-color: var(--turquoise, #00d1b2);
background-color: var(--white, #fff);
color: var(--turquoise, #00d1b2);
}
.button.is-primary.is-inverted:hover, .button.is-primary.is-inverted.is-hovered {
background-color: var(--turquoise, #00d1b2);
background-color: var(--white, #fff);
}
.button.is-primary.is-inverted[disabled],
fieldset[disabled] .button.is-primary.is-inverted {
background-color: var(--turquoise, #00d1b2);
background-color: var(--white, #fff);
border-color: transparent;
box-shadow: none;
color: var(--turquoise, #00d1b2);
}
.button.is-primary.is-loading::after {
border-color: transparent transparent var(--turquoise, #00d1b2) var(--turquoise, #00d1b2) !important;
border-color: transparent transparent var(--white, #fff) var(--white, #fff) !important;
}
.button.is-primary.is-outlined {
@ -1033,7 +1033,7 @@ fieldset[disabled] .button.is-primary.is-inverted {
.button.is-primary.is-outlined:hover, .button.is-primary.is-outlined.is-hovered, .button.is-primary.is-outlined:focus, .button.is-primary.is-outlined.is-focused {
background-color: var(--turquoise, #00d1b2);
border-color: var(--turquoise, #00d1b2);
color: var(--turquoise, #00d1b2);
color: var(--white, #fff);
}
.button.is-primary.is-outlined.is-loading::after {
@ -1041,7 +1041,7 @@ fieldset[disabled] .button.is-primary.is-inverted {
}
.button.is-primary.is-outlined.is-loading:hover::after, .button.is-primary.is-outlined.is-loading.is-hovered::after, .button.is-primary.is-outlined.is-loading:focus::after, .button.is-primary.is-outlined.is-loading.is-focused::after {
border-color: transparent transparent var(--turquoise, #00d1b2) var(--turquoise, #00d1b2) !important;
border-color: transparent transparent var(--white, #fff) var(--white, #fff) !important;
}
.button.is-primary.is-outlined[disabled],
@ -1054,12 +1054,12 @@ fieldset[disabled] .button.is-primary.is-outlined {
.button.is-primary.is-inverted.is-outlined {
background-color: transparent;
border-color: var(--turquoise, #00d1b2);
color: var(--turquoise, #00d1b2);
border-color: var(--white, #fff);
color: var(--white, #fff);
}
.button.is-primary.is-inverted.is-outlined:hover, .button.is-primary.is-inverted.is-outlined.is-hovered, .button.is-primary.is-inverted.is-outlined:focus, .button.is-primary.is-inverted.is-outlined.is-focused {
background-color: var(--turquoise, #00d1b2);
background-color: var(--white, #fff);
color: var(--turquoise, #00d1b2);
}
@ -1070,26 +1070,26 @@ fieldset[disabled] .button.is-primary.is-outlined {
.button.is-primary.is-inverted.is-outlined[disabled],
fieldset[disabled] .button.is-primary.is-inverted.is-outlined {
background-color: transparent;
border-color: var(--turquoise, #00d1b2);
border-color: var(--white, #fff);
box-shadow: none;
color: var(--turquoise, #00d1b2);
color: var(--white, #fff);
}
.button.is-primary.is-light {
background-color: var(--turquoise, #00d1b2);
color: var(--turquoise, #00d1b2);
background-color: #ebfffc;
color: #00947e;
}
.button.is-primary.is-light:hover, .button.is-primary.is-light.is-hovered {
background-color: var(--turquoise, #00d1b2);
background-color: #defffa;
border-color: transparent;
color: var(--turquoise, #00d1b2);
color: #00947e;
}
.button.is-primary.is-light:active, .button.is-primary.is-light.is-active {
background-color: var(--turquoise, #00d1b2);
background-color: #d1fff8;
border-color: transparent;
color: var(--turquoise, #00d1b2);
color: #00947e;
}
.button.is-link {
@ -2316,12 +2316,12 @@ fieldset[disabled] .button {
.notification.is-primary {
background-color: var(--turquoise, #00d1b2);
color: var(--turquoise, #00d1b2);
color: var(--white, #fff);
}
.notification.is-primary.is-light {
background-color: var(--turquoise, #00d1b2);
color: var(--turquoise, #00d1b2);
background-color: #ebfffc;
color: #00947e;
}
.notification.is-link {
@ -2649,7 +2649,7 @@ fieldset[disabled] .button {
.table th.is-primary {
background-color: var(--turquoise, #00d1b2);
border-color: var(--turquoise, #00d1b2);
color: var(--turquoise, #00d1b2);
color: var(--white, #fff);
}
.table td.is-link,
@ -2696,7 +2696,7 @@ fieldset[disabled] .button {
.table td.is-selected,
.table th.is-selected {
background-color: var(--turquoise, #00d1b2);
color: var(--turquoise, #00d1b2);
color: var(--white, #fff);
}
.table td.is-selected a,
@ -2721,7 +2721,7 @@ fieldset[disabled] .button {
.table tr.is-selected {
background-color: var(--turquoise, #00d1b2);
color: var(--turquoise, #00d1b2);
color: var(--white, #fff);
}
.table tr.is-selected a,
@ -2731,7 +2731,7 @@ fieldset[disabled] .button {
.table tr.is-selected td,
.table tr.is-selected th {
border-color: var(--turquoise, #00d1b2);
border-color: var(--white, #fff);
color: currentColor;
}
@ -2915,12 +2915,12 @@ fieldset[disabled] .button {
.tag:not(body).is-primary {
background-color: var(--turquoise, #00d1b2);
color: var(--turquoise, #00d1b2);
color: var(--white, #fff);
}
.tag:not(body).is-primary.is-light {
background-color: var(--turquoise, #00d1b2);
color: var(--turquoise, #00d1b2);
background-color: #ebfffc;
color: #00947e;
}
.tag:not(body).is-link {
@ -3830,25 +3830,25 @@ fieldset[disabled] .select select:hover {
.file.is-primary .file-cta {
background-color: var(--turquoise, #00d1b2);
border-color: transparent;
color: var(--turquoise, #00d1b2);
color: var(--white, #fff);
}
.file.is-primary:hover .file-cta, .file.is-primary.is-hovered .file-cta {
background-color: var(--turquoise, #00d1b2);
border-color: transparent;
color: var(--turquoise, #00d1b2);
color: var(--white, #fff);
}
.file.is-primary:focus .file-cta, .file.is-primary.is-focused .file-cta {
border-color: transparent;
box-shadow: 0 0 0.5em var(--turquoise, #00d1b2);
color: var(--turquoise, #00d1b2);
color: var(--white, #fff);
}
.file.is-primary:active .file-cta, .file.is-primary.is-active .file-cta {
background-color: var(--turquoise, #00d1b2);
border-color: transparent;
color: var(--turquoise, #00d1b2);
color: var(--white, #fff);
}
.file.is-link .file-cta {
@ -5004,139 +5004,143 @@ button.dropdown-item.is-active {
}
.message.is-white {
background-color: white;
background-color: var(--white-light, white);
}
.message.is-white .message-header {
background-color: white;
color: #0a0a0a;
background-color: var(--white, white);
color: var(--white-invert, #0a0a0a);
}
.message.is-white .message-body {
border-color: white;
border-color: var(--white, white);
color: var(--white-dark, );
}
.message.is-black {
background-color: #fafafa;
background-color: var(--black-light, #fafafa);
}
.message.is-black .message-header {
background-color: #0a0a0a;
color: white;
background-color: var(--black, #0a0a0a);
color: var(--black-invert, white);
}
.message.is-black .message-body {
border-color: #0a0a0a;
border-color: var(--black, #0a0a0a);
color: var(--black-dark, );
}
.message.is-light {
background-color: var(--white-ter, whitesmoke);
background-color: var(--light-light, var(--white-ter, whitesmoke));
}
.message.is-light .message-header {
background-color: var(--white-ter, whitesmoke);
color: var(--white-ter, whitesmoke);
background-color: var(--light, var(--white-ter, whitesmoke));
color: var(--light-invert, var(--white-ter, whitesmoke));
}
.message.is-light .message-body {
border-color: var(--white-ter, whitesmoke);
border-color: var(--light, var(--white-ter, whitesmoke));
color: var(--light-dark, );
}
.message.is-dark {
background-color: var(--grey-darker, #363636);
background-color: var(--dark-light, var(--grey-darker, #363636));
}
.message.is-dark .message-header {
background-color: var(--grey-darker, #363636);
color: var(--grey-darker, #363636);
background-color: var(--dark, var(--grey-darker, #363636));
color: var(--dark-invert, var(--grey-darker, #363636));
}
.message.is-dark .message-body {
border-color: var(--grey-darker, #363636);
border-color: var(--dark, var(--grey-darker, #363636));
color: var(--dark-dark, );
}
.message.is-primary {
background-color: var(--turquoise, #00d1b2);
background-color: var(--primary-light, #ebfffc);
}
.message.is-primary .message-header {
background-color: var(--turquoise, #00d1b2);
color: var(--turquoise, #00d1b2);
background-color: var(--primary, var(--turquoise, #00d1b2));
color: var(--primary-invert, var(--white, #fff));
}
.message.is-primary .message-body {
border-color: var(--turquoise, #00d1b2);
color: var(--turquoise, #00d1b2);
border-color: var(--primary, var(--turquoise, #00d1b2));
color: var(--primary-dark, #00947e);
}
.message.is-link {
background-color: var(--blue, #3273dc);
background-color: var(--link-light, var(--blue, #3273dc));
}
.message.is-link .message-header {
background-color: var(--blue, #3273dc);
color: var(--blue, #3273dc);
background-color: var(--link, var(--blue, #3273dc));
color: var(--link-invert, var(--blue, #3273dc));
}
.message.is-link .message-body {
border-color: var(--blue, #3273dc);
color: var(--blue, #3273dc);
border-color: var(--link, var(--blue, #3273dc));
color: var(--link-dark, var(--blue, #3273dc));
}
.message.is-info {
background-color: var(--cyan, #3298dc);
background-color: var(--info-light, var(--cyan, #3298dc));
}
.message.is-info .message-header {
background-color: var(--cyan, #3298dc);
color: var(--cyan, #3298dc);
background-color: var(--info, var(--cyan, #3298dc));
color: var(--info-invert, var(--cyan, #3298dc));
}
.message.is-info .message-body {
border-color: var(--cyan, #3298dc);
color: var(--cyan, #3298dc);
border-color: var(--info, var(--cyan, #3298dc));
color: var(--info-dark, var(--cyan, #3298dc));
}
.message.is-success {
background-color: #effaf3;
background-color: var(--success-light, #effaf3);
}
.message.is-success .message-header {
background-color: var(--green, #48c774);
color: var(--white, #fff);
background-color: var(--success, var(--green, #48c774));
color: var(--success-invert, var(--white, #fff));
}
.message.is-success .message-body {
border-color: var(--green, #48c774);
color: #257942;
border-color: var(--success, var(--green, #48c774));
color: var(--success-dark, #257942);
}
.message.is-warning {
background-color: var(--yellow, #ffdd57);
background-color: var(--warning-light, var(--yellow, #ffdd57));
}
.message.is-warning .message-header {
background-color: var(--yellow, #ffdd57);
color: var(--yellow, #ffdd57);
background-color: var(--warning, var(--yellow, #ffdd57));
color: var(--warning-invert, var(--yellow, #ffdd57));
}
.message.is-warning .message-body {
border-color: var(--yellow, #ffdd57);
color: var(--yellow, #ffdd57);
border-color: var(--warning, var(--yellow, #ffdd57));
color: var(--warning-dark, var(--yellow, #ffdd57));
}
.message.is-danger {
background-color: var(--red, #f14668);
background-color: var(--danger-light, var(--red, #f14668));
}
.message.is-danger .message-header {
background-color: var(--red, #f14668);
color: var(--red, #f14668);
background-color: var(--danger, var(--red, #f14668));
color: var(--danger-invert, var(--red, #f14668));
}
.message.is-danger .message-body {
border-color: var(--red, #f14668);
color: var(--red, #f14668);
border-color: var(--danger, var(--red, #f14668));
color: var(--danger-dark, var(--red, #f14668));
}
.message-header {
@ -5536,12 +5540,12 @@ button.dropdown-item.is-active {
.navbar.is-primary {
background-color: var(--turquoise, #00d1b2);
color: var(--turquoise, #00d1b2);
color: var(--white, #fff);
}
.navbar.is-primary .navbar-brand > .navbar-item,
.navbar.is-primary .navbar-brand .navbar-link {
color: var(--turquoise, #00d1b2);
color: var(--white, #fff);
}
.navbar.is-primary .navbar-brand > a.navbar-item:focus, .navbar.is-primary .navbar-brand > a.navbar-item:hover, .navbar.is-primary .navbar-brand > a.navbar-item.is-active,
@ -5549,15 +5553,15 @@ button.dropdown-item.is-active {
.navbar.is-primary .navbar-brand .navbar-link:hover,
.navbar.is-primary .navbar-brand .navbar-link.is-active {
background-color: var(--turquoise, #00d1b2);
color: var(--turquoise, #00d1b2);
color: var(--white, #fff);
}
.navbar.is-primary .navbar-brand .navbar-link::after {
border-color: var(--turquoise, #00d1b2);
border-color: var(--white, #fff);
}
.navbar.is-primary .navbar-burger {
color: var(--turquoise, #00d1b2);
color: var(--white, #fff);
}
@media screen and (min-width: 1024px) {
@ -5565,7 +5569,7 @@ button.dropdown-item.is-active {
.navbar.is-primary .navbar-start .navbar-link,
.navbar.is-primary .navbar-end > .navbar-item,
.navbar.is-primary .navbar-end .navbar-link {
color: var(--turquoise, #00d1b2);
color: var(--white, #fff);
}
.navbar.is-primary .navbar-start > a.navbar-item:focus, .navbar.is-primary .navbar-start > a.navbar-item:hover, .navbar.is-primary .navbar-start > a.navbar-item.is-active,
.navbar.is-primary .navbar-start .navbar-link:focus,
@ -5578,21 +5582,21 @@ button.dropdown-item.is-active {
.navbar.is-primary .navbar-end .navbar-link:hover,
.navbar.is-primary .navbar-end .navbar-link.is-active {
background-color: var(--turquoise, #00d1b2);
color: var(--turquoise, #00d1b2);
color: var(--white, #fff);
}
.navbar.is-primary .navbar-start .navbar-link::after,
.navbar.is-primary .navbar-end .navbar-link::after {
border-color: var(--turquoise, #00d1b2);
border-color: var(--white, #fff);
}
.navbar.is-primary .navbar-item.has-dropdown:focus .navbar-link,
.navbar.is-primary .navbar-item.has-dropdown:hover .navbar-link,
.navbar.is-primary .navbar-item.has-dropdown.is-active .navbar-link {
background-color: var(--turquoise, #00d1b2);
color: var(--turquoise, #00d1b2);
color: var(--white, #fff);
}
.navbar.is-primary .navbar-dropdown a.navbar-item.is-active {
background-color: var(--turquoise, #00d1b2);
color: var(--turquoise, #00d1b2);
color: var(--white, #fff);
}
}
@ -6580,7 +6584,7 @@ a.navbar-item:focus, a.navbar-item:focus-within, a.navbar-item:hover, a.navbar-i
.panel.is-primary .panel-heading {
background-color: var(--turquoise, #00d1b2);
color: var(--turquoise, #00d1b2);
color: var(--white, #fff);
}
.panel.is-primary .panel-tabs a.is-active {
@ -8874,27 +8878,27 @@ a.has-text-primary:hover, a.has-text-primary:focus {
}
.has-text-primary-light {
color: var(--turquoise, #00d1b2) !important;
color: #ebfffc !important;
}
a.has-text-primary-light:hover, a.has-text-primary-light:focus {
color: var(--turquoise, #00d1b2) !important;
color: #b8fff4 !important;
}
.has-background-primary-light {
background-color: var(--turquoise, #00d1b2) !important;
background-color: #ebfffc !important;
}
.has-text-primary-dark {
color: var(--turquoise, #00d1b2) !important;
color: #00947e !important;
}
a.has-text-primary-dark:hover, a.has-text-primary-dark:focus {
color: var(--turquoise, #00d1b2) !important;
color: #00c7a9 !important;
}
.has-background-primary-dark {
background-color: var(--turquoise, #00d1b2) !important;
background-color: #00947e !important;
}
.has-text-link {
@ -10738,7 +10742,7 @@ a.has-text-danger-dark:hover, a.has-text-danger-dark:focus {
.hero.is-primary {
background-color: var(--turquoise, #00d1b2);
color: var(--turquoise, #00d1b2);
color: var(--white, #fff);
}
.hero.is-primary a:not(.button):not(.dropdown-item):not(.tag):not(.pagination-link.is-current),
@ -10747,16 +10751,16 @@ a.has-text-danger-dark:hover, a.has-text-danger-dark:focus {
}
.hero.is-primary .title {
color: var(--turquoise, #00d1b2);
color: var(--white, #fff);
}
.hero.is-primary .subtitle {
color: var(--turquoise, #00d1b2);
color: var(--white, #fff);
}
.hero.is-primary .subtitle a:not(.button),
.hero.is-primary .subtitle strong {
color: var(--turquoise, #00d1b2);
color: var(--white, #fff);
}
@media screen and (max-width: 1023px) {
@ -10767,18 +10771,18 @@ a.has-text-danger-dark:hover, a.has-text-danger-dark:focus {
.hero.is-primary .navbar-item,
.hero.is-primary .navbar-link {
color: var(--turquoise, #00d1b2);
color: var(--white, #fff);
}
.hero.is-primary a.navbar-item:hover, .hero.is-primary a.navbar-item.is-active,
.hero.is-primary .navbar-link:hover,
.hero.is-primary .navbar-link.is-active {
background-color: var(--turquoise, #00d1b2);
color: var(--turquoise, #00d1b2);
color: var(--white, #fff);
}
.hero.is-primary .tabs a {
color: var(--turquoise, #00d1b2);
color: var(--white, #fff);
opacity: 0.9;
}
@ -10791,7 +10795,7 @@ a.has-text-danger-dark:hover, a.has-text-danger-dark:focus {
}
.hero.is-primary .tabs.is-boxed a, .hero.is-primary .tabs.is-toggle a {
color: var(--turquoise, #00d1b2);
color: var(--white, #fff);
}
.hero.is-primary .tabs.is-boxed a:hover, .hero.is-primary .tabs.is-toggle a:hover {
@ -10799,8 +10803,8 @@ a.has-text-danger-dark:hover, a.has-text-danger-dark:focus {
}
.hero.is-primary .tabs.is-boxed li.is-active a, .hero.is-primary .tabs.is-boxed li.is-active a:hover, .hero.is-primary .tabs.is-toggle li.is-active a, .hero.is-primary .tabs.is-toggle li.is-active a:hover {
background-color: var(--turquoise, #00d1b2);
border-color: var(--turquoise, #00d1b2);
background-color: var(--white, #fff);
border-color: var(--white, #fff);
color: var(--turquoise, #00d1b2);
}
@ -11313,9 +11317,9 @@ a.has-text-danger-dark:hover, a.has-text-danger-dark:focus {
--blue-invert: #fff;
--purple-invert: #fff;
--red-invert: #fff;
--primary-invert: var(--turquoise, #00d1b2);
--primary-light: var(--turquoise, #00d1b2);
--primary-dark: var(--turquoise, #00d1b2);
--primary-invert: var(--white, #fff);
--primary-light: #ebfffc;
--primary-dark: #00947e;
--info-invert: var(--cyan, #3298dc);
--info-light: var(--cyan, #3298dc);
--info-dark: var(--cyan, #3298dc);

2
css/bulma.css.map
View File

File diff suppressed because one or more lines are too long

10
sass/components/message.sass
View File

@ -60,13 +60,13 @@ $message-colors: $colors !default
$color-light: $color
&.is-#{$name}
background-color: $color-light
background-color: var(--#{$name}-light, #{$color-light})
.message-header
background-color: $color
color: $color-invert
background-color: var(--#{$name}, #{$color})
color: var(--#{$name}-invert, #{$color-invert})
.message-body
border-color: $color
color: $color-dark
border-color: var(--#{$name}, #{$color})
color: var(--#{$name}-dark, #{$color-dark})
.message-header
align-items: center

6
sass/utilities/derived-variables.scss
View File

@ -19,9 +19,9 @@ $blue-invert : findColorInvert($blue) !default;
$purple-invert : findColorInvert($purple) !default;
$red-invert : findColorInvert($red) !default;
$primary-invert : findColorInvert($primary) !default;
$primary-light : findLightColor($primary) !default;
$primary-dark : findDarkColor($primary) !default;
$primary-invert : findColorInvert($primary, $turquoise) !default;
$primary-light : findLightColor($primary, $turquoise) !default;
$primary-dark : findDarkColor($primary, $turquoise) !default;
$info-invert : findColorInvert($info) !default;
$info-light : findLightColor($info) !default;
$info-dark : findDarkColor($info) !default;