@crystaldesign/content-item 24.12.1 → 24.12.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/build/esm/index.js +5 -5
- package/package.json +2 -2
package/build/esm/index.js
CHANGED
|
@@ -45,7 +45,7 @@ function styleInject(css, ref) {
|
|
|
45
45
|
}
|
|
46
46
|
|
|
47
47
|
var urlText = "url-text-yHwAC";
|
|
48
|
-
var css_248z$4 = ".url-text-yHwAC {\
|
|
48
|
+
var css_248z$4 = ".url-text-yHwAC {\n margin-top: 12px;\n margin-bottom: 12px;\n text-align: right;\n position: relative;\n display: block;\n width: 100%;\n}\n";
|
|
49
49
|
styleInject(css_248z$4);
|
|
50
50
|
|
|
51
51
|
var URL$1 = function URL(_ref) {
|
|
@@ -91,7 +91,7 @@ var Image = function Image(_ref) {
|
|
|
91
91
|
|
|
92
92
|
var videoClass = "videoClass-jg-N2";
|
|
93
93
|
var youtubeThumb = "youtube-thumb-XJDvt";
|
|
94
|
-
var css_248z$3 = ".videoClass-jg-N2 {\
|
|
94
|
+
var css_248z$3 = ".videoClass-jg-N2 {\n width: 100%;\n max-height: 100%;\n}\n\n.youtube-thumb-XJDvt {\n background: center / 75% no-repeat url(\"data:image/svg+xml,%3Csvg fill%3D%22%23000000%22 height%3D%22800px%22 width%3D%22800px%22 version%3D%221.1%22 id%3D%22Capa_1%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22 xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22 %09 viewBox%3D%220 0 49 49%22 xml%3Aspace%3D%22preserve%22%3E%3Cg%3E%09%3Cg%3E%09%09%3Cpath d%3D%22M39.256%2C6.5H9.744C4.371%2C6.5%2C0%2C10.885%2C0%2C16.274v16.451c0%2C5.39%2C4.371%2C9.774%2C9.744%2C9.774h29.512%09%09%09c5.373%2C0%2C9.744-4.385%2C9.744-9.774V16.274C49%2C10.885%2C44.629%2C6.5%2C39.256%2C6.5z M47%2C32.726c0%2C4.287-3.474%2C7.774-7.744%2C7.774H9.744%09%09%09C5.474%2C40.5%2C2%2C37.012%2C2%2C32.726V16.274C2%2C11.988%2C5.474%2C8.5%2C9.744%2C8.5h29.512c4.27%2C0%2C7.744%2C3.488%2C7.744%2C7.774V32.726z%22%2F%3E%09%09%3Cpath d%3D%22M33.36%2C24.138l-13.855-8.115c-0.308-0.18-0.691-0.183-1.002-0.005S18%2C16.527%2C18%2C16.886v16.229%09%09%09c0%2C0.358%2C0.192%2C0.69%2C0.502%2C0.868c0.154%2C0.088%2C0.326%2C0.132%2C0.498%2C0.132c0.175%2C0%2C0.349-0.046%2C0.505-0.137l13.855-8.113%09%09%09c0.306-0.179%2C0.495-0.508%2C0.495-0.863S33.667%2C24.317%2C33.36%2C24.138z M20%2C31.37V18.63l10.876%2C6.371L20%2C31.37z%22%2F%3E%09%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E\");\n width: 100%;\n height: 100%;\n}\n";
|
|
95
95
|
styleInject(css_248z$3);
|
|
96
96
|
|
|
97
97
|
var Video = function Video(_ref) {
|
|
@@ -137,7 +137,7 @@ var Video = function Video(_ref) {
|
|
|
137
137
|
};
|
|
138
138
|
|
|
139
139
|
var title = "title-0S918";
|
|
140
|
-
var css_248z$2 = ".title-0S918 {\
|
|
140
|
+
var css_248z$2 = ".title-0S918 {\n font-size: 18px;\n font-weight: 500;\n}\n";
|
|
141
141
|
styleInject(css_248z$2);
|
|
142
142
|
|
|
143
143
|
var Title = function Title(_ref) {
|
|
@@ -152,12 +152,12 @@ var Title = function Title(_ref) {
|
|
|
152
152
|
});
|
|
153
153
|
};
|
|
154
154
|
|
|
155
|
-
var css_248z$1 = "/*Free mode*/\
|
|
155
|
+
var css_248z$1 = "/*Free mode*/\n#diva-content-item .swiper-free-mode > .swiper-wrapper {\n transition-timing-function: ease-out;\n margin: 0 auto;\n}\n/*navigation*/\n:root {\n --swiper-navigation-size: 44px;\n}\n#diva-content-item .swiper-button-next,\n#diva-content-item .swiper-button-prev {\n position: absolute;\n top: 50%;\n width: calc(44px / 44 * 27);\n width: calc(var(--swiper-navigation-size) / 44 * 27);\n height: 44px;\n height: var(--swiper-navigation-size);\n margin-top: calc(0px - (44px / 2));\n margin-top: calc(0px - (var(--swiper-navigation-size) / 2));\n z-index: 10;\n cursor: pointer;\n display: flex;\n align-items: center;\n justify-content: center;\n color: #007aff;\n color: var(--swiper-navigation-color, var(--swiper-theme-color));\n}\n#diva-content-item .swiper-button-next.swiper-button-disabled,\n#diva-content-item .swiper-button-prev.swiper-button-disabled {\n opacity: 0.35;\n cursor: auto;\n pointer-events: none;\n}\n#diva-content-item .swiper-button-next.swiper-button-hidden,\n#diva-content-item .swiper-button-prev.swiper-button-hidden {\n opacity: 0;\n cursor: auto;\n pointer-events: none;\n}\n#diva-content-item .swiper-navigation-disabled .swiper-button-next,\n#diva-content-item .swiper-navigation-disabled .swiper-button-prev {\n display: none !important;\n}\n#diva-content-item .swiper-button-next:after,\n#diva-content-item .swiper-button-prev:after {\n text-transform: none !important;\n}\n#diva-content-item .swiper-button-next:after,\n#diva-content-item .swiper-button-prev:after {\n font-family: swiper-icons;\n font-size: 44px;\n font-size: var(--swiper-navigation-size);\n letter-spacing: 0;\n font-feature-settings: ;\n font-variant: normal;\n font-variant: initial;\n line-height: 1;\n}\n#diva-content-item .swiper-button-prev,\n#diva-content-item .swiper-rtl .swiper-button-next {\n left: 10px;\n right: auto;\n}\n#diva-content-item .swiper-button-prev:after,\n#diva-content-item .swiper-rtl .swiper-button-next:after {\n content: 'prev';\n}\n#diva-content-item .swiper-button-next,\n#diva-content-item .swiper-rtl .swiper-button-prev {\n right: 10px;\n left: auto;\n}\n#diva-content-item .swiper-button-next:after,\n#diva-content-item .swiper-rtl .swiper-button-prev:after {\n content: 'next';\n}\n#diva-content-item .swiper-button-lock {\n display: none;\n}\n\n/*swiper min css*/\n\n@font-face {\n font-family: swiper-icons;\n src: url('data:application/font-woff;charset=utf-8;base64, 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');\n font-weight: 400;\n font-style: normal;\n}\n:root {\n --swiper-theme-color: #007aff;\n}\n#diva-content-item .swiper {\n margin-left: auto;\n margin-right: auto;\n position: relative;\n overflow: hidden;\n list-style: none;\n padding: 0;\n z-index: 1;\n}\n#diva-content-item .swiper-vertical > .swiper-wrapper {\n flex-direction: column;\n}\n#diva-content-item .swiper-wrapper {\n position: relative;\n width: 100%;\n height: 100%;\n z-index: 1;\n display: flex;\n transition-property: transform;\n box-sizing: content-box;\n}\n#diva-content-item .swiper-android .swiper-slide,\n#diva-content-item .swiper-wrapper {\n transform: translate3d(0px, 0, 0);\n}\n#diva-content-item .swiper-pointer-events {\n touch-action: pan-y;\n}\n#diva-content-item .swiper-pointer-events.swiper-vertical {\n touch-action: pan-x;\n}\n#diva-content-item .swiper-slide {\n flex-shrink: 0;\n width: 100%;\n height: 100%;\n position: relative;\n transition-property: transform;\n}\n#diva-content-item .swiper-slide-invisible-blank {\n visibility: hidden;\n}\n#diva-content-item .swiper-autoheight,\n#diva-content-item .swiper-autoheight .swiper-slide {\n height: auto;\n}\n#diva-content-item .swiper-autoheight .swiper-wrapper {\n align-items: flex-start;\n transition-property: transform, height;\n}\n#diva-content-item .swiper-backface-hidden .swiper-slide {\n transform: translateZ(0);\n backface-visibility: hidden;\n}\n#diva-content-item .swiper-3d,\n#diva-content-item .swiper-3d.swiper-css-mode .swiper-wrapper {\n perspective: 1200px;\n}\n#diva-content-item .swiper-3d .swiper-cube-shadow,\n#diva-content-item .swiper-3d .swiper-slide,\n#diva-content-item .swiper-3d .swiper-slide-shadow,\n#diva-content-item .swiper-3d .swiper-slide-shadow-bottom,\n#diva-content-item .swiper-3d .swiper-slide-shadow-left,\n#diva-content-item .swiper-3d .swiper-slide-shadow-right,\n#diva-content-item .swiper-3d .swiper-slide-shadow-top,\n#diva-content-item .swiper-3d .swiper-wrapper {\n transform-style: preserve-3d;\n}\n#diva-content-item .swiper-3d .swiper-slide-shadow,\n#diva-content-item .swiper-3d .swiper-slide-shadow-bottom,\n#diva-content-item .swiper-3d .swiper-slide-shadow-left,\n#diva-content-item .swiper-3d .swiper-slide-shadow-right,\n#diva-content-item .swiper-3d .swiper-slide-shadow-top {\n position: absolute;\n left: 0;\n top: 0;\n width: 100%;\n height: 100%;\n pointer-events: none;\n z-index: 10;\n}\n#diva-content-item .swiper-3d .swiper-slide-shadow {\n background: rgba(0, 0, 0, 0.15);\n}\n#diva-content-item .swiper-3d .swiper-slide-shadow-left {\n background-image: linear-gradient(to left, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));\n}\n#diva-content-item .swiper-3d .swiper-slide-shadow-right {\n background-image: linear-gradient(to right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));\n}\n#diva-content-item .swiper-3d .swiper-slide-shadow-top {\n background-image: linear-gradient(to top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));\n}\n#diva-content-item .swiper-3d .swiper-slide-shadow-bottom {\n background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));\n}\n#diva-content-item .swiper-css-mode > .swiper-wrapper {\n overflow: auto;\n scrollbar-width: none;\n -ms-overflow-style: none;\n}\n#diva-content-item .swiper-css-mode > .swiper-wrapper::-webkit-scrollbar {\n display: none;\n}\n#diva-content-item .swiper-css-mode > .swiper-wrapper > .swiper-slide {\n scroll-snap-align: start start;\n}\n#diva-content-item .swiper-horizontal.swiper-css-mode > .swiper-wrapper {\n scroll-snap-type: x mandatory;\n}\n#diva-content-item .swiper-vertical.swiper-css-mode > .swiper-wrapper {\n scroll-snap-type: y mandatory;\n}\n#diva-content-item .swiper-centered > .swiper-wrapper::before {\n content: '';\n flex-shrink: 0;\n order: 9999;\n}\n[dir=\"ltr\"] #diva-content-item .swiper-centered.swiper-horizontal > .swiper-wrapper > .swiper-slide:first-child {\n margin-left: var(--swiper-centered-offset-before);\n}\n[dir=\"rtl\"] #diva-content-item .swiper-centered.swiper-horizontal > .swiper-wrapper > .swiper-slide:first-child {\n margin-right: var(--swiper-centered-offset-before);\n}\n#diva-content-item .swiper-centered.swiper-horizontal > .swiper-wrapper::before {\n height: 100%;\n min-height: 1px;\n width: var(--swiper-centered-offset-after);\n}\n#diva-content-item .swiper-centered.swiper-vertical > .swiper-wrapper > .swiper-slide:first-child {\n margin-top: var(--swiper-centered-offset-before);\n}\n#diva-content-item .swiper-centered.swiper-vertical > .swiper-wrapper::before {\n width: 100%;\n min-width: 1px;\n height: var(--swiper-centered-offset-after);\n}\n#diva-content-item .swiper-centered > .swiper-wrapper > .swiper-slide {\n scroll-snap-align: center center;\n}\n";
|
|
156
156
|
styleInject(css_248z$1);
|
|
157
157
|
|
|
158
158
|
var mySwiper2 = "mySwiper2-mfrK1";
|
|
159
159
|
var mySwiper = "mySwiper-urn8y";
|
|
160
|
-
var css_248z = "#diva-content-item .swiper {\
|
|
160
|
+
var css_248z = "#diva-content-item .swiper {\n width: 100%;\n height: 100%;\n}\n#diva-content-item .swiper-slide {\n text-align: center;\n font-size: 18px;\n background: #fff;\n\n /* Center slide text vertically */\n display: flex;\n justify-content: center;\n align-items: center;\n}\n\n#diva-content-item .swiper {\n width: 100%;\n height: 300px;\n margin-left: auto;\n margin-right: auto;\n}\n#diva-content-item .swiper-slide {\n background-size: cover;\n background-position: center;\n}\n#diva-content-item .mySwiper2-mfrK1 {\n height: 80%;\n width: 100%;\n}\n#diva-content-item .mySwiper-urn8y {\n height: 20%;\n box-sizing: border-box;\n padding: 10px 0;\n}\n#diva-content-item .mySwiper-urn8y .swiper-slide {\n width: 25%;\n height: 100%;\n opacity: 0.4;\n}\n#diva-content-item .mySwiper-urn8y .swiper-slide-thumb-active {\n opacity: 1;\n}\n";
|
|
161
161
|
styleInject(css_248z);
|
|
162
162
|
|
|
163
163
|
function ownKeys$1(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@crystaldesign/content-item",
|
|
3
|
-
"version": "24.12.
|
|
3
|
+
"version": "24.12.2",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"scripts": {
|
|
6
6
|
"storybook": "storybook dev -p 6006",
|
|
@@ -34,5 +34,5 @@
|
|
|
34
34
|
},
|
|
35
35
|
"module": "build/esm/index.js",
|
|
36
36
|
"types": "./build/types/content-item/src/index.d.ts",
|
|
37
|
-
"gitHead": "
|
|
37
|
+
"gitHead": "c52f390c626615e95e0e22ae62b8b236aece192b"
|
|
38
38
|
}
|