@gataca/qr 0.0.19 → 0.0.21

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 (95) 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/{esm/gat-icon-alert-7b06ef3a.js → gatacaqr/gat-icon-alert-13a1894e.js} +1 -3
  5. package/dist/{esm → gatacaqr}/gataca-autoqr.entry.js +1 -1
  6. package/dist/{esm/gataca-qr_2.entry.js → gatacaqr/gataca-qr.entry.js} +17 -81
  7. package/dist/gatacaqr/gataca-qrdisplay-55780157.js +97 -0
  8. package/dist/gatacaqr/gataca-qrdisplay.entry.js +2 -0
  9. package/dist/{esm → gatacaqr}/gataca-qrws.entry.js +3 -3
  10. package/dist/{components/gataca-ssibutton2.js → gatacaqr/gataca-ssibutton.entry.js} +10 -84
  11. package/dist/{components/gataca-ssibuttonws2.js → gatacaqr/gataca-ssibuttonws.entry.js} +7 -53
  12. package/dist/gatacaqr/gatacaqr.esm.js +129 -1
  13. package/dist/gatacaqr/index-4bc6f36b.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-qr/components/qr/QR.d.ts +0 -1
  17. package/dist/types/components/gataca-qr/gataca-qr.d.ts +0 -5
  18. package/dist/types/components/gataca-qrdisplay/gataca-qrdisplay.d.ts +0 -5
  19. package/dist/types/components/gataca-ssibutton/gataca-ssibutton.d.ts +0 -5
  20. package/dist/types/components.d.ts +0 -24
  21. package/package.json +1 -1
  22. package/dist/cjs/gat-icon-alert-0ad19b26.js +0 -14
  23. package/dist/cjs/gataca-autoqr.cjs.entry.js +0 -105
  24. package/dist/cjs/gataca-qr_2.cjs.entry.js +0 -318
  25. package/dist/cjs/gataca-qrws.cjs.entry.js +0 -252
  26. package/dist/cjs/gataca-ssibutton_2.cjs.entry.js +0 -320
  27. package/dist/cjs/gatacaqr.cjs.js +0 -19
  28. package/dist/cjs/index-8638645b.js +0 -1482
  29. package/dist/cjs/index.cjs.js +0 -16
  30. package/dist/cjs/loader.cjs.js +0 -21
  31. package/dist/cjs/qr-code-styling-412bbc7a.js +0 -28
  32. package/dist/cjs/utils-ef28b844.js +0 -27
  33. package/dist/collection/assets/icons/gat-icon-alert.svg +0 -5
  34. package/dist/collection/assets/icons/gat-icon-check.svg +0 -5
  35. package/dist/collection/assets/icons/gat-icon-refresh.svg +0 -4
  36. package/dist/collection/assets/images/logo_gataca.svg +0 -7
  37. package/dist/collection/collection-manifest.json +0 -17
  38. package/dist/collection/components/gataca-autoqr/gataca-autoqr.css +0 -116
  39. package/dist/collection/components/gataca-autoqr/gataca-autoqr.js +0 -323
  40. package/dist/collection/components/gataca-qr/components/qr/QR.js +0 -5
  41. package/dist/collection/components/gataca-qr/components/readQR/ReadQR.js +0 -11
  42. package/dist/collection/components/gataca-qr/components/readQR/components/AnimatedLoader.js +0 -4
  43. package/dist/collection/components/gataca-qr/components/retryButton/RetryButton.js +0 -13
  44. package/dist/collection/components/gataca-qr/components/success/Success.js +0 -8
  45. package/dist/collection/components/gataca-qr/gataca-qr.css +0 -399
  46. package/dist/collection/components/gataca-qr/gataca-qr.js +0 -1001
  47. package/dist/collection/components/gataca-qrdisplay/gataca-qrdisplay.js +0 -176
  48. package/dist/collection/components/gataca-qrws/components/qr/QR.js +0 -5
  49. package/dist/collection/components/gataca-qrws/components/readQR/ReadQR.js +0 -11
  50. package/dist/collection/components/gataca-qrws/components/readQR/components/AnimatedLoader.js +0 -4
  51. package/dist/collection/components/gataca-qrws/components/retryButton/RetryButton.js +0 -13
  52. package/dist/collection/components/gataca-qrws/components/success/Success.js +0 -8
  53. package/dist/collection/components/gataca-qrws/gataca-qrws.css +0 -400
  54. package/dist/collection/components/gataca-qrws/gataca-qrws.js +0 -974
  55. package/dist/collection/components/gataca-ssibutton/gataca-ssibutton.css +0 -116
  56. package/dist/collection/components/gataca-ssibutton/gataca-ssibutton.js +0 -979
  57. package/dist/collection/components/gataca-ssibuttonws/gataca-ssibuttonws.css +0 -116
  58. package/dist/collection/components/gataca-ssibuttonws/gataca-ssibuttonws.js +0 -410
  59. package/dist/collection/index.js +0 -2
  60. package/dist/collection/utils/index.js +0 -1
  61. package/dist/collection/utils/utils.js +0 -22
  62. package/dist/components/gat-icon-alert.js +0 -30
  63. package/dist/components/gataca-autoqr.js +0 -161
  64. package/dist/components/gataca-qr.js +0 -6
  65. package/dist/components/gataca-qr2.js +0 -329
  66. package/dist/components/gataca-qrdisplay.js +0 -6
  67. package/dist/components/gataca-qrdisplay2.js +0 -99
  68. package/dist/components/gataca-qrws.js +0 -6
  69. package/dist/components/gataca-qrws2.js +0 -310
  70. package/dist/components/gataca-ssibutton.js +0 -6
  71. package/dist/components/gataca-ssibuttonws.js +0 -6
  72. package/dist/components/index.js +0 -8
  73. package/dist/esm/gataca-ssibutton_2.entry.js +0 -315
  74. package/dist/esm/gatacaqr.js +0 -17
  75. package/dist/esm/index-af2994f7.js +0 -1455
  76. package/dist/esm/index.js +0 -1
  77. package/dist/esm/loader.js +0 -17
  78. package/dist/esm/polyfills/core-js.js +0 -11
  79. package/dist/esm/polyfills/css-shim.js +0 -1
  80. package/dist/esm/polyfills/dom.js +0 -79
  81. package/dist/esm/polyfills/es5-html-element.js +0 -1
  82. package/dist/esm/polyfills/index.js +0 -34
  83. package/dist/esm/polyfills/system.js +0 -6
  84. package/dist/esm/qr-code-styling-0eeb38d5.js +0 -26
  85. package/dist/gatacaqr/p-0be4566d.js +0 -1
  86. package/dist/gatacaqr/p-2cd7b062.js +0 -1
  87. package/dist/gatacaqr/p-3ca3bb1a.entry.js +0 -1
  88. package/dist/gatacaqr/p-57b89b78.entry.js +0 -1
  89. package/dist/gatacaqr/p-88af482f.entry.js +0 -1
  90. package/dist/gatacaqr/p-ba0417e2.js +0 -2
  91. package/dist/gatacaqr/p-d59ae0ab.entry.js +0 -1
  92. package/dist/gatacaqr/p-ea783014.js +0 -1
  93. package/dist/index.cjs.js +0 -1
  94. package/dist/index.js +0 -1
  95. /package/dist/{esm → gatacaqr}/utils-63e7a33b.js +0 -0
