@yoursurprise/slider 0.0.3 → 0.0.5
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/esm/index.css +79 -1
- package/dist/esm/index.css.map +1 -1
- package/dist/esm/index.js +4167 -19
- package/dist/esm/index.js.map +1 -1
- package/package.json +1 -1
- package/dist/cjs/Slider.d.ts +0 -4
- package/dist/cjs/Slider.test.d.ts +0 -1
- package/dist/cjs/index.css +0 -2
- package/dist/cjs/index.css.map +0 -1
- package/dist/cjs/index.d.ts +0 -2
- package/dist/cjs/index.js +0 -174
- package/dist/cjs/index.js.map +0 -1
package/dist/esm/index.css
CHANGED
|
@@ -1,2 +1,80 @@
|
|
|
1
|
-
.slider
|
|
1
|
+
.slider {
|
|
2
|
+
position: relative;
|
|
3
|
+
}
|
|
4
|
+
.slider__button {
|
|
5
|
+
top: 0;
|
|
6
|
+
bottom: 0;
|
|
7
|
+
margin: auto 0;
|
|
8
|
+
height: 48px;
|
|
9
|
+
width: 48px;
|
|
10
|
+
position: absolute;
|
|
11
|
+
display: none;
|
|
12
|
+
}
|
|
13
|
+
@media (hover: hover) {
|
|
14
|
+
.slider__button {
|
|
15
|
+
display: flex;
|
|
16
|
+
}
|
|
17
|
+
}
|
|
18
|
+
.slider__button--next {
|
|
19
|
+
right: -8px;
|
|
20
|
+
}
|
|
21
|
+
@media screen and (min-width: 768px) {
|
|
22
|
+
.slider__button--next {
|
|
23
|
+
right: 0;
|
|
24
|
+
}
|
|
25
|
+
}
|
|
26
|
+
.slider__button--prev {
|
|
27
|
+
left: -8px;
|
|
28
|
+
}
|
|
29
|
+
@media screen and (min-width: 768px) {
|
|
30
|
+
.slider__button--prev {
|
|
31
|
+
left: 0;
|
|
32
|
+
}
|
|
33
|
+
}
|
|
34
|
+
.slider__wrapper {
|
|
35
|
+
overscroll-behavior-x: contain;
|
|
36
|
+
-ms-overflow-style: none;
|
|
37
|
+
scrollbar-width: none;
|
|
38
|
+
display: flex;
|
|
39
|
+
flex-direction: row;
|
|
40
|
+
overflow-x: auto;
|
|
41
|
+
margin: 16px;
|
|
42
|
+
scroll-snap-type: x proximity;
|
|
43
|
+
}
|
|
44
|
+
.slider__wrapper::-webkit-scrollbar {
|
|
45
|
+
display: none;
|
|
46
|
+
}
|
|
47
|
+
@media screen and (min-width: 768px) {
|
|
48
|
+
.slider__wrapper {
|
|
49
|
+
margin: 8px;
|
|
50
|
+
}
|
|
51
|
+
}
|
|
52
|
+
@media (hover: hover) {
|
|
53
|
+
.slider__wrapper {
|
|
54
|
+
scroll-snap-type: initial;
|
|
55
|
+
}
|
|
56
|
+
}
|
|
57
|
+
.slider__wrapper.is-scrollable {
|
|
58
|
+
cursor: move;
|
|
59
|
+
}
|
|
60
|
+
.slider__wrapper.is-dragging {
|
|
61
|
+
cursor: grabbing;
|
|
62
|
+
user-select: none;
|
|
63
|
+
}
|
|
64
|
+
.slider__wrapper:not(.is-dragging) {
|
|
65
|
+
scroll-behavior: smooth;
|
|
66
|
+
}
|
|
67
|
+
.slider__wrapper__slide {
|
|
68
|
+
scroll-snap-align: start;
|
|
69
|
+
margin-right: 8px;
|
|
70
|
+
}
|
|
71
|
+
@media screen and (min-width: 768px) {
|
|
72
|
+
.slider__wrapper__slide {
|
|
73
|
+
margin-left: 0;
|
|
74
|
+
margin-right: 16px;
|
|
75
|
+
}
|
|
76
|
+
}
|
|
77
|
+
.slider__wrapper__slide:last-child {
|
|
78
|
+
margin-right: 0;
|
|
79
|
+
}
|
|
2
80
|
/*# sourceMappingURL=index.css.map */
|
package/dist/esm/index.css.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["Slider.scss"],"names":[],"mappings":"AAAA,
|
|
1
|
+
{"version":3,"sources":["Slider.scss"],"names":[],"mappings":"AAAA;EACE,kBAAkB;AACpB;AACA;EACE,MAAM;EACN,SAAS;EACT,cAAc;EACd,YAAY;EACZ,WAAW;EACX,kBAAkB;EAClB,aAAa;AACf;AACA;EACE;IACE,aAAa;EACf;AACF;AACA;EACE,WAAW;AACb;AACA;EACE;IACE,QAAQ;EACV;AACF;AACA;EACE,UAAU;AACZ;AACA;EACE;IACE,OAAO;EACT;AACF;AACA;EACE,8BAA8B;EAC9B,wBAAwB;EACxB,qBAAqB;EACrB,aAAa;EACb,mBAAmB;EACnB,gBAAgB;EAChB,YAAY;EACZ,6BAA6B;AAC/B;AACA;EACE,aAAa;AACf;AACA;EACE;IACE,WAAW;EACb;AACF;AACA;EACE;IACE,yBAAyB;EAC3B;AACF;AACA;EACE,YAAY;AACd;AACA;EACE,gBAAgB;EAChB,iBAAiB;AACnB;AACA;EACE,uBAAuB;AACzB;AACA;EACE,wBAAwB;EACxB,iBAAiB;AACnB;AACA;EACE;IACE,cAAc;IACd,kBAAkB;EACpB;AACF;AACA;EACE,eAAe;AACjB","file":"index.css","sourcesContent":[".slider {\n position: relative;\n}\n.slider__button {\n top: 0;\n bottom: 0;\n margin: auto 0;\n height: 48px;\n width: 48px;\n position: absolute;\n display: none;\n}\n@media (hover: hover) {\n .slider__button {\n display: flex;\n }\n}\n.slider__button--next {\n right: -8px;\n}\n@media screen and (min-width: 768px) {\n .slider__button--next {\n right: 0;\n }\n}\n.slider__button--prev {\n left: -8px;\n}\n@media screen and (min-width: 768px) {\n .slider__button--prev {\n left: 0;\n }\n}\n.slider__wrapper {\n overscroll-behavior-x: contain;\n -ms-overflow-style: none;\n scrollbar-width: none;\n display: flex;\n flex-direction: row;\n overflow-x: auto;\n margin: 16px;\n scroll-snap-type: x proximity;\n}\n.slider__wrapper::-webkit-scrollbar {\n display: none;\n}\n@media screen and (min-width: 768px) {\n .slider__wrapper {\n margin: 8px;\n }\n}\n@media (hover: hover) {\n .slider__wrapper {\n scroll-snap-type: initial;\n }\n}\n.slider__wrapper.is-scrollable {\n cursor: move;\n}\n.slider__wrapper.is-dragging {\n cursor: grabbing;\n user-select: none;\n}\n.slider__wrapper:not(.is-dragging) {\n scroll-behavior: smooth;\n}\n.slider__wrapper__slide {\n scroll-snap-align: start;\n margin-right: 8px;\n}\n@media screen and (min-width: 768px) {\n .slider__wrapper__slide {\n margin-left: 0;\n margin-right: 16px;\n }\n}\n.slider__wrapper__slide:last-child {\n margin-right: 0;\n}"]}
|