codecheck

1
// core
2
.p-organizationchart-table {
3
    border-spacing: 0;
4
    border-collapse: separate;
5
    margin: 0 auto;
6
}
7

8
.p-organizationchart-table > tbody > tr > td {
9
    text-align: center;
10
    vertical-align: top;
11
    padding: 0 0.75rem;
12
}
13

14
.p-organizationchart-node-content {
15
    display: inline-block;
16
    position: relative;
17
}
18

19
.p-organizationchart-node-content .p-node-toggler {
20
    position: absolute;
21
    bottom: -0.75rem;
22
    margin-left: -0.75rem;
23
    z-index: 2;
24
    left: 50%;
25
    user-select: none;
26
    cursor: pointer;
27
    width: 1.5rem;
28
    height: 1.5rem;
29
    text-decoration: none;
30
}
31

32
.p-organizationchart-node-content .p-node-toggler .p-node-toggler-icon {
33
    position: relative;
34
    top: 0.25rem;
35
}
36

37
.p-organizationchart-line-down {
38
    margin: 0 auto;
39
    height: 20px;
40
    width: 1px;
41
}
42

43
.p-organizationchart-line-right {
44
    border-radius: 0px;
45
}
46

47
.p-organizationchart-line-left {
48
    border-radius: 0;
49
}
50

51
.p-organizationchart-selectable-node {
52
    cursor: pointer;
53
}
54

55
// theme
56
.p-organizationchart {
57
    .p-organizationchart-node-content {
58
        &.p-organizationchart-selectable-node:not(.p-highlight):hover {
59
            background: $inputListItemHoverBg;
60
            color: $inputListItemTextHoverColor;
61
        }
62

63
        &.p-highlight {
64
            background: $highlightBg;
65
            color: $highlightTextColor;
66

67
            .p-node-toggler {
68
                i {
69
                    color: darken($highlightBg, 25%);
70
                }
71
            }
72
        }
73
    }
74

75
    .p-organizationchart-line-down {
76
        background: $organizationChartConnectorColor;
77
    }
78

79
    .p-organizationchart-line-left {
80
        border-right: $panelContentBorder;
81
        border-color: $organizationChartConnectorColor;
82
    }
83

84
    .p-organizationchart-line-top {
85
        border-top: $panelContentBorder;
86
        border-color: $organizationChartConnectorColor;
87
    }
88

89
    .p-organizationchart-node-content {
90
        border: $panelContentBorder;
91
        background: $panelContentBg;
92
        color: $panelContentTextColor;
93
        padding: $panelContentPadding;
94
    }
95

96
    .p-organizationchart-node-content .p-node-toggler {
97
        background: inherit;
98
        color: inherit;
99
        border-radius: 50%;
100
        outline-color: transparent;
101

102
        &:focus-visible {
103
            @include focused();
104
        }
105
    }
106
}
107