@cck-ui/core 0.4.6 → 0.4.7

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/styles.layer.css CHANGED
@@ -631,247 +631,6 @@ body,
631
631
  -webkit-tap-highlight-color: transparent;
632
632
  }
633
633
 
634
- .m_c031daba {
635
- container: c-grid / inline-size;
636
- }
637
-
638
- .m_c9913309 {
639
- --grid-overflow: visible;
640
- --grid-column-gap: var(--grid-gap);
641
- --grid-row-gap: var(--grid-gap);
642
-
643
- overflow: var(--grid-overflow);
644
- }
645
-
646
- .m_6815e10f {
647
- display: flex;
648
- flex-wrap: wrap;
649
- justify-content: var(--grid-justify);
650
- align-items: var(--grid-align);
651
- gap: var(--grid-row-gap) var(--grid-column-gap);
652
- }
653
-
654
- .m_92e36e79 {
655
- --col-flex-grow: 0;
656
- --col-offset: 0rem;
657
-
658
- flex-shrink: 0;
659
- order: var(--col-order);
660
- flex-basis: var(--col-flex-basis);
661
- width: var(--col-width);
662
- max-width: var(--col-max-width);
663
- flex-grow: var(--col-flex-grow);
664
- margin-inline-start: var(--col-offset);
665
- align-self: var(--col-align-self);
666
- }
667
-
668
- .m_c9afe370 {
669
- display: flex;
670
- flex-direction: row;
671
- flex-wrap: var(--group-wrap, wrap);
672
- justify-content: var(--group-justify, flex-start);
673
- align-items: var(--group-align, center);
674
- gap: var(--group-gap, var(--c-spacing-md));
675
-
676
- &:where([data-grow]) {
677
- & > * {
678
- flex-grow: 1;
679
- max-width: var(--group-child-width);
680
- }
681
- }
682
- }
683
-
684
- .m_a244865c {
685
- --loader-size-xs: 18px;
686
- --loader-size-sm: 22px;
687
- --loader-size-md: 36px;
688
- --loader-size-lg: 44px;
689
- --loader-size-xl: 58px;
690
- --loader-size: var(--loader-size-md);
691
- --loader-color: var(--c-primary-color-filled);
692
- }
693
-
694
- .m_a244865c,
695
- .m_a244865c *,
696
- .m_a244865c::before,
697
- .m_a244865c::after {
698
- box-sizing: border-box;
699
- }
700
-
701
- @keyframes m_774c277d {
702
- 0% {
703
- transform: scale(0.6);
704
- opacity: 0;
705
- }
706
-
707
- 50%,
708
- 100% {
709
- transform: scale(1);
710
- }
711
- }
712
-
713
- .m_8f6794ed {
714
- position: relative;
715
- width: var(--loader-size);
716
- height: var(--loader-size);
717
- display: flex;
718
- gap: calc(var(--loader-size) / 5);
719
- }
720
-
721
- .m_919edf59 {
722
- flex: 1;
723
- background: var(--loader-color);
724
- animation: m_774c277d 1.2s cubic-bezier(0, 0.5, 0.5, 1) infinite;
725
- border-radius: 2px;
726
-
727
- &:nth-of-type(1) {
728
- animation-delay: -240ms;
729
- }
730
-
731
- &:nth-of-type(2) {
732
- animation-delay: -120ms;
733
- }
734
-
735
- &:nth-of-type(3) {
736
- animation-delay: 0;
737
- }
738
- }
739
-
740
- @keyframes m_24cd2081 {
741
- 0%,
742
- 100% {
743
- transform: scale(1);
744
- opacity: 1;
745
- }
746
-
747
- 50% {
748
- transform: scale(0.6);
749
- opacity: 0.5;
750
- }
751
- }
752
-
753
- .m_637ae2f7 {
754
- display: flex;
755
- justify-content: center;
756
- align-items: center;
757
- gap: calc(var(--loader-size) / 10);
758
- position: relative;
759
- width: var(--loader-size);
760
- height: var(--loader-size);
761
- }
762
-
763
- .m_919ee88f {
764
- width: calc(var(--loader-size) / 3 - var(--loader-size) / 15);
765
- height: calc(var(--loader-size) / 3 - var(--loader-size) / 15);
766
- border-radius: 50%;
767
- background: var(--loader-color);
768
- animation: m_24cd2081 0.8s infinite linear;
769
-
770
- &:nth-child(2) {
771
- animation-delay: 0.4s;
772
- }
773
- }
774
-
775
- @keyframes m_1309882b {
776
- 0% {
777
- transform: rotate(0deg);
778
- }
779
-
780
- 100% {
781
- transform: rotate(360deg);
782
- }
783
- }
784
-
785
- .m_c87fd4ff {
786
- display: inline-block;
787
- width: var(--loader-size);
788
- height: var(--loader-size);
789
-
790
- &::after {
791
- content: '';
792
- display: block;
793
- width: var(--loader-size);
794
- height: var(--loader-size);
795
- border-radius: 10000px;
796
- border-width: calc(var(--loader-size) / 8);
797
- border-style: solid;
798
- border-color: var(--loader-color) var(--loader-color) var(--loader-color)
799
- transparent;
800
- animation: m_1309882b 1.2s linear infinite;
801
- }
802
- }
803
-
804
- .m_cd6f7c35 {
805
- container: simple-grid / inline-size;
806
- }
807
-
808
- .m_6bed50ae {
809
- display: grid;
810
- grid-template-columns: repeat(var(--sg-cols), minmax(0, 1fr));
811
- grid-auto-rows: var(--sg-auto-rows, auto);
812
- gap: var(--sg-spacing-y) var(--sg-spacing-x);
813
- }
814
-
815
- .m_6bed50ae[data-auto-cols='auto-fill'] {
816
- grid-template-columns: repeat(auto-fill, minmax(var(--sg-min-col-width), 1fr));
817
- }
818
-
819
- .m_6bed50ae[data-auto-cols='auto-fit'] {
820
- grid-template-columns: repeat(auto-fit, minmax(var(--sg-min-col-width), 1fr));
821
- }
822
-
823
- .m_3f669182 {
824
- -webkit-tap-highlight-color: transparent;
825
- text-decoration: none;
826
- font-size: var(--text-fz, var(--c-font-size-md));
827
- line-height: var(--text-lh, var(--c-line-height-md));
828
- font-weight: var(--c-font-weight-regular);
829
- text-wrap: var(--text-text-wrap, var(--c-text-wrap));
830
- margin: 0;
831
- padding: 0;
832
-
833
- &:where([data-truncate]) {
834
- overflow: hidden;
835
- text-overflow: ellipsis;
836
- white-space: nowrap;
837
- }
838
-
839
- &:where([data-truncate='start']) {
840
- direction: rtl;
841
- text-align: end;
842
-
843
- @mixin where-rtl {
844
- direction: ltr;
845
- text-align: start;
846
- }
847
- }
848
-
849
- &:where([data-variant='gradient']) {
850
- background-image: var(--text-gradient);
851
- -webkit-text-fill-color: transparent;
852
- -webkit-background-clip: text;
853
- background-clip: text;
854
- }
855
-
856
- &:where([data-line-clamp]) {
857
- overflow: hidden;
858
- text-overflow: ellipsis;
859
- display: -webkit-box;
860
- -webkit-line-clamp: var(--text-line-clamp);
861
- -webkit-box-orient: vertical;
862
- }
863
-
864
- &:where([data-inherit]) {
865
- line-height: inherit;
866
- font-weight: inherit;
867
- font-size: inherit;
868
- }
869
-
870
- &:where([data-inline]) {
871
- line-height: 1;
872
- }
873
- }
874
-
875
634
  .m_14602a9d {
876
635
  --button-height-xs: 30px;
877
636
  --button-height-sm: 36px;
@@ -1135,4 +894,245 @@ body,
1135
894
  align-items: center;
1136
895
  justify-content: center;
1137
896
  }
