datastake-daf 0.6.587 → 0.6.588

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.
@@ -1,401 +0,0 @@
1
- import styled from "styled-components";
2
- import { MOBILE_WIDTH, TABLET_WIDTH } from "datastake-daf/src/constants/Style";
3
-
4
- const Style = styled.div`
5
- .errors-cont {
6
- margin-top: var(--size-lg);
7
-
8
- &.no-pt {
9
- margin-top: 0px;
10
- }
11
- }
12
-
13
- &.popup {
14
- h2 {
15
- font-size: 36px;
16
- line-height: 44px;
17
- color: #101828;
18
- margin-bottom: 8px;
19
- }
20
-
21
- p {
22
- color: #667085;
23
- font-size: var(--font-size-lg);
24
- line-height: var(--size-lg);
25
- margin-bottom: 0;
26
- }
27
- }
28
-
29
- display: flex;
30
- flex-direction: column;
31
- font-family: Outfit;
32
-
33
- @media(${TABLET_WIDTH}) {
34
- max-height: 100dvh;
35
- overflow-y: auto;
36
- }
37
-
38
- .category-understood {
39
- margin-top: -4px;
40
- background: #F9FAFB;
41
- border-radius: 8px;
42
- padding: 12px;
43
-
44
- svg {
45
- margin-bottom: 12px;
46
- }
47
-
48
- .paragraph {
49
- display: flex;
50
- gap: 13px;
51
-
52
- svg {
53
- color: #F79009;
54
- }
55
- }
56
-
57
- p {
58
- font-size: 14px;
59
- line-height: 20px;
60
- color: #6C737F;
61
- font-weight: 400;
62
- margin-bottom: 8px;
63
- text-align: left;
64
- margin-bottom: 8px;
65
- }
66
-
67
- .btn {
68
- padding: 0;
69
-
70
- span {
71
- color: var(--mmt-primary-70);
72
- font-size: 14px;
73
- font-weight: 500;
74
- margin-left: 30px;
75
- cursor: pointer;
76
- }
77
- }
78
- }
79
-
80
- .main-cont {
81
- flex: 1;
82
- display: flex;
83
- flex-direction: row;
84
- justify-content: center;
85
-
86
- @media (${TABLET_WIDTH}) {
87
- flex-direction: column;
88
- justify-content: flex-start;
89
- gap: 48px;
90
- }
91
-
92
- .dots {
93
- display: flex;
94
- gap: 8px;
95
- margin-top: 32px;
96
-
97
- @media (${TABLET_WIDTH}) {
98
- justify-content: center;
99
- }
100
-
101
- .dot {
102
- width: 12px;
103
- height: 12px;
104
- background: white;
105
- border-radius: 6px;
106
- transition: .4s width, .4s background;
107
-
108
- &.active {
109
- width: 35px;
110
- background: var(--mmt-primary-60);
111
- }
112
- }
113
- }
114
-
115
- .d-cont {
116
- flex: 1;
117
- display: flex;
118
- flex-direction: column;
119
-
120
- a {
121
- color: var(--mmt-primary-70);
122
- }
123
-
124
- .main {
125
- flex: 1;
126
- width: 380px;
127
- display: flex;
128
- flex-direction: column;
129
- justify-content: center;
130
- margin-right: auto;
131
-
132
- span {
133
- font-size: 14px;
134
- }
135
-
136
- @media(${TABLET_WIDTH}) {
137
- width: 100%;
138
- margin-right: unset;
139
- padding: 0px 10px;
140
- }
141
- }
142
-
143
- &.left {
144
- animation: .7s slideRight forwards;
145
- height: 100dvh;
146
- overflow-y: auto;
147
- padding: 6rem 0;
148
- padding-top: calc(6rem + 80px);
149
-
150
- .left-logo img {
151
- height: 46px;
152
- margin-bottom: 40px;
153
- }
154
-
155
- @media (${TABLET_WIDTH}) {
156
- padding-top: calc(72px + 3rem);
157
- padding-bottom: 3rem;
158
- padding-left: 2.3rem;
159
- padding-right: 2.3rem;
160
- width: 100%;
161
- }
162
-
163
- @media (${MOBILE_WIDTH}) {
164
- padding-top: 8.12rem;
165
- padding-bottom: 3rem;
166
- }
167
-
168
- .left-header {
169
- margin-bottom: 32px;
170
-
171
- h2 {
172
- font-size: 36px;
173
- line-height: 44px;
174
- color: #101828;
175
- margin-bottom: 8px;
176
- }
177
-
178
- p {
179
- color: #667085;
180
- font-size: var(--font-size-lg);
181
- line-height: var(--size-lg);
182
- margin-bottom: 0;
183
- }
184
-
185
- img {
186
- margin-bottom: 32px;
187
- width: 136px;
188
- }
189
- }
190
-
191
- .main {
192
- margin-left: auto;
193
- margin-right: auto;
194
-
195
- @media(${TABLET_WIDTH}) {
196
- width: unset;
197
- margin-left: unset;
198
- margin-right: unset;
199
- padding: 0px;
200
- }
201
- }
202
-
203
- @media(${TABLET_WIDTH}) {
204
- height: unset;
205
- overflow-y: hidden;
206
- }
207
- }
208
-
209
- @media (${TABLET_WIDTH}) {
210
- margin-left: auto;
211
- margin-right: auto;
212
- width: 100%;
213
- flex: unset;
214
- }
215
-
216
- @media (max-width: 575px) {
217
- .ant-form-item {
218
- flex-direction: row !important;
219
- }
220
- }
221
-
222
- @media (max-width: 500px) {
223
- width: 100%;
224
- }
225
-
226
- &.right {
227
- animation: .7s slideLeft forwards;
228
- background-size: contain;
229
- display: flex;
230
- flex-direction: column;
231
- justify-content: center;
232
- padding-top: 80px;
233
-
234
- @media (${TABLET_WIDTH}) {
235
- padding-top: 72px;
236
- }
237
-
238
- @media (${MOBILE_WIDTH}) {
239
- padding-top: 5.12rem;
240
- }
241
-
242
- .right-img {
243
- flex: 1;
244
- background-position: center right;
245
- background-repeat: no-repeat;
246
- margin-left: 96px;
247
- background-size: contain;
248
- max-height: 700px;
249
- }
250
-
251
- @media (${TABLET_WIDTH}) {
252
- display: none;
253
- }
254
- }
255
-
256
- &.left {
257
- .ant-form-item-required {
258
- ::before {
259
- content: unset;
260
- }
261
- }
262
-
263
- .ant-input {
264
- padding: 10px 12px;
265
- font-size: 14px;
266
- font-weight: 400;
267
- border: 1px solid #E5E7EB;
268
- border-radius: 6px;
269
- }
270
-
271
- .ant-checkbox-wrapper + .ant-checkbox-wrapper {
272
- margin-left: 0px;
273
- }
274
-
275
- .ant-checkbox-wrapper {
276
- color: #344054;
277
- font-size: 14px;
278
- font-weight: 400;
279
- }
280
-
281
- .ant-select-selector {
282
- padding: 4px 12px;
283
- border-radius: 6px;
284
- height: fit-content;
285
- font-size: 14px;
286
- border: 1px solid #E5E7EB;
287
- font-weight: 400;
288
- transition: 0s;
289
-
290
- .ant-select-selection-item {
291
- transition: 0s;
292
- }
293
-
294
- .ant-select-selection-search {
295
- display: flex;
296
- flex-direction: column;
297
- justify-content: center;
298
- }
299
- }
300
-
301
- .ant-input-affix-wrapper {
302
- padding: 11px 14px;
303
- border: 2px solid #F2FAFF;
304
- border-radius: 8px;
305
-
306
- .ant-input {
307
- padding: 0;
308
- border: unset;
309
- border-radius: unset;
310
- }
311
-
312
- .ant-input-prefix {
313
- margin-right: 10px;
314
- color: #A4A4A4;
315
- }
316
- }
317
-
318
- .ant-btn {
319
- &.ant-btn-primary {
320
- background-color: var(--color-primary) !important;
321
- border-color: var(--color-primary) !important;
322
- }
323
- }
324
-
325
- .buttons {
326
- display: flex;
327
- flex-direction: column;
328
- margin-top: var(--size-lg);
329
- gap: 12px;
330
-
331
- .d-btn-cont {
332
- flex: 1;
333
- }
334
- }
335
-
336
- .bottom {
337
- margin-top: 10px;
338
- display: flex;
339
- flex-direction: column;
340
- gap: 4px;
341
-
342
- p {
343
- color: #667085;
344
- font-size: 14px;
345
- line-height: 20px;
346
- margin-bottom: 0px;
347
- }
348
- }
349
-
350
- form {
351
- display: flex;
352
- flex-direction: column;
353
- gap: 10px;
354
- }
355
-
356
- .ant-row.ant-form-item {
357
- margin-bottom: 0px;
358
- }
359
-
360
- .ant-form-item-label {
361
- label {
362
- color: #1F2A37;
363
- font-size: 14px;
364
- font-weight: 500;
365
- line-height: 20px;
366
- }
367
- }
368
-
369
- }
370
- }
371
- }
372
-
373
- @keyframes slideLeft {
374
- 0% {transform: translate(-10%, 0%); opacity: 0;}
375
- 100% {transform: translate(0%, 0%); opacity: 1;}
376
- }
377
-
378
- @keyframes slideRight {
379
- 0% {transform: translate(10%, 0%); opacity: 0;}
380
- 100% {transform: translate(0%, 0%); opacity: 1;}
381
- }
382
-
383
- &.tif-layout {
384
- .app-logo {
385
- width: 230px !important;
386
- }
387
- }
388
-
389
- &.sbg-layout {
390
- .right-img {
391
- background-position: center !important;
392
- background-size: cover !important;
393
- background-image: url('/assets/sbg-images/sbg-bg.png') !important;
394
- max-height: 100% !important;
395
- margin-left: 0 !important;
396
- }
397
- }
398
- `;
399
-
400
- export default Style;
401
-