@@ -1,176 +0,0 @@
1
- import { h } from "@stencil/core";
2
- import QRCodeStyling from "qr-code-styling";
3
- import logoGataca from "../../assets/images/logo_gataca.svg";
4
- export class GatacaQRDisplay {
5
- constructor() {
6
- this.qrId = undefined;
7
- this.qrData = undefined;
8
- this.size = 256;
9
- this.logoSize = 0;
10
- this.logoSrc = undefined;
11
- this.qrColor = "#1E1E20";
12
- this.rounded = true;
13
- }
14
- componentDidLoad() {
15
- const qrCode = new QRCodeStyling({
16
- data: this.qrData,
17
- width: this.size,
18
- height: this.size,
19
- image: this.logoSize > 0 ? this.logoSrc || logoGataca : undefined,
20
- margin: 10,
21
- type: "canvas",
22
- dotsOptions: {
23
- color: this.qrColor,
24
- type: this.rounded ? "dots" : "square",
25
- },
26
- cornersSquareOptions: {
27
- type: this.rounded ? "extra-rounded" : "square",
28
- },
29
- cornersDotOptions: {
30
- type: this.rounded ? "dot" : "square",
31
- },
32
- imageOptions: {
33
- margin: 2,
34
- imageSize: this.logoSize,
35
- },
36
- });
37
- this.qr.id = this.qrId;
38
- qrCode.append(this.qr);
39
- }
40
- render() {
41
- return (h("div", {
42
- // id={this.qrId}
43
- ref: (el) => {
44
- this.qr = el;
45
- }
46
- }));
47
- }
48
- static get is() { return "gataca-qrdisplay"; }
49
- static get properties() {
50
- return {
51
- "qrId": {
52
- "type": "string",
53
- "mutable": false,
54
- "complexType": {
55
- "original": "string",
56
- "resolved": "string",
57
- "references": {}
58
- },
59
- "required": false,
60
- "optional": true,
61
- "docs": {
62
- "tags": [],
63
- "text": "_[Optional]_\nUnique identificator for html tag"
64
- },
65
- "attribute": "qr-id",
66
- "reflect": false
67
- },
68
- "qrData": {
69
- "type": "string",
70
- "mutable": false,
71
- "complexType": {
72
- "original": "string",
73
- "resolved": "string",
74
- "references": {}
75
- },
76
- "required": false,
77
- "optional": false,
78
- "docs": {
79
- "tags": [],
80
- "text": "_[Mandatory]_\nSets the contents of the QR"
81
- },
82
- "attribute": "qr-data",
83
- "reflect": false
84
- },
85
- "size": {
86
- "type": "number",
87
- "mutable": false,
88
- "complexType": {
89
- "original": "number",
90
- "resolved": "number",
91
- "references": {}
92
- },
93
- "required": false,
94
- "optional": true,
95
- "docs": {
96
- "tags": [],
97
- "text": "_[Optional]_\nSize of the QR Displayed"
98
- },
99
- "attribute": "size",
100
- "reflect": false,
101
- "defaultValue": "256"
102
- },
103
- "logoSize": {
104
- "type": "number",
105
- "mutable": false,
106
- "complexType": {
107
- "original": "number",
108
- "resolved": "number",
109
- "references": {}
110
- },
111
- "required": false,
112
- "optional": true,
113
- "docs": {
114
- "tags": [],
115
- "text": "_[Optional]_\nSize of the logo to display in percentage to the total size [0-1]. 0 means no logo will be displayed. Default is the GATACA logo. Recommended size is around 0.33"
116
- },
117
- "attribute": "logo-size",
118
- "reflect": false,
119
- "defaultValue": "0"
120
- },
121
- "logoSrc": {
122
- "type": "string",
123
- "mutable": false,
124
- "complexType": {
125
- "original": "string",
126
- "resolved": "string",
127
- "references": {}
128
- },
129
- "required": false,
130
- "optional": true,
131
- "docs": {
132
- "tags": [],
133
- "text": "_[Optional]_\nLogo to display, just if the logo size is greater than 0. No logo is the GATACA logo."
134
- },
135
- "attribute": "logo-src",
136
- "reflect": false
137
- },
138
- "qrColor": {
139
- "type": "string",
140
- "mutable": false,
141
- "complexType": {
142
- "original": "string",
143
- "resolved": "string",
144
- "references": {}
145
- },
146
- "required": false,
147
- "optional": true,
148
- "docs": {
149
- "tags": [],
150
- "text": "_[Optional]_\nQR Color."
151
- },
152
- "attribute": "qr-color",
153
- "reflect": false,
154
- "defaultValue": "\"#1E1E20\""
155
- },
156
- "rounded": {
157
- "type": "boolean",
158
- "mutable": false,
159
- "complexType": {
160
- "original": "boolean",
161
- "resolved": "boolean",
162
- "references": {}
163
- },
164
- "required": false,
165
- "optional": true,
166
- "docs": {
167
- "tags": [],
168
- "text": "_[Optional]_\nRound usage"
169
- },
170
- "attribute": "rounded",
171
- "reflect": false,
172
- "defaultValue": "true"
173
- }
174
- };
175
- }
176
- }
@@ -1,5 +0,0 @@
1
- import { h } from "@stencil/core";
2
- export const QR = (props) => {
3
- const { value, useLogo, logoSrc, size } = props;
4
- return (h("gataca-qrdisplay", { qrData: value, rounded: true, size: size, "logo-size": useLogo ? 0.33 : 0, "logo-src": logoSrc }));
5
- };
@@ -1,11 +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 } = props;
6
- return (h("div", { class: "blured", style: {
7
- width: (modalWidth - 48).toString() + "px",
8
- height: modalWidth ? ((_a = (modalWidth - 48)) === null || _a === void 0 ? void 0 : _a.toString()) + "px" : "",
9
- } }, h("div", { id: "notify" }, h(AnimatedLoader, null), h("p", { class: "notify-text" }, readQrMessages === null || readQrMessages === void 0 ? void 0 :
10
- readQrMessages.title, " "), h("p", { class: "notify-text bold" }, readQrMessages === null || readQrMessages === void 0 ? void 0 : readQrMessages.description)), h("div", { id: "qrwait" }, renderQR(url, false, sizeQR))));
11
- };
@@ -1,4 +0,0 @@
1
- import { h } from "@stencil/core";
2
- export const AnimatedLoader = () => {
3
- return (h("div", { class: "containerLoader" }, 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" }))));
4
- };
@@ -1,13 +0,0 @@
1
- import { h } from "@stencil/core";
2
- import refreshIcon from "../../../../assets/icons/gat-icon-refresh.svg";
3
- import alertIcon from "../../../../assets/icons/gat-icon-alert.svg";
4
- export const RetryButton = (props) => {
5
- var _a;
6
- const { errorMessage, modalWidth, clickInsideBoxLabel, refreshQrLabel, scanQrLabel, waitingStartSessionLabel, display, renderRetryQR, } = props;
7
- return (h("div", { class: "reload", style: {
8
- width: (modalWidth - 48).toString() + "px",
9
- height: modalWidth ? ((_a = (modalWidth - 48)) === null || _a === void 0 ? void 0 : _a.toString()) + "px" : "",
10
- } }, h("div", { id: "notify", onClick: () => display() }, h("img", { src: refreshIcon, height: 24, width: 24 }), h("p", { class: "notify-text" }, clickInsideBoxLabel, " "), errorMessage ? (h("p", { class: "notify-text bold" }, refreshQrLabel)) : (h("p", { class: "notify-text bold" }, scanQrLabel)), errorMessage && (h("div", { class: "alert", style: {
11
- width: (modalWidth - 48).toString() + "px",
12
- } }, h("img", { src: alertIcon, height: 24, width: 24 }), h("p", null, errorMessage)))), h("div", { id: "qrwait" }, renderRetryQR(waitingStartSessionLabel))));
13
- };
@@ -1,8 +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 } = props;
5
- return (h("div", { class: "success", style: {
6
- height: modalHeight ? (modalHeight === null || modalHeight === void 0 ? void 0 : modalHeight.toString()) + "px" : "300px",
7
- } }, h("img", { src: successIcon, height: 52, width: 52 }), h("p", { class: "successMsg" }, successLoginLabel)));
8
- };
@@ -1,400 +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,
197
- .blured {
198
- height: 252px;
199
- width: 252px;
200
- border: 1px dashed #a1a1a1;
201
- border-radius: 12px;
202
- position: relative;
203
- top: 24px;
204
- margin: 0 24px 24px;
205
- display: flex;
206
- overflow: hidden;
207
- justify-content: center;
208
- align-items: center;
209
- }
210
-
211
- #qrwait {
212
- display: flex;
213
- justify-content: center;
214
- }
215
-
216
- #qrwait,
217
- #notify {
218
- width: 100%;
219
- height: 100%;
220
- top: 0;
221
- left: 0;
222
- border-radius: 20px;
223
- }
224
-
225
- #notify {
226
- z-index: 10;
227
- position: absolute;
228
- justify-self: center;
229
- justify-items: center;
230
- justify-content: center;
231
- align-items: center;
232
- align-content: center;
233
- display: flex;
234
- flex-direction: column;
235
- box-sizing: border-box;
236
- padding: 20px;
237
- background: rgba(255, 255, 255, 0.95);
238
- }
239
- #notify > img {
240
- padding-bottom: 12px;
241
- }
242
-
243
- .alert {
244
- display: flex;
245
- flex-direction: row;
246
- justify-content: start;
247
- width: 252px;
248
- position: absolute;
249
- bottom: 0px;
250
- border: 1px solid #ee888c;
251
- background: #ffdedf;
252
- border-radius: 11px;
253
- box-sizing: border-box;
254
- padding: 12px;
255
- align-items: center;
256
- gap: 12px;
257
- }
258
- .alert > img {
259
- margin: 0;
260
- }
261
- .alert > p {
262
- font-family: "Poppins", "Ubuntu", "Work Sans", "Helvetica Neue", sans-serif;
263
- font-size: 14px;
264
- font-style: normal;
265
- font-weight: 400;
266
- margin-top: 0;
267
- line-height: 16px;
268
- color: #1e1e20;
269
- }
270
-
271
- .notify-text {
272
- font-family: "Poppins", "Ubuntu", "Work Sans", "Helvetica Neue", sans-serif;
273
- font-size: 14px;
274
- font-style: normal;
275
- font-weight: 400;
276
- line-height: 16px;
277
- color: #707074;
278
- text-align: center;
279
- }
280
-
281
- .containerLoader {
282
- display: flex;
283
- justify-content: center;
284
- align-items: center;
285
- width: 30px;
286
- height: 30px;
287
- margin-bottom: 12px;
288
- }
289
-
290
- .loader {
291
- position: relative;
292
- margin-left: 0 !important;
293
- }
294
- .loader__item {
295
- position: absolute;
296
- width: 9.68px;
297
- height: 4px;
298
- background: transparent;
299
- border-radius: 2px;
300
- }
301
- .loader__item__1 {
302
- transform: translate(2.5846212025px, 5.4246212025px) rotate(45deg);
303
- -webkit-animation: translate(2.5846212025px, 5.4246212025px) rotate(45deg);
304
- -moz-animation: translate(2.5846212025px, 5.4246212025px) rotate(45deg);
305
- -o-animation: translate(2.5846212025px, 5.4246212025px) rotate(45deg);
306
- animation: blink 0.8333333333s linear 0.1041666667s infinite;
307
- -webkit-animation: blink 0.8333333333s linear 0.1041666667s infinite;
308
- -moz-animation: blink 0.8333333333s linear 0.1041666667s infinite;
309
- -o-animation: blink 0.8333333333s linear 0.1041666667s infinite;
310
- }
311
- .loader__item__2 {
312
- transform: translate(-4.84px, 8.5px) rotate(90deg);
313
- -webkit-animation: translate(-4.84px, 8.5px) rotate(90deg);
314
- -moz-animation: translate(-4.84px, 8.5px) rotate(90deg);
315
- -o-animation: translate(-4.84px, 8.5px) rotate(90deg);
316
- animation: blink 0.8333333333s linear 0.2083333333s infinite;
317
- -webkit-animation: blink 0.8333333333s linear 0.2083333333s infinite;
318
- -moz-animation: blink 0.8333333333s linear 0.2083333333s infinite;
319
- -o-animation: blink 0.8333333333s linear 0.2083333333s infinite;
320
- }
321
- .loader__item__3 {
322
- transform: translate(-12.2646212025px, 5.4246212025px) rotate(135deg);
323
- -webkit-animation: translate(-12.2646212025px, 5.4246212025px) rotate(135deg);
324
- -moz-animation: translate(-12.2646212025px, 5.4246212025px) rotate(135deg);
325
- -o-animation: translate(-12.2646212025px, 5.4246212025px) rotate(135deg);
326
- animation: blink 0.8333333333s linear 0.3125s infinite;
327
- -webkit-animation: blink 0.8333333333s linear 0.3125s infinite;
328
- -moz-animation: blink 0.8333333333s linear 0.3125s infinite;
329
- -o-animation: blink 0.8333333333s linear 0.3125s infinite;
330
- }
331
- .loader__item__4 {
332
- transform: translate(-15.3399999992px, -1.9999999999px) rotate(180deg);
333
- -webkit-animation: translate(-15.3399999992px, -1.9999999999px) rotate(180deg);
334
- -moz-animation: translate(-15.3399999992px, -1.9999999999px) rotate(180deg);
335
- -o-animation: translate(-15.3399999992px, -1.9999999999px) rotate(180deg);
336
- animation: blink 0.8333333333s linear 0.4166666667s infinite;
337
- -webkit-animation: blink 0.8333333333s linear 0.4166666667s infinite;
338
- -moz-animation: blink 0.8333333333s linear 0.4166666667s infinite;
339
- -o-animation: blink 0.8333333333s linear 0.4166666667s infinite;
340
- }
341
- .loader__item__5 {
342
- transform: translate(-12.2646210959px, -9.4246211842px) rotate(225deg);
343
- -webkit-animation: translate(-12.2646210959px, -9.4246211842px) rotate(225deg);
344
- -moz-animation: translate(-12.2646210959px, -9.4246211842px) rotate(225deg);
345
- -o-animation: translate(-12.2646210959px, -9.4246211842px) rotate(225deg);
346
- animation: blink 0.8333333333s linear 0.5208333333s infinite;
347
- -webkit-animation: blink 0.8333333333s linear 0.5208333333s infinite;
348
- -moz-animation: blink 0.8333333333s linear 0.5208333333s infinite;
349
- -o-animation: blink 0.8333333333s linear 0.5208333333s infinite;
350
- }
351
- .loader__item__6 {
352
- transform: translate(-4.8399941857px, -12.499998805px) rotate(270deg);
353
- -webkit-animation: translate(-4.8399941857px, -12.499998805px) rotate(270deg);
354
- -moz-animation: translate(-4.8399941857px, -12.499998805px) rotate(270deg);
355
- -o-animation: translate(-4.8399941857px, -12.499998805px) rotate(270deg);
356
- animation: blink 0.8333333333s linear 0.625s infinite;
357
- -webkit-animation: blink 0.8333333333s linear 0.625s infinite;
358
- -moz-animation: blink 0.8333333333s linear 0.625s infinite;
359
- -o-animation: blink 0.8333333333s linear 0.625s infinite;
360
- }
361
- .loader__item__7 {
362
- transform: translate(2.5847915061px, -9.4245803212px) rotate(315deg);
363
- -webkit-animation: translate(2.5847915061px, -9.4245803212px) rotate(315deg);
364
- -moz-animation: translate(2.5847915061px, -9.4245803212px) rotate(315deg);
365
- -o-animation: translate(2.5847915061px, -9.4245803212px) rotate(315deg);
366
- animation: blink 0.8333333333s linear 0.7291666667s infinite;
367
- -webkit-animation: blink 0.8333333333s linear 0.7291666667s infinite;
368
- -moz-animation: blink 0.8333333333s linear 0.7291666667s infinite;
369
- -o-animation: blink 0.8333333333s linear 0.7291666667s infinite;
370
- }
371
- .loader__item__8 {
372
- transform: translate(5.6631628524px, -1.99913122px) rotate(360deg);
373
- -webkit-animation: translate(5.6631628524px, -1.99913122px) rotate(360deg);
374
- -moz-animation: translate(5.6631628524px, -1.99913122px) rotate(360deg);
375
- -o-animation: translate(5.6631628524px, -1.99913122px) rotate(360deg);
376
- animation: blink 0.8333333333s linear 0.8333333333s infinite;
377
- -webkit-animation: blink 0.8333333333s linear 0.8333333333s infinite;
378
- -moz-animation: blink 0.8333333333s linear 0.8333333333s infinite;
379
- -o-animation: blink 0.8333333333s linear 0.8333333333s infinite;
380
- }
381
- .loader__item__8 {
382
- max-width: 8.5px;
383
- }
384
-
385
- @keyframes blink {
386
- 0% {
387
- background: #4745B7;
388
- }
389
- 100% {
390
- background: #CCCBF8;
391
- }
392
- }
393
- @keyframes rotate {
394
- 0% {
395
- transform: rotate(0deg);
396
- }
397
- 100% {
398
- background: rotate(360deg);
399
- }
400
- }