@sc-360-v2/storefront-cms-library 0.3.8 → 0.3.10

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/dist/profile.scss CHANGED
@@ -22,41 +22,465 @@
22
22
  & > .wrapper {
23
23
  width: 100%;
24
24
  height: 100%;
25
- display: flex;
26
- align-items: center;
27
- justify-content: center;
25
+ // display: flex;
26
+ // align-items: center;
27
+ // justify-content: center;
28
+ }
29
+
30
+ &[data-widget-border="true"] {
31
+ .profile__section {
32
+ border-color: var(
33
+ --_ctm-mob-dn-pe-wt-br-cr,
34
+ var(--_ctm-tab-dn-pe-wt-br-cr, var(--_ctm-dn-pe-wt-br-cr))
35
+ );
36
+ border-style: var(
37
+ --_ctm-mob-dn-pe-wt-br-se,
38
+ var(--_ctm-tab-dn-pe-wt-br-se, var(--_ctm-dn-pe-wt-br-se))
39
+ );
40
+ border-width: var(
41
+ --_ctm-mob-dn-pe-wt-br-wh,
42
+ var(--_ctm-tab-dn-pe-wt-br-wh, var(--_ctm-dn-pe-wt-br-wh))
43
+ );
44
+ }
28
45
  }
29
46
 
