@brytdesigns/web-component-keen-slider-scrollbar 1.0.1 → 1.0.4
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.
|
@@ -106,7 +106,10 @@ const KeenSliderScrollbar = (props, { element }) => {
|
|
|
106
106
|
on(maxSlides, (maxSlides2) => {
|
|
107
107
|
const s = slider();
|
|
108
108
|
if (!maxSlides2) return;
|
|
109
|
-
element.style.setProperty(
|
|
109
|
+
element.style.setProperty(
|
|
110
|
+
"--keen-slider-scrollbar--total-slides",
|
|
111
|
+
`${maxSlides2}`
|
|
112
|
+
);
|
|
110
113
|
function updateDetails(slider2) {
|
|
111
114
|
setMaxIdx(slider2.track.details.maxIdx);
|
|
112
115
|
}
|
|
@@ -157,7 +160,8 @@ const KeenSliderScrollbar = (props, { element }) => {
|
|
|
157
160
|
function handleClick(e) {
|
|
158
161
|
const bp = e.target;
|
|
159
162
|
if (!bp) return;
|
|
160
|
-
if (!bp.classList.contains("keen-
|
|
163
|
+
if (!bp.classList.contains("keen-slider-scrollbar__breakpoint"))
|
|
164
|
+
return;
|
|
161
165
|
setCurrentIdx(parseInt(bp.getAttribute("data-index") || "0"));
|
|
162
166
|
updateSliderPosition(bp, slider2);
|
|
163
167
|
}
|
|
@@ -201,16 +205,16 @@ const KeenSliderScrollbar = (props, { element }) => {
|
|
|
201
205
|
return html`
|
|
202
206
|
<${Show} when=${() => maxSlides() > 1}>
|
|
203
207
|
<div
|
|
204
|
-
class="keen-
|
|
208
|
+
class="keen-slider-scrollbar__thumb"
|
|
205
209
|
ref=${(el) => setThumb(el)}
|
|
206
210
|
></div>
|
|
207
211
|
<ul
|
|
208
|
-
class="keen-
|
|
212
|
+
class="keen-slider-scrollbar__breakpoints"
|
|
209
213
|
ref=${(el) => breakpointsContainer = el}
|
|
210
214
|
>
|
|
211
215
|
<${For} each=${() => Array(maxSlides()).fill(0)}>
|
|
212
216
|
${(_, idx) => html`
|
|
213
|
-
<li class="keen-
|
|
217
|
+
<li class="keen-slider-scrollbar__breakpoint" data-index=${idx}>
|
|
214
218
|
<button type="button" style=${srOnly}>
|
|
215
219
|
<span style=${srOnly}> Breakpoint ${idx} </span>
|
|
216
220
|
</button>
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/components/keen-slider-scrollbar.ts"],"names":["maxIdx","thumb","position","draggable","slider","maxSlides","p"],"mappings":"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","file":"keen-slider-scrollbar.js","sourcesContent":["import type { CorrectComponentType } from \"@brytdesigns/web-component-utils\";\n\nimport html from \"solid-js/html\";\nimport {\n createEffect,\n createSignal,\n createMemo,\n on,\n onCleanup,\n Show,\n For,\n type Accessor,\n} from \"solid-js\";\nimport {\n getKeenSliderContext,\n type KeenSliderInstance,\n} from \"@brytdesigns/web-component-keen-slider\";\nimport { Draggable } from \"@neodrag/vanilla\";\nimport { animate } from \"popmotion\";\n\nimport {\n getRelativeBreakpoint,\n calculateMidpointPositionFromBP,\n findClosestBreakpoint,\n getMaxSlides,\n constrain,\n srOnly,\n} from \"../utils.js\";\n\ntype KeenSliderScrollbarProps = {\n target: string;\n isHidden: boolean;\n isVertical: boolean;\n};\n\nexport const KeenSliderScrollbar: CorrectComponentType<\n KeenSliderScrollbarProps\n> = (props, { element }) => {\n if (!props.target)\n return console.warn(\n \"keen-slider-scrollbar: Needs a proper target in order to properly extend a keen slider.\"\n );\n let targetEl: HTMLElement | null = element;\n if (props.target) targetEl = document.querySelector(props.target);\n if (!targetEl)\n return console.warn(\n \"keen-slider-scrollbar: Could not find the target element. Make sure it exists and is a keen-slider element.\"\n );\n if (targetEl.tagName !== \"KEEN-SLIDER\")\n targetEl = targetEl.querySelector(\"keen-slider\");\n if (!targetEl)\n return console.warn(\n \"keen-slider-scrollbar: Could not find the target element. Make sure it exists and is a keen-slider element.\"\n );\n const [slider] = getKeenSliderContext(targetEl);\n\n const [thumb, setThumb] = createSignal<HTMLElement | null>(null);\n const [position, setPosition] = createSignal({ x: 0, y: 0 });\n const [maxIdx, setMaxIdx] = createSignal(\n slider()?.track?.details?.maxIdx || 0\n );\n const [currentIdx, setCurrentIdx] = createSignal(0);\n\n let breakpointsContainer: HTMLElement | null = null;\n\n const maxSlides = createMemo(\n on(maxIdx, (maxIdx) => {\n if (!maxIdx) return 0;\n return getMaxSlides(slider());\n })\n );\n\n const draggable = createMemo(\n on(thumb, (thumb) => {\n if (!thumb) return null;\n const instance = new Draggable(thumb, {\n axis: props.isVertical ? \"y\" : \"x\",\n bounds: \"parent\",\n gpuAcceleration: true,\n position: position(),\n transform({ offsetX, offsetY }) {\n if (props.isVertical) return `translate3d(-50%, ${offsetY}px, 0)`;\n return `translate3d(${offsetX}px, -50%, 0)`;\n },\n onDrag: ({ offsetX, offsetY }) =>\n setPosition((p) => ({ ...p, x: offsetX, y: offsetY })),\n onDragEnd: (position) => {\n if (!breakpointsContainer) return;\n const bp = findClosestBreakpoint(\n position,\n breakpointsContainer.children,\n element,\n thumb\n );\n if (!bp) return;\n const p = calculateMidpointPositionFromBP(bp, element, thumb);\n animateScrollbarPosition(p);\n updateSliderPosition(bp, slider());\n setCurrentIdx(parseInt(bp.getAttribute(\"data-index\") || \"0\"));\n },\n ignoreMultitouch: true,\n });\n\n createEffect(\n on(position, (position) => {\n instance.updateOptions({\n position,\n });\n })\n );\n\n return instance;\n })\n );\n\n createEffect(\n on(draggable, (draggable) => {\n if (!draggable) return;\n onCleanup(() => {\n draggable.destroy();\n });\n })\n );\n\n createEffect(\n on(slider, (slider) => {\n if (!slider) return;\n element.setAttribute(\n \"is-vertical\",\n `${slider.options.vertical || false}`\n );\n\n function handleDetailsChanged(slider: KeenSliderInstance) {\n element.setAttribute(\n \"is-vertical\",\n `${slider.options.vertical || false}`\n );\n }\n\n slider.on(\"detailsChanged\", handleDetailsChanged);\n\n return onCleanup(() => {\n slider.on(\"detailsChanged\", handleDetailsChanged, true);\n });\n })\n );\n\n createEffect(\n on(maxSlides, (maxSlides) => {\n const s = slider();\n if (!maxSlides) return;\n element.style.setProperty(\"--total-slides\", `${maxSlides}`);\n\n function updateDetails(slider: KeenSliderInstance) {\n setMaxIdx(slider.track.details.maxIdx);\n }\n\n function handleUpdate(slider: KeenSliderInstance) {\n if (!breakpointsContainer) return;\n const bp = breakpointsContainer.children[currentIdx()];\n if (!bp) return;\n const t = thumb();\n if (!t) return;\n const p = calculateMidpointPositionFromBP(bp, element, t);\n setPosition(p);\n setMaxIdx(slider.track.details.maxIdx);\n }\n\n s.on(\"detailsChanged\", updateDetails);\n s.on(\"updated\", handleUpdate);\n\n return onCleanup(() => {\n s.on(\"detailsChanged\", updateDetails, true);\n s.on(\"updated\", handleUpdate, true);\n });\n })\n );\n\n createEffect(\n on(\n () => ({ thumb: thumb(), slider: slider() }),\n ({ thumb, slider }) => {\n if (!thumb || !slider) return;\n function updateScrollbarPosition(slider: KeenSliderInstance) {\n if (!breakpointsContainer) return;\n const bp = getRelativeBreakpoint(\n slider,\n breakpointsContainer.children\n );\n if (!bp) return;\n if (!thumb) return;\n const position = calculateMidpointPositionFromBP(bp, element, thumb);\n animateScrollbarPosition(position);\n setCurrentIdx(parseInt(bp.getAttribute(\"data-index\") || \"0\"));\n }\n slider.on(\"slideChanged\", updateScrollbarPosition);\n }\n )\n );\n\n createEffect(\n on(\n () => ({ thumb: thumb(), slider: slider() }),\n ({ thumb, slider }) => {\n if (!thumb || !slider) return;\n\n function handleClick(e: Event) {\n const bp = e.target as HTMLElement | null;\n if (!bp) return;\n if (!bp.classList.contains(\"keen-scrollbar-breakpoint\")) return;\n setCurrentIdx(parseInt(bp.getAttribute(\"data-index\") || \"0\"));\n updateSliderPosition(bp, slider);\n }\n\n element.addEventListener(\"click\", handleClick);\n\n return onCleanup(() => {\n element.removeEventListener(\"click\", handleClick);\n });\n }\n )\n );\n\n createEffect(\n on(maxIdx, (maxIdx) => {\n if (maxIdx === 0) element.setAttribute(\"is-hidden\", `${true}`);\n else element.setAttribute(\"is-hidden\", `${false}`);\n })\n );\n\n function animateScrollbarPosition(p: { x: number; y: number }) {\n animate({\n from: position().x,\n to: p.x,\n onUpdate(latest) {\n return setPosition((p) => ({ ...p, x: latest }));\n },\n });\n animate({\n from: position().y,\n to: p.y,\n onUpdate(latest) {\n return setPosition((p) => ({ ...p, y: latest }));\n },\n });\n }\n\n function updateSliderPosition(bp: Element, slider: KeenSliderInstance) {\n const idx = constrain(\n parseInt(bp.getAttribute(\"data-index\") || \"0\") *\n ((slider?.options?.slides as any)?.perScroll || 1),\n 0,\n slider.track.details.maxIdx\n );\n slider.moveToIdx(idx);\n }\n\n return html`\n <${Show} when=${() => maxSlides() > 1}>\n <div\n class=\"keen-scrollbar-thumb\"\n ref=${(el: HTMLElement) => setThumb(el)}\n ></div>\n <ul\n class=\"keen-scrollbar-breakpoints\"\n ref=${(el: HTMLElement) => (breakpointsContainer = el)}\n >\n <${For} each=${() => Array(maxSlides()).fill(0)}>\n ${(_: number, idx: Accessor<number>) => html`\n <li class=\"keen-scrollbar-breakpoint\" data-index=${idx}>\n <button type=\"button\" style=${srOnly}>\n <span style=${srOnly}> Breakpoint ${idx} </span>\n </button>\n </li>\n `}\n <//>\n </ul>\n <//>\n `;\n};\n"]}
|
|
1
|
+
{"version":3,"sources":["../../../src/components/keen-slider-scrollbar.ts"],"names":["maxIdx","thumb","position","draggable","slider","maxSlides","p"],"mappings":"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","file":"keen-slider-scrollbar.js","sourcesContent":["import type { CorrectComponentType } from \"@brytdesigns/web-component-utils\";\n\nimport html from \"solid-js/html\";\nimport {\n createEffect,\n createSignal,\n createMemo,\n on,\n onCleanup,\n Show,\n For,\n type Accessor,\n} from \"solid-js\";\nimport {\n getKeenSliderContext,\n type KeenSliderInstance,\n} from \"@brytdesigns/web-component-keen-slider\";\nimport { Draggable } from \"@neodrag/vanilla\";\nimport { animate } from \"popmotion\";\n\nimport {\n getRelativeBreakpoint,\n calculateMidpointPositionFromBP,\n findClosestBreakpoint,\n getMaxSlides,\n constrain,\n srOnly,\n} from \"../utils.js\";\n\ntype KeenSliderScrollbarProps = {\n target: string;\n isHidden: boolean;\n isVertical: boolean;\n};\n\nexport const KeenSliderScrollbar: CorrectComponentType<\n KeenSliderScrollbarProps\n> = (props, { element }) => {\n if (!props.target)\n return console.warn(\n \"keen-slider-scrollbar: Needs a proper target in order to properly extend a keen slider.\"\n );\n let targetEl: HTMLElement | null = element;\n if (props.target) targetEl = document.querySelector(props.target);\n if (!targetEl)\n return console.warn(\n \"keen-slider-scrollbar: Could not find the target element. Make sure it exists and is a keen-slider element.\"\n );\n if (targetEl.tagName !== \"KEEN-SLIDER\")\n targetEl = targetEl.querySelector(\"keen-slider\");\n if (!targetEl)\n return console.warn(\n \"keen-slider-scrollbar: Could not find the target element. Make sure it exists and is a keen-slider element.\"\n );\n const [slider] = getKeenSliderContext(targetEl);\n\n const [thumb, setThumb] = createSignal<HTMLElement | null>(null);\n const [position, setPosition] = createSignal({ x: 0, y: 0 });\n const [maxIdx, setMaxIdx] = createSignal(\n slider()?.track?.details?.maxIdx || 0\n );\n const [currentIdx, setCurrentIdx] = createSignal(0);\n\n let breakpointsContainer: HTMLElement | null = null;\n\n const maxSlides = createMemo(\n on(maxIdx, (maxIdx) => {\n if (!maxIdx) return 0;\n return getMaxSlides(slider());\n })\n );\n\n const draggable = createMemo(\n on(thumb, (thumb) => {\n if (!thumb) return null;\n const instance = new Draggable(thumb, {\n axis: props.isVertical ? \"y\" : \"x\",\n bounds: \"parent\",\n gpuAcceleration: true,\n position: position(),\n transform({ offsetX, offsetY }) {\n if (props.isVertical) return `translate3d(-50%, ${offsetY}px, 0)`;\n return `translate3d(${offsetX}px, -50%, 0)`;\n },\n onDrag: ({ offsetX, offsetY }) =>\n setPosition((p) => ({ ...p, x: offsetX, y: offsetY })),\n onDragEnd: (position) => {\n if (!breakpointsContainer) return;\n const bp = findClosestBreakpoint(\n position,\n breakpointsContainer.children,\n element,\n thumb\n );\n if (!bp) return;\n const p = calculateMidpointPositionFromBP(bp, element, thumb);\n animateScrollbarPosition(p);\n updateSliderPosition(bp, slider());\n setCurrentIdx(parseInt(bp.getAttribute(\"data-index\") || \"0\"));\n },\n ignoreMultitouch: true,\n });\n\n createEffect(\n on(position, (position) => {\n instance.updateOptions({\n position,\n });\n })\n );\n\n return instance;\n })\n );\n\n createEffect(\n on(draggable, (draggable) => {\n if (!draggable) return;\n onCleanup(() => {\n draggable.destroy();\n });\n })\n );\n\n createEffect(\n on(slider, (slider) => {\n if (!slider) return;\n element.setAttribute(\n \"is-vertical\",\n `${slider.options.vertical || false}`\n );\n\n function handleDetailsChanged(slider: KeenSliderInstance) {\n element.setAttribute(\n \"is-vertical\",\n `${slider.options.vertical || false}`\n );\n }\n\n slider.on(\"detailsChanged\", handleDetailsChanged);\n\n return onCleanup(() => {\n slider.on(\"detailsChanged\", handleDetailsChanged, true);\n });\n })\n );\n\n createEffect(\n on(maxSlides, (maxSlides) => {\n const s = slider();\n if (!maxSlides) return;\n element.style.setProperty(\n \"--keen-slider-scrollbar--total-slides\",\n `${maxSlides}`\n );\n\n function updateDetails(slider: KeenSliderInstance) {\n setMaxIdx(slider.track.details.maxIdx);\n }\n\n function handleUpdate(slider: KeenSliderInstance) {\n if (!breakpointsContainer) return;\n const bp = breakpointsContainer.children[currentIdx()];\n if (!bp) return;\n const t = thumb();\n if (!t) return;\n const p = calculateMidpointPositionFromBP(bp, element, t);\n setPosition(p);\n setMaxIdx(slider.track.details.maxIdx);\n }\n\n s.on(\"detailsChanged\", updateDetails);\n s.on(\"updated\", handleUpdate);\n\n return onCleanup(() => {\n s.on(\"detailsChanged\", updateDetails, true);\n s.on(\"updated\", handleUpdate, true);\n });\n })\n );\n\n createEffect(\n on(\n () => ({ thumb: thumb(), slider: slider() }),\n ({ thumb, slider }) => {\n if (!thumb || !slider) return;\n function updateScrollbarPosition(slider: KeenSliderInstance) {\n if (!breakpointsContainer) return;\n const bp = getRelativeBreakpoint(\n slider,\n breakpointsContainer.children\n );\n if (!bp) return;\n if (!thumb) return;\n const position = calculateMidpointPositionFromBP(bp, element, thumb);\n animateScrollbarPosition(position);\n setCurrentIdx(parseInt(bp.getAttribute(\"data-index\") || \"0\"));\n }\n slider.on(\"slideChanged\", updateScrollbarPosition);\n }\n )\n );\n\n createEffect(\n on(\n () => ({ thumb: thumb(), slider: slider() }),\n ({ thumb, slider }) => {\n if (!thumb || !slider) return;\n\n function handleClick(e: Event) {\n const bp = e.target as HTMLElement | null;\n if (!bp) return;\n if (!bp.classList.contains(\"keen-slider-scrollbar__breakpoint\"))\n return;\n setCurrentIdx(parseInt(bp.getAttribute(\"data-index\") || \"0\"));\n updateSliderPosition(bp, slider);\n }\n\n element.addEventListener(\"click\", handleClick);\n\n return onCleanup(() => {\n element.removeEventListener(\"click\", handleClick);\n });\n }\n )\n );\n\n createEffect(\n on(maxIdx, (maxIdx) => {\n if (maxIdx === 0) element.setAttribute(\"is-hidden\", `${true}`);\n else element.setAttribute(\"is-hidden\", `${false}`);\n })\n );\n\n function animateScrollbarPosition(p: { x: number; y: number }) {\n animate({\n from: position().x,\n to: p.x,\n onUpdate(latest) {\n return setPosition((p) => ({ ...p, x: latest }));\n },\n });\n animate({\n from: position().y,\n to: p.y,\n onUpdate(latest) {\n return setPosition((p) => ({ ...p, y: latest }));\n },\n });\n }\n\n function updateSliderPosition(bp: Element, slider: KeenSliderInstance) {\n const idx = constrain(\n parseInt(bp.getAttribute(\"data-index\") || \"0\") *\n ((slider?.options?.slides as any)?.perScroll || 1),\n 0,\n slider.track.details.maxIdx\n );\n slider.moveToIdx(idx);\n }\n\n return html`\n <${Show} when=${() => maxSlides() > 1}>\n <div\n class=\"keen-slider-scrollbar__thumb\"\n ref=${(el: HTMLElement) => setThumb(el)}\n ></div>\n <ul\n class=\"keen-slider-scrollbar__breakpoints\"\n ref=${(el: HTMLElement) => (breakpointsContainer = el)}\n >\n <${For} each=${() => Array(maxSlides()).fill(0)}>\n ${(_: number, idx: Accessor<number>) => html`\n <li class=\"keen-slider-scrollbar__breakpoint\" data-index=${idx}>\n <button type=\"button\" style=${srOnly}>\n <span style=${srOnly}> Breakpoint ${idx} </span>\n </button>\n </li>\n `}\n <//>\n </ul>\n <//>\n `;\n};\n"]}
|
package/dist/styles.css
CHANGED
|
@@ -1,94 +1,99 @@
|
|
|
1
1
|
:root {
|
|
2
|
-
--scrollbar
|
|
3
|
-
--scrollbar
|
|
4
|
-
--scrollbar
|
|
5
|
-
--
|
|
6
|
-
--
|
|
7
|
-
--scrollbar
|
|
8
|
-
--scrollbar
|
|
9
|
-
--scrollbar
|
|
10
|
-
--scrollbar
|
|
11
|
-
--scrollbar
|
|
12
|
-
--scrollbar
|
|
13
|
-
--scrollbar
|
|
14
|
-
--scrollbar-
|
|
15
|
-
--scrollbar-
|
|
16
|
-
--total-slides: 2;
|
|
2
|
+
--keen-slider-scrollbar--thumb-color: #cbcbcb;
|
|
3
|
+
--keen-slider-scrollbar--track-color: #f8f8f8;
|
|
4
|
+
--keen-slider-scrollbar--padding: 0px;
|
|
5
|
+
--keen-slider-scrollbar--left: 0px;
|
|
6
|
+
--keen-slider-scrollbar--right: 0px;
|
|
7
|
+
--keen-slider-scrollbar--width: 100%;
|
|
8
|
+
--keen-slider-scrollbar--height: 5px;
|
|
9
|
+
--keen-slider-scrollbar--opacity: 1;
|
|
10
|
+
--keen-slider-scrollbar--mt: 2rem;
|
|
11
|
+
--keen-slider-scrollbar--mb: 2rem;
|
|
12
|
+
--keen-slider-scrollbar--ml: 2rem;
|
|
13
|
+
--keen-slider-scrollbar--mr: 2rem;
|
|
14
|
+
--keen-slider-scrollbar--border-radius: 1000rem;
|
|
15
|
+
--keen-slider-scrollbar--total-slides: 2;
|
|
17
16
|
}
|
|
18
17
|
|
|
19
|
-
keen-scrollbar {
|
|
18
|
+
keen-slider-scrollbar {
|
|
20
19
|
display: block;
|
|
21
|
-
width: var(--scrollbar
|
|
22
|
-
height: var(--scrollbar
|
|
23
|
-
border-radius: var(--scrollbar
|
|
20
|
+
width: var(--keen-slider-scrollbar--width);
|
|
21
|
+
height: var(--keen-slider-scrollbar--height);
|
|
22
|
+
border-radius: var(--keen-slider-scrollbar--border-radius);
|
|
24
23
|
cursor: pointer;
|
|
25
24
|
position: relative;
|
|
26
|
-
opacity: var(--scrollbar
|
|
25
|
+
opacity: var(--keen-slider-scrollbar--opacity);
|
|
27
26
|
transition: opacity 300ms ease;
|
|
28
27
|
box-sizing: border-box;
|
|
29
28
|
}
|
|
30
29
|
|
|
31
|
-
keen-scrollbar:not([is-vertical]) {
|
|
32
|
-
--scrollbar
|
|
33
|
-
--scrollbar
|
|
34
|
-
margin-top: var(--scrollbar
|
|
35
|
-
margin-bottom: var(--scrollbar
|
|
30
|
+
keen-slider-scrollbar:not([is-vertical]) {
|
|
31
|
+
--keen-slider-scrollbar--width: 100%;
|
|
32
|
+
--keen-slider-scrollbar--height: 5px;
|
|
33
|
+
margin-top: var(--keen-slider-scrollbar--mt);
|
|
34
|
+
margin-bottom: var(--keen-slider-scrollbar--mb);
|
|
36
35
|
}
|
|
37
36
|
|
|
38
|
-
keen-scrollbar[is-vertical] {
|
|
39
|
-
--scrollbar
|
|
40
|
-
--scrollbar
|
|
41
|
-
margin-left: var(--scrollbar
|
|
42
|
-
margin-right: var(--scrollbar
|
|
37
|
+
keen-slider-scrollbar[is-vertical] {
|
|
38
|
+
--keen-slider-scrollbar--height: 100%;
|
|
39
|
+
--keen-slider-scrollbar--width: 5px;
|
|
40
|
+
margin-left: var(--keen-slider-scrollbar--ml);
|
|
41
|
+
margin-right: var(--keen-slider-scrollbar--mr);
|
|
43
42
|
}
|
|
44
43
|
|
|
45
|
-
keen-scrollbar[is-hidden]:not([is-hidden="false"]) {
|
|
46
|
-
--scrollbar
|
|
44
|
+
keen-slider-scrollbar[is-hidden]:not([is-hidden="false"]) {
|
|
45
|
+
--keen-slider-scrollbar--opacity: 0;
|
|
47
46
|
|
|
48
47
|
visibility: hidden;
|
|
49
48
|
}
|
|
50
49
|
|
|
51
|
-
keen-scrollbar::before {
|
|
50
|
+
keen-slider-scrollbar::before {
|
|
52
51
|
content: "";
|
|
53
52
|
position: absolute;
|
|
54
53
|
width: 100%;
|
|
55
54
|
height: 100%;
|
|
56
|
-
background-color: var(--scrollbar
|
|
57
|
-
border-radius: var(--scrollbar
|
|
55
|
+
background-color: var(--keen-slider-scrollbar--track-color);
|
|
56
|
+
border-radius: var(--keen-slider-scrollbar--border-radius);
|
|
58
57
|
top: 0;
|
|
59
58
|
box-sizing: border-box;
|
|
60
59
|
}
|
|
61
60
|
|
|
62
|
-
keen-scrollbar .keen-
|
|
61
|
+
keen-slider-scrollbar .keen-slider-scrollbar__thumb {
|
|
63
62
|
display: block;
|
|
64
63
|
position: relative;
|
|
65
|
-
background: var(--scrollbar
|
|
66
|
-
border-radius: var(--scrollbar
|
|
64
|
+
background: var(--keen-slider-scrollbar--thumb-color);
|
|
65
|
+
border-radius: var(--keen-slider-scrollbar--border-radius);
|
|
67
66
|
box-sizing: border-box;
|
|
68
67
|
z-index: 2;
|
|
69
68
|
}
|
|
70
69
|
|
|
71
|
-
keen-scrollbar:not([is-vertical]) .keen-
|
|
70
|
+
keen-slider-scrollbar:not([is-vertical]) .keen-slider-scrollbar__thumb {
|
|
72
71
|
left: 0;
|
|
73
72
|
top: 50% !important;
|
|
74
73
|
transform: translate3d(0, -50%, 0);
|
|
75
|
-
max-width: calc(
|
|
74
|
+
max-width: calc(
|
|
75
|
+
var(--keen-slider-scrollbar--width) /
|
|
76
|
+
var(--keen-slider-scrollbar--total-slides)
|
|
77
|
+
);
|
|
76
78
|
width: 100%;
|
|
77
79
|
min-width: 10%;
|
|
78
80
|
height: 100%;
|
|
79
81
|
}
|
|
80
82
|
|
|
81
|
-
keen-scrollbar[is-vertical] .keen-
|
|
83
|
+
keen-slider-scrollbar[is-vertical] .keen-slider-scrollbar__thumb {
|
|
82
84
|
left: 50% !important;
|
|
83
85
|
top: 0;
|
|
84
86
|
transform: translate3d(-50%, 0%, 0);
|
|
85
|
-
max-height: calc(
|
|
87
|
+
max-height: calc(
|
|
88
|
+
var(--keen-slider-scrollbar--height) /
|
|
89
|
+
var(--keen-slider-scrollbar--total-slides)
|
|
90
|
+
);
|
|
86
91
|
height: 100%;
|
|
87
92
|
min-height: 10%;
|
|
88
93
|
width: 100%;
|
|
89
94
|
}
|
|
90
95
|
|
|
91
|
-
keen-scrollbar .keen-
|
|
96
|
+
keen-slider-scrollbar .keen-slider-scrollbar__breakpoints {
|
|
92
97
|
z-index: 1;
|
|
93
98
|
position: absolute;
|
|
94
99
|
display: grid;
|
|
@@ -101,12 +106,18 @@ keen-scrollbar .keen-scrollbar-breakpoints {
|
|
|
101
106
|
padding: 0;
|
|
102
107
|
}
|
|
103
108
|
|
|
104
|
-
keen-scrollbar:not([is-vertical]) .keen-
|
|
109
|
+
keen-slider-scrollbar:not([is-vertical]) .keen-slider-scrollbar__breakpoints {
|
|
105
110
|
grid-auto-rows: auto;
|
|
106
|
-
grid-template-columns: repeat(
|
|
111
|
+
grid-template-columns: repeat(
|
|
112
|
+
var(--keen-slider-scrollbar--total-slides, 1),
|
|
113
|
+
1fr
|
|
114
|
+
);
|
|
107
115
|
}
|
|
108
116
|
|
|
109
|
-
keen-scrollbar[is-vertical] .keen-
|
|
117
|
+
keen-slider-scrollbar[is-vertical] .keen-slider-scrollbar__breakpoints {
|
|
110
118
|
grid-auto-columns: auto;
|
|
111
|
-
grid-template-rows: repeat(
|
|
119
|
+
grid-template-rows: repeat(
|
|
120
|
+
var(--keen-slider-scrollbar--total-slides, 1),
|
|
121
|
+
1fr
|
|
122
|
+
);
|
|
112
123
|
}
|