@getflip/swirl-components 0.30.1 → 0.30.2
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/components.json +1 -1
- package/dist/cjs/swirl-carousel-slide.cjs.entry.js +1 -1
- package/dist/cjs/swirl-carousel.cjs.entry.js +2 -2
- package/dist/collection/assets/pdfjs/pdf.worker.min.js +1 -1
- package/dist/collection/components/swirl-carousel/swirl-carousel.css +15 -37
- package/dist/collection/components/swirl-carousel/swirl-carousel.js +1 -1
- package/dist/collection/components/swirl-carousel-slide/swirl-carousel-slide.css +0 -1
- package/dist/components/assets/pdfjs/pdf.worker.min.js +1 -1
- package/dist/components/swirl-carousel-slide.js +1 -1
- package/dist/components/swirl-carousel.js +2 -2
- package/dist/esm/swirl-carousel-slide.entry.js +1 -1
- package/dist/esm/swirl-carousel.entry.js +2 -2
- package/dist/swirl-components/p-46471545.entry.js +1 -0
- package/dist/swirl-components/p-5540e1a5.entry.js +1 -0
- package/dist/swirl-components/swirl-components.esm.js +1 -1
- package/package.json +1 -1
- package/dist/swirl-components/p-b3662c86.entry.js +0 -1
- package/dist/swirl-components/p-d587d50b.entry.js +0 -1
|
@@ -3,6 +3,8 @@
|
|
|
3
3
|
display: block;
|
|
4
4
|
overflow: hidden;
|
|
5
5
|
width: 100%;
|
|
6
|
+
margin-top: calc(-1 * var(--s-space-24));
|
|
7
|
+
margin-bottom: calc(-1 * var(--s-space-24));
|
|
6
8
|
}
|
|
7
9
|
|
|
8
10
|
:host(:hover) .carousel__previous-slide-button {
|
|
@@ -25,42 +27,13 @@
|
|
|
25
27
|
width: 100%;
|
|
26
28
|
}
|
|
27
29
|
|
|
28
|
-
.carousel:before {
|
|
29
|
-
position: absolute;
|
|
30
|
-
z-index: 1;
|
|
31
|
-
top: 0;
|
|
32
|
-
left: 0;
|
|
33
|
-
width: var(--s-space-20);
|
|
34
|
-
height: 100%;
|
|
35
|
-
background: linear-gradient(
|
|
36
|
-
to right,
|
|
37
|
-
rgba(var(--swirl-carousel-gradient), 1),
|
|
38
|
-
rgba(var(--swirl-carousel-gradient), 0)
|
|
39
|
-
);
|
|
40
|
-
content: "";
|
|
41
|
-
}
|
|
42
|
-
|
|
43
|
-
.carousel:after {
|
|
44
|
-
position: absolute;
|
|
45
|
-
z-index: 1;
|
|
46
|
-
top: 0;
|
|
47
|
-
right: 0;
|
|
48
|
-
width: var(--s-space-20);
|
|
49
|
-
height: 100%;
|
|
50
|
-
background: linear-gradient(
|
|
51
|
-
to left,
|
|
52
|
-
rgba(var(--swirl-carousel-gradient), 1),
|
|
53
|
-
rgba(var(--swirl-carousel-gradient), 0)
|
|
54
|
-
);
|
|
55
|
-
content: "";
|
|
56
|
-
}
|
|
57
|
-
|
|
58
30
|
.carousel__slides {
|
|
59
31
|
position: relative;
|
|
60
32
|
display: flex;
|
|
61
33
|
overflow-x: auto;
|
|
34
|
+
overflow-y: hidden;
|
|
62
35
|
width: 100%;
|
|
63
|
-
padding: var(--s-space-24) var(--s-space-16);
|
|
36
|
+
padding: var(--s-space-24) 0 var(--s-space-24) var(--s-space-16);
|
|
64
37
|
scrollbar-width: none;
|
|
65
38
|
scroll-snap-type: x mandatory;
|
|
66
39
|
scroll-behavior: smooth;
|
|
@@ -74,15 +47,20 @@
|
|
|
74
47
|
flex-grow: 0;
|
|
75
48
|
flex-shrink: 0;
|
|
76
49
|
scroll-snap-align: start;
|
|
50
|
+
padding-left: var(--s-space-16);
|
|
51
|
+
}
|
|
52
|
+
|
|
53
|
+
.carousel__slides ::slotted(*:last-child) {
|
|
54
|
+
padding-right: var(--s-space-16);
|
|
77
55
|
}
|
|
78
56
|
|
|
79
57
|
.carousel__previous-slide-button {
|
|
80
58
|
position: absolute;
|
|
81
59
|
z-index: 1;
|
|
82
|
-
top: 50
|
|
83
|
-
left: var(--s-space-
|
|
60
|
+
top: calc(50% - var(--s-space-12));
|
|
61
|
+
left: var(--s-space-16);
|
|
84
62
|
transition: opacity 0.2s;
|
|
85
|
-
transform: translateY(-50%);
|
|
63
|
+
transform: translateY(-50%) scale(0.72);
|
|
86
64
|
pointer-events: none;
|
|
87
65
|
opacity: 0;
|
|
88
66
|
}
|
|
@@ -90,10 +68,10 @@
|
|
|
90
68
|
.carousel__next-slide-button {
|
|
91
69
|
position: absolute;
|
|
92
70
|
z-index: 1;
|
|
93
|
-
top: 50
|
|
94
|
-
right: var(--s-space-
|
|
71
|
+
top: calc(50% - var(--s-space-12));
|
|
72
|
+
right: var(--s-space-16);
|
|
95
73
|
transition: opacity 0.2s;
|
|
96
|
-
transform: translateY(-50%);
|
|
74
|
+
transform: translateY(-50%) scale(0.72);
|
|
97
75
|
pointer-events: none;
|
|
98
76
|
opacity: 0;
|
|
99
77
|
}
|
|
@@ -60,7 +60,7 @@ export class SwirlCarousel {
|
|
|
60
60
|
return inInView;
|
|
61
61
|
}
|
|
62
62
|
render() {
|
|
63
|
-
return (h(Host, { "aria-label": this.label, "aria-roledescription": "carousel", role: "group" }, h("div", { class: "carousel" }, this.isScrollable && (h("swirl-button", { class: "carousel__previous-slide-button", hideLabel: true, icon: "<swirl-icon-arrow-
|
|
63
|
+
return (h(Host, { "aria-label": this.label, "aria-roledescription": "carousel", role: "group" }, h("div", { class: "carousel" }, this.isScrollable && (h("swirl-button", { class: "carousel__previous-slide-button", hideLabel: true, icon: "<swirl-icon-arrow-back></swirl-icon-arrow-back>", label: this.previousSlideButtonLabel, onClick: this.onPreviousSlideButtonClick, pill: true, variant: "floating" })), this.isScrollable && (h("swirl-button", { class: "carousel__next-slide-button", hideLabel: true, icon: "<swirl-icon-arrow-forward></swirl-icon-arrow-forward>", label: this.nextSlideButtonLabel, onClick: this.onNextSlideButtonClick, pill: true, variant: "floating" })), h("div", { "aria-live": "polite", class: "carousel__slides", ref: (el) => (this.slidesContainer = el) }, h("slot", null)))));
|
|
64
64
|
}
|
|
65
65
|
static get is() { return "swirl-carousel"; }
|
|
66
66
|
static get encapsulation() { return "shadow"; }
|