@gataca/qr 4.2.0 → 4.2.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.
Files changed (96) hide show
  1. package/dist/gatacaqr/app-globals-0f993ce5.js +3 -0
  2. package/dist/gatacaqr/css-shim-8eec97b3.js +4 -0
  3. package/dist/gatacaqr/dom-1b0cf05d.js +73 -0
  4. package/dist/gatacaqr/gat-icon-check-9132c0ad.js +5 -0
  5. package/dist/{esm → gatacaqr}/gataca-autoqr.entry.js +1 -1
  6. package/dist/{components/gataca-qr2.js → gatacaqr/gataca-qr.entry.js} +10 -77
  7. package/dist/gatacaqr/gataca-qrdisplay-9a22c242.js +123 -0
  8. package/dist/gatacaqr/gataca-qrdisplay.entry.js +2 -0
  9. package/dist/{esm → gatacaqr}/gataca-qrws.entry.js +3 -2
  10. package/dist/{components/gataca-ssibutton2.js → gatacaqr/gataca-ssibutton.entry.js} +39 -89
  11. package/dist/{esm → gatacaqr}/gataca-ssibuttonws.entry.js +1 -1
  12. package/dist/gatacaqr/gatacaqr.esm.js +129 -1
  13. package/dist/gatacaqr/index-aea56eb8.js +3262 -0
  14. package/dist/gatacaqr/index.esm.js +1 -1
  15. package/dist/gatacaqr/shadow-css-146f2f6f.js +387 -0
  16. package/dist/types/components/gataca-autoqr/gataca-autoqr.e2e.d.ts +1 -0
  17. package/dist/types/components/gataca-qr/gataca-qr.e2e.d.ts +1 -0
  18. package/dist/types/components/gataca-qrdisplay/gataca-qrdisplay.e2e.d.ts +1 -0
  19. package/dist/types/components/gataca-qrws/gataca-qrws.e2e.d.ts +1 -0
  20. package/dist/types/components/gataca-ssibutton/gataca-ssibutton.d.ts +2 -1
  21. package/dist/types/components/gataca-ssibutton/gataca-ssibutton.e2e.d.ts +1 -0
  22. package/dist/types/components/gataca-ssibuttonws/gataca-ssibuttonws.e2e.d.ts +1 -0
  23. package/package.json +1 -1
  24. package/dist/cjs/gat-icon-check-6b6780eb.js +0 -37
  25. package/dist/cjs/gataca-autoqr.cjs.entry.js +0 -106
  26. package/dist/cjs/gataca-qr_3.cjs.entry.js +0 -743
  27. package/dist/cjs/gataca-qrws.cjs.entry.js +0 -366
  28. package/dist/cjs/gataca-ssibuttonws.cjs.entry.js +0 -61
  29. package/dist/cjs/gatacaqr.cjs.js +0 -19
  30. package/dist/cjs/index-d8d3dfde.js +0 -1532
  31. package/dist/cjs/index.cjs.js +0 -17
  32. package/dist/cjs/loader.cjs.js +0 -21
  33. package/dist/cjs/utils-17b0a5ba.js +0 -72
  34. package/dist/collection/assets/icons/gat-icon-alert.svg +0 -5
  35. package/dist/collection/assets/icons/gat-icon-check.svg +0 -5
  36. package/dist/collection/assets/icons/gat-icon-refresh.svg +0 -4
  37. package/dist/collection/assets/images/logo_gataca.svg +0 -7
  38. package/dist/collection/collection-manifest.json +0 -17
  39. package/dist/collection/components/gataca-autoqr/gataca-autoqr.css +0 -116
  40. package/dist/collection/components/gataca-autoqr/gataca-autoqr.js +0 -347
  41. package/dist/collection/components/gataca-qr/components/qr/QR.js +0 -13
  42. package/dist/collection/components/gataca-qr/components/readQR/ReadQR.js +0 -16
  43. package/dist/collection/components/gataca-qr/components/readQR/components/AnimatedLoader.js +0 -6
  44. package/dist/collection/components/gataca-qr/components/retryButton/RetryButton.js +0 -19
  45. package/dist/collection/components/gataca-qr/components/success/Success.js +0 -9
  46. package/dist/collection/components/gataca-qr/gataca-qr.css +0 -415
  47. package/dist/collection/components/gataca-qr/gataca-qr.js +0 -1069
  48. package/dist/collection/components/gataca-qrdisplay/gataca-qrdisplay.js +0 -224
  49. package/dist/collection/components/gataca-qrws/components/qr/QR.js +0 -13
  50. package/dist/collection/components/gataca-qrws/components/readQR/ReadQR.js +0 -11
  51. package/dist/collection/components/gataca-qrws/components/readQR/components/AnimatedLoader.js +0 -4
  52. package/dist/collection/components/gataca-qrws/components/retryButton/RetryButton.js +0 -16
  53. package/dist/collection/components/gataca-qrws/components/success/Success.js +0 -8
  54. package/dist/collection/components/gataca-qrws/gataca-qrws.css +0 -407
  55. package/dist/collection/components/gataca-qrws/gataca-qrws.js +0 -1098
  56. package/dist/collection/components/gataca-ssibutton/gataca-ssibutton.css +0 -116
  57. package/dist/collection/components/gataca-ssibutton/gataca-ssibutton.js +0 -1151
  58. package/dist/collection/components/gataca-ssibuttonws/gataca-ssibuttonws.css +0 -116
  59. package/dist/collection/components/gataca-ssibuttonws/gataca-ssibuttonws.js +0 -434
  60. package/dist/collection/components/icons/RefreshIcon.js +0 -6
  61. package/dist/collection/index.js +0 -2
  62. package/dist/collection/utils/index.js +0 -1
  63. package/dist/collection/utils/utils.js +0 -66
  64. package/dist/components/gat-icon-check.js +0 -72
  65. package/dist/components/gataca-autoqr.js +0 -163
  66. package/dist/components/gataca-qr.js +0 -6
  67. package/dist/components/gataca-qrdisplay.js +0 -6
  68. package/dist/components/gataca-qrdisplay2.js +0 -121
  69. package/dist/components/gataca-qrws.js +0 -6
  70. package/dist/components/gataca-qrws2.js +0 -430
  71. package/dist/components/gataca-ssibutton.js +0 -6
  72. package/dist/components/gataca-ssibuttonws.js +0 -6
  73. package/dist/components/gataca-ssibuttonws2.js +0 -104
  74. package/dist/components/index.js +0 -8
  75. package/dist/esm/gat-icon-check-7320c81b.js +0 -32
  76. package/dist/esm/gataca-qr_3.entry.js +0 -737
  77. package/dist/esm/gatacaqr.js +0 -17
  78. package/dist/esm/index-dca2ab22.js +0 -1506
  79. package/dist/esm/index.js +0 -1
  80. package/dist/esm/loader.js +0 -17
  81. package/dist/esm/polyfills/core-js.js +0 -11
  82. package/dist/esm/polyfills/css-shim.js +0 -1
  83. package/dist/esm/polyfills/dom.js +0 -79
  84. package/dist/esm/polyfills/es5-html-element.js +0 -1
  85. package/dist/esm/polyfills/index.js +0 -34
  86. package/dist/esm/polyfills/system.js +0 -6
  87. package/dist/gatacaqr/p-143c0080.js +0 -1
  88. package/dist/gatacaqr/p-29119208.js +0 -1
  89. package/dist/gatacaqr/p-2dc7190a.entry.js +0 -1
  90. package/dist/gatacaqr/p-2e8accf9.entry.js +0 -1
  91. package/dist/gatacaqr/p-85af64b1.js +0 -2
  92. package/dist/gatacaqr/p-d27dabe4.entry.js +0 -1
  93. package/dist/gatacaqr/p-e172581d.entry.js +0 -1
  94. package/dist/index.cjs.js +0 -1
  95. package/dist/index.js +0 -1
  96. /package/dist/{esm → gatacaqr}/utils-e4a08623.js +0 -0
