@cocreate/scrollbar 0.0.0-stage → 1.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/.github/FUNDING.yml +3 -0
- package/.github/workflows/automated.yml +69 -0
- package/.github/workflows/manual.yml +43 -0
- package/CHANGELOG.md +1414 -0
- package/CONTRIBUTING.md +97 -0
- package/CoCreate.config.js +23 -0
- package/LICENSE +21 -0
- package/README.md +147 -2
- package/demo/index.html +196 -0
- package/docs/index.html +439 -0
- package/package.json +54 -4
- package/prettier.config.js +16 -0
- package/release.config.js +30 -0
- package/src/index.css +172 -0
- package/src/index.js +551 -0
- package/webpack.config.js +65 -0
package/src/index.css
ADDED
|
@@ -0,0 +1,172 @@
|
|
|
1
|
+
/*
|
|
2
|
+
* CoCreateScrollbar - Modern Overlay Scrollbar Stylesheet
|
|
3
|
+
* Version 2.1.0
|
|
4
|
+
*/
|
|
5
|
+
|
|
6
|
+
/* Non-scrolling host for the native viewport and overlay tracks */
|
|
7
|
+
[scrollbar] {
|
|
8
|
+
position: relative !important;
|
|
9
|
+
overflow: hidden !important;
|
|
10
|
+
box-sizing: border-box;
|
|
11
|
+
}
|
|
12
|
+
|
|
13
|
+
/* Scrollable viewport - hides native scrollbars across browsers */
|
|
14
|
+
[scrollbar] > .scrollbar-viewport {
|
|
15
|
+
width: 100%;
|
|
16
|
+
height: 100%;
|
|
17
|
+
overflow: auto !important;
|
|
18
|
+
box-sizing: border-box;
|
|
19
|
+
scrollbar-width: none !important; /* Firefox */
|
|
20
|
+
-ms-overflow-style: none !important; /* IE 10+ and Edge */
|
|
21
|
+
-webkit-overflow-scrolling: touch; /* Smooth iOS scrolling */
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
[scrollbar] > .scrollbar-viewport::-webkit-scrollbar {
|
|
25
|
+
display: none !important;
|
|
26
|
+
width: 0 !important;
|
|
27
|
+
height: 0 !important;
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
/* Overlay track base */
|
|
31
|
+
[scrollbar] > .scrollbar-track {
|
|
32
|
+
position: absolute;
|
|
33
|
+
z-index: 30;
|
|
34
|
+
pointer-events: none;
|
|
35
|
+
border-radius: 9999px;
|
|
36
|
+
opacity: 0;
|
|
37
|
+
background-color: var(--cc-track-bg, rgba(0, 0, 0, 0.05));
|
|
38
|
+
transition:
|
|
39
|
+
opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1),
|
|
40
|
+
background-color 0.2s ease,
|
|
41
|
+
width 0.15s ease,
|
|
42
|
+
height 0.15s ease;
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
/* Interactive thumb base */
|
|
46
|
+
[scrollbar] > .scrollbar-track > .scrollbar-thumb {
|
|
47
|
+
pointer-events: auto;
|
|
48
|
+
border-radius: 9999px;
|
|
49
|
+
cursor: pointer;
|
|
50
|
+
will-change: transform;
|
|
51
|
+
background-color: var(--cc-thumb-bg, rgba(129, 140, 248, 0.75));
|
|
52
|
+
transition: background-color 0.15s ease, opacity 0.2s ease;
|
|
53
|
+
}
|
|
54
|
+
|
|
55
|
+
/* Vertical track positioning and sizing */
|
|
56
|
+
[scrollbar] > .scrollbar-track-y {
|
|
57
|
+
top: 4px;
|
|
58
|
+
right: 4px;
|
|
59
|
+
bottom: 4px;
|
|
60
|
+
width: 6px;
|
|
61
|
+
}
|
|
62
|
+
|
|
63
|
+
[scrollbar] > .scrollbar-track-y.pos-left {
|
|
64
|
+
right: auto;
|
|
65
|
+
left: 4px;
|
|
66
|
+
}
|
|
67
|
+
|
|
68
|
+
[scrollbar] > .scrollbar-track-y > .scrollbar-thumb {
|
|
69
|
+
width: 100%;
|
|
70
|
+
height: 24px;
|
|
71
|
+
}
|
|
72
|
+
|
|
73
|
+
/* Horizontal track positioning and sizing */
|
|
74
|
+
[scrollbar] > .scrollbar-track-x {
|
|
75
|
+
right: 4px;
|
|
76
|
+
bottom: 4px;
|
|
77
|
+
left: 4px;
|
|
78
|
+
height: 6px;
|
|
79
|
+
}
|
|
80
|
+
|
|
81
|
+
[scrollbar] > .scrollbar-track-x.pos-top {
|
|
82
|
+
top: 4px;
|
|
83
|
+
bottom: auto;
|
|
84
|
+
}
|
|
85
|
+
|
|
86
|
+
[scrollbar] > .scrollbar-track-x > .scrollbar-thumb {
|
|
87
|
+
width: 24px;
|
|
88
|
+
height: 100%;
|
|
89
|
+
}
|
|
90
|
+
|
|
91
|
+
/* Interactive hover and drag expansion states */
|
|
92
|
+
[scrollbar] > .scrollbar-track > .scrollbar-thumb:hover,
|
|
93
|
+
[scrollbar] > .scrollbar-track > .scrollbar-thumb.is-dragging {
|
|
94
|
+
background-color: var(--cc-thumb-hover-bg, rgba(165, 180, 252, 1));
|
|
95
|
+
}
|
|
96
|
+
|
|
97
|
+
[scrollbar] > .scrollbar-track-y:hover,
|
|
98
|
+
[scrollbar] > .scrollbar-track-y.is-dragging {
|
|
99
|
+
width: 8px;
|
|
100
|
+
}
|
|
101
|
+
|
|
102
|
+
[scrollbar] > .scrollbar-track-x:hover,
|
|
103
|
+
[scrollbar] > .scrollbar-track-x.is-dragging {
|
|
104
|
+
height: 8px;
|
|
105
|
+
}
|
|
106
|
+
|
|
107
|
+
/* Auto mode: show while scrolling, hovering, or dragging */
|
|
108
|
+
[scrollbar].scrolling > .scrollbar-track,
|
|
109
|
+
[scrollbar]:hover > .scrollbar-track,
|
|
110
|
+
[scrollbar].is-dragging > .scrollbar-track {
|
|
111
|
+
opacity: 1;
|
|
112
|
+
pointer-events: auto;
|
|
113
|
+
}
|
|
114
|
+
|
|
115
|
+
/* Always-visible mode */
|
|
116
|
+
[scrollbar][scrollbar-visible="show"] > .scrollbar-track,
|
|
117
|
+
[scrollbar].visible-show > .scrollbar-track {
|
|
118
|
+
opacity: 1 !important;
|
|
119
|
+
pointer-events: auto !important;
|
|
120
|
+
}
|
|
121
|
+
|
|
122
|
+
/* Axis disabling */
|
|
123
|
+
[scrollbar].disable-y > .scrollbar-track-y,
|
|
124
|
+
[scrollbar].disable-x > .scrollbar-track-x {
|
|
125
|
+
display: none !important;
|
|
126
|
+
}
|
|
127
|
+
|
|
128
|
+
[scrollbar].disable-y > .scrollbar-viewport {
|
|
129
|
+
overflow-y: hidden !important;
|
|
130
|
+
}
|
|
131
|
+
|
|
132
|
+
[scrollbar].disable-x > .scrollbar-viewport {
|
|
133
|
+
overflow-x: hidden !important;
|
|
134
|
+
}
|
|
135
|
+
|
|
136
|
+
/* Prevent text selection while dragging */
|
|
137
|
+
body.scrollbar-dragging {
|
|
138
|
+
user-select: none !important;
|
|
139
|
+
-webkit-user-select: none !important;
|
|
140
|
+
}
|
|
141
|
+
|
|
142
|
+
/* Built-in preset color themes */
|
|
143
|
+
.theme-indigo {
|
|
144
|
+
--cc-thumb-bg: rgba(129, 140, 248, 0.75);
|
|
145
|
+
--cc-thumb-hover-bg: rgba(165, 180, 252, 1);
|
|
146
|
+
}
|
|
147
|
+
|
|
148
|
+
.theme-emerald {
|
|
149
|
+
--cc-thumb-bg: rgba(52, 211, 153, 0.75);
|
|
150
|
+
--cc-thumb-hover-bg: rgba(110, 231, 183, 1);
|
|
151
|
+
}
|
|
152
|
+
|
|
153
|
+
.theme-rose {
|
|
154
|
+
--cc-thumb-bg: rgba(251, 113, 133, 0.75);
|
|
155
|
+
--cc-thumb-hover-bg: rgba(253, 164, 175, 1);
|
|
156
|
+
}
|
|
157
|
+
|
|
158
|
+
.theme-amber {
|
|
159
|
+
--cc-thumb-bg: rgba(251, 191, 36, 0.75);
|
|
160
|
+
--cc-thumb-hover-bg: rgba(252, 211, 77, 1);
|
|
161
|
+
}
|
|
162
|
+
|
|
163
|
+
.theme-glass {
|
|
164
|
+
--cc-thumb-bg: rgba(255, 255, 255, 0.3);
|
|
165
|
+
--cc-thumb-hover-bg: rgba(255, 255, 255, 0.6);
|
|
166
|
+
}
|
|
167
|
+
|
|
168
|
+
.theme-dark {
|
|
169
|
+
--cc-thumb-bg: rgba(255, 255, 255, 0.25);
|
|
170
|
+
--cc-thumb-hover-bg: rgba(255, 255, 255, 0.5);
|
|
171
|
+
--cc-track-bg: rgba(255, 255, 255, 0.05);
|
|
172
|
+
}
|