vue-nt-toast 0.3.0 → 0.3.2
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 +4 -3
- package/src/toast.js +1 -1
- package/src/toast.scss +16 -6
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "vue-nt-toast",
|
|
3
|
-
"version": "0.3.
|
|
3
|
+
"version": "0.3.2",
|
|
4
4
|
"description": "Toast system plugin with vue3",
|
|
5
5
|
"author": "Minyoung Tommy Kim",
|
|
6
6
|
"private": false,
|
|
@@ -19,7 +19,8 @@
|
|
|
19
19
|
".": {
|
|
20
20
|
"import": "./dist/nt-toast.es.js",
|
|
21
21
|
"require": "./dist/nt-toast.umd.js"
|
|
22
|
-
}
|
|
22
|
+
},
|
|
23
|
+
"./toast.css": "./dist/toast.css"
|
|
23
24
|
},
|
|
24
25
|
"files": [
|
|
25
26
|
"dist",
|
|
@@ -34,7 +35,6 @@
|
|
|
34
35
|
"notification",
|
|
35
36
|
"toast"
|
|
36
37
|
],
|
|
37
|
-
"style": "./dist/toast.css",
|
|
38
38
|
"peerDependencies": {
|
|
39
39
|
"vue": "^3.3.4"
|
|
40
40
|
},
|
|
@@ -46,6 +46,7 @@
|
|
|
46
46
|
"eslint-plugin-vue": "^9.16.1",
|
|
47
47
|
"prettier": "^3.0.0",
|
|
48
48
|
"sass": "^1.66.1",
|
|
49
|
+
"shiki": "^3.20.0",
|
|
49
50
|
"vite": "^4.4.9"
|
|
50
51
|
},
|
|
51
52
|
"repository": {
|
package/src/toast.js
CHANGED
|
@@ -70,7 +70,7 @@ class Toast {
|
|
|
70
70
|
}
|
|
71
71
|
setContents() {
|
|
72
72
|
const contents = document.createElement('div')
|
|
73
|
-
const title = document.createElement('
|
|
73
|
+
const title = document.createElement('div')
|
|
74
74
|
title.classList.add('title', 'ellipsis')
|
|
75
75
|
const description = document.createElement('div')
|
|
76
76
|
if (typeof this.msg === 'string') {
|
package/src/toast.scss
CHANGED
|
@@ -163,8 +163,8 @@ $colors: (
|
|
|
163
163
|
margin: 5px;
|
|
164
164
|
//opacity: .95;
|
|
165
165
|
color: #333;
|
|
166
|
-
border-radius:
|
|
167
|
-
box-shadow: 2px 5px 5px rgba(0, 0, 0, 0.16);
|
|
166
|
+
border-radius: 8px;
|
|
167
|
+
box-shadow: 2px 5px 5px rgba(0, 0, 0, 0.16), 0 0 8px 5px rgba(0, 0, 0, 0.04);
|
|
168
168
|
background-color: #fff;
|
|
169
169
|
//transition: all 500ms;
|
|
170
170
|
transition-property: opacity, transform;
|
|
@@ -174,7 +174,7 @@ $colors: (
|
|
|
174
174
|
// border: 1px solid #d6d6d6;
|
|
175
175
|
opacity: 0;
|
|
176
176
|
//transform: translateX(20px);
|
|
177
|
-
font-size:
|
|
177
|
+
font-size: 1rem;
|
|
178
178
|
overflow: hidden;
|
|
179
179
|
animation: swing-off 500ms ease;
|
|
180
180
|
&.fade {
|
|
@@ -195,10 +195,10 @@ $colors: (
|
|
|
195
195
|
max-width: calc(100% - 50px);
|
|
196
196
|
font-size: .8em;
|
|
197
197
|
overflow-wrap: break-word;
|
|
198
|
-
|
|
198
|
+
.title {
|
|
199
199
|
font-weight: bold;
|
|
200
200
|
font-size: 1.2em;
|
|
201
|
-
margin-bottom:
|
|
201
|
+
margin-bottom: 5px;
|
|
202
202
|
}
|
|
203
203
|
}
|
|
204
204
|
.toast-close {
|
|
@@ -379,4 +379,14 @@ $colors: (
|
|
|
379
379
|
transform: translateY(30px);
|
|
380
380
|
//opacity: 0;
|
|
381
381
|
}
|
|
382
|
-
}
|
|
382
|
+
}
|
|
383
|
+
|
|
384
|
+
@media (max-width: 400px) {
|
|
385
|
+
.toast-board {
|
|
386
|
+
width: 100%;
|
|
387
|
+
.toast {
|
|
388
|
+
width: calc(100% - 10px);
|
|
389
|
+
}
|
|
390
|
+
}
|
|
391
|
+
|
|
392
|
+
}
|