30
- &[data-show-shadow="false"] {
47
+ &[data-widget-shadow="false"] {
31
48
  --_show-shadow: none;
32
49
  }
33
50
 
34
51
  .profile__section {
52
+ cursor: pointer;
35
53
  display: flex;
36
54
  align-items: center;
37
- gap: 8px;
38
- svg {
39
- path {
40
- stroke: var(
41
- --_ctm-mob-dn-ct-in-in-cr,
42
- var(--_ctm-tab-dn-ct-in-in-cr, var(--_ctm-dn-ct-in-in-cr))
55
+ justify-content: center;
56
+ // gap: var(prepareMediaVariable(--_ctm-dn-pe-wt-in-gp));
57
+ gap: 7px;
58
+ width: 100%;
59
+ height: 100%;
60
+ padding: var(--_ctm-mob-lt-pg, var(--_ctm-tab-lt-pg, var(--_ctm-lt-pg)));
61
+ background-color: var(
62
+ --_sf-hr-bd-cr,
63
+ var(--_ctm-mob-dn-pe-wt-bd-cr, var(--_ctm-tab-dn-pe-wt-bd-cr, var(--_ctm-dn-pe-wt-bd-cr)))
64
+ );
65
+ border-radius: var(
66
+ --_sf-hr-br-br,
67
+ var(--_ctm-mob-dn-pe-wt-br-rs, var(--_ctm-tab-dn-pe-wt-br-rs, var(--_ctm-dn-pe-wt-br-rs)))
68
+ );
69
+ box-shadow: var(
70
+ --_show-shadow,
71
+ var(--_ctm-mob-dn-pe-wt-sw-ae, var(--_ctm-tab-dn-pe-wt-sw-ae, var(--_ctm-dn-pe-wt-sw-ae)))
72
+ var(--_ctm-mob-dn-pe-wt-sw-br, var(--_ctm-tab-dn-pe-wt-sw-br, var(--_ctm-dn-pe-wt-sw-br)))
73
+ var(--_ctm-mob-dn-pe-wt-sw-sd, var(--_ctm-tab-dn-pe-wt-sw-sd, var(--_ctm-dn-pe-wt-sw-sd)))
74
+ var(--_ctm-mob-dn-pe-wt-sw-cr, var(--_ctm-tab-dn-pe-wt-sw-cr, var(--_ctm-dn-pe-wt-sw-cr)))
75
+ );
76
+
77
+ .profile__avatar {
78
+ svg {
79
+ // width: prepareMediaVariable(--_ctm-dn-pe-ar-in-se);
80
+ // height: prepareMediaVariable(--_ctm-dn-pe-ar-in-se);
81
+ width: var(--_ctm-dn-pe-ar-in-se, var(--_ctm-dn-pe-ar-in-se, var(--_ctm-dn-pe-ar-in-se)));
82
+ height: var(
83
+ --_ctm-dn-pe-ar-in-se,
84
+ var(--_ctm-dn-pe-ar-in-se, var(--_ctm-dn-pe-ar-in-se))
43
85
  );
86
+
87
+ path {
88
+ stroke: var(
89
+ --_ctm-mob-dn-pe-ar-in-c1,
90
+ var(--_ctm-tab-dn-pe-ar-cr, var(--_ctm-dn-pe-ar-in-c1))
91
+ );
92
+ }
93
+ }
94
+ }
95
+
96
+ .icon {
97
+ display: flex;
98
+ align-self: prepareMediaVariable(--_ctm-dn-pe-wt-in-vl-at);
99
+
100
+ svg {
101
+ width: prepareMediaVariable(--_ctm-dn-pe-wt-in-se);
102
+ height: prepareMediaVariable(--_ctm-dn-pe-wt-in-se);
103
+
104
+ path {
105
+ stroke: prepareMediaVariable(--_ctm-dn-pe-wt-in-c1);
106
+ }
44
107
  }
45
108
  }
109
+ // svg {
110
+ // path {
111
+ // stroke: var(
112
+ // --_ctm-mob-dn-ct-in-in-cr,
113
+ // var(--_ctm-tab-dn-ct-in-in-cr, var(--_ctm-dn-ct-in-in-cr))
114
+ // );
115
+ // }
116
+ // }
117
+
46
118
  .profile__content {
47
- font-size: 14px;
119
+ // font-size: 14px;
48
120
  display: flex;
49
121
  flex-direction: column;
50
- list-style: none;
51
- line-height: 18px;
52
- color: #fff;
53
-
122
+ // list-style: none;
123
+ // line-height: 18px;
124
+ color: var(--_ctm-mob-dn-pe-wt-cr, var(--_ctm-tab-dn-pe-wt-cr, var(--_ctm-dn-pe-wt-cr)));
125
+ font-family: var(
126
+ --_sf-hr-ff,
127
+ var(--_ctm-mob-dn-pe-wt-ft-fy, var(--_ctm-tab-dn-pe-wt-ft-fy, var(--_ctm-dn-pe-wt-ft-fy)))
128
+ );
129
+ font-size: var(
130
+ --_ctm-mob-dn-pe-wt-ft-se,
131
+ var(--_ctm-tab-dn-pe-wt-ft-se, var(--_ctm-dn-pe-wt-ft-se))
132
+ );
133
+ font-weight: var(
134
+ --_ctm-mob-dn-pe-wt-ft-wt,
135
+ var(--_ctm-tab-dn-pe-wt-ft-wt, var(--_ctm-dn-pe-wt-ft-wt))
136
+ );
137
+ font-style: var(
138
+ --_ctm-mob-dn-pe-wt-ft-se-ic,
139
+ var(--_ctm-tab-dn-pe-wt-ft-se-ic, var(--_ctm-dn-pe-wt-ft-se-ic))
140
+ );
141
+ text-align: var(
142
+ --_ctm-mob-dn-pe-wt-tt-an,
143
+ var(--_ctm-tab-dn-pe-wt-tt-an, var(--_ctm-dn-pe-wt-tt-an))
144
+ );
145
+ letter-spacing: var(
146
+ --_ctm-mob-dn-pe-wt-lr-sg,
147
+ var(--_ctm-tab-dn-pe-wt-lr-sg, var(--_ctm-dn-pe-wt-lr-sg))
148
+ );
149
+ line-height: var(
150
+ --_ctm-mob-dn-pe-wt-le-ht,
151
+ var(--_ctm-tab-dn-pe-wt-le-ht, var(--_ctm-dn-pe-wt-le-ht))
152
+ );
153
+ text-decoration: var(
154
+ --_ctm-mob-dn-pe-wt-ue,
155
+ var(--_ctm-tab-dn-pe-wt-ue, var(--_ctm-dn-pe-wt-ue))
156
+ );
54
157
  .profile__icon {
55
- font-weight: 600;
56
- font-size: 16px;
158
+ // font-weight: 600;
159
+ // font-size: 16px;
160
+ color: var(
161
+ --_ctm-mob-dn-pe-wt-cr-dc,
162
+ var(--_ctm-tab-dn-pe-wt-cr-dc, var(--_ctm-dn-pe-wt-cr-dc))
163
+ );
164
+ font-family: var(
165
+ --_sf-hr-ff,
166
+ var(
167
+ --_ctm-mob-dn-pe-wt-ft-fy-dc,
168
+ var(--_ctm-tab-dn-pe-wt-ft-fy-dc, var(--_ctm-dn-pe-wt-ft-fy-dc))
169
+ )
170
+ );
171
+ font-size: var(
172
+ --_ctm-mob-dn-pe-wt-ft-se-dc,
173
+ var(--_ctm-tab-dn-pe-wt-ft-se-dc, var(--_ctm-dn-pe-wt-ft-se-dc))
174
+ );
175
+ font-weight: var(
176
+ --_ctm-mob-dn-pe-wt-ft-wt-dc,
177
+ var(--_ctm-tab-dn-pe-wt-ft-wt-dc, var(--_ctm-dn-pe-wt-ft-wt-dc))
178
+ );
179
+ font-style: var(
180
+ --_ctm-mob-dn-pe-wt-ft-se-ic-dc,
181
+ var(--_ctm-tab-dn-pe-wt-ft-se-ic-dc, var(--_ctm-dn-pe-wt-ft-se-ic-dc))
182
+ );
183
+ text-align: var(
184
+ --_ctm-mob-dn-pe-wt-tt-an-dc,
185
+ var(--_ctm-tab-dn-pe-wt-tt-an-dc, var(--_ctm-dn-pe-wt-tt-an-dc))
186
+ );
187
+ letter-spacing: var(
188
+ --_ctm-mob-dn-pe-wt-lr-sg-dc,
189
+ var(--_ctm-tab-dn-pe-wt-lr-sg-dc, var(--_ctm-dn-pe-wt-lr-sg-dc))
190
+ );
191
+ line-height: var(
192
+ --_ctm-mob-dn-pe-wt-le-ht-dc,
193
+ var(--_ctm-tab-dn-pe-wt-le-ht-dc, var(--_ctm-dn-pe-wt-le-ht-dc))
194
+ );
195
+ text-decoration: var(
196
+ --_ctm-mob-dn-pe-wt-ue-dc,
197
+ var(--_ctm-tab-dn-pe-wt-ue-dc, var(--_ctm-dn-pe-wt-ue-dc))
198
+ );
57
199
  }
58
200
  }
59
201
  }
202
+ .add_order_menu {
203
+ position: absolute;
204
+ top: 83%;
205
+ left: 0;
206
+ width: 240px;
207
+ background: #fff;
208
+ border-radius: 10px;
209
+ box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
210
+ padding: 8px 0;
211
+ z-index: 10;
212
+ // background-color: var(
213
+ // --_sf-hr-bd-cr,
214
+ // var(
215
+ // --_ctm-mob-dn-pe-wt-bd-cr,
216
+ // var(--_ctm-tab-dn-pe-wt-bd-cr, var(--_ctm-dn-pe-wt-bd-cr))
217
+ // )
218
+ // );
219
+ // border-radius: var(
220
+ // --_sf-hr-br-br,
221
+ // var(
222
+ // --_ctm-mob-dn-pe-wt-br-rs,
223
+ // var(--_ctm-tab-dn-pe-wt-br-rs, var(--_ctm-dn-pe-wt-br-rs))
224
+ // )
225
+ // );
226
+ }
227
+
228
+ .add_order_item {
229
+ padding: 12px 20px;
230
+ // font-size: 15px;
231
+ // font-weight: 500;
232
+ // color: #1f2937;
233
+ display: flex;
234
+ align-items: center;
235
+ // gap: 10px;
236
+ transition: background 0.2s;
237
+ cursor: pointer;
238
+ &[data-dropdownItems-default-border="true"] {
239
+ border-color: var(
240
+ --_sf-hr-br-cr,
241
+ var(
242
+ --_ctm-mob-dn-dn-is-dt-se-br-cr,
243
+ var(--_ctm-tab-dn-dn-is-dt-se-br-cr, var(--_ctm-dn-dn-is-dt-se-br-cr))
244
+ )
245
+ );
246
+ border-style: var(
247
+ --_sf-hr-br-st,
248
+ var(
249
+ --_ctm-mob-dn-dn-is-dt-se-br-se,
250
+ var(--_ctm-tab-dn-dn-is-dt-se-br-se, var(--_ctm-dn-dn-is-dt-se-br-se))
251
+ )
252
+ );
253
+ border-width: var(
254
+ --_sf-hr-br-wt,
255
+ var(
256
+ --_ctm-mob-dn-dn-is-dt-se-br-wh,
257
+ var(--_ctm-tab-dn-dn-is-dt-se-br-wh, var(--_ctm-dn-dn-is-dt-se-br-wh))
258
+ )
259
+ );
260
+ }
261
+ &[data-dropdownItems-default-shadow="true"] {
262
+ box-shadow: var(
263
+ --_show-shadow-clear-all,
264
+ var(
265
+ --_ctm-mob-dn-dn-is-dt-se-sw-ae,
266
+ var(--_ctm-tab-dn-dn-is-dt-se-sw-ae, var(--_ctm-dn-dn-is-dt-se-sw-ae))
267
+ )
268
+ var(
269
+ --_ctm-mob-dn-dn-is-dt-se-sw-br,
270
+ var(--_ctm-tab-dn-dn-is-dt-se-sw-br, var(--_ctm-dn-dn-is-dt-se-sw-br))
271
+ )
272
+ var(
273
+ --_ctm-mob-dn-dn-is-dt-se-sw-sd,
274
+ var(--_ctm-tab-dn-dn-is-dt-se-sw-sd, var(--_ctm-dn-dn-is-dt-se-sw-sd))
275
+ )
276
+ var(
277
+ --_ctm-mob-dn-dn-is-dt-se-sw-cr,
278
+ var(--_ctm-tab-dn-dn-is-dt-se-sw-cr, var(--_ctm-dn-dn-is-dt-se-sw-cr))
279
+ )
280
+ );
281
+ }
282
+ // background-color: #f5f7ff;
283
+ // color: #3b49df;
284
+
285
+ background-color: var(
286
+ --_ctm-mob-dn-dn-is-dt-se-bd-cr,
287
+ var(--_ctm-tab-dn-dn-is-dt-se-bd-cr, var(--_ctm-dn-dn-is-dt-se-bd-cr))
288
+ );
289
+ border-radius: var(
290
+ --_ctm-mob-dn-dn-is-dt-se-br-rs,
291
+ var(--_ctm-tab-dn-dn-is-dt-se-br-rs, var(--_ctm-dn-dn-is-dt-se-br-rs))
292
+ );
293
+ box-shadow: var(
294
+ --_show-shadow-clear-all,
295
+ var(
296
+ --_ctm-mob-dn-dn-is-dt-se-sw-ae,
297
+ var(--_ctm-tab-dn-dn-is-dt-se-sw-ae, var(--_ctm-dn-dn-is-dt-se-sw-ae))
298
+ )
299
+ var(
300
+ --_ctm-mob-dn-dn-is-dt-se-sw-br,
301
+ var(--_ctm-tab-dn-dn-is-dt-se-sw-br, var(--_ctm-dn-dn-is-dt-se-sw-br))
302
+ )
303
+ var(
304
+ --_ctm-mob-dn-dn-is-dt-se-sw-sd,
305
+ var(--_ctm-tab-dn-dn-is-dt-se-sw-sd, var(--_ctm-dn-dn-is-dt-se-sw-sd))
306
+ )
307
+ var(
308
+ --_ctm-mob-dn-dn-is-dt-se-sw-cr,
309
+ var(--_ctm-tab-dn-dn-is-dt-se-sw-cr, var(--_ctm-dn-dn-is-dt-se-sw-cr))
310
+ )
311
+ );
312
+ color: var(
313
+ --_ctm-mob-dn-dn-is-dt-se-cr,
314
+ var(--_ctm-tab-dn-dn-is-dt-se-cr, var(--_ctm-dn-dn-is-dt-se-cr))
315
+ );
316
+
317
+ font-family: var(
318
+ --_sf-hr-ff,
319
+ var(
320
+ --_ctm-mob-dn-dn-is-dt-se-ft-fy,
321
+ var(--_ctm-tab-dn-dn-is-dt-se-ft-fy, var(--_ctm-dn-dn-is-dt-se-ft-fy))
322
+ )
323
+ );
324
+
325
+ font-size: var(
326
+ --_ctm-mob-dn-dn-is-dt-se-ft-se,
327
+ var(--_ctm-tab-dn-dn-is-dt-se-ft-se, var(--_ctm-dn-dn-is-dt-se-ft-se))
328
+ );
329
+
330
+ font-weight: var(
331
+ --_ctm-mob-dn-dn-is-dt-se-ft-wt,
332
+ var(--_ctm-tab-dn-dn-is-dt-se-ft-wt, var(--_ctm-dn-dn-is-dt-se-ft-wt))
333
+ );
334
+
335
+ font-style: var(
336
+ --_ctm-mob-dn-dn-is-dt-se-ft-se-ic,
337
+ var(--_ctm-tab-dn-dn-is-dt-se-ft-se-ic, var(--_ctm-dn-dn-is-dt-se-ft-se-ic))
338
+ );
339
+
340
+ text-align: var(
341
+ --_ctm-mob-dn-dn-is-dt-se-tt-an,
342
+ var(--_ctm-tab-dn-dn-is-dt-se-tt-an, var(--_ctm-dn-dn-is-dt-se-tt-an))
343
+ );
344
+
345
+ letter-spacing: var(
346
+ --_ctm-mob-dn-dn-is-dt-se-lr-sg,
347
+ var(--_ctm-tab-dn-dn-is-dt-se-lr-sg, var(--_ctm-dn-dn-is-dt-se-lr-sg))
348
+ );
349
+
350
+ line-height: var(
351
+ --_ctm-mob-dn-dn-is-dt-se-le-ht,
352
+ var(--_ctm-tab-dn-dn-is-dt-se-le-ht, var(--_ctm-dn-dn-is-dt-se-le-ht))
353
+ );
354
+
355
+ text-decoration: var(
356
+ --_ctm-mob-dn-dn-is-dt-se-ue,
357
+ var(--_ctm-tab-dn-dn-is-dt-se-ue, var(--_ctm-dn-dn-is-dt-se-ue))
358
+ );
359
+
360
+ &:hover {
361
+ &[data-dropdownItems-hover-border="true"] {
362
+ border-color: var(
363
+ --_sf-hr-br-cr,
364
+ var(
365
+ --_ctm-mob-dn-dn-is-dt-se-br-cr,
366
+ var(--_ctm-tab-dn-dn-is-hr-se-br-cr, var(--_ctm-dn-dn-is-hr-se-br-cr))
367
+ )
368
+ );
369
+ border-style: var(
370
+ --_sf-hr-br-st,
371
+ var(
372
+ --_ctm-mob-dn-dn-is-hr-se-br-se,
373
+ var(--_ctm-tab-dn-dn-is-hr-se-br-se, var(--_ctm-dn-dn-is-hr-se-br-se))
374
+ )
375
+ );
376
+ border-width: var(
377
+ --_sf-hr-br-wt,
378
+ var(
379
+ --_ctm-mob-dn-dn-is-hr-se-br-wh,
380
+ var(--_ctm-tab-dn-dn-is-hr-se-br-wh, var(--_ctm-dn-dn-is-hr-se-br-wh))
381
+ )
382
+ );
383
+ }
384
+ &[data-dropdownItems-hover-shadow="true"] {
385
+ box-shadow: var(
386
+ --_show-shadow-clear-all,
387
+ var(
388
+ --_ctm-mob-dn-dn-is-hr-se-sw-ae,
389
+ var(--_ctm-tab-dn-dn-is-hr-se-sw-ae, var(--_ctm-dn-dn-is-hr-se-sw-ae))
390
+ )
391
+ var(
392
+ --_ctm-mob-dn-dn-is-hr-se-sw-br,
393
+ var(--_ctm-tab-dn-dn-is-hr-se-sw-br, var(--_ctm-dn-dn-is-hr-se-sw-br))
394
+ )
395
+ var(
396
+ --_ctm-mob-dn-dn-is-hr-se-sw-sd,
397
+ var(--_ctm-tab-dn-dn-is-hr-se-sw-sd, var(--_ctm-dn-dn-is-hr-se-sw-sd))
398
+ )
399
+ var(
400
+ --_ctm-mob-dn-dn-is-hr-se-sw-cr,
401
+ var(--_ctm-tab-dn-dn-is-hr-se-sw-cr, var(--_ctm-dn-dn-is-hr-se-sw-cr))
402
+ )
403
+ );
404
+ }
405
+ background-color: #f5f7ff;
406
+ color: #3b49df;
407
+
408
+ background-color: var(
409
+ --_ctm-mob-dn-dn-is-hr-se-bd-cr,
410
+ var(--_ctm-tab-dn-dn-is-hr-se-bd-cr, var(--_ctm-dn-dn-is-hr-se-bd-cr))
411
+ );
412
+ border-radius: var(
413
+ --_ctm-mob-dn-dn-is-hr-se-br-rs,
414
+ var(--_ctm-tab-dn-dn-is-hr-se-br-rs, var(--_ctm-dn-dn-is-hr-se-br-rs))
415
+ );
416
+ box-shadow: var(
417
+ --_show-shadow-clear-all,
418
+ var(
419
+ --_ctm-mob-dn-dn-is-hr-se-sw-ae,
420
+ var(--_ctm-tab-dn-dn-is-hr-se-sw-ae, var(--_ctm-dn-dn-is-hr-se-sw-ae))
421
+ )
422
+ var(
423
+ --_ctm-mob-dn-dn-is-hr-se-sw-br,
424
+ var(--_ctm-tab-dn-dn-is-hr-se-sw-br, var(--_ctm-dn-dn-is-hr-se-sw-br))
425
+ )
426
+ var(
427
+ --_ctm-mob-dn-dn-is-hr-se-sw-sd,
428
+ var(--_ctm-tab-dn-dn-is-hr-se-sw-sd, var(--_ctm-dn-dn-is-hr-se-sw-sd))
429
+ )
430
+ var(
431
+ --_ctm-mob-dn-dn-is-hr-se-sw-cr,
432
+ var(--_ctm-tab-dn-dn-is-hr-se-sw-cr, var(--_ctm-dn-dn-is-hr-se-sw-cr))
433
+ )
434
+ );
435
+ color: var(--_ctm-mob-dn-pe-wt-cr, var(--_ctm-tab-dn-pe-wt-cr, var(--_ctm-dn-pe-wt-cr)));
436
+
437
+ font-family: var(
438
+ --_sf-hr-ff,
439
+ var(--_ctm-mob-dn-pe-wt-ft-fy, var(--_ctm-tab-dn-pe-wt-ft-fy, var(--_ctm-dn-pe-wt-ft-fy)))
440
+ );
441
+
442
+ font-size: var(
443
+ --_ctm-mob-dn-pe-wt-ft-se,
444
+ var(--_ctm-tab-dn-pe-wt-ft-se, var(--_ctm-dn-pe-wt-ft-se))
445
+ );
446
+
447
+ font-weight: var(
448
+ --_ctm-mob-dn-pe-wt-ft-wt,
449
+ var(--_ctm-tab-dn-pe-wt-ft-wt, var(--_ctm-dn-pe-wt-ft-wt))
450
+ );
451
+
452
+ font-style: var(
453
+ --_ctm-mob-dn-pe-wt-ft-se-ic,
454
+ var(--_ctm-tab-dn-pe-wt-ft-se-ic, var(--_ctm-dn-pe-wt-ft-se-ic))
455
+ );
456
+
457
+ text-align: var(
458
+ --_ctm-mob-dn-pe-wt-tt-an,
459
+ var(--_ctm-tab-dn-pe-wt-tt-an, var(--_ctm-dn-pe-wt-tt-an))
460
+ );
461
+
462
+ letter-spacing: var(
463
+ --_ctm-mob-dn-pe-wt-lr-sg,
464
+ var(--_ctm-tab-dn-pe-wt-lr-sg, var(--_ctm-dn-pe-wt-lr-sg))
465
+ );
466
+
467
+ line-height: var(
468
+ --_ctm-mob-dn-pe-wt-le-ht,
469
+ var(--_ctm-tab-dn-pe-wt-le-ht, var(--_ctm-dn-pe-wt-le-ht))
470
+ );
471
+
472
+ text-decoration: var(
473
+ --_ctm-mob-dn-pe-wt-ue,
474
+ var(--_ctm-tab-dn-pe-wt-ue, var(--_ctm-dn-pe-wt-ue))
475
+ );
476
+ }
477
+
478
+ .icon {
479
+ font-size: 18px;
480
+ display: flex;
481
+ align-items: center;
482
+ }
483
+ }
60
484
 
61
485
  // .icon {
62
486
  // width: 50px;