46 lines
796 B
SCSS
46 lines
796 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);
|
|
}
|
|
|
|
&.is-small {
|
|
padding: 0.15em 0.5em;
|
|
}
|
|
|
|
&.is-secondary {
|
|
color: darken($grey-blue, 30%);
|
|
background: lighten($grey-blue, 10%);
|
|
}
|
|
}
|