@esportsplus/ui 0.13.4 → 0.13.6
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.
|
@@ -11,7 +11,11 @@ export default (data, content) => {
|
|
|
11
11
|
return html `
|
|
12
12
|
<div
|
|
13
13
|
class='scrollbar-container'
|
|
14
|
-
|
|
14
|
+
${omit(data, ['scrollbar'])}
|
|
15
|
+
>
|
|
16
|
+
<div
|
|
17
|
+
class='scrollbar-container-content'
|
|
18
|
+
onscroll='${function () {
|
|
15
19
|
if (width === undefined) {
|
|
16
20
|
width = this.offsetWidth - this.clientWidth;
|
|
17
21
|
if (width && width !== 17) {
|
|
@@ -21,9 +25,7 @@ export default (data, content) => {
|
|
|
21
25
|
state.height = (this.clientHeight / this.scrollHeight) * 100;
|
|
22
26
|
state.translate = (this.scrollTop / this.clientHeight) * 100;
|
|
23
27
|
}}'
|
|
24
|
-
|
|
25
|
-
>
|
|
26
|
-
<div class="scrollbar-container-content">
|
|
28
|
+
>
|
|
27
29
|
${content}
|
|
28
30
|
</div>
|
|
29
31
|
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
@layer components {.scrollbar{--background:transparent;--height:0;--translate:translate3d(0,0,0);--width:4px}::-webkit-scrollbar{box-shadow:unset;background:0 0}::-webkit-scrollbar-track{box-shadow:unset;background:0 0}::-webkit-scrollbar-thumb{box-shadow:unset;background:0 0}::-webkit-scrollbar-thumb:window-inactive{box-shadow:unset;background:0 0}.scrollbar{z-index:9;height:100%}.scrollbar,.scrollbar:before{transition:opacity var(--transition-duration)ease-in-out;width:var(--width);position:absolute;top:0;right:0}.scrollbar:before{background:var(--background);content:"";height:var(--height);transform:var(--translate);transform-origin:top;border-radius:1px 0 0 1px}.scrollbar--fixed{position:fixed}.scrollbar--hidden{opacity:0}.scrollbar-container{flex-flow:column;display:flex;position:relative;overflow:hidden}.scrollbar-content{height:100%;margin-right:calc(var(--scrollbar-width)*-1);scrollbar-gutter:stable;scroll-behavior:smooth;width:calc(100% + var(--scrollbar-width));overflow:hidden scroll}.scrollbar-content--snap{scroll-snap-type:both mandatory;overscroll-behavior-x:contain;overflow:auto}.scrollbar-content--snap>*{scroll-snap-stop:normal;scroll-snap-align:center}}
|
|
1
|
+
@layer components {.scrollbar{--background:transparent;--height:0;--translate:translate3d(0,0,0);--width:4px}::-webkit-scrollbar{box-shadow:unset;background:0 0}::-webkit-scrollbar-track{box-shadow:unset;background:0 0}::-webkit-scrollbar-thumb{box-shadow:unset;background:0 0}::-webkit-scrollbar-thumb:window-inactive{box-shadow:unset;background:0 0}.scrollbar{z-index:9;height:100%}.scrollbar,.scrollbar:before{transition:opacity var(--transition-duration)ease-in-out;width:var(--width);position:absolute;top:0;right:0}.scrollbar:before{background:var(--background);content:"";height:var(--height);transform:var(--translate);transform-origin:top;border-radius:1px 0 0 1px}.scrollbar--fixed{position:fixed}.scrollbar--hidden{opacity:0}.scrollbar-container{flex-flow:column;display:flex;position:relative;overflow:hidden}.scrollbar-container-content{height:100%;margin-right:calc(var(--scrollbar-width)*-1);scrollbar-gutter:stable;scroll-behavior:smooth;width:calc(100% + var(--scrollbar-width));overflow:hidden scroll}.scrollbar-container-content--snap{scroll-snap-type:both mandatory;overscroll-behavior-x:contain;overflow:auto}.scrollbar-container-content--snap>*{scroll-snap-stop:normal;scroll-snap-align:center}}
|
|
2
2
|
/*$vite$:1*/
|
package/package.json
CHANGED
|
@@ -18,21 +18,23 @@ export default (data: Record<string, unknown> & { scrollbar?: Record<string, unk
|
|
|
18
18
|
return html`
|
|
19
19
|
<div
|
|
20
20
|
class='scrollbar-container'
|
|
21
|
-
onscroll='${function(this: HTMLElement) {
|
|
22
|
-
if (width === undefined) {
|
|
23
|
-
width = this.offsetWidth - this.clientWidth;
|
|
24
|
-
|
|
25
|
-
if (width && width !== 17) {
|
|
26
|
-
root.style.setProperty('--scrollbar-width', `${width}px`);
|
|
27
|
-
}
|
|
28
|
-
}
|
|
29
|
-
|
|
30
|
-
state.height = (this.clientHeight / this.scrollHeight) * 100;
|
|
31
|
-
state.translate = (this.scrollTop / this.clientHeight) * 100;
|
|
32
|
-
}}'
|
|
33
21
|
${omit(data, ['scrollbar'])}
|
|
34
22
|
>
|
|
35
|
-
<div
|
|
23
|
+
<div
|
|
24
|
+
class='scrollbar-container-content'
|
|
25
|
+
onscroll='${function(this: HTMLElement) {
|
|
26
|
+
if (width === undefined) {
|
|
27
|
+
width = this.offsetWidth - this.clientWidth;
|
|
28
|
+
|
|
29
|
+
if (width && width !== 17) {
|
|
30
|
+
root.style.setProperty('--scrollbar-width', `${width}px`);
|
|
31
|
+
}
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
state.height = (this.clientHeight / this.scrollHeight) * 100;
|
|
35
|
+
state.translate = (this.scrollTop / this.clientHeight) * 100;
|
|
36
|
+
}}'
|
|
37
|
+
>
|
|
36
38
|
${content}
|
|
37
39
|
</div>
|
|
38
40
|
|
|
@@ -47,25 +47,25 @@
|
|
|
47
47
|
flex-flow: column;
|
|
48
48
|
overflow: hidden;
|
|
49
49
|
position: relative;
|
|
50
|
-
}
|
|
51
50
|
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
51
|
+
&-content {
|
|
52
|
+
height: 100%;
|
|
53
|
+
margin-right: calc(var(--scrollbar-width) * -1);
|
|
54
|
+
overflow-x: hidden;
|
|
55
|
+
overflow-y: scroll;
|
|
56
|
+
scrollbar-gutter: stable;
|
|
57
|
+
scroll-behavior: smooth;
|
|
58
|
+
width: calc(100% + var(--scrollbar-width));
|
|
60
59
|
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
60
|
+
&--snap {
|
|
61
|
+
overflow: auto;
|
|
62
|
+
scroll-snap-type: both mandatory;
|
|
63
|
+
overscroll-behavior-x: contain;
|
|
65
64
|
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
65
|
+
> * {
|
|
66
|
+
scroll-snap-stop: normal;
|
|
67
|
+
scroll-snap-align: center;
|
|
68
|
+
}
|
|
69
69
|
}
|
|
70
70
|
}
|
|
71
71
|
}
|