codecheck

1
@use "sass:math";
2

3
// core
4
.p-metergroup {
5
    display: flex;
6
}
7

8
.p-metergroup-meters {
9
    display: flex;
10
}
11

12
.p-metergroup-vertical .p-metergroup-meters {
13
    flex-direction: column;
14
}
15

16
.p-metergroup-labels {
17
    display: flex;
18
    flex-wrap: wrap;
19
    margin: 0;
20
    padding: 0;
21
    list-style-type: none;
22
}
23

24
.p-metergroup-vertical .p-metergroup-labels {
25
    align-items: start;
26
}
27

28
.p-metergroup-labels-vertical {
29
    flex-direction: column;
30
}
31

32
.p-metergroup-label {
33
    display: inline-flex;
34
    align-items: center;
35
}
36

37
.p-metergroup-label-marker {
38
    display: inline-flex;
39
}
40

41
// theme
42
.p-metergroup {
43
    gap: $inlineSpacing * 2;
44

45
    .p-metergroup-meters {
46
        background: $progressBarBg;
47
        border-radius: $borderRadius;
48
    }
49

50
    .p-metergroup-meter {
51
        border: $progressBarBorder;
52
        background: $progressBarValueBg;
53
    }
54

55
    .p-metergroup-labels {
56
        .p-metergroup-label {
57
            gap: $inlineSpacing;
58
        }
59

60
        .p-metergroup-label-marker {
61
            background: $progressBarValueBg;
62
            width: 0.5rem;
63
            height: 0.5rem;
64
            border-radius: 100%;
65
        }
66

67
        .p-metergroup-label-icon {
68
            width: 1rem;
69
            height: 1rem;
70
        }
71

72
        &.p-metergroup-labels-vertical {
73
            gap: $inlineSpacing;
74
        }
75

76
        &.p-metergroup-labels-horizontal {
77
            gap: $inlineSpacing * 2;
78
        }
79
    }
80

81
    &.p-metergroup-horizontal {
82
        flex-direction: column;
83

84
        .p-metergroup-meters {
85
            height: 0.5rem;
86
        }
87

88
        .p-metergroup-meter:first-of-type {
89
            border-top-left-radius: $borderRadius;
90
            border-bottom-left-radius: $borderRadius;
91
        }
92

93
        .p-metergroup-meter:last-of-type {
94
            border-top-right-radius: $borderRadius;
95
            border-bottom-right-radius: $borderRadius;
96
        }
97
    }
98

99
    &.p-metergroup-vertical {
100
        flex-direction: row;
101

102
        .p-metergroup-meters {
103
            width: 0.5rem;
104
            height: 100%;
105
        }
106

107
        .p-metergroup-meter:first-of-type {
108
            border-top-left-radius: $borderRadius;
109
            border-top-right-radius: $borderRadius;
110
        }
111

112
        .p-metergroup-meter:last-of-type {
113
            border-bottom-left-radius: $borderRadius;
114
            border-bottom-right-radius: $borderRadius;
115
        }
116
    }
117
}
118