Skip to content

Commit e5faa72

Browse files
zombieFoxzombieFox
committed
[bug] fix link item display alignment
1 parent 53c93bc commit e5faa72

File tree

1 file changed

+140
-18
lines changed

1 file changed

+140
-18
lines changed

‎src/css/link.css‎

Lines changed: 140 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -346,103 +346,224 @@
346346
transform-origin: bottom right;
347347
}
348348

349-
.is-link-item-display-direction-vertical.is-link-display-alignment-topleft .link-display{
349+
/* vertical letcon name */
350+
.is-link-item-display-direction-vertical.is-link-item-display-order-letconname.is-link-display-alignment-topleft .link-display{
350351
justify-content: flex-start;
351352
align-items: flex-start;
352353
transform-origin: top left;
353354
}
354355

355-
.is-link-item-display-direction-vertical.is-link-display-alignment-topcenter .link-display{
356+
.is-link-item-display-direction-vertical.is-link-item-display-order-letconname.is-link-display-alignment-topcenter .link-display{
356357
justify-content: flex-start;
357358
align-items: center;
358359
transform-origin: top center;
359360
}
360361

361-
.is-link-item-display-direction-vertical.is-link-display-alignment-topright .link-display{
362+
.is-link-item-display-direction-vertical.is-link-item-display-order-letconname.is-link-display-alignment-topright .link-display{
362363
justify-content: flex-start;
363364
align-items: flex-end;
364365
transform-origin: top right;
365366
}
366367

367-
.is-link-item-display-direction-vertical.is-link-display-alignment-centerleft .link-display{
368+
.is-link-item-display-direction-vertical.is-link-item-display-order-letconname.is-link-display-alignment-centerleft .link-display{
368369
justify-content: center;
369370
align-items: flex-start;
370371
transform-origin: center left;
371372
}
372373

373-
.is-link-item-display-direction-vertical.is-link-display-alignment-centercenter .link-display{
374+
.is-link-item-display-direction-vertical.is-link-item-display-order-letconname.is-link-display-alignment-centercenter .link-display{
374375
justify-content: center;
375376
align-items: center;
376377
transform-origin: center;
377378
}
378379

379-
.is-link-item-display-direction-vertical.is-link-display-alignment-centerright .link-display{
380+
.is-link-item-display-direction-vertical.is-link-item-display-order-letconname.is-link-display-alignment-centerright .link-display{
380381
justify-content: center;
381382
align-items: flex-end;
382383
transform-origin: center right;
383384
}
384385

385-
.is-link-item-display-direction-vertical.is-link-display-alignment-bottomleft .link-display{
386+
.is-link-item-display-direction-vertical.is-link-item-display-order-letconname.is-link-display-alignment-bottomleft .link-display{
386387
justify-content: flex-end;
387388
align-items: flex-start;
388389
transform-origin: bottom left;
389390
}
390391

391-
.is-link-item-display-direction-vertical.is-link-display-alignment-bottomcenter .link-display{
392+
.is-link-item-display-direction-vertical.is-link-item-display-order-letconname.is-link-display-alignment-bottomcenter .link-display{
392393
justify-content: flex-end;
393394
align-items: center;
394395
transform-origin: bottom center;
395396
}
396397

397-
.is-link-item-display-direction-vertical.is-link-display-alignment-bottomright .link-display{
398+
.is-link-item-display-direction-vertical.is-link-item-display-order-letconname.is-link-display-alignment-bottomright .link-display{
398399
justify-content: flex-end;
399400
align-items: flex-end;
400401
transform-origin: bottom right;
401402
}
402403

403-
.is-link-item-display-direction-horizontal.is-link-display-alignment-topleft .link-display{
404+
/* vertical name letcon */
405+
.is-link-item-display-direction-vertical.is-link-item-display-order-nameletcon.is-link-display-alignment-topleft .link-display{
404406
justify-content: flex-end;
405407
align-items: flex-start;
408+
transform-origin: top left;
406409
}
407410

408-
.is-link-item-display-direction-horizontal.is-link-display-alignment-topcenter .link-display{
411+
.is-link-item-display-direction-vertical.is-link-item-display-order-nameletcon.is-link-display-alignment-topcenter .link-display{
412+
justify-content: flex-end;
413+
align-items: center;
414+
transform-origin: top center;
415+
}
416+
417+
.is-link-item-display-direction-vertical.is-link-item-display-order-nameletcon.is-link-display-alignment-topright .link-display{
418+
justify-content: flex-end;
419+
align-items: flex-end;
420+
transform-origin: top right;
421+
}
422+
423+
.is-link-item-display-direction-vertical.is-link-item-display-order-nameletcon.is-link-display-alignment-centerleft .link-display{
409424
justify-content: center;
410425
align-items: flex-start;
426+
transform-origin: center left;
427+
}
428+
429+
.is-link-item-display-direction-vertical.is-link-item-display-order-nameletcon.is-link-display-alignment-centercenter .link-display{
430+
justify-content: center;
431+
align-items: center;
432+
transform-origin: center;
433+
}
434+
435+
.is-link-item-display-direction-vertical.is-link-item-display-order-nameletcon.is-link-display-alignment-centerright .link-display{
436+
justify-content: center;
437+
align-items: flex-end;
438+
transform-origin: center right;
439+
}
440+
441+
.is-link-item-display-direction-vertical.is-link-item-display-order-nameletcon.is-link-display-alignment-bottomleft .link-display{
442+
justify-content: flex-start;
443+
align-items: flex-start;
444+
transform-origin: bottom left;
445+
}
446+
447+
.is-link-item-display-direction-vertical.is-link-item-display-order-nameletcon.is-link-display-alignment-bottomcenter .link-display{
448+
justify-content: flex-start;
449+
align-items: center;
450+
transform-origin: bottom center;
411451
}
412452

413-
.is-link-item-display-direction-horizontal.is-link-display-alignment-topright .link-display{
453+
.is-link-item-display-direction-vertical.is-link-item-display-order-nameletcon.is-link-display-alignment-bottomright .link-display{
454+
justify-content: flex-start;
455+
align-items: flex-end;
456+
transform-origin: bottom right;
457+
}
458+
459+
/* horizontal letcon name */
460+
.is-link-item-display-direction-horizontal.is-link-item-display-order-letconname.is-link-display-alignment-topleft .link-display{
414461
justify-content: flex-start;
415462
align-items: flex-start;
463+
transform-origin: top left;
416464
}
417465

418-
.is-link-item-display-direction-horizontal.is-link-display-alignment-centerleft .link-display{
466+
.is-link-item-display-direction-horizontal.is-link-item-display-order-letconname.is-link-display-alignment-topcenter .link-display{
467+
justify-content: center;
468+
align-items: flex-start;
469+
transform-origin: top center;
470+
}
471+
472+
.is-link-item-display-direction-horizontal.is-link-item-display-order-letconname.is-link-display-alignment-topright .link-display{
419473
justify-content: flex-end;
474+
align-items: flex-start;
475+
transform-origin: top right;
476+
}
477+
478+
.is-link-item-display-direction-horizontal.is-link-item-display-order-letconname.is-link-display-alignment-centerleft .link-display{
479+
justify-content: flex-start;
420480
align-items: center;
481+
transform-origin: center left;
421482
}
422483

423-
.is-link-item-display-direction-horizontal.is-link-display-alignment-centercenter .link-display{
484+
.is-link-item-display-direction-horizontal.is-link-item-display-order-letconname.is-link-display-alignment-centercenter .link-display{
424485
justify-content: center;
425486
align-items: center;
487+
transform-origin: center;
426488
}
427489

428-
.is-link-item-display-direction-horizontal.is-link-display-alignment-centerright .link-display{
490+
.is-link-item-display-direction-horizontal.is-link-item-display-order-letconname.is-link-display-alignment-centerright .link-display{
491+
justify-content: flex-end;
492+
align-items: center;
493+
transform-origin: center right;
494+
}
495+
496+
.is-link-item-display-direction-horizontal.is-link-item-display-order-letconname.is-link-display-alignment-bottomleft .link-display{
497+
justify-content: flex-start;
498+
align-items: flex-end;
499+
transform-origin: bottom left;
500+
}
501+
502+
.is-link-item-display-direction-horizontal.is-link-item-display-order-letconname.is-link-display-alignment-bottomcenter .link-display{
503+
justify-content: center;
504+
align-items: flex-end;
505+
transform-origin: bottom center;
506+
}
507+
508+
.is-link-item-display-direction-horizontal.is-link-item-display-order-letconname.is-link-display-alignment-bottomright .link-display{
509+
justify-content: flex-end;
510+
align-items: flex-end;
511+
transform-origin: bottom right;
512+
}
513+
514+
/* horizontal name letcon */
515+
.is-link-item-display-direction-horizontal.is-link-item-display-order-nameletcon.is-link-display-alignment-topleft .link-display{
516+
justify-content: flex-end;
517+
align-items: flex-start;
518+
transform-origin: top left;
519+
}
520+
521+
.is-link-item-display-direction-horizontal.is-link-item-display-order-nameletcon.is-link-display-alignment-topcenter .link-display{
522+
justify-content: center;
523+
align-items: flex-start;
524+
transform-origin: top center;
525+
}
526+
527+
.is-link-item-display-direction-horizontal.is-link-item-display-order-nameletcon.is-link-display-alignment-topright .link-display{
528+
justify-content: flex-start;
529+
align-items: flex-start;
530+
transform-origin: top right;
531+
}
532+
533+
.is-link-item-display-direction-horizontal.is-link-item-display-order-nameletcon.is-link-display-alignment-centerleft .link-display{
534+
justify-content: flex-end;
535+
align-items: center;
536+
transform-origin: top left;
537+
}
538+
539+
.is-link-item-display-direction-horizontal.is-link-item-display-order-nameletcon.is-link-display-alignment-centercenter .link-display{
540+
justify-content: center;
541+
align-items: center;
542+
transform-origin: top center;
543+
}
544+
545+
.is-link-item-display-direction-horizontal.is-link-item-display-order-nameletcon.is-link-display-alignment-centerright .link-display{
429546
justify-content: flex-start;
430547
align-items: center;
548+
transform-origin: top right;
431549
}
432550

433-
.is-link-item-display-direction-horizontal.is-link-display-alignment-bottomleft .link-display{
551+
.is-link-item-display-direction-horizontal.is-link-item-display-order-nameletcon.is-link-display-alignment-bottomleft .link-display{
434552
justify-content: flex-end;
435553
align-items: flex-end;
554+
transform-origin: top left;
436555
}
437556

438-
.is-link-item-display-direction-horizontal.is-link-display-alignment-bottomcenter .link-display{
557+
.is-link-item-display-direction-horizontal.is-link-item-display-order-nameletcon.is-link-display-alignment-bottomcenter .link-display{
439558
justify-content: center;
440559
align-items: flex-end;
560+
transform-origin: top center;
441561
}
442562

443-
.is-link-item-display-direction-horizontal.is-link-display-alignment-bottomright .link-display{
563+
.is-link-item-display-direction-horizontal.is-link-item-display-order-nameletcon.is-link-display-alignment-bottomright .link-display{
444564
justify-content: flex-start;
445565
align-items: flex-end;
566+
transform-origin: top right;
446567
}
447568

448569
.link-display-letter,
@@ -510,6 +631,7 @@
510631

511632
.is-link-item-display-name-show .link-display-name{
512633
display: block;
634+
flex-basis:100%;
513635
}
514636

515637
.link-display-name,

0 commit comments

Comments
(0)