codecheck

1
// core
2
.p-message-wrapper {
3
    display: flex;
4
    align-items: center;
5
}
6

7
.p-message-icon {
8
    flex-shrink: 0;
9
}
10

11
.p-message-close {
12
    display: flex;
13
    align-items: center;
14
    justify-content: center;
15
    flex-shrink: 0;
16
}
17

18
.p-message-close.p-link {
19
    margin-left: auto;
20
    overflow: hidden;
21
    position: relative;
22
}
23

24
.p-message-enter-from {
25
    opacity: 0;
26
}
27

28
.p-message-enter-active {
29
    transition: opacity 0.3s;
30
}
31

32
.p-message.p-message-leave-from {
33
    max-height: 1000px;
34
}
35

36
.p-message.p-message-leave-to {
37
    max-height: 0;
38
    opacity: 0;
39
    margin: 0;
40
}
41

42
.p-message-leave-active {
43
    overflow: hidden;
44
    transition: max-height 0.3s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin 0.15s;
45
}
46

47
.p-message-leave-active .p-message-close {
48
    display: none;
49
}
50

51
// theme
52
.p-message {
53
    margin: $messageMargin;
54
    border-radius: $borderRadius;
55

56
    .p-message-wrapper {
57
        padding: $messagePadding;
58
    }
59

60
    .p-message-close {
61
        width: $actionIconWidth;
62
        height: $actionIconHeight;
63
        border-radius: $actionIconBorderRadius;
64
        background: transparent;
65
        transition: $actionIconTransition;
66
        outline-color: transparent;
67

68
        &:hover {
69
            background: rgba(255, 255, 255, 0.5);
70
        }
71

72
        &:focus-visible {
73
            @include focused();
74
        }
75
    }
76

77
    &.p-message-info {
78
        background: $infoMessageBg;
79
        border: $infoMessageBorder;
80
        border-width: $messageBorderWidth;
81
        color: $infoMessageTextColor;
82

83
        .p-message-icon {
84
            color: $infoMessageIconColor;
85
        }
86

87
        .p-message-close {
88
            color: $infoMessageIconColor;
89
        }
90
    }
91

92
    &.p-message-success {
93
        background: $successMessageBg;
94
        border: $successMessageBorder;
95
        border-width: $messageBorderWidth;
96
        color: $successMessageTextColor;
97

98
        .p-message-icon {
99
            color: $successMessageIconColor;
100
        }
101

102
        .p-message-close {
103
            color: $successMessageIconColor;
104
        }
105
    }
106

107
    &.p-message-warn {
108
        background: $warningMessageBg;
109
        border: $warningMessageBorder;
110
        border-width: $messageBorderWidth;
111
        color: $warningMessageTextColor;
112

113
        .p-message-icon {
114
            color: $warningMessageIconColor;
115
        }
116

117
        .p-message-close {
118
            color: $warningMessageIconColor;
119
        }
120
    }
121

122
    &.p-message-error {
123
        background: $errorMessageBg;
124
        border: $errorMessageBorder;
125
        border-width: $messageBorderWidth;
126
        color: $errorMessageTextColor;
127

128
        .p-message-icon {
129
            color: $errorMessageIconColor;
130
        }
131

132
        .p-message-close {
133
            color: $errorMessageIconColor;
134
        }
135
    }
136

137
    @if variable-exists(secondaryMessageBg) {
138
        &.p-message-secondary {
139
            background: $secondaryMessageBg;
140
            border: $secondaryMessageBorder;
141
            border-width: $messageBorderWidth;
142
            color: $secondaryMessageTextColor;
143

144
            .p-message-icon {
145
                color: $secondaryMessageIconColor;
146
            }
147

148
            .p-message-close {
149
                color: $secondaryMessageIconColor;
150
            }
151
        }
152
    }
153

154
    @if variable-exists(contrastMessageBg) {
155
        &.p-message-contrast {
156
            background: $contrastMessageBg;
157
            border: $contrastMessageBorder;
158
            border-width: $messageBorderWidth;
159
            color: $contrastMessageTextColor;
160

161
            .p-message-icon {
162
                color: $contrastMessageIconColor;
163
            }
164

165
            .p-message-close {
166
                color: $contrastMessageIconColor;
167
            }
168
        }
169
    }
170

171
    .p-message-text {
172
        font-size: $messageTextFontSize;
173
        font-weight: $messageTextFontWeight;
174
    }
175

176
    .p-message-icon {
177
        font-size: $messageIconFontSize;
178
        margin-right: $inlineSpacing;
179
    }
180

181
    .p-icon:not(.p-message-close-icon) {
182
        width: $messageIconFontSize;
183
        height: $messageIconFontSize;
184
    }
185
}
186