1 | @import "mixins/components.badges";
|
2 |
|
3 | .c-badge {
|
4 | @include badge($badge-background-color, $badge-color, $badge-background-color);
|
5 | display: inline-block;
|
6 | margin: $badge-margin;
|
7 | padding: $badge-padding;
|
8 | border-radius: $badge-border-radius;
|
9 | font-size: $badge-font-size;
|
10 | font-weight: $badge-font-weight;
|
11 | line-height: $badge-line-height;
|
12 |
|
13 | &.c-badge--ghost {
|
14 | @include badge($badge-ghost-background-color, $badge-ghost-color)
|
15 | }
|
16 | }
|
17 |
|
18 | .c-badge--rounded {
|
19 | border-radius: $badge-border-radius-rounded;
|
20 | }
|
21 |
|
22 | .c-badge--brand {
|
23 | @include badge($badge-brand-background-color, $badge-brand-color, $badge-brand-background-color);
|
24 |
|
25 | &.c-badge--ghost {
|
26 | @include badge($badge-ghost-brand-background-color, $badge-ghost-brand-color)
|
27 | }
|
28 | }
|
29 |
|
30 | .c-badge--info {
|
31 | @include badge($badge-info-background-color, $badge-info-color, $badge-info-background-color);
|
32 |
|
33 | &.c-badge--ghost {
|
34 | @include badge($badge-ghost-info-background-color, $badge-ghost-info-color)
|
35 | }
|
36 | }
|
37 |
|
38 | .c-badge--warning {
|
39 | @include badge($badge-warning-background-color, $badge-warning-color, $badge-warning-background-color);
|
40 |
|
41 | &.c-badge--ghost {
|
42 | @include badge($badge-ghost-warning-background-color, $badge-ghost-warning-color)
|
43 | }
|
44 | }
|
45 |
|
46 | .c-badge--success {
|
47 | @include badge($badge-success-background-color, $badge-success-color, $badge-success-background-color);
|
48 |
|
49 | &.c-badge--ghost {
|
50 | @include badge($badge-ghost-success-background-color, $badge-ghost-success-color)
|
51 | }
|
52 | }
|
53 |
|
54 | .c-badge--error {
|
55 | @include badge($badge-error-background-color, $badge-error-color, $badge-error-background-color);
|
56 |
|
57 | &.c-badge--ghost {
|
58 | @include badge($badge-ghost-error-background-color, $badge-ghost-error-color)
|
59 | }
|
60 | }
|