codecheck

1
// core
2
.p-dialog-mask.p-component-overlay {
3
    pointer-events: auto;
4
}
5

6
.p-dialog {
7
    max-height: 90%;
8
    transform: scale(1);
9
}
10

11
.p-dialog-content {
12
    overflow-y: auto;
13
}
14

15
.p-dialog-header {
16
    display: flex;
17
    align-items: center;
18
    justify-content: space-between;
19
    flex-shrink: 0;
20
}
21

22
.p-dialog-footer {
23
    flex-shrink: 0;
24
}
25

26
.p-dialog .p-dialog-header-icons {
27
    display: flex;
28
    align-items: center;
29
}
30

31
.p-dialog .p-dialog-header-icon {
32
    display: flex;
33
    align-items: center;
34
    justify-content: center;
35
    overflow: hidden;
36
    position: relative;
37
}
38

39
/* Fluid */
40
.p-fluid .p-dialog-footer .p-button {
41
    width: auto;
42
}
43

44
/* Animation */
45
/* Center */
46
.p-dialog-enter-active {
47
    transition: all 150ms cubic-bezier(0, 0, 0.2, 1);
48
}
49
.p-dialog-leave-active {
50
    transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
51
}
52
.p-dialog-enter-from,
53
.p-dialog-leave-to {
54
    opacity: 0;
55
    transform: scale(0.7);
56
}
57

58
/* Top, Bottom, Left, Right, Top* and Bottom* */
59
.p-dialog-top .p-dialog,
60
.p-dialog-bottom .p-dialog,
61
.p-dialog-left .p-dialog,
62
.p-dialog-right .p-dialog,
63
.p-dialog-topleft .p-dialog,
64
.p-dialog-topright .p-dialog,
65
.p-dialog-bottomleft .p-dialog,
66
.p-dialog-bottomright .p-dialog {
67
    margin: 0.75rem;
68
    transform: translate3d(0px, 0px, 0px);
69
}
70
.p-dialog-top .p-dialog-enter-active,
71
.p-dialog-top .p-dialog-leave-active,
72
.p-dialog-bottom .p-dialog-enter-active,
73
.p-dialog-bottom .p-dialog-leave-active,
74
.p-dialog-left .p-dialog-enter-active,
75
.p-dialog-left .p-dialog-leave-active,
76
.p-dialog-right .p-dialog-enter-active,
77
.p-dialog-right .p-dialog-leave-active,
78
.p-dialog-topleft .p-dialog-enter-active,
79
.p-dialog-topleft .p-dialog-leave-active,
80
.p-dialog-topright .p-dialog-enter-active,
81
.p-dialog-topright .p-dialog-leave-active,
82
.p-dialog-bottomleft .p-dialog-enter-active,
83
.p-dialog-bottomleft .p-dialog-leave-active,
84
.p-dialog-bottomright .p-dialog-enter-active,
85
.p-dialog-bottomright .p-dialog-leave-active {
86
    transition: all 0.3s ease-out;
87
}
88
.p-dialog-top .p-dialog-enter-from,
89
.p-dialog-top .p-dialog-leave-to {
90
    transform: translate3d(0px, -100%, 0px);
91
}
92
.p-dialog-bottom .p-dialog-enter-from,
93
.p-dialog-bottom .p-dialog-leave-to {
94
    transform: translate3d(0px, 100%, 0px);
95
}
96
.p-dialog-left .p-dialog-enter-from,
97
.p-dialog-left .p-dialog-leave-to,
98
.p-dialog-topleft .p-dialog-enter-from,
99
.p-dialog-topleft .p-dialog-leave-to,
100
.p-dialog-bottomleft .p-dialog-enter-from,
101
.p-dialog-bottomleft .p-dialog-leave-to {
102
    transform: translate3d(-100%, 0px, 0px);
103
}
104
.p-dialog-right .p-dialog-enter-from,
105
.p-dialog-right .p-dialog-leave-to,
106
.p-dialog-topright .p-dialog-enter-from,
107
.p-dialog-topright .p-dialog-leave-to,
108
.p-dialog-bottomright .p-dialog-enter-from,
109
.p-dialog-bottomright .p-dialog-leave-to {
110
    transform: translate3d(100%, 0px, 0px);
111
}
112

113
/* Maximize */
114
.p-dialog-maximized {
115
    width: 100vw !important;
116
    height: 100vh !important;
117
    top: 0px !important;
118
    left: 0px !important;
119
    max-height: 100%;
120
    height: 100%;
121
}
122
.p-dialog-maximized .p-dialog-content {
123
    flex-grow: 1;
124
}
125

126
.p-confirm-dialog .p-dialog-content {
127
    display: flex;
128
    align-items: center;
129
}
130

131
// theme
132
.p-dialog {
133
    border-radius: $borderRadius;
134
    box-shadow: $overlayContainerShadow;
135
    border: $overlayContentBorder;
136

137
    .p-dialog-header {
138
        border-bottom: $dialogHeaderBorder;
139
        background: $dialogHeaderBg;
140
        color: $dialogHeaderTextColor;
141
        padding: $dialogHeaderPadding;
142
        border-top-right-radius: $borderRadius;
143
        border-top-left-radius: $borderRadius;
144

145
        .p-dialog-title {
146
            font-weight: $dialogHeaderFontWeight;
147
            font-size: $dialogHeaderFontSize;
148
        }
149

150
        .p-dialog-header-icon {
151
            @include action-icon();
152
            margin-right: $inlineSpacing;
153
            
154
            &:last-child {
155
                margin-right: 0;
156
            }            
157
        }
158
    }
159

160
    .p-dialog-content {
161
        background: $overlayContentBg;
162
        color: $panelContentTextColor;
163
        padding: $dialogContentPadding;
164

165
        &:last-of-type {
166
            border-bottom-right-radius: $borderRadius;
167
            border-bottom-left-radius: $borderRadius;
168
        }
169
    }
170

171
    .p-dialog-footer {
172
        border-top: $dialogFooterBorder;
173
        background: $overlayContentBg;
174
        color: $panelFooterTextColor;
175
        padding: $dialogFooterPadding;
176
        display: flex;
177
        justify-content: flex-end;
178
        gap: $inlineSpacing;
179
        border-bottom-right-radius: $borderRadius;
180
        border-bottom-left-radius: $borderRadius;
181
    }
182

183
    &.p-confirm-dialog {
184
        .p-confirm-dialog-icon {
185
            font-size: $primeIconFontSize * 2;
186
        }
187

188
        .p-confirm-dialog-message:not(:first-child) {
189
            margin-left: $inlineSpacing * 2;
190
        }
191
    }
192
}
193