ngx-toastr 16.0.0 → 16.0.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/package.json +1 -1
- package/toastr-bs5-alert.scss +264 -0
package/package.json
CHANGED
|
@@ -0,0 +1,264 @@
|
|
|
1
|
+
$theme-color-interval: 8% !default;
|
|
2
|
+
|
|
3
|
+
// Position
|
|
4
|
+
.toast-center-center {
|
|
5
|
+
top: 50%;
|
|
6
|
+
left: 50%;
|
|
7
|
+
transform: translate(-50%, -50%);
|
|
8
|
+
}
|
|
9
|
+
.toast-top-center {
|
|
10
|
+
top: 0;
|
|
11
|
+
right: 0;
|
|
12
|
+
width: 100%;
|
|
13
|
+
}
|
|
14
|
+
.toast-bottom-center {
|
|
15
|
+
bottom: 0;
|
|
16
|
+
right: 0;
|
|
17
|
+
width: 100%;
|
|
18
|
+
}
|
|
19
|
+
.toast-top-full-width {
|
|
20
|
+
top: 0;
|
|
21
|
+
right: 0;
|
|
22
|
+
width: 100%;
|
|
23
|
+
}
|
|
24
|
+
.toast-bottom-full-width {
|
|
25
|
+
bottom: 0;
|
|
26
|
+
right: 0;
|
|
27
|
+
width: 100%;
|
|
28
|
+
}
|
|
29
|
+
.toast-top-left {
|
|
30
|
+
top: 12px;
|
|
31
|
+
left: 12px;
|
|
32
|
+
}
|
|
33
|
+
.toast-top-right {
|
|
34
|
+
top: 12px;
|
|
35
|
+
right: 12px;
|
|
36
|
+
}
|
|
37
|
+
.toast-bottom-right {
|
|
38
|
+
right: 12px;
|
|
39
|
+
bottom: 12px;
|
|
40
|
+
}
|
|
41
|
+
.toast-bottom-left {
|
|
42
|
+
bottom: 12px;
|
|
43
|
+
left: 12px;
|
|
44
|
+
}
|
|
45
|
+
.toast-container.toast-top-center .ngx-toastr,
|
|
46
|
+
.toast-container.toast-bottom-center .ngx-toastr {
|
|
47
|
+
width: 300px;
|
|
48
|
+
margin-left: auto;
|
|
49
|
+
margin-right: auto;
|
|
50
|
+
}
|
|
51
|
+
.toast-container.toast-top-full-width .ngx-toastr,
|
|
52
|
+
.toast-container.toast-bottom-full-width .ngx-toastr {
|
|
53
|
+
width: 96%;
|
|
54
|
+
margin-left: auto;
|
|
55
|
+
margin-right: auto;
|
|
56
|
+
}
|
|
57
|
+
|
|
58
|
+
// Toast
|
|
59
|
+
.toast-container {
|
|
60
|
+
pointer-events: none;
|
|
61
|
+
position: fixed;
|
|
62
|
+
z-index: 999999;
|
|
63
|
+
|
|
64
|
+
.ngx-toastr {
|
|
65
|
+
@include border-radius($alert-border-radius);
|
|
66
|
+
position: relative;
|
|
67
|
+
overflow: hidden;
|
|
68
|
+
margin: 0 0 6px;
|
|
69
|
+
padding: 0.75rem 1.25rem 0.75rem 50px;
|
|
70
|
+
width: 300px;
|
|
71
|
+
background-position: 15px center;
|
|
72
|
+
background-repeat: no-repeat;
|
|
73
|
+
background-size: 24px;
|
|
74
|
+
box-shadow: 0 0 10px rgba(0, 0, 0, 0.03);
|
|
75
|
+
pointer-events: auto;
|
|
76
|
+
|
|
77
|
+
.toast-title {
|
|
78
|
+
font-weight: bold;
|
|
79
|
+
}
|
|
80
|
+
.toast-message {
|
|
81
|
+
word-wrap: break-word;
|
|
82
|
+
|
|
83
|
+
}
|
|
84
|
+
.toast-close-button {
|
|
85
|
+
position: relative;
|
|
86
|
+
right: -0.3em;
|
|
87
|
+
top: -0.3em;
|
|
88
|
+
float: right;
|
|
89
|
+
font-size: 20px;
|
|
90
|
+
font-weight: bold;
|
|
91
|
+
color: inherit;
|
|
92
|
+
text-shadow: 0 1px 0 #fff;
|
|
93
|
+
opacity: 0.5;
|
|
94
|
+
background: transparent;
|
|
95
|
+
border: 0;
|
|
96
|
+
padding: 0;
|
|
97
|
+
}
|
|
98
|
+
.toast-progress {
|
|
99
|
+
position: absolute;
|
|
100
|
+
left: 0;
|
|
101
|
+
bottom: 0;
|
|
102
|
+
height: 4px;
|
|
103
|
+
background-color: #000000;
|
|
104
|
+
opacity: 0.3;
|
|
105
|
+
}
|
|
106
|
+
.toast-close-button:hover,
|
|
107
|
+
.toast-close-button:focus {
|
|
108
|
+
color: #000000;
|
|
109
|
+
text-decoration: none;
|
|
110
|
+
cursor: pointer;
|
|
111
|
+
opacity: 0.75;
|
|
112
|
+
}
|
|
113
|
+
}
|
|
114
|
+
.ngx-toastr:hover {
|
|
115
|
+
box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
|
|
116
|
+
opacity: 1;
|
|
117
|
+
cursor: pointer;
|
|
118
|
+
}
|
|
119
|
+
}
|
|
120
|
+
|
|
121
|
+
@function str-split($string, $separator) {
|
|
122
|
+
$split-arr: ();
|
|
123
|
+
// first index of separator in string
|
|
124
|
+
$index: str-index($string, $separator);
|
|
125
|
+
// loop through string
|
|
126
|
+
@while $index != null {
|
|
127
|
+
// get the substring from the first character to the separator
|
|
128
|
+
$item: str-slice($string, 1, $index - 1);
|
|
129
|
+
// push item to array
|
|
130
|
+
$split-arr: append($split-arr, $item);
|
|
131
|
+
// remove item and separator from string
|
|
132
|
+
$string: str-slice($string, $index + 1);
|
|
133
|
+
// find new index of separator
|
|
134
|
+
$index: str-index($string, $separator);
|
|
135
|
+
}
|
|
136
|
+
// add the remaining string to list (the last item)
|
|
137
|
+
$split-arr: append($split-arr, $string);
|
|
138
|
+
|
|
139
|
+
@return $split-arr;
|
|
140
|
+
}
|
|
141
|
+
|
|
142
|
+
@function svg-factory($fill-color, $viewbox, $path) {
|
|
143
|
+
$split: str-split($viewbox, ' ');
|
|
144
|
+
$width: nth($split, 3);
|
|
145
|
+
$height: nth($split, 4);
|
|
146
|
+
|
|
147
|
+
// opacity is 0.9999 otherwise it uses a hex equivelent
|
|
148
|
+
// firefox requires fill rgb
|
|
149
|
+
@return "%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='" + $viewbox +
|
|
150
|
+
"' width='" + $width + "' height='" + $height + "'%3E%3Cpath fill='" +
|
|
151
|
+
rgba($fill-color, 0.999999) + "' d='" + $path + "'/%3E%3C/svg%3E";
|
|
152
|
+
}
|
|
153
|
+
@function svg-encode($svg) {
|
|
154
|
+
@return 'data:image/svg+xml;charset=utf8,' + $svg;
|
|
155
|
+
}
|
|
156
|
+
.toast-success {
|
|
157
|
+
/* https://github.com/FortAwesome/Font-Awesome-Pro/blob/master/advanced-options/raw-svg/solid/check.svg */
|
|
158
|
+
background-image: url(svg-encode(
|
|
159
|
+
svg-factory(
|
|
160
|
+
shift-color($success, 6 * $theme-color-interval),
|
|
161
|
+
'0 0 512 512',
|
|
162
|
+
'M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z'
|
|
163
|
+
)
|
|
164
|
+
));
|
|
165
|
+
color: shift-color($success, 6 * $theme-color-interval) !important;
|
|
166
|
+
background-color: shift-color($success, -10 * $theme-color-interval);
|
|
167
|
+
border: 1px solid shift-color($success, -9 * $theme-color-interval);
|
|
168
|
+
// these are likely !important because we're overriding bootstrap 5's toast styles
|
|
169
|
+
a {
|
|
170
|
+
text-decoration: underline !important;
|
|
171
|
+
color: shift-color($success, 10 * $theme-color-interval) !important;
|
|
172
|
+
&:hover {
|
|
173
|
+
color: shift-color($success, 12 * $theme-color-interval) !important;
|
|
174
|
+
}
|
|
175
|
+
}
|
|
176
|
+
}
|
|
177
|
+
.toast-error {
|
|
178
|
+
/* https://github.com/FortAwesome/Font-Awesome-Pro/blob/master/advanced-options/raw-svg/solid/times-circle.svg */
|
|
179
|
+
background-image: url(svg-encode(
|
|
180
|
+
svg-factory(
|
|
181
|
+
shift-color($danger, 6 * $theme-color-interval),
|
|
182
|
+
'0 0 512 512',
|
|
183
|
+
'M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm121.6 313.1c4.7 4.7 4.7 12.3 0 17L338 377.6c-4.7 4.7-12.3 4.7-17 0L256 312l-65.1 65.6c-4.7 4.7-12.3 4.7-17 0L134.4 338c-4.7-4.7-4.7-12.3 0-17l65.6-65-65.6-65.1c-4.7-4.7-4.7-12.3 0-17l39.6-39.6c4.7-4.7 12.3-4.7 17 0l65 65.7 65.1-65.6c4.7-4.7 12.3-4.7 17 0l39.6 39.6c4.7 4.7 4.7 12.3 0 17L312 256l65.6 65.1z'
|
|
184
|
+
)
|
|
185
|
+
));
|
|
186
|
+
color: shift-color($danger, 6 * $theme-color-interval) !important;
|
|
187
|
+
background-color: shift-color($danger, -10 * $theme-color-interval);
|
|
188
|
+
border: 1px solid shift-color($danger, -9 * $theme-color-interval);
|
|
189
|
+
a {
|
|
190
|
+
text-decoration: underline !important;
|
|
191
|
+
color: shift-color($danger, 10 * $theme-color-interval) !important;
|
|
192
|
+
&:hover {
|
|
193
|
+
color: shift-color($danger, 12 * $theme-color-interval) !important;
|
|
194
|
+
}
|
|
195
|
+
}
|
|
196
|
+
}
|
|
197
|
+
.toast-info {
|
|
198
|
+
/* https://github.com/FortAwesome/Font-Awesome-Pro/blob/master/advanced-options/raw-svg/solid/info-circle.svg */
|
|
199
|
+
background-image: url(svg-encode(
|
|
200
|
+
svg-factory(
|
|
201
|
+
shift-color($info, 6 * $theme-color-interval),
|
|
202
|
+
'0 0 512 512',
|
|
203
|
+
'M256 8C119.043 8 8 119.083 8 256c0 136.997 111.043 248 248 248s248-111.003 248-248C504 119.083 392.957 8 256 8zm0 110c23.196 0 42 18.804 42 42s-18.804 42-42 42-42-18.804-42-42 18.804-42 42-42zm56 254c0 6.627-5.373 12-12 12h-88c-6.627 0-12-5.373-12-12v-24c0-6.627 5.373-12 12-12h12v-64h-12c-6.627 0-12-5.373-12-12v-24c0-6.627 5.373-12 12-12h64c6.627 0 12 5.373 12 12v100h12c6.627 0 12 5.373 12 12v24z'
|
|
204
|
+
)
|
|
205
|
+
));
|
|
206
|
+
color: shift-color($info, 6 * $theme-color-interval) !important;
|
|
207
|
+
background-color: shift-color($info, -10 * $theme-color-interval);
|
|
208
|
+
border: 1px solid shift-color($info, -9 * $theme-color-interval);
|
|
209
|
+
a {
|
|
210
|
+
text-decoration: underline !important;
|
|
211
|
+
color: shift-color($info, 10 * $theme-color-interval) !important;
|
|
212
|
+
&:hover {
|
|
213
|
+
color: shift-color($info, 12 * $theme-color-interval) !important;
|
|
214
|
+
}
|
|
215
|
+
}
|
|
216
|
+
}
|
|
217
|
+
.toast-warning {
|
|
218
|
+
/* https://github.com/FortAwesome/Font-Awesome-Pro/blob/master/advanced-options/raw-svg/solid/exclamation-triangle.svg */
|
|
219
|
+
background-image: url(svg-encode(
|
|
220
|
+
svg-factory(
|
|
221
|
+
shift-color($warning, 6 * $theme-color-interval),
|
|
222
|
+
'0 0 576 512',
|
|
223
|
+
'M569.517 440.013C587.975 472.007 564.806 512 527.94 512H48.054c-36.937 0-59.999-40.055-41.577-71.987L246.423 23.985c18.467-32.009 64.72-31.951 83.154 0l239.94 416.028zM288 354c-25.405 0-46 20.595-46 46s20.595 46 46 46 46-20.595 46-46-20.595-46-46-46zm-43.673-165.346l7.418 136c.347 6.364 5.609 11.346 11.982 11.346h48.546c6.373 0 11.635-4.982 11.982-11.346l7.418-136c.375-6.874-5.098-12.654-11.982-12.654h-63.383c-6.884 0-12.356 5.78-11.981 12.654z'
|
|
224
|
+
)
|
|
225
|
+
));
|
|
226
|
+
color: shift-color($warning, 6 * $theme-color-interval) !important;
|
|
227
|
+
background-color: shift-color($warning, -10 * $theme-color-interval);
|
|
228
|
+
border: 1px solid shift-color($warning, -9 * $theme-color-interval);
|
|
229
|
+
a {
|
|
230
|
+
text-decoration: underline !important;
|
|
231
|
+
color: shift-color($warning, 10 * $theme-color-interval) !important;
|
|
232
|
+
&:hover {
|
|
233
|
+
color: shift-color($warning, 12 * $theme-color-interval) !important;
|
|
234
|
+
}
|
|
235
|
+
}
|
|
236
|
+
}
|
|
237
|
+
|
|
238
|
+
// Responsive Design
|
|
239
|
+
@media all and (max-width: 240px) {
|
|
240
|
+
.toast-container .ngx-toastr.div {
|
|
241
|
+
padding: 8px 8px 8px 50px;
|
|
242
|
+
width: 11em;
|
|
243
|
+
}
|
|
244
|
+
.toast-container .toast-close-button {
|
|
245
|
+
right: -0.2em;
|
|
246
|
+
top: -0.2em;
|
|
247
|
+
}
|
|
248
|
+
}
|
|
249
|
+
@media all and (min-width: 241px) and (max-width: 480px) {
|
|
250
|
+
.toast-container .ngx-toastr.div {
|
|
251
|
+
padding: 8px 8px 8px 50px;
|
|
252
|
+
width: 18em;
|
|
253
|
+
}
|
|
254
|
+
.toast-container .toast-close-button {
|
|
255
|
+
right: -0.2em;
|
|
256
|
+
top: -0.2em;
|
|
257
|
+
}
|
|
258
|
+
}
|
|
259
|
+
@media all and (min-width: 481px) and (max-width: 768px) {
|
|
260
|
+
.toast-container .ngx-toastr.div {
|
|
261
|
+
padding: 15px 15px 15px 50px;
|
|
262
|
+
width: 25em;
|
|
263
|
+
}
|
|
264
|
+
}
|