// Badges
|
//
|
|
@each $color, $value in $theme-colors {
|
@if $color != primary and $color != light {
|
@include appwork-badge-variant('.badge-#{$color}', $value);
|
@include appwork-badge-outline-variant('.badge-outline-#{$color}', $value);
|
}
|
}
|
|
@include appwork-badge-variant('.badge-default', $badge-default-bg, $body-color);
|
@include appwork-badge-outline-variant('.badge-outline-default', $badge-default-bg, $badge-outline-default-color);
|
|
// *******************************************************************************
|
// * Dots
|
|
.badge.badge-dot {
|
display: inline-block;
|
margin: 0;
|
padding: 0;
|
width: .5em;
|
height: .5em;
|
border-radius: 50%;
|
vertical-align: middle;
|
}
|
|
// *******************************************************************************
|
// * Indicators
|
|
.badge.indicator {
|
position: absolute;
|
top: auto;
|
display: inline-block;
|
margin: 0;
|
transform: translate(-50%, 25%);
|
|
@include rtl-style {
|
transform: translate(50%, 25%);
|
}
|
|
&:not(.badge-dot) {
|
padding: 0 .2em;
|
font-size: .6em;
|
line-height: 1.2em;
|
transform: translate(-50%, -10%);
|
|
@include rtl-style {
|
transform: translate(50%, -10%);
|
}
|
}
|
}
|
|
@if $material-style {
|
.btn .badge.indicator:not(.badge-dot) {
|
font-size: .75em;
|
}
|
}
|