897
+
898
+ .m_c031daba {
899
+ container: c-grid / inline-size;
900
+ }
901
+
902
+ .m_c9913309 {
903
+ --grid-overflow: visible;
904
+ --grid-column-gap: var(--grid-gap);
905
+ --grid-row-gap: var(--grid-gap);
906
+
907
+ overflow: var(--grid-overflow);
908
+ }
909
+
910
+ .m_6815e10f {
911
+ display: flex;
912
+ flex-wrap: wrap;
913
+ justify-content: var(--grid-justify);
914
+ align-items: var(--grid-align);
915
+ gap: var(--grid-row-gap) var(--grid-column-gap);
916
+ }
917
+
918
+ .m_92e36e79 {
919
+ --col-flex-grow: 0;
920
+ --col-offset: 0rem;
921
+
922
+ flex-shrink: 0;
923
+ order: var(--col-order);
924
+ flex-basis: var(--col-flex-basis);
925
+ width: var(--col-width);
926
+ max-width: var(--col-max-width);
927
+ flex-grow: var(--col-flex-grow);
928
+ margin-inline-start: var(--col-offset);
929
+ align-self: var(--col-align-self);
930
+ }
931
+
932
+ .m_c9afe370 {
933
+ display: flex;
934
+ flex-direction: row;
935
+ flex-wrap: var(--group-wrap, wrap);
936
+ justify-content: var(--group-justify, flex-start);
937
+ align-items: var(--group-align, center);
938
+ gap: var(--group-gap, var(--c-spacing-md));
939
+
940
+ &:where([data-grow]) {
941
+ & > * {
942
+ flex-grow: 1;
943
+ max-width: var(--group-child-width);
944
+ }
945
+ }
946
+ }
947
+
948
+ .m_a244865c {
949
+ --loader-size-xs: 18px;
950
+ --loader-size-sm: 22px;
951
+ --loader-size-md: 36px;
952
+ --loader-size-lg: 44px;
953
+ --loader-size-xl: 58px;
954
+ --loader-size: var(--loader-size-md);
955
+ --loader-color: var(--c-primary-color-filled);
956
+ }
957
+
958
+ .m_a244865c,
959
+ .m_a244865c *,
960
+ .m_a244865c::before,
961
+ .m_a244865c::after {
962
+ box-sizing: border-box;
963
+ }
964
+
965
+ @keyframes m_774c277d {
966
+ 0% {
967
+ transform: scale(0.6);
968
+ opacity: 0;
969
+ }
970
+
971
+ 50%,
972
+ 100% {
973
+ transform: scale(1);
974
+ }
975
+ }
976
+
977
+ .m_8f6794ed {
978
+ position: relative;
979
+ width: var(--loader-size);
980
+ height: var(--loader-size);
981
+ display: flex;
982
+ gap: calc(var(--loader-size) / 5);
983
+ }
984
+
985
+ .m_919edf59 {
986
+ flex: 1;
987
+ background: var(--loader-color);
988
+ animation: m_774c277d 1.2s cubic-bezier(0, 0.5, 0.5, 1) infinite;
989
+ border-radius: 2px;
990
+
991
+ &:nth-of-type(1) {
992
+ animation-delay: -240ms;
993
+ }
994
+
995
+ &:nth-of-type(2) {
996
+ animation-delay: -120ms;
997
+ }
998
+
999
+ &:nth-of-type(3) {
1000
+ animation-delay: 0;
1001
+ }
1002
+ }
1003
+
1004
+ @keyframes m_24cd2081 {
1005
+ 0%,
1006
+ 100% {
1007
+ transform: scale(1);
1008
+ opacity: 1;
1009
+ }
1010
+
1011
+ 50% {
1012
+ transform: scale(0.6);
1013
+ opacity: 0.5;
1014
+ }
1015
+ }
1016
+
1017
+ .m_637ae2f7 {
1018
+ display: flex;
1019
+ justify-content: center;
1020
+ align-items: center;
1021
+ gap: calc(var(--loader-size) / 10);
1022
+ position: relative;
1023
+ width: var(--loader-size);
1024
+ height: var(--loader-size);
1025
+ }
1026
+
1027
+ .m_919ee88f {
1028
+ width: calc(var(--loader-size) / 3 - var(--loader-size) / 15);
1029
+ height: calc(var(--loader-size) / 3 - var(--loader-size) / 15);
1030
+ border-radius: 50%;
1031
+ background: var(--loader-color);
1032
+ animation: m_24cd2081 0.8s infinite linear;
1033
+
1034
+ &:nth-child(2) {
1035
+ animation-delay: 0.4s;
1036
+ }
1037
+ }
1038
+
1039
+ @keyframes m_1309882b {
1040
+ 0% {
1041
+ transform: rotate(0deg);
1042
+ }
1043
+
1044
+ 100% {
1045
+ transform: rotate(360deg);
1046
+ }
1047
+ }
1048
+
1049
+ .m_c87fd4ff {
1050
+ display: inline-block;
1051
+ width: var(--loader-size);
1052
+ height: var(--loader-size);
1053
+
1054
+ &::after {
1055
+ content: '';
1056
+ display: block;
1057
+ width: var(--loader-size);
1058
+ height: var(--loader-size);
1059
+ border-radius: 10000px;
1060
+ border-width: calc(var(--loader-size) / 8);
1061
+ border-style: solid;
1062
+ border-color: var(--loader-color) var(--loader-color) var(--loader-color)
1063
+ transparent;
1064
+ animation: m_1309882b 1.2s linear infinite;
1065
+ }
1066
+ }
1067
+
1068
+ .m_cd6f7c35 {
1069
+ container: simple-grid / inline-size;
1070
+ }
1071
+
1072
+ .m_6bed50ae {
1073
+ display: grid;
1074
+ grid-template-columns: repeat(var(--sg-cols), minmax(0, 1fr));
1075
+ grid-auto-rows: var(--sg-auto-rows, auto);
1076
+ gap: var(--sg-spacing-y) var(--sg-spacing-x);
1077
+ }
1078
+
1079
+ .m_6bed50ae[data-auto-cols='auto-fill'] {
1080
+ grid-template-columns: repeat(auto-fill, minmax(var(--sg-min-col-width), 1fr));
1081
+ }
1082
+
1083
+ .m_6bed50ae[data-auto-cols='auto-fit'] {
1084
+ grid-template-columns: repeat(auto-fit, minmax(var(--sg-min-col-width), 1fr));
1085
+ }
1086
+
1087
+ .m_3f669182 {
1088
+ -webkit-tap-highlight-color: transparent;
1089
+ text-decoration: none;
1090
+ font-size: var(--text-fz, var(--c-font-size-md));
1091
+ line-height: var(--text-lh, var(--c-line-height-md));
1092
+ font-weight: var(--c-font-weight-regular);
1093
+ text-wrap: var(--text-text-wrap, var(--c-text-wrap));
1094
+ margin: 0;
1095
+ padding: 0;
1096
+
1097
+ &:where([data-truncate]) {
1098
+ overflow: hidden;
1099
+ text-overflow: ellipsis;
1100
+ white-space: nowrap;
1101
+ }
1102
+
1103
+ &:where([data-truncate='start']) {
1104
+ direction: rtl;
1105
+ text-align: end;
1106
+
1107
+ @mixin where-rtl {
1108
+ direction: ltr;
1109
+ text-align: start;
1110
+ }
1111
+ }
1112
+
1113
+ &:where([data-variant='gradient']) {
1114
+ background-image: var(--text-gradient);
1115
+ -webkit-text-fill-color: transparent;
1116
+ -webkit-background-clip: text;
1117
+ background-clip: text;
1118
+ }
1119
+
1120
+ &:where([data-line-clamp]) {
1121
+ overflow: hidden;
1122
+ text-overflow: ellipsis;
1123
+ display: -webkit-box;
1124
+ -webkit-line-clamp: var(--text-line-clamp);
1125
+ -webkit-box-orient: vertical;
1126
+ }
1127
+
1128
+ &:where([data-inherit]) {
1129
+ line-height: inherit;
1130
+ font-weight: inherit;
1131
+ font-size: inherit;
1132
+ }
1133
+
1134
+ &:where([data-inline]) {
1135
+ line-height: 1;
1136
+ }
1137
+ }
1138
1138
  }