@vector-business-services/cristal-ds-web 0.5.0 → 0.6.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/dist/index.cjs +18 -4
- package/dist/index.cjs.map +1 -1
- package/dist/index.css +125 -11
- package/dist/index.css.map +1 -1
- package/dist/index.d.cts +6 -1
- package/dist/index.d.ts +6 -1
- package/dist/index.js +18 -4
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
package/dist/index.css
CHANGED
|
@@ -161,18 +161,27 @@
|
|
|
161
161
|
.cr-autocomplete__panel > :first-child::-webkit-scrollbar {
|
|
162
162
|
width: 12px;
|
|
163
163
|
}
|
|
164
|
-
.cr-autocomplete__panel > :first-child::-webkit-scrollbar-track
|
|
164
|
+
.cr-autocomplete__panel > :first-child::-webkit-scrollbar-track,
|
|
165
|
+
.cr-autocomplete__panel > :first-child::-webkit-scrollbar-thumb {
|
|
165
166
|
border-left: var(--cr-spacing-spacing-3) solid transparent;
|
|
166
|
-
border-radius:
|
|
167
|
+
border-radius: 8px 4px 4px 8px / 4px;
|
|
167
168
|
background-clip: padding-box;
|
|
169
|
+
}
|
|
170
|
+
.cr-autocomplete__panel > :first-child::-webkit-scrollbar-track {
|
|
168
171
|
background-color: var(--cr-color-fill-neutral-subtlest);
|
|
169
172
|
}
|
|
170
173
|
.cr-autocomplete__panel > :first-child::-webkit-scrollbar-thumb {
|
|
171
|
-
border-left: var(--cr-spacing-spacing-3) solid transparent;
|
|
172
|
-
border-radius: var(--cr-radius-full);
|
|
173
|
-
background-clip: padding-box;
|
|
174
174
|
background-color: var(--cr-color-fill-neutral-subtle);
|
|
175
175
|
}
|
|
176
|
+
.cr-autocomplete__panel > :first-child::-webkit-scrollbar-thumb:hover {
|
|
177
|
+
background-color: var(--cr-color-fill-neutral-subtle-hover);
|
|
178
|
+
}
|
|
179
|
+
@supports not selector(::-webkit-scrollbar) {
|
|
180
|
+
.cr-autocomplete__panel > :first-child {
|
|
181
|
+
scrollbar-width: thin;
|
|
182
|
+
scrollbar-color: var(--cr-color-fill-neutral-subtle) var(--cr-color-fill-neutral-subtlest);
|
|
183
|
+
}
|
|
184
|
+
}
|
|
176
185
|
.cr-autocomplete__list {
|
|
177
186
|
margin: 0;
|
|
178
187
|
padding: 0;
|
|
@@ -774,6 +783,7 @@
|
|
|
774
783
|
inset: 0;
|
|
775
784
|
display: flex;
|
|
776
785
|
background-color: color-mix(in srgb, var(--cr-color-fill-neutral-boldest) calc(var(--cr-opacity-opacity-5) * 100%), transparent);
|
|
786
|
+
backdrop-filter: blur(5px);
|
|
777
787
|
}
|
|
778
788
|
.cr-drawer__mask--right {
|
|
779
789
|
justify-content: flex-end;
|
|
@@ -781,6 +791,53 @@
|
|
|
781
791
|
.cr-drawer__mask--left {
|
|
782
792
|
justify-content: flex-start;
|
|
783
793
|
}
|
|
794
|
+
.cr-drawer__mask--sem-overlay {
|
|
795
|
+
background-color: transparent;
|
|
796
|
+
backdrop-filter: none;
|
|
797
|
+
pointer-events: none;
|
|
798
|
+
}
|
|
799
|
+
.cr-drawer__mask--sem-overlay .cr-drawer {
|
|
800
|
+
pointer-events: auto;
|
|
801
|
+
}
|
|
802
|
+
.cr-drawer__mask--sem-overlay .cr-drawer--right {
|
|
803
|
+
box-shadow: var(--cr-elevation-gray-left-3);
|
|
804
|
+
}
|
|
805
|
+
.cr-drawer__mask--sem-overlay .cr-drawer--left {
|
|
806
|
+
box-shadow: var(--cr-elevation-gray-right-3);
|
|
807
|
+
}
|
|
808
|
+
.cr-drawer__mask:has(> .cr-drawer--enter) {
|
|
809
|
+
animation: cr-drawer-overlay 300ms ease;
|
|
810
|
+
}
|
|
811
|
+
.cr-drawer__mask:has(> .cr-drawer--exit-active) {
|
|
812
|
+
animation: cr-drawer-overlay 300ms ease reverse forwards;
|
|
813
|
+
}
|
|
814
|
+
@keyframes cr-drawer-overlay {
|
|
815
|
+
from {
|
|
816
|
+
background-color: transparent;
|
|
817
|
+
backdrop-filter: blur(0);
|
|
818
|
+
}
|
|
819
|
+
}
|
|
820
|
+
.cr-drawer--enter,
|
|
821
|
+
.cr-drawer--exit-active {
|
|
822
|
+
transform: translateX(var(--cr-drawer-fora));
|
|
823
|
+
}
|
|
824
|
+
.cr-drawer--enter-active {
|
|
825
|
+
transform: none;
|
|
826
|
+
transition: transform 300ms ease-out;
|
|
827
|
+
}
|
|
828
|
+
.cr-drawer--exit-active {
|
|
829
|
+
transition: transform 300ms ease-in;
|
|
830
|
+
}
|
|
831
|
+
@media (prefers-reduced-motion: reduce) {
|
|
832
|
+
.cr-drawer__mask:has(> .cr-drawer--enter),
|
|
833
|
+
.cr-drawer__mask:has(> .cr-drawer--exit-active) {
|
|
834
|
+
animation: none;
|
|
835
|
+
}
|
|
836
|
+
.cr-drawer--enter-active,
|
|
837
|
+
.cr-drawer--exit-active {
|
|
838
|
+
transition: none;
|
|
839
|
+
}
|
|
840
|
+
}
|
|
784
841
|
.cr-drawer {
|
|
785
842
|
position: relative;
|
|
786
843
|
box-sizing: border-box;
|
|
@@ -791,9 +848,11 @@
|
|
|
791
848
|
color: var(--cr-color-text-neutral-base);
|
|
792
849
|
}
|
|
793
850
|
.cr-drawer--right {
|
|
851
|
+
--cr-drawer-fora: 100%;
|
|
794
852
|
box-shadow: var(--cr-elevation-gray-left-4);
|
|
795
853
|
}
|
|
796
854
|
.cr-drawer--left {
|
|
855
|
+
--cr-drawer-fora: -100%;
|
|
797
856
|
box-shadow: var(--cr-elevation-gray-right-4);
|
|
798
857
|
}
|
|
799
858
|
.cr-drawer__panel {
|
|
@@ -804,7 +863,9 @@
|
|
|
804
863
|
.cr-drawer--full .cr-drawer__panel {
|
|
805
864
|
box-sizing: border-box;
|
|
806
865
|
padding: var(--cr-padding-padding-6);
|
|
866
|
+
padding-right: calc(var(--cr-padding-padding-6) - 8px);
|
|
807
867
|
overflow-y: auto;
|
|
868
|
+
scrollbar-gutter: stable;
|
|
808
869
|
}
|
|
809
870
|
.cr-drawer--full .cr-drawer__header {
|
|
810
871
|
padding-bottom: var(--cr-padding-padding-6);
|
|
@@ -819,7 +880,9 @@
|
|
|
819
880
|
flex: 1 1 0;
|
|
820
881
|
min-height: 0;
|
|
821
882
|
padding: var(--cr-padding-padding-6);
|
|
883
|
+
padding-right: calc(var(--cr-padding-padding-6) - 8px);
|
|
822
884
|
overflow-y: auto;
|
|
885
|
+
scrollbar-gutter: stable;
|
|
823
886
|
}
|
|
824
887
|
.cr-drawer--fixed .cr-drawer__footer {
|
|
825
888
|
padding: var(--cr-padding-padding-6);
|
|
@@ -950,16 +1013,25 @@
|
|
|
950
1013
|
--cr-menu-item-height: 29px;
|
|
951
1014
|
}
|
|
952
1015
|
.cr-menu__list::-webkit-scrollbar {
|
|
953
|
-
width:
|
|
1016
|
+
width: 12px;
|
|
1017
|
+
}
|
|
1018
|
+
.cr-menu__list::-webkit-scrollbar-track,
|
|
1019
|
+
.cr-menu__list::-webkit-scrollbar-thumb {
|
|
1020
|
+
border-color: transparent;
|
|
1021
|
+
border-style: solid;
|
|
1022
|
+
border-width: 3px 3px 3px 1px;
|
|
1023
|
+
border-radius: 5px 7px 7px 5px / 7px;
|
|
1024
|
+
background-clip: padding-box;
|
|
954
1025
|
}
|
|
955
1026
|
.cr-menu__list::-webkit-scrollbar-track {
|
|
956
|
-
border-radius: var(--cr-radius-full);
|
|
957
1027
|
background-color: var(--cr-color-fill-neutral-subtlest);
|
|
958
1028
|
}
|
|
959
1029
|
.cr-menu__list::-webkit-scrollbar-thumb {
|
|
960
|
-
border-radius: var(--cr-radius-full);
|
|
961
1030
|
background-color: var(--cr-color-fill-neutral-subtle);
|
|
962
1031
|
}
|
|
1032
|
+
.cr-menu__list::-webkit-scrollbar-thumb:hover {
|
|
1033
|
+
background-color: var(--cr-color-fill-neutral-subtle-hover);
|
|
1034
|
+
}
|
|
963
1035
|
@supports not selector(::-webkit-scrollbar) {
|
|
964
1036
|
.cr-menu__list {
|
|
965
1037
|
scrollbar-width: thin;
|
|
@@ -1347,6 +1419,7 @@
|
|
|
1347
1419
|
justify-content: center;
|
|
1348
1420
|
padding: var(--cr-padding-padding-8);
|
|
1349
1421
|
background-color: color-mix(in srgb, var(--cr-color-fill-neutral-boldest) calc(var(--cr-opacity-opacity-5) * 100%), transparent);
|
|
1422
|
+
backdrop-filter: blur(5px);
|
|
1350
1423
|
}
|
|
1351
1424
|
.cr-modal {
|
|
1352
1425
|
display: flex;
|
|
@@ -1385,6 +1458,7 @@
|
|
|
1385
1458
|
min-height: 0;
|
|
1386
1459
|
overflow-y: auto;
|
|
1387
1460
|
outline: none;
|
|
1461
|
+
scrollbar-gutter: stable;
|
|
1388
1462
|
}
|
|
1389
1463
|
.cr-modal__body > * {
|
|
1390
1464
|
flex-shrink: 0;
|
|
@@ -1427,6 +1501,7 @@
|
|
|
1427
1501
|
}
|
|
1428
1502
|
.cr-modal--large .cr-modal__body {
|
|
1429
1503
|
padding: var(--cr-padding-padding-8);
|
|
1504
|
+
padding-right: calc(var(--cr-padding-padding-8) - 8px);
|
|
1430
1505
|
}
|
|
1431
1506
|
.cr-modal--large .cr-modal__footer {
|
|
1432
1507
|
padding: var(--cr-padding-padding-6) var(--cr-padding-padding-8) var(--cr-padding-padding-8);
|
|
@@ -1462,6 +1537,7 @@
|
|
|
1462
1537
|
.cr-modal--medium .cr-modal__body {
|
|
1463
1538
|
max-height: 582px;
|
|
1464
1539
|
padding: var(--cr-padding-padding-7) var(--cr-padding-padding-9);
|
|
1540
|
+
padding-right: calc(var(--cr-padding-padding-9) - 8px);
|
|
1465
1541
|
}
|
|
1466
1542
|
.cr-modal--small .cr-modal__footer,
|
|
1467
1543
|
.cr-modal--medium .cr-modal__footer {
|
|
@@ -1493,6 +1569,7 @@
|
|
|
1493
1569
|
}
|
|
1494
1570
|
.cr-modal--large .cr-modal__body {
|
|
1495
1571
|
padding: var(--cr-padding-padding-8) var(--cr-padding-padding-6);
|
|
1572
|
+
padding-right: calc(var(--cr-padding-padding-6) - 8px);
|
|
1496
1573
|
}
|
|
1497
1574
|
.cr-modal--large .cr-modal__footer {
|
|
1498
1575
|
padding: var(--cr-padding-padding-6) var(--cr-padding-padding-6) var(--cr-padding-padding-8);
|
|
@@ -1673,6 +1750,30 @@
|
|
|
1673
1750
|
.cr-multiselect__wrapper {
|
|
1674
1751
|
overflow: auto;
|
|
1675
1752
|
}
|
|
1753
|
+
.cr-multiselect__wrapper::-webkit-scrollbar {
|
|
1754
|
+
width: 12px;
|
|
1755
|
+
}
|
|
1756
|
+
.cr-multiselect__wrapper::-webkit-scrollbar-track,
|
|
1757
|
+
.cr-multiselect__wrapper::-webkit-scrollbar-thumb {
|
|
1758
|
+
border-left: var(--cr-spacing-spacing-3) solid transparent;
|
|
1759
|
+
border-radius: 8px 4px 4px 8px / 4px;
|
|
1760
|
+
background-clip: padding-box;
|
|
1761
|
+
}
|
|
1762
|
+
.cr-multiselect__wrapper::-webkit-scrollbar-track {
|
|
1763
|
+
background-color: var(--cr-color-fill-neutral-subtlest);
|
|
1764
|
+
}
|
|
1765
|
+
.cr-multiselect__wrapper::-webkit-scrollbar-thumb {
|
|
1766
|
+
background-color: var(--cr-color-fill-neutral-subtle);
|
|
1767
|
+
}
|
|
1768
|
+
.cr-multiselect__wrapper::-webkit-scrollbar-thumb:hover {
|
|
1769
|
+
background-color: var(--cr-color-fill-neutral-subtle-hover);
|
|
1770
|
+
}
|
|
1771
|
+
@supports not selector(::-webkit-scrollbar) {
|
|
1772
|
+
.cr-multiselect__wrapper {
|
|
1773
|
+
scrollbar-width: thin;
|
|
1774
|
+
scrollbar-color: var(--cr-color-fill-neutral-subtle) var(--cr-color-fill-neutral-subtlest);
|
|
1775
|
+
}
|
|
1776
|
+
}
|
|
1676
1777
|
.cr-multiselect__list {
|
|
1677
1778
|
margin: 0;
|
|
1678
1779
|
padding: 0;
|
|
@@ -2045,16 +2146,29 @@ body.p-scrollpanel-grabbed {
|
|
|
2045
2146
|
overflow-y: auto;
|
|
2046
2147
|
}
|
|
2047
2148
|
.cr-select__wrapper::-webkit-scrollbar {
|
|
2048
|
-
width:
|
|
2149
|
+
width: 12px;
|
|
2150
|
+
}
|
|
2151
|
+
.cr-select__wrapper::-webkit-scrollbar-track,
|
|
2152
|
+
.cr-select__wrapper::-webkit-scrollbar-thumb {
|
|
2153
|
+
border-left: var(--cr-spacing-spacing-3) solid transparent;
|
|
2154
|
+
border-radius: 8px 4px 4px 8px / 4px;
|
|
2155
|
+
background-clip: padding-box;
|
|
2049
2156
|
}
|
|
2050
2157
|
.cr-select__wrapper::-webkit-scrollbar-track {
|
|
2051
|
-
border-radius: var(--cr-radius-full);
|
|
2052
2158
|
background-color: var(--cr-color-fill-neutral-subtlest);
|
|
2053
2159
|
}
|
|
2054
2160
|
.cr-select__wrapper::-webkit-scrollbar-thumb {
|
|
2055
|
-
border-radius: var(--cr-radius-full);
|
|
2056
2161
|
background-color: var(--cr-color-fill-neutral-subtle);
|
|
2057
2162
|
}
|
|
2163
|
+
.cr-select__wrapper::-webkit-scrollbar-thumb:hover {
|
|
2164
|
+
background-color: var(--cr-color-fill-neutral-subtle-hover);
|
|
2165
|
+
}
|
|
2166
|
+
@supports not selector(::-webkit-scrollbar) {
|
|
2167
|
+
.cr-select__wrapper {
|
|
2168
|
+
scrollbar-width: thin;
|
|
2169
|
+
scrollbar-color: var(--cr-color-fill-neutral-subtle) var(--cr-color-fill-neutral-subtlest);
|
|
2170
|
+
}
|
|
2171
|
+
}
|
|
2058
2172
|
.cr-select__list {
|
|
2059
2173
|
margin: 0;
|
|
2060
2174
|
padding: 0;
|