codecheck

1
// core
2
.p-badge {
3
    display: inline-block;
4
    border-radius: 10px;
5
    text-align: center;
6
    padding: 0 .5rem;
7
}
8

9
.p-overlay-badge {
10
    position: relative;
11
}
12

13
.p-overlay-badge .p-badge {
14
    position: absolute;
15
    top: 0;
16
    right: 0;
17
    transform: translate(50%,-50%);
18
    transform-origin: 100% 0;
19
    margin: 0;
20
}
21

22
.p-badge.p-badge-dot {
23
    width: .5rem;
24
    min-width: .5rem;
25
    height: .5rem;
26
    border-radius: 50%;
27
    padding: 0;
28
}
29

30
.p-badge-no-gutter {
31
    padding: 0;
32
    border-radius: 50%;
33
}
34

35
// theme
36
.p-badge {
37
    background: $badgeBg;
38
    color: $badgeTextColor;
39
    font-size: $badgeFontSize;
40
    font-weight: $badgeFontWeight;
41
    min-width: $badgeMinWidth;
42
    height: $badgeHeight;
43
    line-height: $badgeHeight;
44

45
    &.p-badge-secondary {
46
        background-color: $secondaryButtonBg;
47
        color: $secondaryButtonTextColor;
48
    }
49

50
    &.p-badge-success {
51
        background-color: $successButtonBg;
52
        color: $successButtonTextColor;
53
    }
54

55
    &.p-badge-info {
56
        background-color: $infoButtonBg;
57
        color: $infoButtonTextColor;
58
    }
59

60
    &.p-badge-warning {
61
        background-color: $warningButtonBg;
62
        color: $warningButtonTextColor;
63
    }
64

65
    &.p-badge-danger {
66
        background-color: $dangerButtonBg;
67
        color: $dangerButtonTextColor;
68
    }
69

70
    @if variable-exists(secondaryMessageBg) {
71
        &.p-badge-secondary {
72
            background-color: $secondaryButtonBg;
73
            color: $secondaryButtonTextColor;
74
        }
75
    
76
        &.p-badge-contrast {
77
            background-color: $contrastButtonBg;
78
            color: $contrastButtonTextColor;
79
        }
80
    }
81

82
    &.p-badge-lg {
83
        font-size: 1.5 * $badgeFontSize;
84
        min-width: 1.5 * $badgeMinWidth;
85
        height: 1.5 * $badgeHeight;
86
        line-height: 1.5 * $badgeHeight;
87
    }
88

89
    &.p-badge-xl {
90
        font-size: 2 * $badgeFontSize;
91
        min-width: 2 * $badgeMinWidth;
92
        height: 2 * $badgeHeight;
93
        line-height: 2 * $badgeHeight;
94
    }
95
}