23
23
height : auto;
24
24
}
25
25
26
- .vnb__brand-image-wrapper {
27
- padding-left : 10px ;
26
+ .vnb__menu-options {
27
+ display : flex;
28
+ flex-direction : row;
29
+ align-items : center;
28
30
}
29
- .vnb__brand-image-wrapper__link__image {
30
- max-height : 30px ;
31
+ .vnb__menu-options--left {
32
+ margin-right : auto;
33
+ justify-content : flex-start;
34
+ padding-left : 30px ;
35
+ }
36
+ .vnb__menu-options--right {
37
+ margin-left : auto;
38
+ justify-content : flex-end;
39
+ padding-right : 10px ;
40
+ }
41
+ .vnb__menu-options__option : not (: last-child ) {
42
+ margin-right : 20px ;
31
43
}
32
44
33
- .vnb-image {
34
- max-width : 100% ;
35
- height : auto;
45
+ .vnb__collapse-button {
46
+ cursor : pointer;
47
+ border : 0 ;
48
+ background : transparent;
49
+ margin-right : 10px ;
50
+ }
51
+ .vnb__collapse-button : hover {
52
+ opacity : 0.75 ;
53
+ }
54
+ .vnb__collapse-button__image {
55
+ max-height : 30px ;
56
+ max-width : 30px ;
36
57
}
37
58
38
59
.vnb__popup {
174
195
height : auto;
175
196
}
176
197
177
- .vnb__menu-options {
178
- display : flex;
179
- flex-direction : row;
180
- align-items : center;
181
- }
182
- .vnb__menu-options--left {
183
- margin-right : auto;
184
- justify-content : flex-start;
185
- padding-left : 30px ;
186
- }
187
- .vnb__menu-options--right {
188
- margin-left : auto;
189
- justify-content : flex-end;
190
- padding-right : 10px ;
198
+ .vnb__brand-image-wrapper {
199
+ padding-left : 10px ;
191
200
}
192
- .vnb__menu-options__option : not ( : last-child ) {
193
- margin-right : 20 px ;
201
+ .vnb__brand-image-wrapper__link__image {
202
+ max-height : 30 px ;
194
203
}
195
204
196
- .vnb__collapse-button {
197
- cursor : pointer;
198
- border : 0 ;
199
- background : transparent;
200
- margin-right : 10px ;
201
- }
202
- .vnb__collapse-button : hover {
203
- opacity : 0.75 ;
204
- }
205
- .vnb__collapse-button__image {
206
- max-height : 30px ;
207
- max-width : 30px ;
205
+ .vnb-image {
206
+ max-width : 100% ;
207
+ height : auto;
208
208
}
209
209
210
210
.vnb__menu-options__option__link {
342
342
width : 30px ;
343
343
}
344
344
345
- .tippy-box [data-animation = shift-away ][data-state = hidden ] {
345
+ .tippy-box [data-animation = scale ][data-placement ^= top ] {
346
+ transform-origin : bottom;
347
+ }
348
+
349
+ .tippy-box [data-animation = scale ][data-placement ^= bottom ] {
350
+ transform-origin : top;
351
+ }
352
+
353
+ .tippy-box [data-animation = scale ][data-placement ^= left ] {
354
+ transform-origin : right;
355
+ }
356
+
357
+ .tippy-box [data-animation = scale ][data-placement ^= right ] {
358
+ transform-origin : left;
359
+ }
360
+
361
+ .tippy-box [data-animation = scale ][data-state = hidden ] {
362
+ transform : scale (0.5 );
346
363
opacity : 0 ;
347
364
}
348
365
349
- .tippy-box [data-animation = shift-away ][data-state = hidden ][ data-placement ^= top ] {
350
- transform : translateY ( 10 px ) ;
366
+ .tippy-box [data-animation = shift-toward ][data-state = hidden ] {
367
+ opacity : 0 ;
351
368
}
352
369
353
- .tippy-box [data-animation = shift-away ][data-state = hidden ][data-placement ^= bottom ] {
370
+ .tippy-box [data-animation = shift-toward ][data-state = hidden ][data-placement ^= top ] {
354
371
transform : translateY (-10px );
355
372
}
356
373
357
- .tippy-box [data-animation = shift-away ][data-state = hidden ][data-placement ^= left ] {
358
- transform : translateX (10px );
374
+ .tippy-box [data-animation = shift-toward ][data-state = hidden ][data-placement ^= bottom ] {
375
+ transform : translateY (10px );
359
376
}
360
377
361
- .tippy-box [data-animation = shift-away ][data-state = hidden ][data-placement ^= right ] {
378
+ .tippy-box [data-animation = shift-toward ][data-state = hidden ][data-placement ^= left ] {
362
379
transform : translateX (-10px );
363
380
}
364
381
382
+ .tippy-box [data-animation = shift-toward ][data-state = hidden ][data-placement ^= right ] {
383
+ transform : translateX (10px );
384
+ }
385
+
365
386
.tippy-box [data-animation = perspective ][data-placement ^= top ] {
366
387
transform-origin : bottom;
367
388
}
414
435
opacity : 0 ;
415
436
}
416
437
417
- .tippy-box [data-animation = shift-toward ][data-state = hidden ] {
418
- opacity : 0 ;
419
- }
420
-
421
- .tippy-box [data-animation = shift-toward ][data-state = hidden ][data-placement ^= top ] {
422
- transform : translateY (-10px );
423
- }
424
-
425
- .tippy-box [data-animation = shift-toward ][data-state = hidden ][data-placement ^= bottom ] {
426
- transform : translateY (10px );
427
- }
428
-
429
- .tippy-box [data-animation = shift-toward ][data-state = hidden ][data-placement ^= left ] {
430
- transform : translateX (-10px );
431
- }
432
-
433
- .tippy-box [data-animation = shift-toward ][data-state = hidden ][data-placement ^= right ] {
434
- transform : translateX (10px );
435
- }
436
-
437
- .tippy-box [data-animation = scale ][data-placement ^= top ] {
438
- transform-origin : bottom;
439
- }
440
-
441
- .tippy-box [data-animation = scale ][data-placement ^= bottom ] {
442
- transform-origin : top;
443
- }
444
-
445
- .tippy-box [data-animation = scale ][data-placement ^= left ] {
446
- transform-origin : right;
447
- }
448
-
449
- .tippy-box [data-animation = scale ][data-placement ^= right ] {
450
- transform-origin : left;
451
- }
452
-
453
- .tippy-box [data-animation = scale ][data-state = hidden ] {
454
- transform : scale (0.5 );
455
- opacity : 0 ;
456
- }
457
-
458
438
.tippy-box [data-theme ~= light ] {
459
439
color : # 26323d ;
460
440
box-shadow : 0 0 20px 4px rgba (154 , 161 , 177 , 0.15 ), 0 4px 80px -8px rgba (36 , 40 , 47 , 0.25 ), 0 4px 4px -2px rgba (91 , 94 , 105 , 0.15 );
483
463
484
464
.tippy-box [data-theme ~= light ] > .tippy-svg-arrow {
485
465
fill : # fff ;
466
+ }
467
+
468
+ .tippy-box [data-animation = shift-away ][data-state = hidden ] {
469
+ opacity : 0 ;
470
+ }
471
+
472
+ .tippy-box [data-animation = shift-away ][data-state = hidden ][data-placement ^= top ] {
473
+ transform : translateY (10px );
474
+ }
475
+
476
+ .tippy-box [data-animation = shift-away ][data-state = hidden ][data-placement ^= bottom ] {
477
+ transform : translateY (-10px );
478
+ }
479
+
480
+ .tippy-box [data-animation = shift-away ][data-state = hidden ][data-placement ^= left ] {
481
+ transform : translateX (10px );
482
+ }
483
+
484
+ .tippy-box [data-animation = shift-away ][data-state = hidden ][data-placement ^= right ] {
485
+ transform : translateX (-10px );
486
486
}
0 commit comments