37 lines
647 B
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);
|
||
|
|
}
|
||
|
|
}
|