@@ -1,16 +0,0 @@
1
- import { h } from '@stencil/core';
2
- import { AnimatedLoader } from './components/AnimatedLoader';
3
- export const ReadQR = (props) => {
4
- var _a;
5
- const { modalWidth, readQrMessages, renderQR, url, sizeQR, style } = props;
6
- const bgStyle = { backgroundColor: (style === null || style === void 0 ? void 0 : style.bgColor) ? style === null || style === void 0 ? void 0 : style.bgColor : 'white' };
7
- const color = { color: (style === null || style === void 0 ? void 0 : style.color) ? style === null || style === void 0 ? void 0 : style.color : '#707074' };
8
- return (h("div", { class: "blured", style: {
9
- width: (modalWidth - 48).toString() + 'px',
10
- height: modalWidth ? ((_a = (modalWidth - 48)) === null || _a === void 0 ? void 0 : _a.toString()) + 'px' : '',
11
- backgroundColor: style === null || style === void 0 ? void 0 : style.bgColor,
12
- color: style === null || style === void 0 ? void 0 : style.color,
13
- border: (style === null || style === void 0 ? void 0 : style.color) ? `1px dashed ${style === null || style === void 0 ? void 0 : style.color}` : `1px dashed #a1a1a1`
14
- } }, h("div", { id: "notify", style: bgStyle }, h(AnimatedLoader, { color: style === null || style === void 0 ? void 0 : style.color }), h("p", { class: "notify-text", style: color }, readQrMessages === null || readQrMessages === void 0 ? void 0 :
15
- readQrMessages.title, ' '), h("p", { class: "notify-text bold", style: color }, readQrMessages === null || readQrMessages === void 0 ? void 0 : readQrMessages.description)), h("div", { id: "qrwait" }, renderQR(url, false, sizeQR))));
16
- };
@@ -1,6 +0,0 @@
1
- import { h } from '@stencil/core';
2
- export const AnimatedLoader = (props) => {
3
- const { color = '#4745B7' } = props;
4
- const style = { '--loader-color': color };
5
- return (h("div", { class: "containerLoader", style: style }, h("div", { class: "loader" }, h("div", { class: "loader__item loader__item__1" }), h("div", { class: "loader__item loader__item__2" }), h("div", { class: "loader__item loader__item__3" }), h("div", { class: "loader__item loader__item__4" }), h("div", { class: "loader__item loader__item__5" }), h("div", { class: "loader__item loader__item__6" }), h("div", { class: "loader__item loader__item__7" }), h("div", { class: "loader__item loader__item__8" }))));
6
- };
@@ -1,19 +0,0 @@
1
- import { h } from '@stencil/core';
2
- import alertIcon from '../../../../assets/icons/gat-icon-alert.svg';
3
- import { RefreshIcon } from '../../../icons/RefreshIcon';
4
- export const RetryButton = (props) => {
5
- var _a;
6
- const { errorMessage, modalWidth, clickInsideBoxLabel, refreshQrLabel, scanQrLabel, style, display } = props;
7
- const bgStyle = { backgroundColor: (style === null || style === void 0 ? void 0 : style.bgColor) ? style === null || style === void 0 ? void 0 : style.bgColor : 'white' };
8
- const alertBgStyle = { backgroundColor: (style === null || style === void 0 ? void 0 : style.alertBgColor) ? style === null || style === void 0 ? void 0 : style.alertBgColor : '#ffdedf' };
9
- const alertBorderColor = { borderColor: (style === null || style === void 0 ? void 0 : style.alertBorderColor) ? style === null || style === void 0 ? void 0 : style.alertBorderColor : '#ee888c' };
10
- const color = { color: (style === null || style === void 0 ? void 0 : style.color) ? style === null || style === void 0 ? void 0 : style.color : '#707074' };
11
- return (h("div", { class: "reload", style: {
12
- width: (modalWidth - 48).toString() + 'px',
13
- height: modalWidth ? ((_a = (modalWidth - 48)) === null || _a === void 0 ? void 0 : _a.toString()) + 'px' : '',
14
- border: (style === null || style === void 0 ? void 0 : style.color) ? `1px dashed ${style === null || style === void 0 ? void 0 : style.color}` : `1px dashed #a1a1a1`
15
- } }, h("div", { id: "notify", onClick: () => display(), style: bgStyle }, h(RefreshIcon, { color: style === null || style === void 0 ? void 0 : style.color, height: 24, width: 24 }), h("p", { class: "notify-text", style: color }, clickInsideBoxLabel, ' '), errorMessage ? (h("p", { class: "notify-text bold", style: color }, refreshQrLabel)) : (h("p", { class: "notify-text bold", style: color }, scanQrLabel)), errorMessage && (h("div", { class: "alert", style: Object.assign(Object.assign({ width: (modalWidth - 48).toString() + 'px' }, alertBgStyle), { border: `1px solid ${alertBorderColor}` }) }, h("img", { src: alertIcon, height: 24, width: 24 }), h("p", { style: { color: (style === null || style === void 0 ? void 0 : style.color) ? style === null || style === void 0 ? void 0 : style.color : '#1e1e20' } }, errorMessage)))), h("div", { id: "qrwait", class: "qr-placeholder-slot", style: {
16
- width: (modalWidth - 48).toString() + 'px',
17
- height: modalWidth ? (modalWidth - 48).toString() + 'px' : ''
18
- } })));
19
- };
@@ -1,9 +0,0 @@
1
- import successIcon from '../../../../assets/icons/gat-icon-check.svg';
2
- import { h } from '@stencil/core';
3
- export const Success = (props) => {
4
- const { modalHeight, successLoginLabel, style } = props;
5
- const colorStyle = { color: (style === null || style === void 0 ? void 0 : style.color) ? style === null || style === void 0 ? void 0 : style.color : '#1e1e20' };
6
- return (h("div", { class: 'success', style: {
7
- height: modalHeight ? (modalHeight === null || modalHeight === void 0 ? void 0 : modalHeight.toString()) + 'px' : '300px'
8
- } }, h("img", { src: successIcon, height: 52, width: 52 }), h("p", { class: "successMsg", style: colorStyle }, successLoginLabel)));
9
- };
@@ -1,415 +0,0 @@
1
- @import url("https://fonts.googleapis.com/css2?family=Ubuntu:wght@100;300;400;500;600;700&display=swap");
2
- @import url("https://fonts.googleapis.com/css2?family=Poppins:wght@100;300;400;500;600;700&display=swap");
3
- /* http://meyerweb.com/eric/tools/css/reset/
4
- v2.0 | 20110126
5
- License: none (public domain)
6
- */
7
- @import url("https://fonts.googleapis.com/css2?family=Work+Sans:wght@300;400&display=swap");
8
- html, body, div, span, applet, object, iframe,
9
- h1, h2, h3, h4, h5, h6, p, blockquote, pre,
10
- a, abbr, acronym, address, big, cite, code,
11
- del, dfn, em, img, ins, kbd, q, s, samp,
12
- small, strike, strong, sub, sup, tt, var,
13
- b, u, i, center,
14
- dl, dt, dd, ol, ul, li,
15
- fieldset, form, label, legend,
16
- table, caption, tbody, tfoot, thead, tr, th, td,
17
- article, aside, canvas, details, embed,
18
- figure, figcaption, footer, header, hgroup,
19
- menu, nav, output, ruby, section, summary,
20
- time, mark, audio, video {
21
- margin: 0;
22
- padding: 0;
23
- border: 0;
24
- font-size: 100%;
25
- font: inherit;
26
- vertical-align: baseline;
27
- }
28
-
29
- /* HTML5 display-role reset for older browsers */
30
- article, aside, details, figcaption, figure,
31
- footer, header, hgroup, menu, nav, section {
32
- display: block;
33
- }
34
-
35
- body {
36
- line-height: 1;
37
- }
38
-
39
- ol, ul {
40
- list-style: none;
41
- }
42
-
43
- blockquote, q {
44
- quotes: none;
45
- }
46
-
47
- blockquote:before, blockquote:after,
48
- q:before, q:after {
49
- content: "";
50
- content: none;
51
- }
52
-
53
- table {
54
- border-collapse: collapse;
55
- border-spacing: 0;
56
- }
57
-
58
- /* Sizes */
59
- /* Trigonometry helpers */
60
- /*
61
- QR COMPONENT
62
- */
63
- .img-fluid {
64
- height: auto;
65
- max-width: 50%;
66
- }
67
-
68
- img {
69
- margin-left: auto;
70
- margin-right: auto;
71
- }
72
-
73
- .brandSection {
74
- padding-top: 5px;
75
- display: flex;
76
- align-items: center;
77
- }
78
- .brandSection .gatacaImgSmall {
79
- height: 13px;
80
- width: 13px;
81
- margin: 0;
82
- margin-right: 10px;
83
- }
84
-
85
- .popUpContainer .large-modal {
86
- width: 300px;
87
- min-height: 350px;
88
- }
89
- .popUpContainer .modal-window {
90
- position: relative;
91
- border-radius: 6px;
92
- overflow: hidden;
93
- color: rgba(24, 27, 94, 0.8);
94
- box-shadow: 0px 3px 10px rgba(48, 48, 48, 0.1);
95
- display: flex;
96
- flex-direction: column;
97
- justify-content: space-between;
98
- align-items: center;
99
- display: flex;
100
- z-index: 1001;
101
- padding: 1px;
102
- background-color: white;
103
- border-radius: 12px;
104
- -webkit-transition: opacity 0.5s, visibility 0s 0.5s;
105
- transition: opacity 0.5s, visibility 0s 0.5s;
106
- visibility: hidden;
107
- opacity: 0;
108
- }
109
- .popUpContainer .modal-window__content {
110
- width: 100%;
111
- height: 100%;
112
- text-align: left;
113
- }
114
- .popUpContainer .modal-window__content .hidenText {
115
- display: none;
116
- }
117
- .popUpContainer .modal-window .modalText {
118
- font-family: "Ubuntu", "Work Sans", "Helvetica Neue", sans-serif;
119
- font-size: 20px;
120
- font-style: normal;
121
- font-weight: 700;
122
- line-height: 24px;
123
- margin-top: 10px;
124
- letter-spacing: 1px;
125
- }
126
- .popUpContainer .modal-window .qrTitleContainer {
127
- padding: 14px 24px;
128
- padding-bottom: 0px;
129
- }
130
- .popUpContainer .modal-window .qrTitle {
131
- font-size: 20px;
132
- font-weight: 600;
133
- line-height: 23.5px;
134
- }
135
- .popUpContainer .modal-window .qrDescription {
136
- font-family: "Poppins", "Ubuntu", "Work Sans", "Helvetica Neue", sans-serif;
137
- font-size: 14px;
138
- font-style: normal;
139
- font-weight: 400;
140
- line-height: 16px;
141
- color: #707074;
142
- }
143
- .popUpContainer .modal-window .bold {
144
- font-weight: 700;
145
- }
146
- .popUpContainer .modal-window .qrBrand {
147
- margin-top: 4px;
148
- font-size: 14px;
149
- font-weight: 400;
150
- line-height: 16.5px;
151
- display: flex;
152
- align-items: center;
153
- }
154
- .popUpContainer .modal-window .qrBrand img {
155
- margin-left: 5px;
156
- height: 12px;
157
- }
158
- .popUpContainer .modal-window .qr-section {
159
- width: 252px;
160
- height: 252px;
161
- }
162
- .popUpContainer .noBoxShadow {
163
- box-shadow: none;
164
- }
165
- .popUpContainer .is-visible {
166
- opacity: 1;
167
- visibility: visible;
168
- }
169
-
170
- .is-transparent {
171
- opacity: 0;
172
- }
173
-
174
- .success {
175
- display: flex;
176
- height: 300px;
177
- flex-direction: column;
178
- justify-content: center;
179
- align-items: center;
180
- padding: 0px;
181
- }
182
- .success > img {
183
- padding-bottom: 12px;
184
- }
185
- .success > .successMsg {
186
- line-height: 23.5px;
187
- color: var(--neutral-1000, #1e1e20);
188
- text-align: center;
189
- font-family: "Ubuntu", "Work Sans", "Helvetica Neue", sans-serif;
190
- font-size: 20px;
191
- font-style: normal;
192
- font-weight: 700;
193
- line-height: 24px;
194
- }
195
-
196
- .reload, .blured {
197
- height: 252px;
198
- width: 252px;
199
- border: 1px dashed #a1a1a1;
200
- border-radius: 20px;
201
- position: relative;
202
- top: 24px;
203
- margin: 0 24px 24px;
204
- display: flex;
205
- overflow: hidden;
206
- justify-content: center;
207
- align-items: center;
208
- }
209
-
210
- #qrwait {
211
- display: flex;
212
- justify-content: center;
213
- }
214
-
215
- .qr-placeholder-slot {
216
- box-sizing: border-box;
217
- border-radius: 12px;
218
- background: rgba(0, 0, 0, 0.04);
219
- }
220
-
221
- #qrwait,
222
- #notify {
223
- width: 100%;
224
- height: 100%;
225
- top: 0;
226
- left: 0;
227
- border-radius: 20px;
228
- }
229
-
230
- #notify {
231
- z-index: 10;
232
- position: absolute;
233
- justify-self: center;
234
- justify-items: center;
235
- justify-content: center;
236
- align-items: center;
237
- align-content: center;
238
- display: flex;
239
- flex-direction: column;
240
- box-sizing: border-box;
241
- padding: 20px;
242
- background: rgba(255, 255, 255, 0.95);
243
- }
244
- #notify > svg {
245
- padding-bottom: 12px;
246
- }
247
-
248
- .alert {
249
- display: flex;
250
- flex-direction: row;
251
- justify-content: start;
252
- width: 252px;
253
- position: absolute;
254
- bottom: 0px;
255
- border: 1px solid #ee888c;
256
- background: #ffdedf;
257
- border-radius: 11px;
258
- box-sizing: border-box;
259
- padding: 12px;
260
- align-items: center;
261
- gap: 12px;
262
- }
263
- .alert > img {
264
- margin: 0;
265
- }
266
- .alert > p {
267
- font-family: "Poppins", "Ubuntu", "Work Sans", "Helvetica Neue", sans-serif;
268
- font-size: 14px;
269
- font-style: normal;
270
- font-weight: 400;
271
- margin-top: 0;
272
- line-height: 16px;
273
- color: #1e1e20;
274
- }
275
-
276
- .notify-text {
277
- font-family: "Poppins", "Ubuntu", "Work Sans", "Helvetica Neue", sans-serif;
278
- font-size: 14px;
279
- font-style: normal;
280
- font-weight: 400;
281
- line-height: 16px;
282
- color: #707074;
283
- text-align: center;
284
- }
285
-
286
- .containerLoader {
287
- display: flex;
288
- justify-content: center;
289
- align-items: center;
290
- width: 30px;
291
- height: 30px;
292
- margin-bottom: 12px;
293
- }
294
-
295
- .loader {
296
- position: relative;
297
- margin-left: 0 !important;
298
- }
299
- .loader__item {
300
- position: absolute;
301
- width: 9.68px;
302
- height: 4px;
303
- background-color: var(--loader-color, #4745B7);
304
- border-radius: 2px;
305
- --to-opacity: 1;
306
- opacity: var(--to-opacity);
307
- }
308
- .loader__item__1 {
309
- transform: translate(2.5846212025px, 5.4246212025px) rotate(45deg);
310
- -webkit-animation: translate(2.5846212025px, 5.4246212025px) rotate(45deg);
311
- -moz-animation: translate(2.5846212025px, 5.4246212025px) rotate(45deg);
312
- -o-animation: translate(2.5846212025px, 5.4246212025px) rotate(45deg);
313
- --to-opacity: calc(1 - (0 / 8));
314
- animation: blink 0.8333333333s linear 0.1041666667s infinite;
315
- -webkit-animation: blink 0.8333333333s linear 0.1041666667s infinite;
316
- -moz-animation: blink 0.8333333333s linear 0.1041666667s infinite;
317
- -o-animation: blink 0.8333333333s linear 0.1041666667s infinite;
318
- }
319
- .loader__item__2 {
320
- transform: translate(-4.84px, 8.5px) rotate(90deg);
321
- -webkit-animation: translate(-4.84px, 8.5px) rotate(90deg);
322
- -moz-animation: translate(-4.84px, 8.5px) rotate(90deg);
323
- -o-animation: translate(-4.84px, 8.5px) rotate(90deg);
324
- --to-opacity: calc(1 - (1 / 8));
325
- animation: blink 0.8333333333s linear 0.2083333333s infinite;
326
- -webkit-animation: blink 0.8333333333s linear 0.2083333333s infinite;
327
- -moz-animation: blink 0.8333333333s linear 0.2083333333s infinite;
328
- -o-animation: blink 0.8333333333s linear 0.2083333333s infinite;
329
- }
330
- .loader__item__3 {
331
- transform: translate(-12.2646212025px, 5.4246212025px) rotate(135deg);
332
- -webkit-animation: translate(-12.2646212025px, 5.4246212025px) rotate(135deg);
333
- -moz-animation: translate(-12.2646212025px, 5.4246212025px) rotate(135deg);
334
- -o-animation: translate(-12.2646212025px, 5.4246212025px) rotate(135deg);
335
- --to-opacity: calc(1 - (2 / 8));
336
- animation: blink 0.8333333333s linear 0.3125s infinite;
337
- -webkit-animation: blink 0.8333333333s linear 0.3125s infinite;
338
- -moz-animation: blink 0.8333333333s linear 0.3125s infinite;
339
- -o-animation: blink 0.8333333333s linear 0.3125s infinite;
340
- }
341
- .loader__item__4 {
342
- transform: translate(-15.3399999992px, -1.9999999999px) rotate(180deg);
343
- -webkit-animation: translate(-15.3399999992px, -1.9999999999px) rotate(180deg);
344
- -moz-animation: translate(-15.3399999992px, -1.9999999999px) rotate(180deg);
345
- -o-animation: translate(-15.3399999992px, -1.9999999999px) rotate(180deg);
346
- --to-opacity: calc(1 - (3 / 8));
347
- animation: blink 0.8333333333s linear 0.4166666667s infinite;
348
- -webkit-animation: blink 0.8333333333s linear 0.4166666667s infinite;
349
- -moz-animation: blink 0.8333333333s linear 0.4166666667s infinite;
350
- -o-animation: blink 0.8333333333s linear 0.4166666667s infinite;
351
- }
352
- .loader__item__5 {
353
- transform: translate(-12.2646210959px, -9.4246211842px) rotate(225deg);
354
- -webkit-animation: translate(-12.2646210959px, -9.4246211842px) rotate(225deg);
355
- -moz-animation: translate(-12.2646210959px, -9.4246211842px) rotate(225deg);
356
- -o-animation: translate(-12.2646210959px, -9.4246211842px) rotate(225deg);
357
- --to-opacity: calc(1 - (4 / 8));
358
- animation: blink 0.8333333333s linear 0.5208333333s infinite;
359
- -webkit-animation: blink 0.8333333333s linear 0.5208333333s infinite;
360
- -moz-animation: blink 0.8333333333s linear 0.5208333333s infinite;
361
- -o-animation: blink 0.8333333333s linear 0.5208333333s infinite;
362
- }
363
- .loader__item__6 {
364
- transform: translate(-4.8399941857px, -12.499998805px) rotate(270deg);
365
- -webkit-animation: translate(-4.8399941857px, -12.499998805px) rotate(270deg);
366
- -moz-animation: translate(-4.8399941857px, -12.499998805px) rotate(270deg);
367
- -o-animation: translate(-4.8399941857px, -12.499998805px) rotate(270deg);
368
- --to-opacity: calc(1 - (5 / 8));
369
- animation: blink 0.8333333333s linear 0.625s infinite;
370
- -webkit-animation: blink 0.8333333333s linear 0.625s infinite;
371
- -moz-animation: blink 0.8333333333s linear 0.625s infinite;
372
- -o-animation: blink 0.8333333333s linear 0.625s infinite;
373
- }
374
- .loader__item__7 {
375
- transform: translate(2.5847915061px, -9.4245803212px) rotate(315deg);
376
- -webkit-animation: translate(2.5847915061px, -9.4245803212px) rotate(315deg);
377
- -moz-animation: translate(2.5847915061px, -9.4245803212px) rotate(315deg);
378
- -o-animation: translate(2.5847915061px, -9.4245803212px) rotate(315deg);
379
- --to-opacity: calc(1 - (6 / 8));
380
- animation: blink 0.8333333333s linear 0.7291666667s infinite;
381
- -webkit-animation: blink 0.8333333333s linear 0.7291666667s infinite;
382
- -moz-animation: blink 0.8333333333s linear 0.7291666667s infinite;
383
- -o-animation: blink 0.8333333333s linear 0.7291666667s infinite;
384
- }
385
- .loader__item__8 {
386
- transform: translate(5.6631628524px, -1.99913122px) rotate(360deg);
387
- -webkit-animation: translate(5.6631628524px, -1.99913122px) rotate(360deg);
388
- -moz-animation: translate(5.6631628524px, -1.99913122px) rotate(360deg);
389
- -o-animation: translate(5.6631628524px, -1.99913122px) rotate(360deg);
390
- --to-opacity: calc(1 - (7 / 8));
391
- animation: blink 0.8333333333s linear 0.8333333333s infinite;
392
- -webkit-animation: blink 0.8333333333s linear 0.8333333333s infinite;
393
- -moz-animation: blink 0.8333333333s linear 0.8333333333s infinite;
394
- -o-animation: blink 0.8333333333s linear 0.8333333333s infinite;
395
- }
396
- .loader__item__8 {
397
- max-width: 8.5px;
398
- }
399
-
400
- @keyframes blink {
401
- 0% {
402
- opacity: 1;
403
- }
404
- 100% {
405
- opacity: var(--to-opacity);
406
- }
407
- }
408
- @keyframes rotate {
409
- 0% {
410
- transform: rotate(0deg);
411
- }
412
- 100% {
413
- background: rotate(360deg);
414
- }
415
- }