src/components/_badge.scss
// =====================================================
// Badge
// =====================================================
$badge-prefix: "badge" !default;
$theme-badge-enable: false !default;
@if ($theme-badge-enable == true) {
.#{$badge-prefix} {
display: inline-block;
box-sizing: border-box;
margin-right: $theme-badge-margin;
padding: $theme-badge-padding;
color: map-get($theme-color-badge, foreground);
background: map-get($theme-color-badge, background);
font-size: map-get($theme-font-size, small);
line-height: map-get($theme-line-height, small);
font-weight: map-get($theme-font-weight, normal);
border-radius: $theme-badge-border-radius;
text-decoration: none;
&:hover {
cursor: pointer;
background: map-get($theme-color-badge, hover);
}
&--gray {
background: map-get($theme-colors, gray);
&:hover {
background: lighten(map-get($theme-colors, gray), 5%);
}
}
&--blue {
background: map-get($theme-colors, blue);
&:hover {
background: lighten(map-get($theme-colors, blue), 5%);
}
}
&--red {
background: map-get($theme-colors, red);
&:hover {
background: lighten(map-get($theme-colors, red), 5%);
}
}
&--orange {
background: map-get($theme-colors, orange);
&:hover {
background: lighten(map-get($theme-colors, orange), 5%);
}
}
}
}