@ac-design/design-system 2.4.1 → 2.4.2
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/lib/compat.css +8 -2
- package/dist/lib/theme.css +11 -2
- package/package.json +1 -1
package/dist/lib/compat.css
CHANGED
|
@@ -770,15 +770,21 @@ button:is([data-ac-ds], [data-ac-ds] *), input:where([type="button"], [type="res
|
|
|
770
770
|
.ac-scrollbar:where([data-ac-ds], [data-ac-ds] *) {
|
|
771
771
|
overflow: auto !important;
|
|
772
772
|
scrollbar-width: thin !important;
|
|
773
|
-
scrollbar-color:
|
|
773
|
+
scrollbar-color: transparent transparent !important;
|
|
774
|
+
&:hover:where([data-ac-ds], [data-ac-ds] *), &:focus-within:where([data-ac-ds], [data-ac-ds] *) {
|
|
775
|
+
scrollbar-color: rgb(176 176 176 / 0.55) transparent !important;
|
|
776
|
+
}
|
|
774
777
|
&:where([data-ac-ds], [data-ac-ds] *)::-webkit-scrollbar {
|
|
775
778
|
width: 4px !important;
|
|
776
779
|
height: 4px !important;
|
|
777
780
|
}
|
|
778
781
|
&:where([data-ac-ds], [data-ac-ds] *)::-webkit-scrollbar-thumb {
|
|
779
|
-
background-color:
|
|
782
|
+
background-color: transparent !important;
|
|
780
783
|
border-radius: 9999px !important;
|
|
781
784
|
}
|
|
785
|
+
&:hover:where([data-ac-ds], [data-ac-ds] *)::-webkit-scrollbar-thumb, &:focus-within:where([data-ac-ds], [data-ac-ds] *)::-webkit-scrollbar-thumb {
|
|
786
|
+
background-color: #b0b0b0 !important;
|
|
787
|
+
}
|
|
782
788
|
&:where([data-ac-ds], [data-ac-ds] *)::-webkit-scrollbar-track {
|
|
783
789
|
background: transparent !important;
|
|
784
790
|
}
|
package/dist/lib/theme.css
CHANGED
|
@@ -615,15 +615,24 @@
|
|
|
615
615
|
padding-inline: calc(var(--spacing) * 4);
|
|
616
616
|
}
|
|
617
617
|
|
|
618
|
+
/* Thin scrollbar, hidden until the pointer is over the area or focus is inside it (cloud-ui's `custom-scrollbar`). */
|
|
618
619
|
@utility ac-scrollbar {
|
|
619
620
|
overflow: auto;
|
|
620
621
|
scrollbar-width: thin;
|
|
621
|
-
scrollbar-color:
|
|
622
|
+
scrollbar-color: transparent transparent;
|
|
623
|
+
&:hover, &:focus-within { scrollbar-color: rgb(176 176 176 / 0.55) transparent; }
|
|
622
624
|
&::-webkit-scrollbar { width: 4px; height: 4px; }
|
|
623
|
-
&::-webkit-scrollbar-thumb { background-color:
|
|
625
|
+
&::-webkit-scrollbar-thumb { background-color: transparent; border-radius: 9999px; }
|
|
626
|
+
&:hover::-webkit-scrollbar-thumb, &:focus-within::-webkit-scrollbar-thumb { background-color: #b0b0b0; }
|
|
624
627
|
&::-webkit-scrollbar-track { background: transparent; }
|
|
625
628
|
}
|
|
626
629
|
|
|
630
|
+
/* With `ac-scrollbar`: keeps the thumb visible all the time (cloud-ui's `custom-scrollbar-true`). */
|
|
631
|
+
@utility ac-scrollbar-visible {
|
|
632
|
+
&.ac-scrollbar { scrollbar-color: rgb(176 176 176 / 0.55) transparent; }
|
|
633
|
+
&.ac-scrollbar::-webkit-scrollbar-thumb { background-color: #b0b0b0; }
|
|
634
|
+
}
|
|
635
|
+
|
|
627
636
|
/* Keyframes for AcSkeleton's shimmer and AcProgress's indeterminate bar; kept here so the library ships no extra CSS file. */
|
|
628
637
|
@keyframes ac-skeleton-shimmer {
|
|
629
638
|
from { background-position: 150% 0; }
|