@d19n/webchat 1.0.4 → 1.0.5
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/README.md +22 -2
- package/dist/TwilioChat/index.d.ts +2 -0
- package/dist/assets/styles/app.scss +248 -0
- package/dist/assets/styles/fonts.css +107 -0
- package/dist/assets/styles/variables.d.ts +58 -0
- package/dist/assets/styles/variables.tsx +74 -0
- package/dist/index.js +9 -9
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +9 -9
- package/dist/index.mjs.map +1 -1
- package/dist/node_modules/mdast-util-gfm-autolink-literal/to-markdown.js +1 -1
- package/dist/node_modules/mdast-util-gfm-autolink-literal/to-markdown.js.map +1 -1
- package/dist/node_modules/mdast-util-gfm-strikethrough/to-markdown.js +1 -1
- package/dist/node_modules/mdast-util-gfm-strikethrough/to-markdown.js.map +1 -1
- package/dist/node_modules/micromark-extension-gfm-autolink-literal/syntax.js +1 -1
- package/dist/node_modules/micromark-extension-gfm-autolink-literal/syntax.js.map +1 -1
- package/dist/node_modules/micromark-extension-gfm-table/syntax.js +1 -1
- package/dist/node_modules/micromark-extension-gfm-table/syntax.js.map +1 -1
- package/dist/node_modules/micromark-extension-gfm-task-list-item/syntax.js +1 -1
- package/dist/node_modules/style-inject/dist/style-inject.es.js +2 -0
- package/dist/node_modules/style-inject/dist/style-inject.es.js.map +1 -0
- package/dist/package.json/package.json +2 -1
- package/dist/src/TwilioChat/Chat.js +1 -1
- package/dist/src/TwilioChat/Chat.js.map +1 -1
- package/dist/src/TwilioChat/index.js +1 -1
- package/dist/src/TwilioChat/index.js.map +1 -1
- package/dist/src/assets/styles/app.scss.js +2 -0
- package/dist/src/assets/styles/app.scss.js.map +1 -0
- package/dist/src/assets/styles/fonts.css.js +2 -0
- package/dist/src/assets/styles/fonts.css.js.map +1 -0
- package/package.json +2 -1
package/README.md
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
# d19n-webchat
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
YouFibre Chat v1
|
|
4
4
|
|
|
5
5
|
## Installation
|
|
6
6
|
|
|
@@ -17,9 +17,29 @@ After installing, you can use the `@d19n/webchat` function in your project as fo
|
|
|
17
17
|
```javascript
|
|
18
18
|
import D19NChat from '@d19n/webchat';
|
|
19
19
|
|
|
20
|
-
<D19NChat
|
|
20
|
+
<D19NChat
|
|
21
|
+
host={"..."}
|
|
22
|
+
clientId={"..."}
|
|
23
|
+
clientSecret={"..."}
|
|
24
|
+
websocketUrl={"..."}
|
|
25
|
+
postcodeSchemaId={"..."}
|
|
26
|
+
source={"..."}
|
|
27
|
+
fullscreen={false}
|
|
28
|
+
customToken={undefined}
|
|
29
|
+
/>
|
|
21
30
|
```
|
|
22
31
|
|
|
32
|
+
| Property | Type | Description |
|
|
33
|
+
| ------------- | :-------------: | ------------- |
|
|
34
|
+
| host | string | YouFibre API URL |
|
|
35
|
+
| clientId | string | OAuth ClientID |
|
|
36
|
+
| clientSecret | string | OAuth Secret |
|
|
37
|
+
| websocketUrl | string | Websocket URL |
|
|
38
|
+
| postcodeSchemaId | string | Postcode search API |
|
|
39
|
+
| source | string | User ID |
|
|
40
|
+
| fullscreen | boolean | `false` as default |
|
|
41
|
+
| customToken | string/undefined | `undefined` as default for logger User |
|
|
42
|
+
|
|
23
43
|
## License
|
|
24
44
|
|
|
25
45
|
This project is licensed under the MIT License.
|
|
@@ -0,0 +1,248 @@
|
|
|
1
|
+
* {
|
|
2
|
+
margin: 0px;
|
|
3
|
+
padding: 0px;
|
|
4
|
+
outline: 0px;
|
|
5
|
+
}
|
|
6
|
+
|
|
7
|
+
:root {
|
|
8
|
+
font-size: 16px;
|
|
9
|
+
}
|
|
10
|
+
|
|
11
|
+
body {
|
|
12
|
+
width: 100%;
|
|
13
|
+
font-size: 1rem;
|
|
14
|
+
font-weight: 400;
|
|
15
|
+
line-height: 1.1rem;
|
|
16
|
+
font-family: "DM Sans";
|
|
17
|
+
}
|
|
18
|
+
|
|
19
|
+
@for $i from 0 through 100 {
|
|
20
|
+
.fs-#{$i} {
|
|
21
|
+
font-size: $i * 1rem !important;
|
|
22
|
+
}
|
|
23
|
+
.fw-#{$i} {
|
|
24
|
+
font-weight: $i * 100 !important;
|
|
25
|
+
}
|
|
26
|
+
.w-#{$i} {
|
|
27
|
+
width: $i * 1% !important;
|
|
28
|
+
}
|
|
29
|
+
.mt-#{$i} {
|
|
30
|
+
margin-top: $i * 1px !important;
|
|
31
|
+
}
|
|
32
|
+
.pt-#{$i} {
|
|
33
|
+
padding-top: $i * 1px !important;
|
|
34
|
+
}
|
|
35
|
+
.pb-#{$i} {
|
|
36
|
+
padding-bottom: $i * 1px !important;
|
|
37
|
+
}
|
|
38
|
+
.pl-#{$i} {
|
|
39
|
+
padding-left: $i * 1px !important;
|
|
40
|
+
}
|
|
41
|
+
.pr-#{$i} {
|
|
42
|
+
padding-right: $i * 1px !important;
|
|
43
|
+
}
|
|
44
|
+
.mb-#{$i} {
|
|
45
|
+
margin-bottom: $i * 1px !important;
|
|
46
|
+
}
|
|
47
|
+
.mv-#{$i} {
|
|
48
|
+
margin: $i * 1px 0 !important;
|
|
49
|
+
}
|
|
50
|
+
.mh-#{$i} {
|
|
51
|
+
margin: 0 $i * 1px !important;
|
|
52
|
+
}
|
|
53
|
+
.pv-#{$i} {
|
|
54
|
+
padding: $i * 1px 0 !important;
|
|
55
|
+
}
|
|
56
|
+
.ph-#{$i} {
|
|
57
|
+
padding: 0 $i * 1px !important;
|
|
58
|
+
}
|
|
59
|
+
.maxw-#{$i} {
|
|
60
|
+
max-width: $i * 1% !important;
|
|
61
|
+
}
|
|
62
|
+
.minw-#{$i} {
|
|
63
|
+
min-width: $i * 1% !important;
|
|
64
|
+
}
|
|
65
|
+
.gap-#{$i} {
|
|
66
|
+
gap: calc($i / 10) * 1rem !important;
|
|
67
|
+
}
|
|
68
|
+
}
|
|
69
|
+
.dark-bg { background-color: #07131e; }
|
|
70
|
+
.green-bg { background-color: #08DE9E; }
|
|
71
|
+
.white-color { color: #fff !important; }
|
|
72
|
+
|
|
73
|
+
.inline-block {
|
|
74
|
+
display: inline-block;
|
|
75
|
+
}
|
|
76
|
+
.page-wrapper { overflow: hidden; }
|
|
77
|
+
a { text-decoration: none; }
|
|
78
|
+
.text-left { text-align: left; }
|
|
79
|
+
.text-center { text-align: center; }
|
|
80
|
+
.text-right { text-align: right; }
|
|
81
|
+
|
|
82
|
+
button {
|
|
83
|
+
border: none;
|
|
84
|
+
font-family: 'DM Sans' !important;
|
|
85
|
+
background-color: #ffffff;
|
|
86
|
+
color: #07131e;
|
|
87
|
+
font-size: 1.2rem;
|
|
88
|
+
font-weight: 500;
|
|
89
|
+
padding: 0.25rem 1.5rem 0.25rem 1.5rem;
|
|
90
|
+
border-radius: 100px;
|
|
91
|
+
transition: all 0.3s ease-in-out 0s;
|
|
92
|
+
|
|
93
|
+
span {
|
|
94
|
+
color: #07131e;
|
|
95
|
+
text-transform: uppercase;
|
|
96
|
+
font-size: 1.5rem;
|
|
97
|
+
font-family: 'Abolition-Regular';
|
|
98
|
+
}
|
|
99
|
+
|
|
100
|
+
&:hover {
|
|
101
|
+
background-color: #08DE9E;
|
|
102
|
+
color: #07131e !important;
|
|
103
|
+
|
|
104
|
+
&.green-bg {
|
|
105
|
+
background-color: #000000 !important;
|
|
106
|
+
color: #ffffff !important;
|
|
107
|
+
text-transform: none !important;
|
|
108
|
+
|
|
109
|
+
&.sign-up {
|
|
110
|
+
background-color: #ffffff !important;
|
|
111
|
+
color: #07131e !important;
|
|
112
|
+
border-radius: 12px;
|
|
113
|
+
}
|
|
114
|
+
}
|
|
115
|
+
|
|
116
|
+
&.light-bg {
|
|
117
|
+
background-color: #000000 !important;
|
|
118
|
+
color: #ffffff !important;
|
|
119
|
+
}
|
|
120
|
+
}
|
|
121
|
+
|
|
122
|
+
&.medium-button {
|
|
123
|
+
font-size: 1.2rem;
|
|
124
|
+
font-weight: 500;
|
|
125
|
+
min-width: 136px;
|
|
126
|
+
padding: 0.25rem 1.5rem 0.25rem 1.5rem;
|
|
127
|
+
}
|
|
128
|
+
|
|
129
|
+
&.big-button {
|
|
130
|
+
margin-right: 2rem;
|
|
131
|
+
font-size: 1.9rem;
|
|
132
|
+
padding: 0.2rem 4rem 0.2rem 4rem;
|
|
133
|
+
}
|
|
134
|
+
|
|
135
|
+
&.seeAll-button {
|
|
136
|
+
position: relative;
|
|
137
|
+
top: -3rem;
|
|
138
|
+
float: right;
|
|
139
|
+
}
|
|
140
|
+
|
|
141
|
+
&.no-border {
|
|
142
|
+
border: none !important;
|
|
143
|
+
}
|
|
144
|
+
}
|
|
145
|
+
|
|
146
|
+
.centered {
|
|
147
|
+
position: relative;
|
|
148
|
+
margin: 0px auto;
|
|
149
|
+
}
|
|
150
|
+
.justify-content-start { justify-content: start; }
|
|
151
|
+
.justify-content-end { justify-content: end; }
|
|
152
|
+
.justify-content-center { justify-content: center; }
|
|
153
|
+
.justify-content-space { justify-content: space-between; }
|
|
154
|
+
.flex-center-justified {
|
|
155
|
+
display: flex;
|
|
156
|
+
width: 100%;
|
|
157
|
+
justify-content: space-between;
|
|
158
|
+
align-items: center;
|
|
159
|
+
}
|
|
160
|
+
.flex-start-justified {
|
|
161
|
+
display: flex;
|
|
162
|
+
width: 100%;
|
|
163
|
+
justify-content: space-between;
|
|
164
|
+
align-items: start;
|
|
165
|
+
}
|
|
166
|
+
.flex-end-justified {
|
|
167
|
+
display: flex;
|
|
168
|
+
width: 100%;
|
|
169
|
+
justify-content: end;
|
|
170
|
+
align-items: center;
|
|
171
|
+
}
|
|
172
|
+
.position-relative { position: relative; }
|
|
173
|
+
.flex { display: flex; }
|
|
174
|
+
.flex-0 { flex: 0; }
|
|
175
|
+
.flex-1 { flex :1; }
|
|
176
|
+
.flex-auto { flex: 1 1 250px; }
|
|
177
|
+
.flex-align-center { align-items: center; }
|
|
178
|
+
.flex-column { flex-direction: column; }
|
|
179
|
+
.flexx-row { flex-direction: row; }
|
|
180
|
+
@media (max-width: 991px) {
|
|
181
|
+
.mobile-centered {
|
|
182
|
+
text-align: center !important;
|
|
183
|
+
}
|
|
184
|
+
.mobile-margin-auto {
|
|
185
|
+
margin: auto;
|
|
186
|
+
};
|
|
187
|
+
.reverse-on-mobile {
|
|
188
|
+
flex-direction: column-reverse !important;
|
|
189
|
+
}
|
|
190
|
+
.mobile-logo { display: block; }
|
|
191
|
+
.desktop-logo { display: none; }
|
|
192
|
+
}
|
|
193
|
+
@media (min-width: 992px) {
|
|
194
|
+
.mobile-logo { display: none; }
|
|
195
|
+
.desktop-logo { display: block; }
|
|
196
|
+
}
|
|
197
|
+
@media (max-width: 1050px) {
|
|
198
|
+
}
|
|
199
|
+
@media (min-width: 991px) {
|
|
200
|
+
}
|
|
201
|
+
.bg-green {
|
|
202
|
+
background-color: #08DE9E;
|
|
203
|
+
}
|
|
204
|
+
.dark-color {
|
|
205
|
+
color: #07131E !important;
|
|
206
|
+
}
|
|
207
|
+
.blue-bg {
|
|
208
|
+
background-color: #123EE0;
|
|
209
|
+
color: #fff !important;
|
|
210
|
+
|
|
211
|
+
&:hover {
|
|
212
|
+
background-color: #4D6EE8;
|
|
213
|
+
color: #fff !important;
|
|
214
|
+
}
|
|
215
|
+
}
|
|
216
|
+
.bold { font-weight: 600; }
|
|
217
|
+
#filterSearch::placeholder {
|
|
218
|
+
color: #000;
|
|
219
|
+
font-size: 18px;
|
|
220
|
+
font-weight: 500;
|
|
221
|
+
opacity: 1;
|
|
222
|
+
}
|
|
223
|
+
|
|
224
|
+
html, body {
|
|
225
|
+
scrollbar-width: thin;
|
|
226
|
+
scrollbar-color: rgba(0,0,0,0.3) transparent;
|
|
227
|
+
}
|
|
228
|
+
|
|
229
|
+
::-webkit-scrollbar {
|
|
230
|
+
width: 6px;
|
|
231
|
+
height: 6px;
|
|
232
|
+
}
|
|
233
|
+
|
|
234
|
+
::-webkit-scrollbar-thumb {
|
|
235
|
+
background-color: rgba(0, 0, 0, 0.3);
|
|
236
|
+
border-radius: 3px;
|
|
237
|
+
}
|
|
238
|
+
|
|
239
|
+
::-webkit-scrollbar-track {
|
|
240
|
+
background: transparent;
|
|
241
|
+
}
|
|
242
|
+
@media (max-width: 1280px) {
|
|
243
|
+
span,
|
|
244
|
+
p {
|
|
245
|
+
font-size: 1rem !important;
|
|
246
|
+
}
|
|
247
|
+
.mobile-centered { margin: auto; }
|
|
248
|
+
}
|
|
@@ -0,0 +1,107 @@
|
|
|
1
|
+
/* latin-ext */
|
|
2
|
+
@font-face {
|
|
3
|
+
font-family: 'DM Sans';
|
|
4
|
+
font-style: italic;
|
|
5
|
+
font-weight: 400;
|
|
6
|
+
src: url(https://fonts.gstatic.com/s/dmsans/v11/rP2Fp2ywxg089UriCZa4ET-DNl0.woff2) format('woff2');
|
|
7
|
+
unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
|
|
8
|
+
}
|
|
9
|
+
|
|
10
|
+
/* latin */
|
|
11
|
+
@font-face {
|
|
12
|
+
font-family: 'DM Sans';
|
|
13
|
+
font-style: italic;
|
|
14
|
+
font-weight: 400;
|
|
15
|
+
src: url(https://fonts.gstatic.com/s/dmsans/v11/rP2Fp2ywxg089UriCZa4Hz-D.woff2) format('woff2');
|
|
16
|
+
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
|
|
17
|
+
}
|
|
18
|
+
|
|
19
|
+
/* latin-ext */
|
|
20
|
+
@font-face {
|
|
21
|
+
font-family: 'DM Sans';
|
|
22
|
+
font-style: italic;
|
|
23
|
+
font-weight: 500;
|
|
24
|
+
src: url(https://fonts.gstatic.com/s/dmsans/v11/rP2Ap2ywxg089UriCZaw7ByWB3wTyCg.woff2) format('woff2');
|
|
25
|
+
unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
/* latin */
|
|
29
|
+
@font-face {
|
|
30
|
+
font-family: 'DM Sans';
|
|
31
|
+
font-style: italic;
|
|
32
|
+
font-weight: 500;
|
|
33
|
+
src: url(https://fonts.gstatic.com/s/dmsans/v11/rP2Ap2ywxg089UriCZaw7ByWCXwT.woff2) format('woff2');
|
|
34
|
+
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
/* latin-ext */
|
|
38
|
+
@font-face {
|
|
39
|
+
font-family: 'DM Sans';
|
|
40
|
+
font-style: italic;
|
|
41
|
+
font-weight: 700;
|
|
42
|
+
src: url(https://fonts.gstatic.com/s/dmsans/v11/rP2Ap2ywxg089UriCZawpBqWB3wTyCg.woff2) format('woff2');
|
|
43
|
+
unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
|
|
44
|
+
}
|
|
45
|
+
|
|
46
|
+
/* latin */
|
|
47
|
+
@font-face {
|
|
48
|
+
font-family: 'DM Sans';
|
|
49
|
+
font-style: italic;
|
|
50
|
+
font-weight: 700;
|
|
51
|
+
src: url(https://fonts.gstatic.com/s/dmsans/v11/rP2Ap2ywxg089UriCZawpBqWCXwT.woff2) format('woff2');
|
|
52
|
+
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
|
|
53
|
+
}
|
|
54
|
+
|
|
55
|
+
/* latin-ext */
|
|
56
|
+
@font-face {
|
|
57
|
+
font-family: 'DM Sans';
|
|
58
|
+
font-style: normal;
|
|
59
|
+
font-weight: 400;
|
|
60
|
+
src: url(https://fonts.gstatic.com/s/dmsans/v11/rP2Hp2ywxg089UriCZ2IHSeH.woff2) format('woff2');
|
|
61
|
+
unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
|
|
62
|
+
}
|
|
63
|
+
|
|
64
|
+
/* latin */
|
|
65
|
+
@font-face {
|
|
66
|
+
font-family: 'DM Sans';
|
|
67
|
+
font-style: normal;
|
|
68
|
+
font-weight: 400;
|
|
69
|
+
src: url(https://fonts.gstatic.com/s/dmsans/v11/rP2Hp2ywxg089UriCZOIHQ.woff2) format('woff2');
|
|
70
|
+
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
|
|
71
|
+
}
|
|
72
|
+
|
|
73
|
+
/* latin-ext */
|
|
74
|
+
@font-face {
|
|
75
|
+
font-family: 'DM Sans';
|
|
76
|
+
font-style: normal;
|
|
77
|
+
font-weight: 500;
|
|
78
|
+
src: url(https://fonts.gstatic.com/s/dmsans/v11/rP2Cp2ywxg089UriAWCrCBamC2QX.woff2) format('woff2');
|
|
79
|
+
unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
|
|
80
|
+
}
|
|
81
|
+
|
|
82
|
+
/* latin */
|
|
83
|
+
@font-face {
|
|
84
|
+
font-family: 'DM Sans';
|
|
85
|
+
font-style: normal;
|
|
86
|
+
font-weight: 500;
|
|
87
|
+
src: url(https://fonts.gstatic.com/s/dmsans/v11/rP2Cp2ywxg089UriAWCrCBimCw.woff2) format('woff2');
|
|
88
|
+
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
|
|
89
|
+
}
|
|
90
|
+
|
|
91
|
+
/* latin-ext */
|
|
92
|
+
@font-face {
|
|
93
|
+
font-family: 'DM Sans';
|
|
94
|
+
font-style: normal;
|
|
95
|
+
font-weight: 700;
|
|
96
|
+
src: url(https://fonts.gstatic.com/s/dmsans/v11/rP2Cp2ywxg089UriASitCBamC2QX.woff2) format('woff2');
|
|
97
|
+
unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
|
|
98
|
+
}
|
|
99
|
+
|
|
100
|
+
/* latin */
|
|
101
|
+
@font-face {
|
|
102
|
+
font-family: 'DM Sans';
|
|
103
|
+
font-style: normal;
|
|
104
|
+
font-weight: 700;
|
|
105
|
+
src: url(https://fonts.gstatic.com/s/dmsans/v11/rP2Cp2ywxg089UriASitCBimCw.woff2) format('woff2');
|
|
106
|
+
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
|
|
107
|
+
}
|
|
@@ -0,0 +1,58 @@
|
|
|
1
|
+
export declare const variables: {
|
|
2
|
+
primary: string;
|
|
3
|
+
secondary: string;
|
|
4
|
+
black: string;
|
|
5
|
+
white: string;
|
|
6
|
+
green: string;
|
|
7
|
+
grey: string;
|
|
8
|
+
blue: string;
|
|
9
|
+
darkBlue: string;
|
|
10
|
+
lightGreen: string;
|
|
11
|
+
lightBlue: string;
|
|
12
|
+
brightGreen: string;
|
|
13
|
+
textPrimary: string;
|
|
14
|
+
textSecondary: string;
|
|
15
|
+
lightGrey: string;
|
|
16
|
+
buttonPrimary: string;
|
|
17
|
+
transparentWhite: string;
|
|
18
|
+
transparentBlack: string;
|
|
19
|
+
buttonPrimaryGradient: string;
|
|
20
|
+
buttonPrimaryGradientHover: string;
|
|
21
|
+
fontFamilyPrimary: string;
|
|
22
|
+
fontFamilySecondary: string;
|
|
23
|
+
textSize: string;
|
|
24
|
+
textMenu: string;
|
|
25
|
+
textSizeNormal: string;
|
|
26
|
+
textSize16: string;
|
|
27
|
+
textSizeSmall: string;
|
|
28
|
+
textSizeSmallL: string;
|
|
29
|
+
textSizeMedium: string;
|
|
30
|
+
textSizeLarge: string;
|
|
31
|
+
textSizeExtraLarge: string;
|
|
32
|
+
h1Size: string;
|
|
33
|
+
h1SizeMobile: string;
|
|
34
|
+
h2Size: string;
|
|
35
|
+
h3Size: string;
|
|
36
|
+
h4Size: string;
|
|
37
|
+
h5Size: string;
|
|
38
|
+
h6Size: string;
|
|
39
|
+
h7Size: string;
|
|
40
|
+
maxWidth: string;
|
|
41
|
+
};
|
|
42
|
+
export declare const devices: {
|
|
43
|
+
mobileS: string;
|
|
44
|
+
mobileM: string;
|
|
45
|
+
mobileL: string;
|
|
46
|
+
tablet: string;
|
|
47
|
+
laptop: string;
|
|
48
|
+
laptopL: string;
|
|
49
|
+
desktop: string;
|
|
50
|
+
desktopL: string;
|
|
51
|
+
mobileSmall: string;
|
|
52
|
+
mobileOnly: string;
|
|
53
|
+
tabletOnly: string;
|
|
54
|
+
laptopMOnly: string;
|
|
55
|
+
laptopOnly: string;
|
|
56
|
+
breakpoint: string;
|
|
57
|
+
middleSizeOnly: string;
|
|
58
|
+
};
|
|
@@ -0,0 +1,74 @@
|
|
|
1
|
+
export const variables = {
|
|
2
|
+
primary: '#07131E',
|
|
3
|
+
secondary: '#08DE9E',
|
|
4
|
+
black: '#000000',
|
|
5
|
+
white: '#FFFFFF',
|
|
6
|
+
green: "#83EECE",
|
|
7
|
+
grey: '#6A7178',
|
|
8
|
+
blue: '#0011AC',
|
|
9
|
+
darkBlue: '#123EE0',
|
|
10
|
+
lightGreen: "#82EECE",
|
|
11
|
+
lightBlue: '#E6FCF5',
|
|
12
|
+
brightGreen: "#C2F7E7",
|
|
13
|
+
textPrimary: '#07131E',
|
|
14
|
+
textSecondary: '#fff',
|
|
15
|
+
lightGrey: '#E6E7E8',
|
|
16
|
+
buttonPrimary: '#123EE0',
|
|
17
|
+
transparentWhite: 'rgba(255,255,255,0.2)',
|
|
18
|
+
transparentBlack: 'rgba(0,0,0,0.2)',
|
|
19
|
+
buttonPrimaryGradient: 'linear-gradient(180deg, #123EE0 30%, #017cf5 100%)',
|
|
20
|
+
buttonPrimaryGradientHover: 'linear-gradient(180deg, #415ee4 30%, #9bb9f1 100%)',
|
|
21
|
+
fontFamilyPrimary: 'DM Sans',
|
|
22
|
+
fontFamilySecondary: 'Abolition-Regular',
|
|
23
|
+
textSize: '18px',
|
|
24
|
+
textMenu: '14px',
|
|
25
|
+
textSizeNormal: '18px',
|
|
26
|
+
textSize16: '16px',
|
|
27
|
+
textSizeSmall: '10px',
|
|
28
|
+
textSizeSmallL: '12px',
|
|
29
|
+
textSizeMedium: '21px',
|
|
30
|
+
textSizeLarge: '20px',
|
|
31
|
+
textSizeExtraLarge: '25px',
|
|
32
|
+
h1Size: '110px',
|
|
33
|
+
h1SizeMobile: '100px',
|
|
34
|
+
h2Size: '80px ',
|
|
35
|
+
h3Size: '55px',
|
|
36
|
+
h4Size: '38px',
|
|
37
|
+
h5Size: '25px ',
|
|
38
|
+
h6Size: '20px',
|
|
39
|
+
h7Size: '16px',
|
|
40
|
+
maxWidth: '1338px',
|
|
41
|
+
}
|
|
42
|
+
|
|
43
|
+
const screenSize = {
|
|
44
|
+
mobileS: '320px',
|
|
45
|
+
mobileM: '375px',
|
|
46
|
+
mobileL: '425px',
|
|
47
|
+
tablet: '768px',
|
|
48
|
+
laptop: '991px',
|
|
49
|
+
laptopStart: '992px',
|
|
50
|
+
laptopM: '1280px',
|
|
51
|
+
laptopL: '1510px',
|
|
52
|
+
desktop: '1921px',
|
|
53
|
+
desktopL: '2561px',
|
|
54
|
+
breakpoint: '1440px'
|
|
55
|
+
}
|
|
56
|
+
|
|
57
|
+
export const devices = {
|
|
58
|
+
mobileS: `(min-width: ${screenSize.mobileS})`,
|
|
59
|
+
mobileM: `(min-width: ${screenSize.mobileM})`,
|
|
60
|
+
mobileL: `(min-width: ${screenSize.mobileL})`,
|
|
61
|
+
tablet: `(min-width: ${screenSize.tablet})`,
|
|
62
|
+
laptop: `(min-width: ${screenSize.laptopStart})`,
|
|
63
|
+
laptopL: `(min-width: ${screenSize.laptopL})`,
|
|
64
|
+
desktop: `(min-width: ${screenSize.desktop})`,
|
|
65
|
+
desktopL: `(min-width: ${screenSize.desktopL})`,
|
|
66
|
+
|
|
67
|
+
mobileSmall: `(max-width: ${screenSize.mobileL})`,
|
|
68
|
+
mobileOnly: `(max-width: ${screenSize.tablet})`,
|
|
69
|
+
tabletOnly: `(max-width: ${screenSize.laptop})`,
|
|
70
|
+
laptopMOnly: `(max-width: ${screenSize.laptopM})`,
|
|
71
|
+
laptopOnly: `(max-width: ${screenSize.desktop})`,
|
|
72
|
+
breakpoint: `(max-width: ${screenSize.breakpoint})`,
|
|
73
|
+
middleSizeOnly: `(min-width: ${screenSize.tablet}) and (max-width: ${screenSize.laptopL})`
|
|
74
|
+
};
|