@seed-design/css 0.0.12 → 0.0.13
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/all.css +77 -53
- package/all.min.css +1 -1
- package/package.json +1 -1
- package/recipes/avatar.css +70 -51
- package/recipes/avatar.d.ts +4 -0
- package/recipes/avatar.mjs +8 -1
- package/vars/component/avatar.d.ts +41 -13
- package/vars/component/avatar.mjs +41 -13
package/all.css
CHANGED
|
@@ -569,6 +569,8 @@
|
|
|
569
569
|
box-sizing: border-box;
|
|
570
570
|
vertical-align: top;
|
|
571
571
|
border-radius: var(--seed-radius-full);
|
|
572
|
+
width: var(--avatar-size);
|
|
573
|
+
height: var(--avatar-size);
|
|
572
574
|
justify-content: center;
|
|
573
575
|
align-items: center;
|
|
574
576
|
display: inline-flex;
|
|
@@ -577,11 +579,15 @@
|
|
|
577
579
|
|
|
578
580
|
.seed-avatar__image {
|
|
579
581
|
object-fit: cover;
|
|
580
|
-
border-radius: var(--seed-radius-full);
|
|
581
582
|
width: 100%;
|
|
582
583
|
height: 100%;
|
|
584
|
+
-webkit-mask-image: url("data:image/svg+xml;utf8,<svg width=\"32\" height=\"32\" viewBox=\"0 0 32 32\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><circle cx=\"16\" cy=\"16\" r=\"16\" fill=\"white\"/></svg>"), var(--svg-mask-uri);
|
|
585
|
+
-webkit-mask-size: 100% 100%, var(--badge-mask-size) var(--badge-mask-size);
|
|
586
|
+
-webkit-mask-position: 0 0, var(--badge-mask-offset) var(--badge-mask-offset);
|
|
587
|
+
-webkit-mask-composite: source-out;
|
|
583
588
|
display: block;
|
|
584
589
|
overflow: hidden;
|
|
590
|
+
-webkit-mask-repeat: no-repeat;
|
|
585
591
|
}
|
|
586
592
|
|
|
587
593
|
.seed-avatar__image:not([data-loading-state="loaded"]) {
|
|
@@ -591,12 +597,17 @@
|
|
|
591
597
|
.seed-avatar__fallback {
|
|
592
598
|
object-fit: cover;
|
|
593
599
|
border-radius: var(--seed-radius-full);
|
|
594
|
-
justify-content: center;
|
|
595
|
-
align-items: center;
|
|
596
600
|
width: 100%;
|
|
597
601
|
height: 100%;
|
|
602
|
+
-webkit-mask-image: url("data:image/svg+xml;utf8,<svg width=\"32\" height=\"32\" viewBox=\"0 0 32 32\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><circle cx=\"16\" cy=\"16\" r=\"16\" fill=\"white\"/></svg>"), var(--svg-mask-uri);
|
|
603
|
+
-webkit-mask-size: 100% 100%, var(--badge-mask-size) var(--badge-mask-size);
|
|
604
|
+
-webkit-mask-position: 0 0, var(--badge-mask-offset) var(--badge-mask-offset);
|
|
605
|
+
-webkit-mask-composite: source-out;
|
|
606
|
+
justify-content: center;
|
|
607
|
+
align-items: center;
|
|
598
608
|
display: flex;
|
|
599
609
|
overflow: hidden;
|
|
610
|
+
-webkit-mask-repeat: no-repeat;
|
|
600
611
|
}
|
|
601
612
|
|
|
602
613
|
.seed-avatar__fallback[data-loading-state="loaded"] {
|
|
@@ -606,8 +617,10 @@
|
|
|
606
617
|
.seed-avatar__badge {
|
|
607
618
|
box-sizing: border-box;
|
|
608
619
|
z-index: 1;
|
|
609
|
-
|
|
610
|
-
|
|
620
|
+
top: var(--badge-offset);
|
|
621
|
+
left: var(--badge-offset);
|
|
622
|
+
width: var(--badge-size);
|
|
623
|
+
height: var(--badge-size);
|
|
611
624
|
justify-content: center;
|
|
612
625
|
align-items: center;
|
|
613
626
|
display: flex;
|
|
@@ -615,99 +628,110 @@
|
|
|
615
628
|
}
|
|
616
629
|
|
|
617
630
|
.seed-avatar__root--size_20 {
|
|
618
|
-
|
|
619
|
-
|
|
631
|
+
--avatar-size: 20px;
|
|
632
|
+
--badge-mask-size: 0px;
|
|
633
|
+
--badge-mask-offset: 0px;
|
|
620
634
|
}
|
|
621
635
|
|
|
622
636
|
.seed-avatar__badge--size_20 {
|
|
623
|
-
|
|
624
|
-
height: 10px;
|
|
625
|
-
top: 12.0721px;
|
|
626
|
-
left: 12.0721px;
|
|
637
|
+
display: none;
|
|
627
638
|
}
|
|
628
639
|
|
|
629
640
|
.seed-avatar__root--size_24 {
|
|
630
|
-
|
|
631
|
-
|
|
641
|
+
--avatar-size: 24px;
|
|
642
|
+
--badge-mask-size: 12px;
|
|
643
|
+
--badge-mask-offset: 14px;
|
|
632
644
|
}
|
|
633
645
|
|
|
634
646
|
.seed-avatar__badge--size_24 {
|
|
635
|
-
|
|
636
|
-
|
|
637
|
-
top: 14.4866px;
|
|
638
|
-
left: 14.4866px;
|
|
647
|
+
--badge-size: 10px;
|
|
648
|
+
--badge-offset: 15px;
|
|
639
649
|
}
|
|
640
650
|
|
|
641
651
|
.seed-avatar__root--size_36 {
|
|
642
|
-
|
|
643
|
-
|
|
652
|
+
--avatar-size: 36px;
|
|
653
|
+
--badge-mask-size: 18px;
|
|
654
|
+
--badge-mask-offset: 20px;
|
|
644
655
|
}
|
|
645
656
|
|
|
646
657
|
.seed-avatar__badge--size_36 {
|
|
647
|
-
|
|
648
|
-
|
|
649
|
-
top: 22.7298px;
|
|
650
|
-
left: 22.7298px;
|
|
658
|
+
--badge-size: 14px;
|
|
659
|
+
--badge-offset: 22px;
|
|
651
660
|
}
|
|
652
661
|
|
|
653
662
|
.seed-avatar__root--size_42 {
|
|
654
|
-
|
|
655
|
-
|
|
663
|
+
--avatar-size: 42px;
|
|
664
|
+
--badge-mask-size: 20px;
|
|
665
|
+
--badge-mask-offset: 24px;
|
|
656
666
|
}
|
|
657
667
|
|
|
658
668
|
.seed-avatar__badge--size_42 {
|
|
659
|
-
|
|
660
|
-
|
|
661
|
-
top: 23.8515px;
|
|
662
|
-
left: 23.8515px;
|
|
669
|
+
--badge-size: 16px;
|
|
670
|
+
--badge-offset: 26px;
|
|
663
671
|
}
|
|
664
672
|
|
|
665
673
|
.seed-avatar__root--size_48 {
|
|
666
|
-
|
|
667
|
-
|
|
674
|
+
--avatar-size: 48px;
|
|
675
|
+
--badge-mask-size: 22px;
|
|
676
|
+
--badge-mask-offset: 28px;
|
|
668
677
|
}
|
|
669
678
|
|
|
670
679
|
.seed-avatar__badge--size_48 {
|
|
671
|
-
|
|
672
|
-
|
|
673
|
-
top: 28.9731px;
|
|
674
|
-
left: 28.9731px;
|
|
680
|
+
--badge-size: 18px;
|
|
681
|
+
--badge-offset: 30px;
|
|
675
682
|
}
|
|
676
683
|
|
|
677
684
|
.seed-avatar__root--size_64 {
|
|
678
|
-
|
|
679
|
-
|
|
685
|
+
--avatar-size: 64px;
|
|
686
|
+
--badge-mask-size: 26px;
|
|
687
|
+
--badge-mask-offset: 40px;
|
|
680
688
|
}
|
|
681
689
|
|
|
682
690
|
.seed-avatar__badge--size_64 {
|
|
683
|
-
|
|
684
|
-
|
|
685
|
-
top: 42.6308px;
|
|
686
|
-
left: 42.6308px;
|
|
691
|
+
--badge-size: 22px;
|
|
692
|
+
--badge-offset: 42px;
|
|
687
693
|
}
|
|
688
694
|
|
|
689
695
|
.seed-avatar__root--size_80 {
|
|
690
|
-
|
|
691
|
-
|
|
696
|
+
--avatar-size: 80px;
|
|
697
|
+
--badge-mask-size: 32px;
|
|
698
|
+
--badge-mask-offset: 52px;
|
|
692
699
|
}
|
|
693
700
|
|
|
694
701
|
.seed-avatar__badge--size_80 {
|
|
695
|
-
|
|
696
|
-
|
|
697
|
-
top: 56.2885px;
|
|
698
|
-
left: 56.2885px;
|
|
702
|
+
--badge-size: 28px;
|
|
703
|
+
--badge-offset: 54px;
|
|
699
704
|
}
|
|
700
705
|
|
|
701
706
|
.seed-avatar__root--size_96 {
|
|
702
|
-
|
|
703
|
-
|
|
707
|
+
--avatar-size: 96px;
|
|
708
|
+
--badge-mask-size: 38px;
|
|
709
|
+
--badge-mask-offset: 62px;
|
|
704
710
|
}
|
|
705
711
|
|
|
706
712
|
.seed-avatar__badge--size_96 {
|
|
707
|
-
|
|
708
|
-
|
|
709
|
-
|
|
710
|
-
|
|
713
|
+
--badge-size: 32px;
|
|
714
|
+
--badge-offset: 65px;
|
|
715
|
+
}
|
|
716
|
+
|
|
717
|
+
.seed-avatar__root--badgeMask_none {
|
|
718
|
+
--svg-mask-uri: url("data:image/svg+xml;utf8,<svg />");
|
|
719
|
+
}
|
|
720
|
+
|
|
721
|
+
.seed-avatar__root--badgeMask_circle {
|
|
722
|
+
--svg-mask-uri: url("data:image/svg+xml;utf8,<svg width=\"32\" height=\"32\" viewBox=\"0 0 32 32\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><circle cx=\"16\" cy=\"16\" r=\"16\" fill=\"white\"/></svg>");
|
|
723
|
+
}
|
|
724
|
+
|
|
725
|
+
.seed-avatar__badge--badgeMask_circle {
|
|
726
|
+
border-radius: 9999px;
|
|
727
|
+
}
|
|
728
|
+
|
|
729
|
+
.seed-avatar__root--badgeMask_flower {
|
|
730
|
+
--svg-mask-uri: url("data:image/svg+xml;utf8,<svg width=\"32\" height=\"32\" viewBox=\"0 0 32 32\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path shape-rendering=\"crispEdges\" fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M29.9115 8C28.4089 5.42609 25.682 4.02087 22.8994 4.10435C21.5637 1.68348 19.0037 0 15.9985 0C12.9933 0 10.4333 1.65565 9.09762 4.10435C6.32893 4.03478 3.60197 5.42609 2.09936 8C0.596754 10.5739 0.76371 13.6348 2.19675 16C0.749797 18.3652 0.596754 21.4261 2.09936 24C3.60197 26.5739 6.32893 27.9791 9.11154 27.8957C10.4472 30.3165 13.0072 32 16.0124 32C19.0176 32 21.5776 30.3443 22.9133 27.8957C25.682 27.9652 28.4089 26.5739 29.9115 24C31.4141 21.4261 31.2472 18.3652 29.8141 16C31.2611 13.6348 31.4141 10.5739 29.9115 8Z\" fill=\"white\"/></svg>");
|
|
731
|
+
}
|
|
732
|
+
|
|
733
|
+
.seed-avatar__root--badgeMask_shield {
|
|
734
|
+
--svg-mask-uri: url("data:image/svg+xml;utf8,<svg width=\"32\" height=\"32\" viewBox=\"0 0 32 32\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M18.137 31.4527C18.1171 31.4616 18.0943 31.4721 18.0531 31.491C18.046 31.4943 18.0356 31.4994 18.0221 31.5059C17.8282 31.5996 16.9959 32.0019 16.0001 32C15.0096 32.002 14.1895 31.6075 13.986 31.5096L13.8629 31.4527C13.5452 31.3105 13.1039 31.1059 12.5795 30.8436C11.541 30.3242 10.1273 29.554 8.68691 28.5676C7.2706 27.5976 5.67543 26.3154 4.39746 24.7323C3.12739 23.159 1.92743 20.9794 1.92743 18.3179V7.77468C1.92743 6.02645 3.02031 4.4647 4.66276 3.86583L14.5747 0.25173C15.4953 -0.0839101 16.5047 -0.0839101 17.4252 0.25173L27.3372 3.86583C28.9796 4.4647 30.0725 6.02646 30.0725 7.77468V18.3179C30.0725 20.9794 28.8726 23.159 27.6025 24.7323C26.3245 26.3154 24.7294 27.5976 23.313 28.5676C21.8727 29.554 20.4589 30.3242 19.4205 30.8436C18.8961 31.1059 18.4547 31.3106 18.137 31.4527Z\" fill=\"white\"/></svg>");
|
|
711
735
|
}
|
|
712
736
|
|
|
713
737
|
.seed-avatar-stack__root {
|