owp.feedback 1.1.2 → 1.2.0
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/feedback.css +170 -0
- package/index.d.ts +18 -0
- package/package.json +6 -3
package/feedback.css
ADDED
|
@@ -0,0 +1,170 @@
|
|
|
1
|
+
.fdb {
|
|
2
|
+
color: white;
|
|
3
|
+
cursor: default;
|
|
4
|
+
display: block;
|
|
5
|
+
top: 1em;
|
|
6
|
+
left: 0;
|
|
7
|
+
right: 0;
|
|
8
|
+
/*leave 1em margins left/right*/
|
|
9
|
+
width: calc(100% - 2em);
|
|
10
|
+
margin: 0 auto;
|
|
11
|
+
position: fixed;
|
|
12
|
+
text-align: center;
|
|
13
|
+
|
|
14
|
+
-webkit-touch-callout: none;
|
|
15
|
+
-webkit-user-select: none;
|
|
16
|
+
-khtml-user-select: none;
|
|
17
|
+
-moz-user-select: none;
|
|
18
|
+
-ms-user-select: none;
|
|
19
|
+
user-select: none;
|
|
20
|
+
|
|
21
|
+
box-sizing: border-box;
|
|
22
|
+
}
|
|
23
|
+
@media (min-width: 768px) {
|
|
24
|
+
.fdb { max-width: 70%; }
|
|
25
|
+
}
|
|
26
|
+
@media (min-width: 1024px) {
|
|
27
|
+
.fdb { max-width: 50%; }
|
|
28
|
+
}
|
|
29
|
+
@media (min-width: 1280px) {
|
|
30
|
+
.fdb { max-width: 35%; }
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
.fdb-inner {
|
|
34
|
+
padding: 0.9em 2em;
|
|
35
|
+
/* radius = 2 * line-height */
|
|
36
|
+
border-radius: 2.8em;
|
|
37
|
+
display: inline-block;
|
|
38
|
+
box-sizing: border-box;
|
|
39
|
+
box-shadow: 0 0 0 3px rgba(0,0,0,.1);
|
|
40
|
+
}
|
|
41
|
+
|
|
42
|
+
.fdb-loading {
|
|
43
|
+
border-radius: 50%;
|
|
44
|
+
width: 20px;
|
|
45
|
+
height: 20px;
|
|
46
|
+
padding: 7px;
|
|
47
|
+
box-sizing: content-box;
|
|
48
|
+
|
|
49
|
+
box-shadow: 0 0 6px 0 rgba(0,0,0,.3);
|
|
50
|
+
|
|
51
|
+
-webkit-animation-name: slideIn;
|
|
52
|
+
animation-name: slideIn;
|
|
53
|
+
-webkit-animation-duration: 0.3s;
|
|
54
|
+
animation-duration: 0.3s;
|
|
55
|
+
-webkit-animation-fill-mode: both;
|
|
56
|
+
animation-fill-mode: both;
|
|
57
|
+
-webkit-animation-timing-function: cubic-bezier(.05,.44,0,.99);
|
|
58
|
+
animation-timing-function: cubic-bezier(.05,.44,0,.99);
|
|
59
|
+
}
|
|
60
|
+
.fdb-unloading {
|
|
61
|
+
-webkit-animation-name: slideOut;
|
|
62
|
+
animation-name: slideOut;
|
|
63
|
+
-webkit-animation-timing-function: cubic-bezier(.7,.08,.93,.49);
|
|
64
|
+
animation-timing-function: cubic-bezier(.7,.08,.93,.49);
|
|
65
|
+
}
|
|
66
|
+
|
|
67
|
+
.fdb-message {
|
|
68
|
+
white-space: pre;
|
|
69
|
+
text-overflow: ellipsis;
|
|
70
|
+
overflow: hidden;
|
|
71
|
+
display: block;
|
|
72
|
+
line-height: 1.4;
|
|
73
|
+
}
|
|
74
|
+
|
|
75
|
+
.fdb-expand {
|
|
76
|
+
-webkit-transition: background-color 0.5s;
|
|
77
|
+
transition: background-color 0.5s;
|
|
78
|
+
|
|
79
|
+
-webkit-animation-name: animateExpand;
|
|
80
|
+
animation-name: animateExpand;
|
|
81
|
+
-webkit-animation-duration: 0.5s;
|
|
82
|
+
animation-duration: 0.5s;
|
|
83
|
+
-webkit-animation-fill-mode: both;
|
|
84
|
+
animation-fill-mode: both;
|
|
85
|
+
-webkit-animation-timing-function: cubic-bezier(.37,.86,.58,.95);
|
|
86
|
+
animation-timing-function: cubic-bezier(.37,.86,.58,.95);
|
|
87
|
+
}
|
|
88
|
+
.fdb-contract {
|
|
89
|
+
-webkit-animation-name: animateContract;
|
|
90
|
+
animation-name: animateContract;
|
|
91
|
+
}
|
|
92
|
+
|
|
93
|
+
|
|
94
|
+
/* Themes - Default - Pure */
|
|
95
|
+
.fdb-info { background-color: #0e90d2; }
|
|
96
|
+
.fdb-error { background-color: #dd514c; }
|
|
97
|
+
.fdb-success { background-color: #5eb95e; }
|
|
98
|
+
.fdb-warn { background-color: #f37b1d; }
|
|
99
|
+
.fdb-grimace { background-color: #8058a5; }
|
|
100
|
+
.fdb-neutral { background-color: #ffffff; }
|
|
101
|
+
|
|
102
|
+
|
|
103
|
+
.fdb-spinner {
|
|
104
|
+
position: relative;
|
|
105
|
+
text-indent: -9999em;
|
|
106
|
+
padding: 6px;
|
|
107
|
+
border-top: 4px solid transparent;
|
|
108
|
+
border-right: 4px solid transparent;
|
|
109
|
+
border-bottom: 4px solid transparent;
|
|
110
|
+
border-left: 4px solid #0e90d2;
|
|
111
|
+
-webkit-animation: spinAnimation 0.5s infinite linear;
|
|
112
|
+
animation: spinAnimation 0.5s infinite linear;
|
|
113
|
+
|
|
114
|
+
box-sizing: border-box;
|
|
115
|
+
}
|
|
116
|
+
.fdb-spinner,
|
|
117
|
+
.fdb-spinner:after {
|
|
118
|
+
border-radius: 50%;
|
|
119
|
+
width: 0;
|
|
120
|
+
height: 0;
|
|
121
|
+
display: block;
|
|
122
|
+
margin: 0 auto;
|
|
123
|
+
}
|
|
124
|
+
|
|
125
|
+
@-webkit-keyframes spinAnimation {
|
|
126
|
+
0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); }
|
|
127
|
+
100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); }
|
|
128
|
+
}
|
|
129
|
+
@keyframes spinAnimation {
|
|
130
|
+
0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); }
|
|
131
|
+
100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); }
|
|
132
|
+
}
|
|
133
|
+
|
|
134
|
+
|
|
135
|
+
@-webkit-keyframes slideIn {
|
|
136
|
+
0% { -webkit-transform: translate3d(0,-10em,0); }
|
|
137
|
+
100% { -webkit-transform: translate3d(0,0,0);}
|
|
138
|
+
}
|
|
139
|
+
@keyframes slideIn {
|
|
140
|
+
0% { -webkit-transform: translate3d(0,-10em,0); transform: translate3d(0,-10em,0); }
|
|
141
|
+
100% { -webkit-transform: translate3d(0,0,0); transform: translate3d(0,0,0); }
|
|
142
|
+
}
|
|
143
|
+
|
|
144
|
+
|
|
145
|
+
@-webkit-keyframes slideOut {
|
|
146
|
+
100% { -webkit-transform: translate3d(0,-10em,0); }
|
|
147
|
+
}
|
|
148
|
+
@keyframes slideOut {
|
|
149
|
+
100% { -webkit-transform: translate3d(0,-10em,0); transform: translate3d(0,-10em,0); }
|
|
150
|
+
}
|
|
151
|
+
|
|
152
|
+
|
|
153
|
+
@-webkit-keyframes animateExpand {
|
|
154
|
+
0% { width: 0; }
|
|
155
|
+
100% { width: 100%; }
|
|
156
|
+
}
|
|
157
|
+
@keyframes animateExpand {
|
|
158
|
+
0% { width: 0; }
|
|
159
|
+
100% { width: 100%; }
|
|
160
|
+
}
|
|
161
|
+
|
|
162
|
+
|
|
163
|
+
@-webkit-keyframes animateContract {
|
|
164
|
+
0% { width: 100%; opacity: 1; }
|
|
165
|
+
100% { width: 90%; opacity: 0; }
|
|
166
|
+
}
|
|
167
|
+
@keyframes animateContract {
|
|
168
|
+
0% { width: 100%; opacity: 1; }
|
|
169
|
+
100% { width: 90%; opacity: 0; }
|
|
170
|
+
}
|
package/index.d.ts
ADDED
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
export interface FeedbackOptions {
|
|
2
|
+
sticky?: boolean;
|
|
3
|
+
duration?: number;
|
|
4
|
+
}
|
|
5
|
+
|
|
6
|
+
export interface Feedback {
|
|
7
|
+
config(params?: FeedbackOptions): void;
|
|
8
|
+
info(message: string, userOpt?: FeedbackOptions): void;
|
|
9
|
+
error(message: string, userOpt?: FeedbackOptions): void;
|
|
10
|
+
success(message: string, userOpt?: FeedbackOptions): void;
|
|
11
|
+
warn(message: string, userOpt?: FeedbackOptions): void;
|
|
12
|
+
grimace(message: string, userOpt?: FeedbackOptions): void;
|
|
13
|
+
neutral(message: string, userOpt?: FeedbackOptions): void;
|
|
14
|
+
}
|
|
15
|
+
|
|
16
|
+
declare const Feedback: Feedback;
|
|
17
|
+
|
|
18
|
+
export default Feedback;
|
package/package.json
CHANGED
|
@@ -1,10 +1,13 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "owp.feedback",
|
|
3
3
|
"description": "Feedback notifications",
|
|
4
|
-
"version": "1.
|
|
4
|
+
"version": "1.2.0",
|
|
5
5
|
"main": "index.js",
|
|
6
|
+
"types": "index.d.ts",
|
|
6
7
|
"files": [
|
|
7
|
-
"index.js"
|
|
8
|
+
"index.js",
|
|
9
|
+
"index.d.ts",
|
|
10
|
+
"feedback.css"
|
|
8
11
|
],
|
|
9
12
|
"scripts": {
|
|
10
13
|
"start": "webpack-dev-server --config webpack.config.js --mode development --port 9090 --open",
|
|
@@ -20,7 +23,7 @@
|
|
|
20
23
|
"homepage": "https://github.com/AndreasArvidsson/OpenWebProject-Feedback",
|
|
21
24
|
"repository": {
|
|
22
25
|
"type": "git",
|
|
23
|
-
"url": "https://github.com/AndreasArvidsson/OpenWebProject-Feedback.git"
|
|
26
|
+
"url": "git+https://github.com/AndreasArvidsson/OpenWebProject-Feedback.git"
|
|
24
27
|
},
|
|
25
28
|
"bugs": {
|
|
26
29
|
"url": "https://github.com/AndreasArvidsson/OpenWebProject-Feedback/issues"
|