// // badge.scss // Extended from Bootstrap //
// Soft variants
@each $color, $value in $theme-colors {
.badge-#{$color}-soft { @include badge-variant-soft($value, $badge-soft-bg-opacity); }
}
.badge-gray-700-soft {
@include badge-variant-soft($gray-700, $badge-soft-bg-opacity);
}
// Color options
.badge-gray-600 {
background-color: $gray-600; color: $white;
}
// Sizing
.badge-lg {
padding: $badge-padding-y-lg $badge-padding-x-lg;
}
// Rounded circle
.badge-rounded-circle {
height: calc(1em + #{$badge-padding-y * 2}); padding-left: $badge-padding-y; padding-right: $badge-padding-y; border-radius: $badge-pill-border-radius; >* { display: block; width: 1em; } &.badge-lg { height: calc(1em + #{$badge-padding-y-lg * 2}); padding-left: $badge-padding-y-lg; padding-right: $badge-padding-y-lg; }
}
// Positioning
.badge-float {
position: absolute; z-index: $zindex-dropdown;
}
.badge-float-outside {
top: -.5rem; right: -.5rem;
}
.badge-float-inside {
top: 1rem; right: 1rem;
}
// Active
.badge-white-soft.active {
background-color: $white; color: $primary; @include hover-focus { background-color: darken($white, 5%); color: $primary; }
}
.badge-secondary-soft.active {
background-color: $primary; color: color-yiq($primary); @include hover-focus { background-color: darken($primary, 5%); color: color-yiq(darken($primary, 5%)); }
}