open-nomad/ui/app/styles/components/badge.scss

37 lines
647 B
SCSS

.badge {
font-size: $size-7;
height: 1.5em;
line-height: 1;
border-radius: $radius;
padding: 0.25em 0.75em;
@each $name, $pair in $colors {
$color: nth($pair, 1);
$color-invert: nth($pair, 2);
&.is-#{$name} {
background-color: $color;
color: $color-invert;
&.is-faded {
color: rgba($color-invert, 0.8);
}
&.is-hollow {
box-shadow: 0 0 0 1px $color;
background: $white;
color: darken($color, 10%);
}
&.is-subtle {
background: rgba($color, 0.3);
color: $white;
}
}
}
&.is-faded {
color: rgba($text, 0.8);
}
}