codecheck

1
// core
2
.p-confirm-popup {
3
    position: absolute;
4
    margin-top: 10px;
5
    top: 0;
6
    left: 0;
7
}
8

9
.p-confirm-popup-flipped {
10
    margin-top: 0;
11
    margin-bottom: 10px;
12
}
13

14
/* Animation */
15
.p-confirm-popup-enter-from {
16
    opacity: 0;
17
    transform: scaleY(0.8);
18
}
19

20
.p-confirm-popup-leave-to {
21
    opacity: 0;
22
}
23

24
.p-confirm-popup-enter-active {
25
    transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.12s cubic-bezier(0, 0, 0.2, 1);
26
}
27

28
.p-confirm-popup-leave-active {
29
    transition: opacity 0.1s linear;
30
}
31

32
.p-confirm-popup:after,
33
.p-confirm-popup:before {
34
    bottom: 100%;
35
    left: calc(var(--overlayArrowLeft, 0) + 1.25rem);
36
    content: ' ';
37
    height: 0;
38
    width: 0;
39
    position: absolute;
40
    pointer-events: none;
41
}
42

43
.p-confirm-popup:after {
44
    border-width: 8px;
45
    margin-left: -8px;
46
}
47

48
.p-confirm-popup:before {
49
    border-width: 10px;
50
    margin-left: -10px;
51
}
52

53
.p-confirm-popup-flipped:after,
54
.p-confirm-popup-flipped:before {
55
    bottom: auto;
56
    top: 100%;
57
}
58

59
.p-confirm-popup.p-confirm-popup-flipped:after {
60
    border-bottom-color: transparent;
61
}
62

63
.p-confirm-popup.p-confirm-popup-flipped:before {
64
    border-bottom-color: transparent;
65
}
66

67
.p-confirm-popup .p-confirm-popup-content {
68
    display: flex;
69
    align-items: center;
70
}
71

72
// theme
73
.p-confirm-popup {
74
    background: $overlayContentBg;
75
    color: $panelContentTextColor;
76
    border: $overlayContentBorder;
77
    border-radius: $borderRadius;
78
    box-shadow: $overlayContainerShadow;
79

80
    .p-confirm-popup-content {
81
        padding: $confirmPopupContentPadding;
82
    }
83

84
    .p-confirm-popup-footer {
85
        text-align: right;
86
        padding: $confirmPopupFooterPadding;
87

88
        button {
89
            margin: 0 $inlineSpacing 0 0;
90
            width: auto;
91

92
            &:last-child {
93
                margin: 0;
94
            }
95
        }
96
    }
97

98
    &:after {
99
        border-style: solid;
100
        border-color: rgba($overlayContentBg, 0);
101
        border-bottom-color: $overlayContentBg;
102
    }
103

104
    &:before {
105
        border-style: solid;
106

107
        @if (nth($overlayContentBorder, 2) == 'none') {
108
            border-color: rgba($overlayContentBg, 0);
109
            border-bottom-color: scale-color($overlayContentBg, $lightness: -5%);
110
        }
111
        @else {
112
            border-color: rgba(nth($overlayContentBorder, 3), 0);
113
            border-bottom-color: scale-color(nth($overlayContentBorder, 3), $lightness: -5%);
114
        }
115
    }
116

117
    &.p-confirm-popup-flipped {
118
        &:after {
119
            border-top-color: $overlayContentBg;
120
        }
121

122
        &:before {
123
            @if (nth($overlayContentBorder, 2) == 'none') {
124
                border-top-color: $overlayContentBg;
125
            }
126
            @else {
127
                border-top-color: nth($overlayContentBorder, 3);
128
            }
129
        }
130
    }
131

132
    .p-confirm-popup-icon {
133
        font-size: $primeIconFontSize * 1.5;
134

135
        &.p-icon {
136
            width: $primeIconFontSize * 1.5;
137
            height: $primeIconFontSize * 1.5;
138
        }
139
    }
140

141
    .p-confirm-popup-message {
142
        margin-left: $inlineSpacing * 2;
143
    }
144
}
145