codecheck

1
@use 'sass:math';
2

3
// core
4
.p-overlaypanel {
5
    margin-top: 10px;
6
}
7

8
.p-overlaypanel-flipped {
9
    margin-top: 0;
10
    margin-bottom: 10px;
11
}
12

13
.p-overlaypanel-close {
14
    display: flex;
15
    justify-content: center;
16
    align-items: center;
17
    overflow: hidden;
18
    position: relative;
19
}
20

21
/* Animation */
22
.p-overlaypanel-enter-from {
23
    opacity: 0;
24
    transform: scaleY(0.8);
25
}
26

27
.p-overlaypanel-leave-to {
28
    opacity: 0;
29
}
30

31
.p-overlaypanel-enter-active {
32
    transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.12s cubic-bezier(0, 0, 0.2, 1);
33
}
34

35
.p-overlaypanel-leave-active {
36
    transition: opacity 0.1s linear;
37
}
38

39
.p-overlaypanel:after,
40
.p-overlaypanel:before {
41
    bottom: 100%;
42
    left: calc(var(--overlayArrowLeft, 0) + 1.25rem);
43
    content: ' ';
44
    height: 0;
45
    width: 0;
46
    position: absolute;
47
    pointer-events: none;
48
}
49

50
.p-overlaypanel:after {
51
    border-width: 8px;
52
    margin-left: -8px;
53
}
54

55
.p-overlaypanel:before {
56
    border-width: 10px;
57
    margin-left: -10px;
58
}
59

60
.p-overlaypanel-flipped:after,
61
.p-overlaypanel-flipped:before {
62
    bottom: auto;
63
    top: 100%;
64
}
65

66
.p-overlaypanel.p-overlaypanel-flipped:after {
67
    border-bottom-color: transparent;
68
}
69

70
.p-overlaypanel.p-overlaypanel-flipped:before {
71
    border-bottom-color: transparent;
72
}
73

74
// theme
75
.p-overlaypanel {
76
    background: $overlayContentBg;
77
    color: $panelContentTextColor;
78
    border: $overlayContentBorder;
79
    border-radius: $borderRadius;
80
    box-shadow: $overlayContainerShadow;
81

82
    .p-overlaypanel-content {
83
        padding: $panelContentPadding;
84
    }
85

86
    .p-overlaypanel-close {
87
        background: $buttonBg;
88
        color: $buttonTextColor;
89
        width: $actionIconWidth;
90
        height: $actionIconHeight;
91
        transition: $actionIconTransition;
92
        border-radius: $actionIconBorderRadius;
93
        position: absolute;
94
        top: math.div(-1 * $actionIconWidth, 2);
95
        right: math.div(-1 * $actionIconWidth, 2);
96

97
        &:enabled:hover {
98
            background: $buttonHoverBg;
99
            color: $buttonTextHoverColor;
100
        }
101
    }
102

103
    &:after {
104
        border-style: solid;
105
        border-color: rgba($overlayContentBg, 0);
106
        border-bottom-color: $overlayContentBg;
107
    }
108

109
    &:before {
110
        border-style: solid;
111

112
        @if (nth($overlayContentBorder, 2) == 'none') {
113
            border-color: rgba($overlayContentBg, 0);
114
            border-bottom-color: scale-color($overlayContentBg, $lightness: -5%);
115
        }
116
        @else {
117
            border-color: rgba(nth($overlayContentBorder, 3), 0);
118
            border-bottom-color: scale-color(nth($overlayContentBorder, 3), $lightness: -5%);
119
        }
120
    }
121

122
    &.p-overlaypanel-flipped {
123
        &:after {
124
            border-top-color: $overlayContentBg;
125
        }
126

127
        &:before {
128
            @if (nth($overlayContentBorder, 2) == 'none') {
129
                border-top-color: $overlayContentBg;
130
            }
131
            @else {
132
                border-top-color: nth($overlayContentBorder, 3);
133
            }
134
        }
135
    }
136
}
137