wehub-resource-sync
94 lines
2.9 KiB
CSS
94 lines
2.9 KiB
CSS
/* Base scroll-shadow component */
|
|
.scroll-shadow {
|
|
@apply relative;
|
|
--scroll-shadow-size: 40px;
|
|
--scroll-shadow-scrollbar-size: 10px;
|
|
}
|
|
|
|
/* Orientation: Vertical */
|
|
.scroll-shadow--vertical {
|
|
@apply scrollbar overflow-y-auto;
|
|
}
|
|
|
|
/* Orientation: Horizontal */
|
|
.scroll-shadow--horizontal {
|
|
@apply scrollbar overflow-x-auto;
|
|
}
|
|
|
|
/* Variant: Fade - Vertical */
|
|
.scroll-shadow--fade.scroll-shadow--vertical {
|
|
&:where([data-top-scroll="true"], [data-bottom-scroll="true"], [data-top-bottom-scroll="true"]) {
|
|
mask-image: linear-gradient(var(--scroll-linear-gradient)), linear-gradient(#000, #000);
|
|
mask-position:
|
|
left top,
|
|
right top;
|
|
mask-repeat: no-repeat;
|
|
mask-size:
|
|
calc(100% - var(--scroll-shadow-scrollbar-size)) 100%,
|
|
var(--scroll-shadow-scrollbar-size) 100%;
|
|
-webkit-mask-image: linear-gradient(var(--scroll-linear-gradient)), linear-gradient(#000, #000);
|
|
-webkit-mask-position:
|
|
left top,
|
|
right top;
|
|
-webkit-mask-repeat: no-repeat;
|
|
-webkit-mask-size:
|
|
calc(100% - var(--scroll-shadow-scrollbar-size)) 100%,
|
|
var(--scroll-shadow-scrollbar-size) 100%;
|
|
}
|
|
|
|
&[data-top-scroll="true"] {
|
|
--scroll-linear-gradient: 0deg, #000 calc(100% - var(--scroll-shadow-size)), transparent;
|
|
}
|
|
|
|
&[data-bottom-scroll="true"] {
|
|
--scroll-linear-gradient: 180deg, #000 calc(100% - var(--scroll-shadow-size)), transparent;
|
|
}
|
|
|
|
&[data-top-bottom-scroll="true"] {
|
|
--scroll-linear-gradient:
|
|
#000, #000, transparent 0, #000 var(--scroll-shadow-size),
|
|
#000 calc(100% - var(--scroll-shadow-size)), transparent;
|
|
}
|
|
}
|
|
|
|
/* Variant: Fade - Horizontal */
|
|
.scroll-shadow--fade.scroll-shadow--horizontal {
|
|
&:where([data-left-scroll="true"], [data-right-scroll="true"], [data-left-right-scroll="true"]) {
|
|
mask-image: linear-gradient(var(--scroll-linear-gradient)), linear-gradient(#000, #000);
|
|
mask-position:
|
|
left top,
|
|
left bottom;
|
|
mask-repeat: no-repeat;
|
|
mask-size:
|
|
100% calc(100% - var(--scroll-shadow-scrollbar-size)),
|
|
100% var(--scroll-shadow-scrollbar-size);
|
|
-webkit-mask-image: linear-gradient(var(--scroll-linear-gradient)), linear-gradient(#000, #000);
|
|
-webkit-mask-position:
|
|
left top,
|
|
left bottom;
|
|
-webkit-mask-repeat: no-repeat;
|
|
-webkit-mask-size:
|
|
100% calc(100% - var(--scroll-shadow-scrollbar-size)),
|
|
100% var(--scroll-shadow-scrollbar-size);
|
|
}
|
|
|
|
&[data-left-scroll="true"] {
|
|
--scroll-linear-gradient: 270deg, #000 calc(100% - var(--scroll-shadow-size)), transparent;
|
|
}
|
|
|
|
&[data-right-scroll="true"] {
|
|
--scroll-linear-gradient: 90deg, #000 calc(100% - var(--scroll-shadow-size)), transparent;
|
|
}
|
|
|
|
&[data-left-right-scroll="true"] {
|
|
--scroll-linear-gradient:
|
|
to right, #000, #000, transparent 0, #000 var(--scroll-shadow-size),
|
|
#000 calc(100% - var(--scroll-shadow-size)), transparent;
|
|
}
|
|
}
|
|
|
|
.scroll-shadow--hide-scrollbar {
|
|
@apply scrollbar-none;
|
|
--scroll-shadow-scrollbar-size: 0px;
|
|
}
|