codecheck

1
// core
2
.p-toast {
3
    width: 25rem;
4
    white-space: pre-line;
5
    word-break: break-word;
6
}
7

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

12
.p-toast-message-content {
13
    display: flex;
14
    align-items: flex-start;
15
}
16

17
.p-toast-message-text {
18
    flex: 1 1 auto;
19
}
20

21
.p-toast-top-center {
22
    transform: translateX(-50%);
23
}
24

25
.p-toast-bottom-center {
26
    transform: translateX(-50%);
27
}
28

29
.p-toast-center {
30
    min-width: 20vw;
31
    transform: translate(-50%, -50%);
32
}
33

34
.p-toast-icon-close {
35
    display: flex;
36
    align-items: center;
37
    justify-content: center;
38
    overflow: hidden;
39
    position: relative;
40
}
41

42
.p-toast-icon-close.p-link {
43
    cursor: pointer;
44
}
45

46
/* Animations */
47
.p-toast-message-enter-from {
48
    opacity: 0;
49
    -webkit-transform: translateY(50%);
50
    -ms-transform: translateY(50%);
51
    transform: translateY(50%);
52
}
53

54
.p-toast-message-leave-from {
55
    max-height: 1000px;
56
}
57

58
.p-toast .p-toast-message.p-toast-message-leave-to {
59
    max-height: 0;
60
    opacity: 0;
61
    margin-bottom: 0;
62
    overflow: hidden;
63
}
64

65
.p-toast-message-enter-active {
66
    -webkit-transition: transform 0.3s, opacity 0.3s;
67
    transition: transform 0.3s, opacity 0.3s;
68
}
69

70
.p-toast-message-leave-active {
71
    -webkit-transition: max-height 0.45s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin-bottom 0.3s;
72
    transition: max-height 0.45s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin-bottom 0.3s;
73
}
74

75
// theme
76
.p-toast {
77
    opacity: $toastOpacity;
78

79
    .p-toast-message {
80
        margin: $toastMargin;
81
        box-shadow: $toastShadow;
82
        border-radius: $borderRadius;
83

84
        .p-toast-message-content {
85
            padding: $toastPadding;
86
            border-width: $toastBorderWidth;
87

88
            .p-toast-message-text {
89
                margin: $toastMessageTextMargin;
90
            }
91

92
            .p-toast-message-icon {
93
                font-size: $toastIconFontSize;
94

95
                &.p-icon {
96
                    width: $toastIconFontSize;
97
                    height: $toastIconFontSize;
98
                }
99
            }
100

101
            .p-toast-summary {
102
                font-weight: $toastTitleFontWeight;
103
            }
104

105
            .p-toast-detail {
106
                margin: $toastDetailMargin;
107
            }
108
        }
109

110
        .p-toast-icon-close {
111
            width: $toastIconFontSize;
112
            height: $toastIconFontSize;
113
            border-radius: $actionIconBorderRadius;
114
            background: transparent;
115
            transition: $actionIconTransition;
116
            outline-color: transparent;
117

118
            &:hover {
119
                background: rgba(255, 255, 255, 0.5);
120
            }
121

122
            &:focus-visible {
123
                @include focused();
124
            }
125
        }
126

127
        &.p-toast-message-info {
128
            background: $infoMessageBg;
129
            border: $infoMessageBorder;
130
            border-width: $messageBorderWidth;
131
            color: $infoMessageTextColor;
132

133
            .p-toast-message-icon,
134
            .p-toast-icon-close {
135
                color: $infoMessageIconColor;
136
            }
137
        }
138

139
        &.p-toast-message-success {
140
            background: $successMessageBg;
141
            border: $successMessageBorder;
142
            border-width: $messageBorderWidth;
143
            color: $successMessageTextColor;
144

145
            .p-toast-message-icon,
146
            .p-toast-icon-close {
147
                color: $successMessageIconColor;
148
            }
149
        }
150

151
        &.p-toast-message-warn {
152
            background: $warningMessageBg;
153
            border: $warningMessageBorder;
154
            border-width: $messageBorderWidth;
155
            color: $warningMessageTextColor;
156

157
            .p-toast-message-icon,
158
            .p-toast-icon-close {
159
                color: $warningMessageIconColor;
160
            }
161
        }
162

163
        &.p-toast-message-error {
164
            background: $errorMessageBg;
165
            border: $errorMessageBorder;
166
            border-width: $messageBorderWidth;
167
            color: $errorMessageTextColor;
168

169
            .p-toast-message-icon,
170
            .p-toast-icon-close {
171
                color: $errorMessageIconColor;
172
            }
173
        }
174

175
        @if variable-exists(secondaryMessageBg) {
176
            &.p-toast-message-secondary {
177
                background: $secondaryMessageBg;
178
                border: $secondaryMessageBorder;
179
                border-width: $messageBorderWidth;
180
                color: $secondaryMessageTextColor;
181

182
                .p-toast-message-icon,
183
                .p-toast-icon-close {
184
                    color: $secondaryMessageIconColor;
185
                }
186
            }
187
        }
188

189
        @if variable-exists(contrastMessageBg) {
190
            &.p-toast-message-contrast {
191
                background: $contrastMessageBg;
192
                border: $contrastMessageBorder;
193
                border-width: $messageBorderWidth;
194
                color: $contrastMessageTextColor;
195

196
                .p-toast-message-icon,
197
                .p-toast-icon-close {
198
                    color: $contrastMessageIconColor;
199
                }
200
            }
201
        }
202
    }
203
}
204