@cck-ui/core 0.11.0 → 0.12.0
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/cjs/components/alert/alert.cjs +493 -0
- package/cjs/components/alert/alert.cjs.map +1 -0
- package/cjs/components/alert/alert.module.cjs +16 -0
- package/cjs/components/alert/alert.module.cjs.map +1 -0
- package/cjs/components/alert/alert.utils.cjs +21 -0
- package/cjs/components/alert/alert.utils.cjs.map +1 -0
- package/cjs/components/alert/index.cjs +14 -0
- package/cjs/components/alert/index.cjs.map +1 -0
- package/cjs/components/aspect-ratio/aspect-ratio.cjs +1 -1
- package/cjs/components/aspect-ratio/aspect-ratio.cjs.map +1 -1
- package/cjs/components/button/button.cjs +1 -1
- package/cjs/components/close-button/close-button.cjs +434 -0
- package/cjs/components/close-button/close-button.cjs.map +1 -0
- package/cjs/components/close-button/close-button.module.cjs +10 -0
- package/cjs/components/close-button/close-button.module.cjs.map +1 -0
- package/cjs/components/close-button/close-button.utils.cjs +13 -0
- package/cjs/components/close-button/close-button.utils.cjs.map +1 -0
- package/cjs/components/close-button/close-icon.cjs +56 -0
- package/cjs/components/close-button/close-icon.cjs.map +1 -0
- package/cjs/components/close-button/index.cjs +14 -0
- package/cjs/components/close-button/index.cjs.map +1 -0
- package/cjs/index.cjs +57 -50
- package/cjs/index.cjs.map +1 -1
- package/esm/components/alert/alert.mjs +493 -0
- package/esm/components/alert/alert.mjs.map +1 -0
- package/esm/components/alert/alert.module.mjs +16 -0
- package/esm/components/alert/alert.module.mjs.map +1 -0
- package/esm/components/alert/alert.utils.mjs +22 -0
- package/esm/components/alert/alert.utils.mjs.map +1 -0
- package/esm/components/alert/index.mjs +11 -0
- package/esm/components/alert/index.mjs.map +1 -0
- package/esm/components/aspect-ratio/aspect-ratio.mjs +1 -1
- package/esm/components/aspect-ratio/aspect-ratio.mjs.map +1 -1
- package/esm/components/button/button.mjs +1 -1
- package/esm/components/close-button/close-button.mjs +434 -0
- package/esm/components/close-button/close-button.mjs.map +1 -0
- package/esm/components/close-button/close-button.module.mjs +10 -0
- package/esm/components/close-button/close-button.module.mjs.map +1 -0
- package/esm/components/close-button/close-button.utils.mjs +14 -0
- package/esm/components/close-button/close-button.utils.mjs.map +1 -0
- package/esm/components/close-button/close-icon.mjs +56 -0
- package/esm/components/close-button/close-icon.mjs.map +1 -0
- package/esm/components/close-button/index.mjs +11 -0
- package/esm/components/close-button/index.mjs.map +1 -0
- package/esm/index.mjs +7 -2
- package/esm/index.mjs.map +1 -1
- package/lib/components/alert/alert.types.d.ts +42 -0
- package/lib/components/alert/alert.utils.d.ts +7 -0
- package/lib/components/alert/index.d.ts +6 -0
- package/lib/components/close-button/close-button.types.d.ts +39 -0
- package/lib/components/close-button/close-button.utils.d.ts +8 -0
- package/lib/components/close-button/index.d.ts +6 -0
- package/lib/components/index.d.ts +2 -0
- package/package.json +1 -1
- package/styles/alert.css +82 -0
- package/styles/alert.layer.css +83 -0
- package/styles/close-button.css +58 -0
- package/styles/close-button.layer.css +59 -0
- package/styles.css +142 -0
- package/styles.layer.css +142 -0
package/styles.layer.css
CHANGED
|
@@ -882,6 +882,89 @@ fieldset:disabled .c-active:active {
|
|
|
882
882
|
justify-content: center;
|
|
883
883
|
}
|
|
884
884
|
|
|
885
|
+
.m_efb192b3 {
|
|
886
|
+
--alert-radius: var(--c-radius-default);
|
|
887
|
+
--alert-bg: var(--c-primary-color-light);
|
|
888
|
+
--alert-bd: calc(0.0625rem * var(--c-scale)) solid transparent;
|
|
889
|
+
--alert-color: var(--c-primary-color-light-color);
|
|
890
|
+
|
|
891
|
+
padding: var(--c-spacing-md) var(--c-spacing-md);
|
|
892
|
+
border-radius: var(--alert-radius);
|
|
893
|
+
position: relative;
|
|
894
|
+
overflow: hidden;
|
|
895
|
+
background-color: var(--alert-bg);
|
|
896
|
+
border: var(--alert-bd);
|
|
897
|
+
color: var(--alert-color);
|
|
898
|
+
}
|
|
899
|
+
|
|
900
|
+
.m_7636d522 {
|
|
901
|
+
display: flex;
|
|
902
|
+
}
|
|
903
|
+
|
|
904
|
+
.m_efaa4b73 {
|
|
905
|
+
flex: 1;
|
|
906
|
+
display: flex;
|
|
907
|
+
flex-direction: column;
|
|
908
|
+
gap: var(--c-spacing-xs);
|
|
909
|
+
}
|
|
910
|
+
|
|
911
|
+
.m_69a4aa7 {
|
|
912
|
+
display: flex;
|
|
913
|
+
align-items: center;
|
|
914
|
+
justify-content: space-between;
|
|
915
|
+
font-size: var(--c-font-size-sm);
|
|
916
|
+
font-weight: var(--c-font-weight-bold);
|
|
917
|
+
}
|
|
918
|
+
|
|
919
|
+
.m_69a4aa7:where([data-with-close-button]) {
|
|
920
|
+
padding-inline-end: var(--c-spacing-md);
|
|
921
|
+
}
|
|
922
|
+
|
|
923
|
+
.m_625a743 {
|
|
924
|
+
display: block;
|
|
925
|
+
overflow: hidden;
|
|
926
|
+
text-overflow: ellipsis;
|
|
927
|
+
}
|
|
928
|
+
|
|
929
|
+
.m_efad4e4a {
|
|
930
|
+
line-height: 1;
|
|
931
|
+
width: calc(1.25rem * var(--c-scale));
|
|
932
|
+
height: calc(1.25rem * var(--c-scale));
|
|
933
|
+
display: flex;
|
|
934
|
+
align-items: center;
|
|
935
|
+
justify-content: flex-start;
|
|
936
|
+
margin-inline-end: var(--c-spacing-md);
|
|
937
|
+
margin-top: calc(0.0625rem * var(--c-scale));
|
|
938
|
+
}
|
|
939
|
+
|
|
940
|
+
.m_50085096 {
|
|
941
|
+
text-overflow: ellipsis;
|
|
942
|
+
overflow: hidden;
|
|
943
|
+
font-size: var(--c-font-size-sm);
|
|
944
|
+
}
|
|
945
|
+
|
|
946
|
+
:where([data-c-color-scheme='light']) .m_50085096 {
|
|
947
|
+
color: var(--c-color-black);
|
|
948
|
+
}
|
|
949
|
+
|
|
950
|
+
:where([data-c-color-scheme='dark']) .m_50085096 {
|
|
951
|
+
color: var(--c-color-white);
|
|
952
|
+
}
|
|
953
|
+
|
|
954
|
+
.m_50085096:where([data-variant='filled']) {
|
|
955
|
+
color: var(--alert-color);
|
|
956
|
+
}
|
|
957
|
+
|
|
958
|
+
.m_50085096:where([data-variant='white']) {
|
|
959
|
+
color: var(--c-color-black);
|
|
960
|
+
}
|
|
961
|
+
|
|
962
|
+
.m_91af3d78 {
|
|
963
|
+
width: calc(1.25rem * var(--c-scale));
|
|
964
|
+
height: calc(1.25rem * var(--c-scale));
|
|
965
|
+
color: var(--alert-color);
|
|
966
|
+
}
|
|
967
|
+
|
|
885
968
|
.m_31f351f9 {
|
|
886
969
|
--ar-ratio: 1;
|
|
887
970
|
max-width: 100%;
|
|
@@ -906,6 +989,65 @@ fieldset:disabled .c-active:active {
|
|
|
906
989
|
display: inline-flex;
|
|
907
990
|
}
|
|
908
991
|
|
|
992
|
+
.m_504ae648 {
|
|
993
|
+
--cb-size-xs: calc(1.125rem * var(--c-scale));
|
|
994
|
+
--cb-size-sm: calc(1.375rem * var(--c-scale));
|
|
995
|
+
--cb-size-md: calc(1.75rem * var(--c-scale));
|
|
996
|
+
--cb-size-lg: calc(2.125rem * var(--c-scale));
|
|
997
|
+
--cb-size-xl: calc(2.75rem * var(--c-scale));
|
|
998
|
+
|
|
999
|
+
--cb-size: var(--cb-size-md);
|
|
1000
|
+
--cb-icon-size: 70%;
|
|
1001
|
+
--cb-radius: var(--c-radius-default);
|
|
1002
|
+
|
|
1003
|
+
line-height: 1;
|
|
1004
|
+
display: inline-flex;
|
|
1005
|
+
align-items: center;
|
|
1006
|
+
justify-content: center;
|
|
1007
|
+
position: relative;
|
|
1008
|
+
user-select: none;
|
|
1009
|
+
|
|
1010
|
+
width: var(--cb-size);
|
|
1011
|
+
height: var(--cb-size);
|
|
1012
|
+
min-width: var(--cb-size);
|
|
1013
|
+
min-height: var(--cb-size);
|
|
1014
|
+
border-radius: var(--cb-radius);
|
|
1015
|
+
}
|
|
1016
|
+
|
|
1017
|
+
:where([data-c-color-scheme='light']) .m_504ae648 {
|
|
1018
|
+
color: var(--c-color-gray-7);
|
|
1019
|
+
}
|
|
1020
|
+
|
|
1021
|
+
:where([data-c-color-scheme='dark']) .m_504ae648 {
|
|
1022
|
+
color: var(--c-color-dark-1);
|
|
1023
|
+
}
|
|
1024
|
+
|
|
1025
|
+
.m_504ae648[data-disabled],
|
|
1026
|
+
.m_504ae648:disabled {
|
|
1027
|
+
cursor: not-allowed;
|
|
1028
|
+
opacity: 0.6;
|
|
1029
|
+
}
|
|
1030
|
+
|
|
1031
|
+
@media (hover: hover) {
|
|
1032
|
+
:where([data-c-color-scheme='light']) .m_ef2dc695:where(:not([data-disabled], :disabled)):hover {
|
|
1033
|
+
background-color: var(--c-color-gray-0);
|
|
1034
|
+
}
|
|
1035
|
+
|
|
1036
|
+
:where([data-c-color-scheme='dark']) .m_ef2dc695:where(:not([data-disabled], :disabled)):hover {
|
|
1037
|
+
background-color: var(--c-color-dark-6);
|
|
1038
|
+
}
|
|
1039
|
+
}
|
|
1040
|
+
|
|
1041
|
+
@media (hover: none) {
|
|
1042
|
+
:where([data-c-color-scheme='light']) .m_ef2dc695:where(:not([data-disabled], :disabled)):active {
|
|
1043
|
+
background-color: var(--c-color-gray-0);
|
|
1044
|
+
}
|
|
1045
|
+
|
|
1046
|
+
:where([data-c-color-scheme='dark']) .m_ef2dc695:where(:not([data-disabled], :disabled)):active {
|
|
1047
|
+
background-color: var(--c-color-dark-6);
|
|
1048
|
+
}
|
|
1049
|
+
}
|
|
1050
|
+
|
|
909
1051
|
.m_b03efeae {
|
|
910
1052
|
--container-size-xs: calc(33.75rem * var(--c-scale));
|
|
911
1053
|
--container-size-sm: calc(45rem * var(--c-scale));
|