@axos-web-dev/shared-components 2.0.0-dev.18-apy.1 → 2.0.0-dev.18-apy.3

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,4 +1,4 @@
1
- @keyframes _1vox1xj11 {
1
+ @keyframes _1vox1xjz {
2
2
  0% {
3
3
  opacity: 1;
4
4
  }
@@ -32,47 +32,60 @@
32
32
  color: var(--_1073cm8o);
33
33
  }
34
34
  ._1vox1xj5 {
35
- padding: 2.5rem 0;
35
+ padding-block: 48px;
36
+ }
37
+ ._1vox1xj5 ._1vox1xj5 {
38
+ gap: 32px;
39
+ width: calc(100% - 2rem);
40
+ margin-inline: auto;
36
41
  }
37
42
  ._1vox1xj6 {
38
- width: 100%;
43
+ flex: 1 1 0%;
39
44
  }
40
45
  ._1vox1xj7 {
41
- margin-bottom: 2.5rem;
46
+ margin-bottom: 48px;
42
47
  text-align: center;
43
48
  }
49
+ ._1vox1xj8 {
50
+ height: 100%;
51
+ }
44
52
  ._1vox1xj9 {
45
53
  color: red;
46
54
  font-size: larger;
47
55
  list-style: none;
48
56
  }
49
57
  ._1vox1xja {
50
- border-radius: 1rem;
51
58
  background-color: var(--_1073cm81);
59
+ border-radius: 1rem;
52
60
  padding: 2rem;
53
- border: 1px solid #c9e6f7;
61
+ height: 100%;
54
62
  }
55
63
  ._1vox1xjb {
56
64
  margin-top: 1.3rem;
57
65
  }
66
+ ._1vox1xja ._1vox1xjb {
67
+ margin-top: 16px;
68
+ }
58
69
  ._1vox1xjc {
59
- color: var(--_1073cm85);
70
+ color: #435164;
60
71
  font-family: var(--header-font-family);
61
72
  font-size: 18px;
62
73
  font-weight: 700;
63
74
  margin-bottom: 4px;
64
75
  padding-left: 16px;
76
+ line-height: 1.15;
65
77
  }
66
78
  ._1vox1xjd {
67
79
  -webkit-appearance: none;
68
- border: 1px solid #c9e6f7;
69
- border-radius: 12px;
70
- color: #363636;
71
- font-size: 18px;
80
+ border: 1px solid #F0F0F0;
81
+ border-radius: 4px;
82
+ color: #626E7D;
83
+ font-weight: 500;
72
84
  letter-spacing: .3px;
85
+ line-height: 1.5;
73
86
  outline: 0;
74
- padding: 14px 16px;
75
- font-family: var(--header-font-family);
87
+ padding: 12px 16px;
88
+ transition: border-color 250ms ease, box-shadow 250ms ease, background-color 250ms ease;
76
89
  }
77
90
  ._1vox1xjd:focus {
78
91
  border-color: #1e629a;
@@ -85,6 +98,7 @@
85
98
  }
86
99
  ._1vox1xje {
87
100
  border-color: var(--_1073cm8t) !important;
101
+ transition: border-color 250ms ease, box-shadow 250ms ease, background-color 250ms ease;
88
102
  }
89
103
  ._1vox1xje:focus {
90
104
  border-color: var(--_1073cm8t) !important;
@@ -93,227 +107,310 @@
93
107
  }
94
108
  ._1vox1xjf {
95
109
  color: var(--_1073cm8t);
110
+ display: block;
96
111
  font-size: 13px;
97
112
  font-weight: 500;
98
113
  margin-top: 5px;
99
114
  padding-left: 16px;
100
- display: block;
101
115
  }
102
116
  ._1vox1xjg {
103
117
  position: relative;
104
118
  }
105
119
  ._1vox1xjh {
106
- position: absolute;
107
120
  color: #363636;
108
121
  font-size: 16px;
109
122
  pointer-events: none;
123
+ position: absolute;
110
124
  user-select: none;
111
125
  }
112
126
  ._1vox1xji {
113
- top: 47px;
114
- right: 18px;
127
+ top: 38px;
128
+ right: 16px;
115
129
  }
116
130
  ._1vox1xjj {
117
- padding-left: 29px;
118
- }
119
- ._1vox1xjl {
120
131
  width: 100%;
121
132
  }
122
- ._1vox1xjm > p {
133
+ ._1vox1xjk > p {
123
134
  font-size: 14px;
124
135
  line-height: 1.3;
125
136
  margin-bottom: 10px;
126
137
  letter-spacing: .2px;
127
138
  }
128
- ._1vox1xjn {
129
- display: flex!important;
139
+ ._1vox1xjl {
140
+ display: flex !important;
130
141
  flex-direction: column;
131
142
  align-items: center;
132
143
  }
133
- ._1vox1xjo {
134
- font-weight: bold;
135
- }
136
- ._1vox1xjp {
144
+ ._1vox1xjn {
137
145
  color: var(--_1073cm85);
138
146
  }
139
- ._1vox1xjq {
147
+ ._1vox1xjo {
140
148
  color: var(--_1073cm8c);
141
149
  }
142
- ._1vox1xjr {
150
+ ._1vox1xjp {
143
151
  color: var(--_1073cm8j);
144
152
  }
145
- ._1vox1xjs {
153
+ ._1vox1xjq {
146
154
  color: var(--_1073cm8q);
147
155
  }
148
- ._1vox1xjt {
156
+ ._1vox1xjr {
149
157
  margin-top: 0.5rem;
150
158
  }
151
- ._1vox1xju {
159
+ ._1vox1xjs {
152
160
  padding-inline-start: 0;
153
161
  }
154
- ._1vox1xjv {
162
+ ._1vox1xjt {
155
163
  display: flex;
156
164
  align-items: center;
157
- justify-content: space-between;
158
- width: 100%;
159
165
  background: #ffffff;
160
166
  cursor: pointer;
167
+ justify-content: space-between;
161
168
  text-align: left;
169
+ width: 100%;
162
170
  }
163
- ._1vox1xjw {
164
- width: 20px;
165
- height: 20px;
166
- flex-shrink: 0;
171
+ ._1vox1xju {
167
172
  color: #6b7280;
173
+ flex-shrink: 0;
174
+ height: 20px;
168
175
  transition: transform 200ms ease;
176
+ width: 20px;
169
177
  }
170
- [data-open] ._1vox1xjw {
178
+ [data-open] ._1vox1xju {
171
179
  transform: rotate(180deg);
172
180
  }
173
- ._1vox1xjx {
181
+ ._1vox1xjv {
174
182
  background: #ffffff;
175
183
  border: 1px solid #c9e6f7;
176
- border-radius: 12px;
184
+ border-radius: 4px;
177
185
  box-shadow: 0 8px 24px rgba(0,0,0,0.12);
178
- min-width: var(--button-width);
179
- z-index: 50;
180
186
  margin-block: 4px;
187
+ min-width: var(--button-width);
181
188
  outline: none;
182
189
  padding: 12px;
190
+ z-index: 50;
183
191
  }
184
- ._1vox1xjy {
185
- color: #363636;
186
- cursor: pointer;
187
- font-family: var(--header-font-family);
188
- font-size: 16px;
189
- padding: 8px 16px;
192
+ ._1vox1xjw {
190
193
  border: 1px solid transparent;
191
194
  border-radius: 8px;
195
+ color: #626E7D;
196
+ cursor: pointer;
197
+ padding: 8px 16px;
192
198
  }
193
- ._1vox1xjy[data-selected], ._1vox1xjy[data-focus] {
199
+ ._1vox1xjw[data-selected], ._1vox1xjw[data-focus] {
194
200
  background: #e9f8ff;
195
201
  border-color: #c9e6f7;
196
202
  color: #1e3860;
197
203
  }
198
- ._1vox1xjy[data-selected] {
204
+ ._1vox1xjw[data-selected] {
199
205
  font-weight: 700;
200
206
  }
201
- ._1vox1xjz {
207
+ ._1vox1xjx {
202
208
  width: 100%;
203
- max-width: 320px;
209
+ max-width: 466px;
210
+ display: flex;
204
211
  }
205
- ._1vox1xj10 {
212
+ ._1vox1xjy {
213
+ color: #6b7280;
206
214
  font-size: 13px;
207
215
  font-weight: 400;
208
- color: #6b7280;
209
- margin-left: 6px;
210
216
  letter-spacing: .2px;
217
+ margin-left: 6px;
211
218
  }
212
- ._1vox1xj12 {
213
- animation: _1vox1xj11 120ms linear infinite;
219
+ ._1vox1xj10 {
220
+ animation: _1vox1xjz 120ms linear infinite;
214
221
  filter: blur(0.3px);
215
222
  opacity: 0.85;
216
223
  }
217
- ._1vox1xj13 {
224
+ ._1vox1xj11 {
225
+ background: #ffffff;
226
+ border-radius: 1rem;
227
+ padding: 32px;
218
228
  width: 100%;
219
229
  min-width: 1px;
220
- border-radius: 1rem;
221
- border: 1px solid #c9e6f7;
222
- background: #ffffff;
223
- padding: 24px;
224
230
  }
225
- ._1vox1xj14 {
226
- background: url('https://www.axos.com/images/7FwQ1qLxA0zA7tLWlsqJNr/current.svg') #1e3860 left / cover;
227
- border-radius: 8px;
231
+ ._1vox1xj12 {
232
+ background: url('https://www.axos.com/images/7FwQ1qLxA0zA7tLWlsqJNr/current.svg') #1e3860 left 32% / cover;
233
+ border-radius: 16px;
234
+ box-shadow: 0 4px 20px rgba(0,0,0,0.07);
228
235
  color: #ffffff;
229
236
  display: flex;
230
237
  align-items: center;
231
238
  flex-direction: column;
232
239
  justify-content: center;
233
- margin-bottom: 12px;
234
- padding: 1rem;
240
+ margin-bottom: 13px;
241
+ padding: 32px 24px;
235
242
  text-align: center;
236
- box-shadow: 0 4px 20px rgba(0,0,0,0.07);
243
+ container-type: inline-size;
237
244
  }
238
- ._1vox1xj15 {
239
- font-size: 16px;
240
- font-weight: 600;
245
+ ._1vox1xj13 {
246
+ font-family: var(--header-font-family);
247
+ font-size: clamp(18px,6.78cqw, 24px);
248
+ font-weight: 700;
241
249
  letter-spacing: .5px;
250
+ line-height: 1.15;
242
251
  margin-top: 3px;
243
- font-family: var(--header-font-family);
244
252
  }
245
- ._1vox1xj16 {
246
- font-size: 2.5rem;
247
- font-weight: 700;
253
+ ._1vox1xj14 {
254
+ font: 800 56px / 1.15 var(--header-font-family);
255
+ font-variant-numeric: tabular-nums;
248
256
  letter-spacing: -1px;
249
- line-height: 1.1;
257
+ margin-top: 10px;
250
258
  transition: color 200ms ease;
251
- font-variant-numeric: tabular-nums;
252
- font-family: var(--header-font-family);
253
- margin-top: 16px;
259
+ font-size: clamp(38px, 15.82cqw, 56px);
260
+ text-shadow: 1px 1px 4px #1e3860;
254
261
  }
255
- ._1vox1xj17 {
262
+ ._1vox1xj15 {
256
263
  display: flex;
257
- justify-content: space-between;
258
264
  align-items: center;
259
- padding: 11px 0;
265
+ justify-content: space-between;
266
+ padding-block: 12px;
260
267
  }
261
- ._1vox1xj17 + ._1vox1xj17 {
268
+ ._1vox1xj15 + ._1vox1xj15 {
262
269
  border-top: 1px solid #F3F4F6;
270
+ padding-bottom: 0px;
263
271
  }
264
- ._1vox1xj18 {
265
- font-size: 15px;
266
- font-weight: 500;
267
- color: #6b7280;
268
- }
269
- ._1vox1xj19 {
270
- font-size: 16px;
272
+ ._1vox1xj16 {
273
+ color: var(--_1073cm85);
274
+ font-size: 18px;
271
275
  font-weight: 700;
276
+ font-family: var(--header-font-family);
277
+ line-height: 1.15;
278
+ }
279
+ ._1vox1xj17 {
272
280
  color: var(--_1073cm85);
273
281
  font-variant-numeric: tabular-nums;
282
+ font-weight: 400;
283
+ font-family: var(--header-font-family);
274
284
  }
275
285
  ._1vox1xj1a {
286
+ display: flex;
287
+ align-items: center;
288
+ background: transparent;
289
+ border: 0;
290
+ color: var(--_1073cm85);
291
+ cursor: pointer;
292
+ gap: 8px;
293
+ padding: 0 0 0 8px;
294
+ }
295
+ ._1vox1xj1b {
296
+ font-size: 16px;
297
+ line-height: 1.15;
298
+ }
299
+ ._1vox1xj1c {
300
+ border-top: 1px solid var(--_1073cm85);
301
+ margin-top: 24px;
302
+ padding-top: 24px;
303
+ }
304
+ ._1vox1xj1d {
305
+ display: grid;
306
+ gap: 24px;
307
+ grid-template-columns: repeat(2, minmax(0, 1fr));
308
+ }
309
+ ._1vox1xj1e {
310
+ display: grid;
311
+ gap: 24px;
312
+ }
313
+ ._1vox1xj1f {
314
+ display: grid;
315
+ gap: 3px;
316
+ }
317
+ ._1vox1xj1g {
318
+ color: var(--_1073cm83);
319
+ font-family: var(--main-font-family);
320
+ font-size: 16px;
321
+ line-height: 1.15;
322
+ }
323
+ ._1vox1xj1h {
324
+ color: var(--_1073cm83);
325
+ line-height: 1.5;
326
+ }
327
+ ._1vox1xj1i {
276
328
  padding: 2rem;
277
329
  width: 100%;
278
330
  }
279
- ._1vox1xj1b {
331
+ ._1vox1xj1j {
280
332
  margin-bottom: 1rem;
281
333
  }
282
- @media screen and (max-width:768px) {
283
- ._1vox1xj5 {
284
- flex-wrap: wrap;
285
- justify-content: center;
334
+ @media screen and (min-width:604px) {
335
+ ._1vox1xj5 ._1vox1xj5 {
336
+ width: min(466px, calc(100% - 4rem));
286
337
  }
287
- ._1vox1xj7 {
288
- margin-bottom: 1.5rem;
338
+ }
339
+ @media screen and (min-width:931px) {
340
+ ._1vox1xj5 ._1vox1xj5 {
341
+ width: min(1136px, calc(100% - 4rem));
289
342
  }
290
343
  }
291
- @media screen and (min-width:1024px) {
344
+ @media screen and (max-width:930px) {
345
+ ._1vox1xj5 {
346
+ flex-direction: column;
347
+ align-items: stretch !important;
348
+ }
292
349
  ._1vox1xj5 ._1vox1xj5 {
293
- width: min(900px, calc(100% - 4rem));
350
+ gap: 24px;
351
+ }
352
+ ._1vox1xjx {
353
+ max-width: none;
354
+ }
355
+ ._1vox1xj1c {
356
+ margin-top: 16px;
357
+ padding-top: 16px;
358
+ }
359
+ ._1vox1xj1d {
360
+ grid-template-columns: 1fr;
361
+ gap: 16px;
362
+ }
363
+ ._1vox1xj1e {
364
+ gap: 16px;
365
+ }
366
+ }
367
+ @media screen and (max-width:768px) {
368
+ ._1vox1xj5 {
369
+ padding-block: 32px;
370
+ }
371
+ ._1vox1xj7 {
372
+ margin-bottom: 32px;
294
373
  }
295
374
  }
296
375
  @media screen and (max-width:603px) {
297
376
  ._1vox1xja {
298
- padding: 1rem;
377
+ padding: 1.5rem;
299
378
  }
300
379
  ._1vox1xjc {
380
+ font-size: 14px;
381
+ }
382
+ ._1vox1xjd {
301
383
  font-size: 1rem;
302
384
  }
303
385
  ._1vox1xji {
304
- top: 43px;
386
+ top: 33px;
387
+ }
388
+ ._1vox1xj11 {
389
+ padding: 1.5rem;
390
+ }
391
+ ._1vox1xj16 {
392
+ font-size: 16px;
393
+ }
394
+ ._1vox1xj17 {
395
+ font-size: 16px;
396
+ }
397
+ ._1vox1xj18 {
398
+ max-width: 127px;
399
+ height: auto;
305
400
  }
306
401
  }
307
- @media screen and (max-width:1023px) {
308
- ._1vox1xjd {
309
- font-size: 1rem;
402
+ @media screen and (max-width:316px) {
403
+ ._1vox1xji {
404
+ top: 49px;
310
405
  }
311
- ._1vox1xjm {
406
+ }
407
+ @media screen and (max-width:1023px) {
408
+ ._1vox1xjk {
312
409
  margin-top: 1rem;
313
410
  }
314
411
  }
315
412
  @media screen and (max-width:1124px) {
316
- ._1vox1xjn {
413
+ ._1vox1xjl {
317
414
  margin-top: 2rem;
318
415
  }
319
416
  }