mirror of
https://github.com/jgthms/bulma.git
synced 2024-11-14 11:14:24 +00:00
Add colored tags
This commit is contained in:
Jeremy Thomas
parent
9209d1fe42
commit
1f693c0a10
@ -23,7 +23,7 @@ $prefix: "bulma-"
|
||||
@return change-color($color, $lightness: max($base-l, $target-l))
|
||||
@return var(--#{$prefix}text-strong)
|
||||
|
||||
$cssvar-colors: ("primary": $primary, "link": $link, "info": $info, "success": $success, "warning": $warning, "danger": $danger, "light": $white-ter, "dark": $grey-darker)
|
||||
$cssvar-colors: ("primary": $primary, "link": $link, "info": $info, "success": $success, "warning": $warning, "danger": $danger)
|
||||
|
||||
@function getCssVariable($color, $name)
|
||||
$hue: hue($color)
|
||||
|
||||
@ -1,176 +0,0 @@
|
||||
$prefix: "bulma-";
|
||||
|
||||
@function findCSSVarColorInvert($color) {
|
||||
@if (colorLuminance($color) > 0.55) {
|
||||
@return var(--#{$prefix}black-transparent);
|
||||
} @else {
|
||||
@return var(--#{$prefix}white);
|
||||
}
|
||||
}
|
||||
|
||||
@function findCSSVarLightColor($color) {
|
||||
@if (type-of($color) == 'color') {
|
||||
$l: 96%;
|
||||
@if lightness($color) > 96% {
|
||||
$l: lightness($color);
|
||||
}
|
||||
@return change-color($color, $lightness: $l);
|
||||
}
|
||||
@return var(--#{$prefix}background);
|
||||
}
|
||||
|
||||
@function findCSSVarDarkColor($color) {
|
||||
@if (type-of($color) == 'color') {
|
||||
$base-l: 29%;
|
||||
$luminance: colorLuminance($color);
|
||||
$luminance-delta: (0.53 - $luminance);
|
||||
$target-l: round($base-l + ($luminance-delta * 53));
|
||||
@return change-color($color, $lightness: max($base-l, $target-l));
|
||||
}
|
||||
@return var(--#{$prefix}text-strong);
|
||||
}
|
||||
|
||||
$cssvar-colors: (
|
||||
"primary": $primary,
|
||||
"link": $link,
|
||||
"info": $info,
|
||||
"success": $success,
|
||||
"warning": $warning,
|
||||
"danger": $danger,
|
||||
"light": $white-ter,
|
||||
"dark": $grey-darker
|
||||
);
|
||||
|
||||
@function getCssVariable($color, $name) {
|
||||
$hue: hue($color);
|
||||
$saturation: saturation($color);
|
||||
$lightness: lightness($color);
|
||||
$alpha: alpha($color);
|
||||
|
||||
@return $hue, $saturation, $lightness;
|
||||
}
|
||||
|
||||
@mixin cssvar($name, $color) {
|
||||
$hue: hue($color);
|
||||
$saturation: saturation($color);
|
||||
$lightness: lightness($color);
|
||||
$base: "#{$prefix}#{$name}";
|
||||
|
||||
--#{$base}-h: #{$hue};
|
||||
--#{$base}-s: #{$saturation};
|
||||
--#{$base}-l: #{$lightness};
|
||||
--#{$base}: hsl(var(--#{$base}-h), calc(var(--#{$base}-s)), calc(var(--#{$base}-l)));
|
||||
--#{$base}-hover: hsl(var(--#{$base}-h), calc(var(--#{$base}-s)), calc(var(--#{$base}-l) - 5%));
|
||||
--#{$base}-active: hsl(var(--#{$base}-h), calc(var(--#{$base}-s)), calc(var(--#{$base}-l) - 10%));
|
||||
|
||||
$color-invert: findCSSVarColorInvert($color);
|
||||
--#{$base}-invert: #{$color-invert};
|
||||
|
||||
$color-light: findCSSVarLightColor($color);
|
||||
--#{$base}-light: #{$color-light};
|
||||
--#{$base}-light-hover: #{darken($color-light, 5%)};
|
||||
--#{$base}-light-active: #{darken($color-light, 10%)};
|
||||
|
||||
$color-dark: findCSSVarDarkColor($color);
|
||||
--#{$base}-dark: #{$color-dark};
|
||||
--#{$base}-dark-hover: #{darken($color-dark, 5%)};
|
||||
--#{$base}-dark-active: #{darken($color-dark, 10%)};
|
||||
}
|
||||
|
||||
:root {
|
||||
--#{$prefix}white: #{$white};
|
||||
--#{$prefix}black: #{$black};
|
||||
--#{$prefix}black-transparent: #{rgba(#000, 0.7)};
|
||||
--#{$prefix}scheme-main: #{$white};
|
||||
--#{$prefix}scheme-main-bis: #{$white-bis};
|
||||
--#{$prefix}scheme-main-ter: #{$white-ter};
|
||||
--#{$prefix}scheme-invert: #{$black};
|
||||
--#{$prefix}scheme-invert-bis: #{$black-bis};
|
||||
--#{$prefix}scheme-invert-ter: #{$black-ter};
|
||||
--#{$prefix}background: #{$white-ter};
|
||||
--#{$prefix}border: #{$grey-lighter};
|
||||
--#{$prefix}border-hover: #{$grey-light};
|
||||
--#{$prefix}border-light: #{$grey-lightest};
|
||||
--#{$prefix}border-light-hover: #{$grey-light};
|
||||
--#{$prefix}text: #{$grey-dark};
|
||||
--#{$prefix}text-invert: #{findCSSVarColorInvert($text)};
|
||||
--#{$prefix}text-light: #{$grey};
|
||||
--#{$prefix}text-strong: #{$grey-darker};
|
||||
--#{$prefix}code: #{$red};
|
||||
--#{$prefix}code-background: #{$background};
|
||||
--#{$prefix}pre: #{$text};
|
||||
--#{$prefix}pre-background: #{$background};
|
||||
--#{$prefix}link: #{$blue};
|
||||
--#{$prefix}link-invert: #{findCSSVarColorInvert($link)};
|
||||
--#{$prefix}link-light: #{findCSSVarLightColor($link)};
|
||||
--#{$prefix}link-dark: #{findCSSVarDarkColor($link)};
|
||||
--#{$prefix}link-visited: #{$purple};
|
||||
--#{$prefix}link-hover: #{$grey-darker};
|
||||
--#{$prefix}link-hover-border: #{$grey-light};
|
||||
--#{$prefix}link-focus: #{$grey-darker};
|
||||
--#{$prefix}link-focus-border: #{$blue};
|
||||
--#{$prefix}link-active: #{$grey-darker};
|
||||
--#{$prefix}link-active-border: #{$grey-dark};
|
||||
|
||||
@each $name, $color in $cssvar-colors {
|
||||
@include cssvar($name, $color);
|
||||
}
|
||||
}
|
||||
|
||||
$white: var(--#{$prefix}white);
|
||||
$black: var(--#{$prefix}black);
|
||||
$black-transparent: var(--#{$prefix}black-transparent);
|
||||
$scheme-main: var(--#{$prefix}scheme-main);
|
||||
$scheme-main-bis: var(--#{$prefix}scheme-main-bis);
|
||||
$scheme-main-ter: var(--#{$prefix}scheme-main-ter);
|
||||
$scheme-invert: var(--#{$prefix}scheme-invert);
|
||||
$scheme-invert-bis: var(--#{$prefix}scheme-invert-bis);
|
||||
$scheme-invert-ter: var(--#{$prefix}scheme-invert-ter);
|
||||
$background: var(--#{$prefix}background);
|
||||
$border: var(--#{$prefix}border);
|
||||
$border-hover: var(--#{$prefix}border-hover);
|
||||
$border-light: var(--#{$prefix}border-light);
|
||||
$border-light-hover: var(--#{$prefix}border-light-hover);
|
||||
$text: var(--#{$prefix}text);
|
||||
$text-invert: var(--#{$prefix}text-invert);
|
||||
$text-light: var(--#{$prefix}text-light);
|
||||
$text-strong: var(--#{$prefix}text-strong);
|
||||
$code: var(--#{$prefix}code);
|
||||
$code-background: var(--#{$prefix}code-background);
|
||||
$pre: var(--#{$prefix}pre);
|
||||
$pre-background: var(--#{$prefix}pre-background);
|
||||
$link: var(--#{$prefix}link);
|
||||
$link-invert: var(--#{$prefix}link-invert);
|
||||
$link-light: var(--#{$prefix}link-light);
|
||||
$link-dark: var(--#{$prefix}link-dark);
|
||||
$link-visited: var(--#{$prefix}link-visited);
|
||||
$link-hover: var(--#{$prefix}link-hover);
|
||||
$link-hover-border: var(--#{$prefix}link-hover-border);
|
||||
$link-focus: var(--#{$prefix}link-focus);
|
||||
$link-focus-border: var(--#{$prefix}link-focus-border);
|
||||
$link-active: var(--#{$prefix}link-active);
|
||||
$link-active-border: var(--#{$prefix}link-active-border);
|
||||
|
||||
html {
|
||||
background-color: $scheme-main;
|
||||
}
|
||||
|
||||
body {
|
||||
color: $text;
|
||||
}
|
||||
|
||||
a {
|
||||
color: $link;
|
||||
&:hover {
|
||||
color: $link-hover;
|
||||
}
|
||||
}
|
||||
|
||||
code {
|
||||
background-color: $code-background;
|
||||
color: $code;
|
||||
}
|
||||
|
||||
hr {
|
||||
background-color: $hr-background-color;
|
||||
}
|
||||
@ -142,6 +142,35 @@
|
||||
box-shadow: 0 0.5em 1em -0.125em rgba($scheme-invert, 0.1), 0 0 0 1px $link
|
||||
&:active
|
||||
box-shadow: inset 0 1px 2px rgba($scheme-invert, 0.2), 0 0 0 1px $link
|
||||
.delete
|
||||
background-color: rgba($scheme-invert, 0.2)
|
||||
&::before,
|
||||
&::after
|
||||
background-color: $scheme-main
|
||||
&:hover,
|
||||
&:focus
|
||||
background-color: rgba($scheme-invert, 0.3)
|
||||
&:active
|
||||
background-color: rgba($scheme-invert, 0.4)
|
||||
.notification
|
||||
background-color: $background
|
||||
.progress
|
||||
&::-webkit-progress-bar
|
||||
background-color: $border-light
|
||||
&::-webkit-progress-value
|
||||
background-color: $text
|
||||
&::-moz-progress-bar
|
||||
background-color: $text
|
||||
&::-ms-fill
|
||||
background-color: $text
|
||||
@each $name, $pair in $colors
|
||||
$color: nth($pair, 1)
|
||||
&.is-#{$name}
|
||||
&:indeterminate
|
||||
background-image: linear-gradient(to right, $color 30%, $border-light 30%)
|
||||
&:indeterminate
|
||||
background-color: $border-light
|
||||
background-image: linear-gradient(to right, $text 30%, $border-light 30%)
|
||||
|
||||
html
|
||||
background-color: var(--#{$prefix}scheme-main)
|
||||
@ -388,6 +417,90 @@ label.panel-block
|
||||
background-color: var(--#{$prefix}scheme-main)
|
||||
color: var(--#{$prefix}text)
|
||||
|
||||
.content
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6
|
||||
color: var(--#{$prefix}text-strong)
|
||||
blockquote
|
||||
background-color: var(--#{$prefix}background)
|
||||
border-left-color: var(--#{$prefix}border)
|
||||
table
|
||||
td,
|
||||
th
|
||||
border-color: var(--#{$prefix}border)
|
||||
th
|
||||
color: var(--#{$prefix}text-strong)
|
||||
thead
|
||||
td,
|
||||
th
|
||||
color: var(--#{$prefix}text-strong)
|
||||
tfoot
|
||||
td,
|
||||
th
|
||||
color: var(--#{$prefix}text-strong)
|
||||
|
||||
.table
|
||||
background-color: var(--#{$prefix}scheme-main)
|
||||
color: var(--#{$prefix}text-strong)
|
||||
td,
|
||||
th
|
||||
border-color: var(--#{$prefix}border)
|
||||
&.is-selected
|
||||
background-color: var(--#{$prefix}primary)
|
||||
color: var(--#{$prefix}primary-invert)
|
||||
th
|
||||
color: var(--#{$prefix}text-strong)
|
||||
tr
|
||||
&.is-selected
|
||||
background-color: var(--#{$prefix}primary)
|
||||
color: var(--#{$prefix}primary-invert)
|
||||
td,
|
||||
th
|
||||
border-color: var(--#{$prefix}primary-invert)
|
||||
thead
|
||||
td,
|
||||
th
|
||||
color: var(--#{$prefix}text-strong)
|
||||
tfoot
|
||||
td,
|
||||
th
|
||||
color: var(--#{$prefix}text-strong)
|
||||
&.is-hoverable
|
||||
tbody
|
||||
tr:not(.is-selected)
|
||||
&:hover
|
||||
background-color: var(--#{$prefix}scheme-main-bis)
|
||||
&.is-striped
|
||||
tbody
|
||||
tr:not(.is-selected)
|
||||
&:hover
|
||||
background-color: var(--#{$prefix}scheme-main-bis)
|
||||
&:nth-child(even)
|
||||
background-color: var(--#{$prefix}scheme-main-ter)
|
||||
&.is-striped
|
||||
tbody
|
||||
tr:not(.is-selected)
|
||||
&:nth-child(even)
|
||||
background-color: var(--#{$prefix}scheme-main-bis)
|
||||
|
||||
.tag:not(body)
|
||||
background-color: var(--tag-background-color) !important
|
||||
color: var(--tag-color) !important
|
||||
--tag-background-color: var(--#{$prefix}background)
|
||||
--tag-color: var(--#{$prefix}text)
|
||||
@each $name, $color in $cssvar-colors
|
||||
$base: "#{$prefix}#{$name}"
|
||||
&.is-#{$name}
|
||||
--tag-background-color: var(--#{$base})
|
||||
--tag-color: var(--#{$base}-invert)
|
||||
&.is-light
|
||||
--tag-background-color: hsl(var(--#{$base}-h), calc(var(--#{$base}-s)), 7%)
|
||||
--tag-color: var(--#{$base})
|
||||
|
||||
.title
|
||||
color: var(--#{$prefix}text-strong)
|
||||
|
||||
|
||||
@ -10886,32 +10886,6 @@ label.panel-block:hover {
|
||||
--bulma-danger-dark: #cc0f35;
|
||||
--bulma-danger-dark-hover: #b40e2f;
|
||||
--bulma-danger-dark-active: #9d0c29;
|
||||
--bulma-light-h: 0deg;
|
||||
--bulma-light-s: 0%;
|
||||
--bulma-light-l: 96%;
|
||||
--bulma-light: hsl(var(--bulma-light-h), calc(var(--bulma-light-s)), calc(var(--bulma-light-l)));
|
||||
--bulma-light-hover: hsl(var(--bulma-light-h), calc(var(--bulma-light-s)), calc(var(--bulma-light-l) - 5%));
|
||||
--bulma-light-active: hsl(var(--bulma-light-h), calc(var(--bulma-light-s)), calc(var(--bulma-light-l) - 10%));
|
||||
--bulma-light-invert: var(--bulma-black-transparent);
|
||||
--bulma-light-light: whitesmoke;
|
||||
--bulma-light-light-hover: #e8e8e8;
|
||||
--bulma-light-light-active: #dbdbdb;
|
||||
--bulma-light-dark: #4a4a4a;
|
||||
--bulma-light-dark-hover: #3d3d3d;
|
||||
--bulma-light-dark-active: #303030;
|
||||
--bulma-dark-h: 0deg;
|
||||
--bulma-dark-s: 0%;
|
||||
--bulma-dark-l: 21%;
|
||||
--bulma-dark: hsl(var(--bulma-dark-h), calc(var(--bulma-dark-s)), calc(var(--bulma-dark-l)));
|
||||
--bulma-dark-hover: hsl(var(--bulma-dark-h), calc(var(--bulma-dark-s)), calc(var(--bulma-dark-l) - 5%));
|
||||
--bulma-dark-active: hsl(var(--bulma-dark-h), calc(var(--bulma-dark-s)), calc(var(--bulma-dark-l) - 10%));
|
||||
--bulma-dark-invert: var(--bulma-white);
|
||||
--bulma-dark-light: whitesmoke;
|
||||
--bulma-dark-light-hover: #e8e8e8;
|
||||
--bulma-dark-light-active: #dbdbdb;
|
||||
--bulma-dark-dark: #8a8a8a;
|
||||
--bulma-dark-dark-hover: #7d7d7d;
|
||||
--bulma-dark-dark-active: #707070;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: light) {
|
||||
@ -11050,6 +11024,67 @@ label.panel-block:hover {
|
||||
a.box:active {
|
||||
box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.2), 0 0 0 1px #3273dc;
|
||||
}
|
||||
.delete {
|
||||
background-color: rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
.delete::before, .delete::after {
|
||||
background-color: #0a0a0a;
|
||||
}
|
||||
.delete:hover, .delete:focus {
|
||||
background-color: rgba(255, 255, 255, 0.3);
|
||||
}
|
||||
.delete:active {
|
||||
background-color: rgba(255, 255, 255, 0.4);
|
||||
}
|
||||
.notification {
|
||||
background-color: #242424;
|
||||
}
|
||||
.progress::-webkit-progress-bar {
|
||||
background-color: #363636;
|
||||
}
|
||||
.progress::-webkit-progress-value {
|
||||
background-color: #b5b5b5;
|
||||
}
|
||||
.progress::-moz-progress-bar {
|
||||
background-color: #b5b5b5;
|
||||
}
|
||||
.progress::-ms-fill {
|
||||
background-color: #b5b5b5;
|
||||
}
|
||||
.progress.is-white:indeterminate {
|
||||
background-image: linear-gradient(to right, white 30%, #363636 30%);
|
||||
}
|
||||
.progress.is-black:indeterminate {
|
||||
background-image: linear-gradient(to right, #0a0a0a 30%, #363636 30%);
|
||||
}
|
||||
.progress.is-light:indeterminate {
|
||||
background-image: linear-gradient(to right, whitesmoke 30%, #363636 30%);
|
||||
}
|
||||
.progress.is-dark:indeterminate {
|
||||
background-image: linear-gradient(to right, #363636 30%, #363636 30%);
|
||||
}
|
||||
.progress.is-primary:indeterminate {
|
||||
background-image: linear-gradient(to right, #00d1b2 30%, #363636 30%);
|
||||
}
|
||||
.progress.is-link:indeterminate {
|
||||
background-image: linear-gradient(to right, #3273dc 30%, #363636 30%);
|
||||
}
|
||||
.progress.is-info:indeterminate {
|
||||
background-image: linear-gradient(to right, #3298dc 30%, #363636 30%);
|
||||
}
|
||||
.progress.is-success:indeterminate {
|
||||
background-image: linear-gradient(to right, #48c774 30%, #363636 30%);
|
||||
}
|
||||
.progress.is-warning:indeterminate {
|
||||
background-image: linear-gradient(to right, #ffdd57 30%, #363636 30%);
|
||||
}
|
||||
.progress.is-danger:indeterminate {
|
||||
background-image: linear-gradient(to right, #f14668 30%, #363636 30%);
|
||||
}
|
||||
.progress:indeterminate {
|
||||
background-color: #363636;
|
||||
background-image: linear-gradient(to right, #b5b5b5 30%, #363636 30%);
|
||||
}
|
||||
}
|
||||
|
||||
html {
|
||||
@ -11321,6 +11356,162 @@ label.panel-block:hover {
|
||||
color: var(--bulma-text);
|
||||
}
|
||||
|
||||
.content h1,
|
||||
.content h2,
|
||||
.content h3,
|
||||
.content h4,
|
||||
.content h5,
|
||||
.content h6 {
|
||||
color: var(--bulma-text-strong);
|
||||
}
|
||||
|
||||
.content blockquote {
|
||||
background-color: var(--bulma-background);
|
||||
border-left-color: var(--bulma-border);
|
||||
}
|
||||
|
||||
.content table td,
|
||||
.content table th {
|
||||
border-color: var(--bulma-border);
|
||||
}
|
||||
|
||||
.content table th {
|
||||
color: var(--bulma-text-strong);
|
||||
}
|
||||
|
||||
.content table thead td,
|
||||
.content table thead th {
|
||||
color: var(--bulma-text-strong);
|
||||
}
|
||||
|
||||
.content table tfoot td,
|
||||
.content table tfoot th {
|
||||
color: var(--bulma-text-strong);
|
||||
}
|
||||
|
||||
.table {
|
||||
background-color: var(--bulma-scheme-main);
|
||||
color: var(--bulma-text-strong);
|
||||
}
|
||||
|
||||
.table td,
|
||||
.table th {
|
||||
border-color: var(--bulma-border);
|
||||
}
|
||||
|
||||
.table td.is-selected,
|
||||
.table th.is-selected {
|
||||
background-color: var(--bulma-primary);
|
||||
color: var(--bulma-primary-invert);
|
||||
}
|
||||
|
||||
.table th {
|
||||
color: var(--bulma-text-strong);
|
||||
}
|
||||
|
||||
.table tr.is-selected {
|
||||
background-color: var(--bulma-primary);
|
||||
color: var(--bulma-primary-invert);
|
||||
}
|
||||
|
||||
.table tr.is-selected td,
|
||||
.table tr.is-selected th {
|
||||
border-color: var(--bulma-primary-invert);
|
||||
}
|
||||
|
||||
.table thead td,
|
||||
.table thead th {
|
||||
color: var(--bulma-text-strong);
|
||||
}
|
||||
|
||||
.table tfoot td,
|
||||
.table tfoot th {
|
||||
color: var(--bulma-text-strong);
|
||||
}
|
||||
|
||||
.table.is-hoverable tbody tr:not(.is-selected):hover {
|
||||
background-color: var(--bulma-scheme-main-bis);
|
||||
}
|
||||
|
||||
.table.is-hoverable.is-striped tbody tr:not(.is-selected):hover {
|
||||
background-color: var(--bulma-scheme-main-bis);
|
||||
}
|
||||
|
||||
.table.is-hoverable.is-striped tbody tr:not(.is-selected):hover:nth-child(even) {
|
||||
background-color: var(--bulma-scheme-main-ter);
|
||||
}
|
||||
|
||||
.table.is-striped tbody tr:not(.is-selected):nth-child(even) {
|
||||
background-color: var(--bulma-scheme-main-bis);
|
||||
}
|
||||
|
||||
.tag:not(body) {
|
||||
background-color: var(--tag-background-color) !important;
|
||||
color: var(--tag-color) !important;
|
||||
--tag-background-color: var(--bulma-background);
|
||||
--tag-color: var(--bulma-text);
|
||||
}
|
||||
|
||||
.tag:not(body).is-primary {
|
||||
--tag-background-color: var(--bulma-primary);
|
||||
--tag-color: var(--bulma-primary-invert);
|
||||
}
|
||||
|
||||
.tag:not(body).is-primary.is-light {
|
||||
--tag-background-color: hsl(var(--bulma-primary-h), calc(var(--bulma-primary-s)), 7%);
|
||||
--tag-color: var(--bulma-primary);
|
||||
}
|
||||
|
||||
.tag:not(body).is-link {
|
||||
--tag-background-color: var(--bulma-link);
|
||||
--tag-color: var(--bulma-link-invert);
|
||||
}
|
||||
|
||||
.tag:not(body).is-link.is-light {
|
||||
--tag-background-color: hsl(var(--bulma-link-h), calc(var(--bulma-link-s)), 7%);
|
||||
--tag-color: var(--bulma-link);
|
||||
}
|
||||
|
||||
.tag:not(body).is-info {
|
||||
--tag-background-color: var(--bulma-info);
|
||||
--tag-color: var(--bulma-info-invert);
|
||||
}
|
||||
|
||||
.tag:not(body).is-info.is-light {
|
||||
--tag-background-color: hsl(var(--bulma-info-h), calc(var(--bulma-info-s)), 7%);
|
||||
--tag-color: var(--bulma-info);
|
||||
}
|
||||
|
||||
.tag:not(body).is-success {
|
||||
--tag-background-color: var(--bulma-success);
|
||||
--tag-color: var(--bulma-success-invert);
|
||||
}
|
||||
|
||||
.tag:not(body).is-success.is-light {
|
||||
--tag-background-color: hsl(var(--bulma-success-h), calc(var(--bulma-success-s)), 7%);
|
||||
--tag-color: var(--bulma-success);
|
||||
}
|
||||
|
||||
.tag:not(body).is-warning {
|
||||
--tag-background-color: var(--bulma-warning);
|
||||
--tag-color: var(--bulma-warning-invert);
|
||||
}
|
||||
|
||||
.tag:not(body).is-warning.is-light {
|
||||
--tag-background-color: hsl(var(--bulma-warning-h), calc(var(--bulma-warning-s)), 7%);
|
||||
--tag-color: var(--bulma-warning);
|
||||
}
|
||||
|
||||
.tag:not(body).is-danger {
|
||||
--tag-background-color: var(--bulma-danger);
|
||||
--tag-color: var(--bulma-danger-invert);
|
||||
}
|
||||
|
||||
.tag:not(body).is-danger.is-light {
|
||||
--tag-background-color: hsl(var(--bulma-danger-h), calc(var(--bulma-danger-s)), 7%);
|
||||
--tag-color: var(--bulma-danger);
|
||||
}
|
||||
|
||||
.title {
|
||||
color: var(--bulma-text-strong);
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user