58 lines
988 B
SCSS
58 lines
988 B
SCSS
//
|
|
// _badges.scss
|
|
//
|
|
|
|
|
|
.badge {
|
|
box-shadow: $components-shadow;
|
|
}
|
|
|
|
// Lighten badge
|
|
@mixin badge-variant-light($bg) {
|
|
color: $bg;
|
|
background-color: rgba($bg, 0.18);
|
|
box-shadow: none;
|
|
|
|
&[href] {
|
|
@include hover-focus {
|
|
color: $bg;
|
|
text-decoration: none;
|
|
background-color: rgba($bg, 0.4);
|
|
}
|
|
}
|
|
}
|
|
|
|
// Outline badge
|
|
|
|
@mixin badge-variant-outline($bg) {
|
|
color: $bg;
|
|
border: 1px solid $bg;
|
|
background-color: transparent;
|
|
box-shadow: none;
|
|
|
|
&[href] {
|
|
@include hover-focus {
|
|
color: $bg;
|
|
text-decoration: none;
|
|
background-color: rgba($bg, 0.2);
|
|
}
|
|
}
|
|
}
|
|
|
|
// Lighten badge (soft)
|
|
|
|
@each $color,
|
|
$value in $theme-colors {
|
|
.badge-soft-#{$color} {
|
|
@include badge-variant-light($value);
|
|
}
|
|
}
|
|
|
|
// Outline badge
|
|
|
|
@each $color,
|
|
$value in $theme-colors {
|
|
.badge-outline-#{$color} {
|
|
@include badge-variant-outline($value);
|
|
}
|
|
} |