@covet-pics/covet-pics-widget 0.155.3 → 0.155.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/cjs/covet-pics-crop-text.cjs.entry.js +5 -5
- package/dist/cjs/covet-pics-crop-text.cjs.entry.js.map +1 -1
- package/dist/cjs/covet-pics-direct-buy_6.cjs.entry.js +6 -6
- package/dist/cjs/covet-pics-direct-buy_6.cjs.entry.js.map +1 -1
- package/dist/collection/components/covet-pics-crop-text/covet-pics-crop-text.css +3 -3
- package/dist/collection/components/covet-pics-crop-text/covet-pics-crop-text.js +4 -4
- package/dist/collection/components/covet-pics-crop-text/covet-pics-crop-text.js.map +1 -1
- package/dist/collection/components/covet-pics-direct-buy/covet-pics-direct-buy.css +29 -29
- package/dist/collection/components/covet-pics-direct-buy/covet-pics-direct-buy.js +5 -5
- package/dist/collection/components/covet-pics-direct-buy/covet-pics-direct-buy.js.map +1 -1
- package/dist/covet-pics-widget/covet-pics-widget.esm.js +1 -1
- package/dist/covet-pics-widget/{p-6212f7ae.system.entry.js → p-46f17f8c.system.entry.js} +3 -3
- package/dist/covet-pics-widget/p-46f17f8c.system.entry.js.map +1 -0
- package/dist/covet-pics-widget/p-7884e86b.system.js +1 -1
- package/dist/covet-pics-widget/{p-32f6f7e0.system.entry.js → p-81d20299.system.entry.js} +2 -2
- package/dist/covet-pics-widget/p-81d20299.system.entry.js.map +1 -0
- package/dist/covet-pics-widget/{p-b232da3a.entry.js → p-cbab44ec.entry.js} +2 -2
- package/dist/covet-pics-widget/p-cbab44ec.entry.js.map +1 -0
- package/dist/covet-pics-widget/{p-26698e63.entry.js → p-ee828bff.entry.js} +2 -2
- package/dist/covet-pics-widget/p-ee828bff.entry.js.map +1 -0
- package/dist/esm/covet-pics-crop-text.entry.js +5 -5
- package/dist/esm/covet-pics-crop-text.entry.js.map +1 -1
- package/dist/esm/covet-pics-direct-buy_6.entry.js +6 -6
- package/dist/esm/covet-pics-direct-buy_6.entry.js.map +1 -1
- package/dist/esm-es5/covet-pics-crop-text.entry.js +1 -1
- package/dist/esm-es5/covet-pics-crop-text.entry.js.map +1 -1
- package/dist/esm-es5/covet-pics-direct-buy_6.entry.js +1 -1
- package/dist/esm-es5/covet-pics-direct-buy_6.entry.js.map +1 -1
- package/package.json +1 -1
- package/dist/covet-pics-widget/p-26698e63.entry.js.map +0 -1
- package/dist/covet-pics-widget/p-32f6f7e0.system.entry.js.map +0 -1
- package/dist/covet-pics-widget/p-6212f7ae.system.entry.js.map +0 -1
- package/dist/covet-pics-widget/p-b232da3a.entry.js.map +0 -1
|
@@ -8,7 +8,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
|
|
|
8
8
|
const index = require('./index-9d75b529.js');
|
|
9
9
|
const utils = require('./utils-cd98b07f.js');
|
|
10
10
|
|
|
11
|
-
const covetPicsCropTextCss = "covet-pics-crop-text {\n display: -ms-flexbox;\n display: flex;\n -ms-flex: none;\n flex: none;\n -ms-flex-pack: center;\n justify-content: center;\n -ms-flex-align: center;\n align-items: center;\n position: relative;\n -ms-flex-positive: 1;\n flex-grow: 1;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n overflow: hidden;\n width: 100%;\n}\ncovet-pics-crop-text.text-review {\n height: 100%;\n max-height: 100%;\n}\ncovet-pics-crop-text.collage:before {\n content: \"\";\n display: inline-block;\n bottom: 0;\n width: 1px;\n height: 0;\n padding-top: 100%;\n visibility: hidden;\n opacity: 0;\n}\ncovet-pics-crop-text.basic-1 {\n position: absolute;\n left: 0;\n top: 0;\n}\ncovet-pics-crop-text.basic-1:after {\n content: \"\";\n display: block;\n position: absolute;\n width: 100%;\n height: 1px;\n left: 0;\n bottom: 0;\n background-color: rgba(0, 0, 0, 0.1);\n}\n@supports (container-type: size) {\n @container covet-pics-gallery-item-detail (max-width: 159.98px) {\n covet-pics-crop-text.basic-1 {\n padding: 12px;\n }\n }\n}\n@supports not (container-type: size) {\n covet-pics-crop-text.basic-1.size-xs {\n padding: 12px;\n }\n}\n@supports (container-type: size) {\n @container covet-pics-gallery-item-detail (min-width: 160px) and (max-width: 239.98px) {\n covet-pics-crop-text.basic-1 {\n padding: 24px 16px;\n }\n }\n}\n@supports not (container-type: size) {\n covet-pics-crop-text.basic-1.size-sm {\n padding: 24px 16px;\n }\n}\n@supports (container-type: size) {\n @container covet-pics-gallery-item-detail (min-width: 240px) and (max-width: 479.98px) {\n covet-pics-crop-text.basic-1 {\n padding: 32px;\n }\n }\n}\n@supports not (container-type: size) {\n covet-pics-crop-text.basic-1.size-md {\n padding: 32px;\n }\n}\n@supports (container-type: size) {\n @container covet-pics-gallery-item-detail (min-width: 480px) {\n covet-pics-crop-text.basic-1 {\n padding: 64px;\n }\n }\n}\n@supports not (container-type: size) {\n covet-pics-crop-text.basic-1.size-lg {\n padding: 64px;\n }\n}\n@supports (container-type: size) {\n @container covet-pics-gallery-item-detail (max-width: 159.98px) {\n covet-pics-crop-text.basic-1.verified {\n padding: 35px 12px 12px 12px;\n }\n }\n}\n@supports not (container-type: size) {\n covet-pics-crop-text.basic-1.verified.size-xs {\n padding: 35px 12px 12px 12px;\n }\n}\n@supports (container-type: size) {\n @container covet-pics-gallery-item-detail (min-width: 160px) and (max-width: 239.98px) {\n covet-pics-crop-text.basic-1.verified {\n padding: 33px 16px 16px 16px;\n }\n }\n}\n@supports not (container-type: size) {\n covet-pics-crop-text.basic-1.verified.size-sm {\n padding: 33px 16px 16px 16px;\n }\n}\ncovet-pics-crop-text.basic-2 {\n background-color: #F7F7F7;\n position: absolute;\n left: 0;\n top: 0;\n}\n@supports (container-type: size) {\n @container covet-pics-gallery-item-detail (max-width: 159.98px) {\n covet-pics-crop-text.basic-2 {\n padding: 12px;\n }\n }\n}\n@supports not (container-type: size) {\n covet-pics-crop-text.basic-2.size-xs {\n padding: 12px;\n }\n}\ncovet-pics-crop-text.basic-2.size-xs.verified {\n padding: 35px 12px 12px 12px;\n}\n@supports (container-type: size) {\n @container covet-pics-gallery-item-detail (min-width: 160px) and (max-width: 239.98px) {\n covet-pics-crop-text.basic-2 {\n padding: 24px 16px;\n }\n }\n}\n@supports not (container-type: size) {\n covet-pics-crop-text.basic-2.size-sm {\n padding: 24px 16px;\n }\n}\ncovet-pics-crop-text.basic-2.size-sm.verified {\n padding: 33px 16px 16px 16px;\n}\n@supports (container-type: size) {\n @container covet-pics-gallery-item-detail (min-width: 240px) and (max-width: 479.98px) {\n covet-pics-crop-text.basic-2 {\n padding: 32px;\n }\n }\n}\n@supports not (container-type: size) {\n covet-pics-crop-text.basic-2.size-md {\n padding: 32px;\n }\n}\n@supports (container-type: size) {\n @container covet-pics-gallery-item-detail (min-width: 480px) {\n covet-pics-crop-text.basic-2 {\n padding: 64px;\n }\n }\n}\n@supports not (container-type: size) {\n covet-pics-crop-text.basic-2.size-lg {\n padding: 64px;\n }\n}\n@supports (container-type: size) {\n @container covet-pics-gallery-item-detail (max-width: 159.98px) {\n covet-pics-crop-text.basic-2.verified {\n padding: 35px 12px 12px 12px;\n }\n }\n}\n@supports not (container-type: size) {\n covet-pics-crop-text.basic-2.verified.size-xs {\n padding: 35px 12px 12px 12px;\n }\n}\n@supports (container-type: size) {\n @container covet-pics-gallery-item-detail (min-width: 160px) and (max-width: 239.98px) {\n covet-pics-crop-text.basic-2.verified {\n padding: 33px 16px 16px 16px;\n }\n }\n}\n@supports not (container-type: size) {\n covet-pics-crop-text.basic-2.verified.size-sm {\n padding: 33px 16px 16px 16px;\n }\n}\ncovet-pics-crop-text.basic-3 {\n position: absolute;\n left: 0;\n top: 0;\n width: 100%;\n background-color: #F7F7F7;\n}\n@supports (container-type: size) {\n @container covet-pics-gallery-item-detail (max-width: 159.98px) {\n covet-pics-crop-text.basic-3 {\n padding: 12px;\n }\n }\n}\n@supports not (container-type: size) {\n covet-pics-crop-text.basic-3.size-xs {\n padding: 12px;\n }\n}\n@supports (container-type: size) {\n @container covet-pics-gallery-item-detail (min-width: 160px) and (max-width: 239.98px) {\n covet-pics-crop-text.basic-3 {\n padding: 24px 16px;\n }\n }\n}\n@supports not (container-type: size) {\n covet-pics-crop-text.basic-3.size-sm {\n padding: 24px 16px;\n }\n}\n@supports (container-type: size) {\n @container covet-pics-gallery-item-detail (min-width: 240px) and (max-width: 479.98px) {\n covet-pics-crop-text.basic-3 {\n padding: 32px;\n }\n }\n}\n@supports not (container-type: size) {\n covet-pics-crop-text.basic-3.size-md {\n padding: 32px;\n }\n}\n@supports (container-type: size) {\n @container covet-pics-gallery-item-detail (min-width: 480px) {\n covet-pics-crop-text.basic-3 {\n padding: 64px;\n }\n }\n}\n@supports not (container-type: size) {\n covet-pics-crop-text.basic-3.size-lg {\n padding: 64px;\n }\n}\n@supports (container-type: size) {\n @container covet-pics-gallery-item-detail (max-width: 159.98px) {\n covet-pics-crop-text.basic-3.verified {\n padding: 35px 12px 12px 12px;\n }\n }\n}\n@supports not (container-type: size) {\n covet-pics-crop-text.basic-3.verified.size-xs {\n padding: 35px 12px 12px 12px;\n }\n}\n@supports (container-type: size) {\n @container covet-pics-gallery-item-detail (min-width: 160px) and (max-width: 239.98px) {\n covet-pics-crop-text.basic-3.verified {\n padding: 33px 16px 16px 16px;\n }\n }\n}\n@supports not (container-type: size) {\n covet-pics-crop-text.basic-3.verified.size-sm {\n padding: 33px 16px 16px 16px;\n }\n}\ncovet-pics-crop-text.basic-4 {\n position: absolute;\n left: 0;\n top: 0;\n}\ncovet-pics-crop-text.basic-4:after {\n content: \"\";\n display: block;\n position: absolute;\n width: 100%;\n height: 1px;\n left: 0;\n bottom: 0;\n background-color: rgba(0, 0, 0, 0.1);\n}\n@supports (container-type: size) {\n @container covet-pics-gallery-item-detail (max-width: 159.98px) {\n covet-pics-crop-text.basic-4 {\n padding: 12px;\n }\n }\n}\n@supports not (container-type: size) {\n covet-pics-crop-text.basic-4.size-xs {\n padding: 12px;\n }\n}\ncovet-pics-crop-text.basic-4.size-xs.verified {\n padding: 35px 12px 12px 12px;\n}\n@supports (container-type: size) {\n @container covet-pics-gallery-item-detail (min-width: 160px) and (max-width: 239.98px) {\n covet-pics-crop-text.basic-4 {\n padding: 24px 16px;\n }\n }\n}\n@supports not (container-type: size) {\n covet-pics-crop-text.basic-4.size-sm {\n padding: 24px 16px;\n }\n}\ncovet-pics-crop-text.basic-4.size-sm.verified {\n padding: 33px 16px 16px 16px;\n}\n@supports (container-type: size) {\n @container covet-pics-gallery-item-detail (min-width: 240px) and (max-width: 479.98px) {\n covet-pics-crop-text.basic-4 {\n padding: 32px;\n }\n }\n}\n@supports not (container-type: size) {\n covet-pics-crop-text.basic-4.size-md {\n padding: 32px;\n }\n}\n@supports (container-type: size) {\n @container covet-pics-gallery-item-detail (min-width: 480px) {\n covet-pics-crop-text.basic-4 {\n padding: 64px;\n }\n }\n}\n@supports not (container-type: size) {\n covet-pics-crop-text.basic-4.size-lg {\n padding: 64px;\n }\n}\n@supports (container-type: size) {\n @container covet-pics-gallery-item-detail (max-width: 159.98px) {\n covet-pics-crop-text.basic-4.verified {\n padding: 35px 12px 12px 12px;\n }\n }\n}\n@supports not (container-type: size) {\n covet-pics-crop-text.basic-4.verified.size-xs {\n padding: 35px 12px 12px 12px;\n }\n}\n@supports (container-type: size) {\n @container covet-pics-gallery-item-detail (min-width: 160px) and (max-width: 239.98px) {\n covet-pics-crop-text.basic-4.verified {\n padding: 33px 16px 16px 16px;\n }\n }\n}\n@supports not (container-type: size) {\n covet-pics-crop-text.basic-4.verified.size-sm {\n padding: 33px 16px 16px 16px;\n }\n}\ncovet-pics-crop-text.basic-5 {\n position: absolute;\n left: 0;\n top: 0;\n}\ncovet-pics-crop-text.basic-5:after {\n content: \"\";\n display: block;\n position: absolute;\n width: 100%;\n height: 1px;\n left: 0;\n bottom: 0;\n background-color: #000000;\n}\ncovet-pics-crop-text.basic-5.size-xs {\n padding: 12px;\n}\ncovet-pics-crop-text.basic-5.size-xs.verified {\n padding: 35px 12px 12px 12px;\n}\ncovet-pics-crop-text.basic-5.size-sm {\n padding: 24px 16px;\n}\ncovet-pics-crop-text.basic-5.size-sm.verified {\n padding: 35px 16px 16px 16px;\n}\ncovet-pics-crop-text.basic-5.size-md {\n padding: 32px;\n}\ncovet-pics-crop-text.basic-5.size-md.verified {\n padding: 38px 32px 32px 32px;\n}\ncovet-pics-crop-text.basic-5.size-lg {\n padding: 64px;\n}\ncovet-pics-crop-text.basic-6 {\n position: absolute;\n left: 0;\n top: 0;\n background-color: #151515;\n}\ncovet-pics-crop-text.basic-6:after {\n content: \"\";\n display: block;\n position: absolute;\n width: 100%;\n height: 1px;\n left: 0;\n bottom: 0;\n background-color: rgba(255, 255, 255, 0.1);\n}\n@supports (container-type: size) {\n @container covet-pics-gallery-item-detail (max-width: 159.98px) {\n covet-pics-crop-text.basic-6 {\n padding: 12px;\n }\n }\n}\n@supports not (container-type: size) {\n covet-pics-crop-text.basic-6.size-xs {\n padding: 12px;\n }\n}\n@supports (container-type: size) {\n @container covet-pics-gallery-item-detail (min-width: 160px) and (max-width: 239.98px) {\n covet-pics-crop-text.basic-6 {\n padding: 24px 16px;\n }\n }\n}\n@supports not (container-type: size) {\n covet-pics-crop-text.basic-6.size-sm {\n padding: 24px 16px;\n }\n}\n@supports (container-type: size) {\n @container covet-pics-gallery-item-detail (min-width: 240px) and (max-width: 479.98px) {\n covet-pics-crop-text.basic-6 {\n padding: 32px;\n }\n }\n}\n@supports not (container-type: size) {\n covet-pics-crop-text.basic-6.size-md {\n padding: 32px;\n }\n}\n@supports (container-type: size) {\n @container covet-pics-gallery-item-detail (min-width: 480px) {\n covet-pics-crop-text.basic-6 {\n padding: 64px;\n }\n }\n}\n@supports not (container-type: size) {\n covet-pics-crop-text.basic-6.size-lg {\n padding: 64px;\n }\n}\n@supports (container-type: size) {\n @container covet-pics-gallery-item-detail (max-width: 159.98px) {\n covet-pics-crop-text.basic-6.verified {\n padding: 35px 12px 12px 12px;\n }\n }\n}\n@supports not (container-type: size) {\n covet-pics-crop-text.basic-6.verified.size-xs {\n padding: 35px 12px 12px 12px;\n }\n}\n@supports (container-type: size) {\n @container covet-pics-gallery-item-detail (min-width: 160px) and (max-width: 239.98px) {\n covet-pics-crop-text.basic-6.verified {\n padding: 33px 16px 16px 16px;\n }\n }\n}\n@supports not (container-type: size) {\n covet-pics-crop-text.basic-6.verified.size-sm {\n padding: 33px 16px 16px 16px;\n }\n}\ncovet-pics-crop-text .crop-text {\n position: absolute;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n margin: auto;\n text-align: center;\n width: 100%;\n color: var(--covet-pics-crop-text-color);\n display: -webkit-box;\n overflow: hidden;\n -webkit-box-orient: vertical;\n font-size: var(--covet-pics-crop-text-font-size);\n line-height: 1.4;\n -webkit-line-clamp: var(--covet-pics-crop-text-max-lines);\n}\n@supports (container-type: size) {\n @container covet-pics-gallery-item-detail (max-width: 159.98px) {\n covet-pics-crop-text .crop-text.basic-1 {\n padding-left: 12px;\n padding-right: 12px;\n }\n }\n}\n@supports not (container-type: size) {\n covet-pics-crop-text .crop-text.basic-1.size-xs {\n padding-left: 12px;\n padding-right: 12px;\n }\n}\n@supports (container-type: size) {\n @container covet-pics-gallery-item-detail (min-width: 160px) and (max-width: 239.98px) {\n covet-pics-crop-text .crop-text.basic-1 {\n padding-left: 16px;\n padding-right: 16px;\n }\n }\n}\n@supports not (container-type: size) {\n covet-pics-crop-text .crop-text.basic-1.size-sm {\n padding-left: 16px;\n padding-right: 16px;\n }\n}\n@supports (container-type: size) {\n @container covet-pics-gallery-item-detail (min-width: 240px) and (max-width: 479.98px) {\n covet-pics-crop-text .crop-text.basic-1 {\n padding-left: 32px;\n padding-right: 32px;\n }\n }\n}\n@supports not (container-type: size) {\n covet-pics-crop-text .crop-text.basic-1.size-md {\n padding-left: 32px;\n padding-right: 32px;\n }\n}\n@supports (container-type: size) {\n @container covet-pics-gallery-item-detail (min-width: 480px) {\n covet-pics-crop-text .crop-text.basic-1 {\n padding-left: 64px;\n padding-right: 64px;\n }\n }\n}\n@supports not (container-type: size) {\n covet-pics-crop-text .crop-text.basic-1.size-lg {\n padding-left: 64px;\n padding-right: 64px;\n }\n}\n@supports (container-type: size) {\n @container covet-pics-gallery-item-detail (max-width: 159.98px) {\n covet-pics-crop-text .crop-text.basic-2 {\n padding-left: 12px;\n padding-right: 12px;\n }\n }\n}\n@supports not (container-type: size) {\n covet-pics-crop-text .crop-text.basic-2.size-xs {\n padding-left: 12px;\n padding-right: 12px;\n }\n}\n@supports (container-type: size) {\n @container covet-pics-gallery-item-detail (min-width: 160px) and (max-width: 239.98px) {\n covet-pics-crop-text .crop-text.basic-2 {\n padding-left: 16px;\n padding-right: 16px;\n }\n }\n}\n@supports not (container-type: size) {\n covet-pics-crop-text .crop-text.basic-2.size-sm {\n padding-left: 16px;\n padding-right: 16px;\n }\n}\n@supports (container-type: size) {\n @container covet-pics-gallery-item-detail (min-width: 240px) and (max-width: 479.98px) {\n covet-pics-crop-text .crop-text.basic-2 {\n padding-left: 32px;\n padding-right: 32px;\n }\n }\n}\n@supports not (container-type: size) {\n covet-pics-crop-text .crop-text.basic-2.size-md {\n padding-left: 32px;\n padding-right: 32px;\n }\n}\n@supports (container-type: size) {\n @container covet-pics-gallery-item-detail (min-width: 480px) {\n covet-pics-crop-text .crop-text.basic-2 {\n padding-left: 64px;\n padding-right: 64px;\n }\n }\n}\n@supports not (container-type: size) {\n covet-pics-crop-text .crop-text.basic-2.size-lg {\n padding-left: 64px;\n padding-right: 64px;\n }\n}\n@supports (container-type: size) {\n @container covet-pics-gallery-item-detail (max-width: 159.98px) {\n covet-pics-crop-text .crop-text.basic-3 {\n padding-left: 12px;\n padding-right: 12px;\n }\n }\n}\n@supports not (container-type: size) {\n covet-pics-crop-text .crop-text.basic-3.size-xs {\n padding-left: 12px;\n padding-right: 12px;\n }\n}\n@supports (container-type: size) {\n @container covet-pics-gallery-item-detail (min-width: 160px) and (max-width: 239.98px) {\n covet-pics-crop-text .crop-text.basic-3 {\n padding-left: 16px;\n padding-right: 16px;\n }\n }\n}\n@supports not (container-type: size) {\n covet-pics-crop-text .crop-text.basic-3.size-sm {\n padding-left: 16px;\n padding-right: 16px;\n }\n}\n@supports (container-type: size) {\n @container covet-pics-gallery-item-detail (min-width: 240px) and (max-width: 479.98px) {\n covet-pics-crop-text .crop-text.basic-3 {\n padding-left: 32px;\n padding-right: 32px;\n }\n }\n}\n@supports not (container-type: size) {\n covet-pics-crop-text .crop-text.basic-3.size-md {\n padding-left: 32px;\n padding-right: 32px;\n }\n}\n@supports (container-type: size) {\n @container covet-pics-gallery-item-detail (min-width: 480px) {\n covet-pics-crop-text .crop-text.basic-3 {\n padding-left: 64px;\n padding-right: 64px;\n }\n }\n}\n@supports not (container-type: size) {\n covet-pics-crop-text .crop-text.basic-3.size-lg {\n padding-left: 64px;\n padding-right: 64px;\n }\n}\n@supports (container-type: size) {\n @container covet-pics-gallery-item-detail (max-width: 159.98px) {\n covet-pics-crop-text .crop-text.basic-4 {\n padding-left: 12px;\n padding-right: 12px;\n }\n }\n}\n@supports not (container-type: size) {\n covet-pics-crop-text .crop-text.basic-4.size-xs {\n padding-left: 12px;\n padding-right: 12px;\n }\n}\n@supports (container-type: size) {\n @container covet-pics-gallery-item-detail (min-width: 160px) and (max-width: 239.98px) {\n covet-pics-crop-text .crop-text.basic-4 {\n padding-left: 16px;\n padding-right: 16px;\n }\n }\n}\n@supports not (container-type: size) {\n covet-pics-crop-text .crop-text.basic-4.size-sm {\n padding-left: 16px;\n padding-right: 16px;\n }\n}\n@supports (container-type: size) {\n @container covet-pics-gallery-item-detail (min-width: 240px) and (max-width: 479.98px) {\n covet-pics-crop-text .crop-text.basic-4 {\n padding-left: 32px;\n padding-right: 32px;\n }\n }\n}\n@supports not (container-type: size) {\n covet-pics-crop-text .crop-text.basic-4.size-md {\n padding-left: 32px;\n padding-right: 32px;\n }\n}\n@supports (container-type: size) {\n @container covet-pics-gallery-item-detail (min-width: 480px) {\n covet-pics-crop-text .crop-text.basic-4 {\n padding-left: 64px;\n padding-right: 64px;\n }\n }\n}\n@supports not (container-type: size) {\n covet-pics-crop-text .crop-text.basic-4.size-lg {\n padding-left: 64px;\n padding-right: 64px;\n }\n}\n@supports (container-type: size) {\n @container covet-pics-gallery-item-detail (max-width: 159.98px) {\n covet-pics-crop-text .crop-text.basic-5 {\n padding-left: 12px;\n padding-right: 12px;\n }\n }\n}\n@supports not (container-type: size) {\n covet-pics-crop-text .crop-text.basic-5.size-xs {\n padding-left: 12px;\n padding-right: 12px;\n }\n}\n@supports (container-type: size) {\n @container covet-pics-gallery-item-detail (min-width: 160px) and (max-width: 239.98px) {\n covet-pics-crop-text .crop-text.basic-5 {\n padding-left: 16px;\n padding-right: 16px;\n }\n }\n}\n@supports not (container-type: size) {\n covet-pics-crop-text .crop-text.basic-5.size-sm {\n padding-left: 16px;\n padding-right: 16px;\n }\n}\n@supports (container-type: size) {\n @container covet-pics-gallery-item-detail (min-width: 240px) and (max-width: 479.98px) {\n covet-pics-crop-text .crop-text.basic-5 {\n padding-left: 32px;\n padding-right: 32px;\n }\n }\n}\n@supports not (container-type: size) {\n covet-pics-crop-text .crop-text.basic-5.size-md {\n padding-left: 32px;\n padding-right: 32px;\n }\n}\n@supports (container-type: size) {\n @container covet-pics-gallery-item-detail (min-width: 480px) {\n covet-pics-crop-text .crop-text.basic-5 {\n padding-left: 64px;\n padding-right: 64px;\n }\n }\n}\n@supports not (container-type: size) {\n covet-pics-crop-text .crop-text.basic-5.size-lg {\n padding-left: 64px;\n padding-right: 64px;\n }\n}\n@supports (container-type: size) {\n @container covet-pics-gallery-item-detail (max-width: 159.98px) {\n covet-pics-crop-text .crop-text.basic-6 {\n padding-left: 12px;\n padding-right: 12px;\n }\n }\n}\n@supports not (container-type: size) {\n covet-pics-crop-text .crop-text.basic-6.size-xs {\n padding-left: 12px;\n padding-right: 12px;\n }\n}\n@supports (container-type: size) {\n @container covet-pics-gallery-item-detail (min-width: 160px) and (max-width: 239.98px) {\n covet-pics-crop-text .crop-text.basic-6 {\n padding-left: 16px;\n padding-right: 16px;\n }\n }\n}\n@supports not (container-type: size) {\n covet-pics-crop-text .crop-text.basic-6.size-sm {\n padding-left: 16px;\n padding-right: 16px;\n }\n}\n@supports (container-type: size) {\n @container covet-pics-gallery-item-detail (min-width: 240px) and (max-width: 479.98px) {\n covet-pics-crop-text .crop-text.basic-6 {\n padding-left: 32px;\n padding-right: 32px;\n }\n }\n}\n@supports not (container-type: size) {\n covet-pics-crop-text .crop-text.basic-6.size-md {\n padding-left: 32px;\n padding-right: 32px;\n }\n}\n@supports (container-type: size) {\n @container covet-pics-gallery-item-detail (min-width: 480px) {\n covet-pics-crop-text .crop-text.basic-6 {\n padding-left: 64px;\n padding-right: 64px;\n }\n }\n}\n@supports not (container-type: size) {\n covet-pics-crop-text .crop-text.basic-6.size-lg {\n padding-left: 64px;\n padding-right: 64px;\n }\n}";
|
|
11
|
+
const covetPicsCropTextCss = "covet-pics-crop-text {\n display: -ms-flexbox;\n display: flex;\n -ms-flex: none;\n flex: none;\n -ms-flex-pack: center;\n justify-content: center;\n -ms-flex-align: center;\n align-items: center;\n position: relative;\n -ms-flex-positive: 1;\n flex-grow: 1;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n overflow: hidden;\n width: 100%;\n}\ncovet-pics-crop-text.text-review {\n height: 100%;\n max-height: 100%;\n}\ncovet-pics-crop-text.collage:before {\n content: \"\";\n display: inline-block;\n bottom: 0;\n width: 1px;\n height: 0;\n padding-top: 100%;\n visibility: hidden;\n opacity: 0;\n}\ncovet-pics-crop-text.basic-1 {\n position: absolute;\n left: 0;\n top: 0;\n}\ncovet-pics-crop-text.basic-1:after {\n content: \"\";\n display: block;\n position: absolute;\n width: 100%;\n height: 1px;\n left: 0;\n bottom: 0;\n background-color: rgba(0, 0, 0, 0.1);\n}\n@supports (container-type: size) {\n @container covet-pics-gallery-item-detail (max-width: 159.98px) {\n covet-pics-crop-text.basic-1 {\n padding: 12px;\n }\n }\n}\n@supports not (container-type: size) {\n covet-pics-crop-text.basic-1.size-xs {\n padding: 12px;\n }\n}\n@supports (container-type: size) {\n @container covet-pics-gallery-item-detail (min-width: 160px) and (max-width: 239.98px) {\n covet-pics-crop-text.basic-1 {\n padding: 24px 16px;\n }\n }\n}\n@supports not (container-type: size) {\n covet-pics-crop-text.basic-1.size-sm {\n padding: 24px 16px;\n }\n}\n@supports (container-type: size) {\n @container covet-pics-gallery-item-detail (min-width: 240px) and (max-width: 479.98px) {\n covet-pics-crop-text.basic-1 {\n padding: 32px;\n }\n }\n}\n@supports not (container-type: size) {\n covet-pics-crop-text.basic-1.size-md {\n padding: 32px;\n }\n}\n@supports (container-type: size) {\n @container covet-pics-gallery-item-detail (min-width: 480px) {\n covet-pics-crop-text.basic-1 {\n padding: 64px;\n }\n }\n}\n@supports not (container-type: size) {\n covet-pics-crop-text.basic-1.size-lg {\n padding: 64px;\n }\n}\n@supports (container-type: size) {\n @container covet-pics-gallery-item-detail (max-width: 159.98px) {\n covet-pics-crop-text.basic-1.verified {\n padding: 35px 12px 12px 12px;\n }\n }\n}\n@supports not (container-type: size) {\n covet-pics-crop-text.basic-1.verified.size-xs {\n padding: 35px 12px 12px 12px;\n }\n}\n@supports (container-type: size) {\n @container covet-pics-gallery-item-detail (min-width: 160px) and (max-width: 239.98px) {\n covet-pics-crop-text.basic-1.verified {\n padding: 33px 16px 16px 16px;\n }\n }\n}\n@supports not (container-type: size) {\n covet-pics-crop-text.basic-1.verified.size-sm {\n padding: 33px 16px 16px 16px;\n }\n}\ncovet-pics-crop-text.basic-2 {\n background-color: #F7F7F7;\n position: absolute;\n left: 0;\n top: 0;\n}\n@supports (container-type: size) {\n @container covet-pics-gallery-item-detail (max-width: 159.98px) {\n covet-pics-crop-text.basic-2 {\n padding: 12px;\n }\n }\n}\n@supports not (container-type: size) {\n covet-pics-crop-text.basic-2.size-xs {\n padding: 12px;\n }\n}\ncovet-pics-crop-text.basic-2.size-xs.verified {\n padding: 35px 12px 12px 12px;\n}\n@supports (container-type: size) {\n @container covet-pics-gallery-item-detail (min-width: 160px) and (max-width: 239.98px) {\n covet-pics-crop-text.basic-2 {\n padding: 24px 16px;\n }\n }\n}\n@supports not (container-type: size) {\n covet-pics-crop-text.basic-2.size-sm {\n padding: 24px 16px;\n }\n}\ncovet-pics-crop-text.basic-2.size-sm.verified {\n padding: 33px 16px 16px 16px;\n}\n@supports (container-type: size) {\n @container covet-pics-gallery-item-detail (min-width: 240px) and (max-width: 479.98px) {\n covet-pics-crop-text.basic-2 {\n padding: 32px;\n }\n }\n}\n@supports not (container-type: size) {\n covet-pics-crop-text.basic-2.size-md {\n padding: 32px;\n }\n}\n@supports (container-type: size) {\n @container covet-pics-gallery-item-detail (min-width: 480px) {\n covet-pics-crop-text.basic-2 {\n padding: 64px;\n }\n }\n}\n@supports not (container-type: size) {\n covet-pics-crop-text.basic-2.size-lg {\n padding: 64px;\n }\n}\n@supports (container-type: size) {\n @container covet-pics-gallery-item-detail (max-width: 159.98px) {\n covet-pics-crop-text.basic-2.verified {\n padding: 35px 12px 12px 12px;\n }\n }\n}\n@supports not (container-type: size) {\n covet-pics-crop-text.basic-2.verified.size-xs {\n padding: 35px 12px 12px 12px;\n }\n}\n@supports (container-type: size) {\n @container covet-pics-gallery-item-detail (min-width: 160px) and (max-width: 239.98px) {\n covet-pics-crop-text.basic-2.verified {\n padding: 33px 16px 16px 16px;\n }\n }\n}\n@supports not (container-type: size) {\n covet-pics-crop-text.basic-2.verified.size-sm {\n padding: 33px 16px 16px 16px;\n }\n}\ncovet-pics-crop-text.basic-3 {\n position: absolute;\n left: 0;\n top: 0;\n width: 100%;\n background-color: #F7F7F7;\n}\n@supports (container-type: size) {\n @container covet-pics-gallery-item-detail (max-width: 159.98px) {\n covet-pics-crop-text.basic-3 {\n padding: 12px;\n }\n }\n}\n@supports not (container-type: size) {\n covet-pics-crop-text.basic-3.size-xs {\n padding: 12px;\n }\n}\n@supports (container-type: size) {\n @container covet-pics-gallery-item-detail (min-width: 160px) and (max-width: 239.98px) {\n covet-pics-crop-text.basic-3 {\n padding: 24px 16px;\n }\n }\n}\n@supports not (container-type: size) {\n covet-pics-crop-text.basic-3.size-sm {\n padding: 24px 16px;\n }\n}\n@supports (container-type: size) {\n @container covet-pics-gallery-item-detail (min-width: 240px) and (max-width: 479.98px) {\n covet-pics-crop-text.basic-3 {\n padding: 32px;\n }\n }\n}\n@supports not (container-type: size) {\n covet-pics-crop-text.basic-3.size-md {\n padding: 32px;\n }\n}\n@supports (container-type: size) {\n @container covet-pics-gallery-item-detail (min-width: 480px) {\n covet-pics-crop-text.basic-3 {\n padding: 64px;\n }\n }\n}\n@supports not (container-type: size) {\n covet-pics-crop-text.basic-3.size-lg {\n padding: 64px;\n }\n}\n@supports (container-type: size) {\n @container covet-pics-gallery-item-detail (max-width: 159.98px) {\n covet-pics-crop-text.basic-3.verified {\n padding: 35px 12px 12px 12px;\n }\n }\n}\n@supports not (container-type: size) {\n covet-pics-crop-text.basic-3.verified.size-xs {\n padding: 35px 12px 12px 12px;\n }\n}\n@supports (container-type: size) {\n @container covet-pics-gallery-item-detail (min-width: 160px) and (max-width: 239.98px) {\n covet-pics-crop-text.basic-3.verified {\n padding: 33px 16px 16px 16px;\n }\n }\n}\n@supports not (container-type: size) {\n covet-pics-crop-text.basic-3.verified.size-sm {\n padding: 33px 16px 16px 16px;\n }\n}\ncovet-pics-crop-text.basic-4 {\n position: absolute;\n left: 0;\n top: 0;\n}\ncovet-pics-crop-text.basic-4:after {\n content: \"\";\n display: block;\n position: absolute;\n width: 100%;\n height: 1px;\n left: 0;\n bottom: 0;\n background-color: rgba(0, 0, 0, 0.1);\n}\n@supports (container-type: size) {\n @container covet-pics-gallery-item-detail (max-width: 159.98px) {\n covet-pics-crop-text.basic-4 {\n padding: 12px;\n }\n }\n}\n@supports not (container-type: size) {\n covet-pics-crop-text.basic-4.size-xs {\n padding: 12px;\n }\n}\ncovet-pics-crop-text.basic-4.size-xs.verified {\n padding: 35px 12px 12px 12px;\n}\n@supports (container-type: size) {\n @container covet-pics-gallery-item-detail (min-width: 160px) and (max-width: 239.98px) {\n covet-pics-crop-text.basic-4 {\n padding: 24px 16px;\n }\n }\n}\n@supports not (container-type: size) {\n covet-pics-crop-text.basic-4.size-sm {\n padding: 24px 16px;\n }\n}\ncovet-pics-crop-text.basic-4.size-sm.verified {\n padding: 33px 16px 16px 16px;\n}\n@supports (container-type: size) {\n @container covet-pics-gallery-item-detail (min-width: 240px) and (max-width: 479.98px) {\n covet-pics-crop-text.basic-4 {\n padding: 32px;\n }\n }\n}\n@supports not (container-type: size) {\n covet-pics-crop-text.basic-4.size-md {\n padding: 32px;\n }\n}\n@supports (container-type: size) {\n @container covet-pics-gallery-item-detail (min-width: 480px) {\n covet-pics-crop-text.basic-4 {\n padding: 64px;\n }\n }\n}\n@supports not (container-type: size) {\n covet-pics-crop-text.basic-4.size-lg {\n padding: 64px;\n }\n}\n@supports (container-type: size) {\n @container covet-pics-gallery-item-detail (max-width: 159.98px) {\n covet-pics-crop-text.basic-4.verified {\n padding: 35px 12px 12px 12px;\n }\n }\n}\n@supports not (container-type: size) {\n covet-pics-crop-text.basic-4.verified.size-xs {\n padding: 35px 12px 12px 12px;\n }\n}\n@supports (container-type: size) {\n @container covet-pics-gallery-item-detail (min-width: 160px) and (max-width: 239.98px) {\n covet-pics-crop-text.basic-4.verified {\n padding: 33px 16px 16px 16px;\n }\n }\n}\n@supports not (container-type: size) {\n covet-pics-crop-text.basic-4.verified.size-sm {\n padding: 33px 16px 16px 16px;\n }\n}\ncovet-pics-crop-text.basic-5 {\n position: absolute;\n left: 0;\n top: 0;\n}\ncovet-pics-crop-text.basic-5:after {\n content: \"\";\n display: block;\n position: absolute;\n width: 100%;\n height: 1px;\n left: 0;\n bottom: 0;\n background-color: #000000;\n}\ncovet-pics-crop-text.basic-5.size-xs {\n padding: 12px;\n}\ncovet-pics-crop-text.basic-5.size-xs.verified {\n padding: 35px 12px 12px 12px;\n}\ncovet-pics-crop-text.basic-5.size-sm {\n padding: 24px 16px;\n}\ncovet-pics-crop-text.basic-5.size-sm.verified {\n padding: 35px 16px 16px 16px;\n}\ncovet-pics-crop-text.basic-5.size-md {\n padding: 32px;\n}\ncovet-pics-crop-text.basic-5.size-md.verified {\n padding: 38px 32px 32px 32px;\n}\ncovet-pics-crop-text.basic-5.size-lg {\n padding: 64px;\n}\ncovet-pics-crop-text.basic-6 {\n position: absolute;\n left: 0;\n top: 0;\n background-color: #151515;\n}\ncovet-pics-crop-text.basic-6:after {\n content: \"\";\n display: block;\n position: absolute;\n width: 100%;\n height: 1px;\n left: 0;\n bottom: 0;\n background-color: rgba(255, 255, 255, 0.1);\n}\n@supports (container-type: size) {\n @container covet-pics-gallery-item-detail (max-width: 159.98px) {\n covet-pics-crop-text.basic-6 {\n padding: 12px;\n }\n }\n}\n@supports not (container-type: size) {\n covet-pics-crop-text.basic-6.size-xs {\n padding: 12px;\n }\n}\n@supports (container-type: size) {\n @container covet-pics-gallery-item-detail (min-width: 160px) and (max-width: 239.98px) {\n covet-pics-crop-text.basic-6 {\n padding: 24px 16px;\n }\n }\n}\n@supports not (container-type: size) {\n covet-pics-crop-text.basic-6.size-sm {\n padding: 24px 16px;\n }\n}\n@supports (container-type: size) {\n @container covet-pics-gallery-item-detail (min-width: 240px) and (max-width: 479.98px) {\n covet-pics-crop-text.basic-6 {\n padding: 32px;\n }\n }\n}\n@supports not (container-type: size) {\n covet-pics-crop-text.basic-6.size-md {\n padding: 32px;\n }\n}\n@supports (container-type: size) {\n @container covet-pics-gallery-item-detail (min-width: 480px) {\n covet-pics-crop-text.basic-6 {\n padding: 64px;\n }\n }\n}\n@supports not (container-type: size) {\n covet-pics-crop-text.basic-6.size-lg {\n padding: 64px;\n }\n}\n@supports (container-type: size) {\n @container covet-pics-gallery-item-detail (max-width: 159.98px) {\n covet-pics-crop-text.basic-6.verified {\n padding: 35px 12px 12px 12px;\n }\n }\n}\n@supports not (container-type: size) {\n covet-pics-crop-text.basic-6.verified.size-xs {\n padding: 35px 12px 12px 12px;\n }\n}\n@supports (container-type: size) {\n @container covet-pics-gallery-item-detail (min-width: 160px) and (max-width: 239.98px) {\n covet-pics-crop-text.basic-6.verified {\n padding: 33px 16px 16px 16px;\n }\n }\n}\n@supports not (container-type: size) {\n covet-pics-crop-text.basic-6.verified.size-sm {\n padding: 33px 16px 16px 16px;\n }\n}\ncovet-pics-crop-text .crop-text {\n position: absolute;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n margin: auto;\n text-align: center;\n width: 100%;\n color: var(--covet-crop-text-color);\n display: -webkit-box;\n overflow: hidden;\n -webkit-box-orient: vertical;\n font-size: var(--covet-crop-text-font-size);\n line-height: 1.4;\n -webkit-line-clamp: var(--covet-crop-text-max-lines);\n}\n@supports (container-type: size) {\n @container covet-pics-gallery-item-detail (max-width: 159.98px) {\n covet-pics-crop-text .crop-text.basic-1 {\n padding-left: 12px;\n padding-right: 12px;\n }\n }\n}\n@supports not (container-type: size) {\n covet-pics-crop-text .crop-text.basic-1.size-xs {\n padding-left: 12px;\n padding-right: 12px;\n }\n}\n@supports (container-type: size) {\n @container covet-pics-gallery-item-detail (min-width: 160px) and (max-width: 239.98px) {\n covet-pics-crop-text .crop-text.basic-1 {\n padding-left: 16px;\n padding-right: 16px;\n }\n }\n}\n@supports not (container-type: size) {\n covet-pics-crop-text .crop-text.basic-1.size-sm {\n padding-left: 16px;\n padding-right: 16px;\n }\n}\n@supports (container-type: size) {\n @container covet-pics-gallery-item-detail (min-width: 240px) and (max-width: 479.98px) {\n covet-pics-crop-text .crop-text.basic-1 {\n padding-left: 32px;\n padding-right: 32px;\n }\n }\n}\n@supports not (container-type: size) {\n covet-pics-crop-text .crop-text.basic-1.size-md {\n padding-left: 32px;\n padding-right: 32px;\n }\n}\n@supports (container-type: size) {\n @container covet-pics-gallery-item-detail (min-width: 480px) {\n covet-pics-crop-text .crop-text.basic-1 {\n padding-left: 64px;\n padding-right: 64px;\n }\n }\n}\n@supports not (container-type: size) {\n covet-pics-crop-text .crop-text.basic-1.size-lg {\n padding-left: 64px;\n padding-right: 64px;\n }\n}\n@supports (container-type: size) {\n @container covet-pics-gallery-item-detail (max-width: 159.98px) {\n covet-pics-crop-text .crop-text.basic-2 {\n padding-left: 12px;\n padding-right: 12px;\n }\n }\n}\n@supports not (container-type: size) {\n covet-pics-crop-text .crop-text.basic-2.size-xs {\n padding-left: 12px;\n padding-right: 12px;\n }\n}\n@supports (container-type: size) {\n @container covet-pics-gallery-item-detail (min-width: 160px) and (max-width: 239.98px) {\n covet-pics-crop-text .crop-text.basic-2 {\n padding-left: 16px;\n padding-right: 16px;\n }\n }\n}\n@supports not (container-type: size) {\n covet-pics-crop-text .crop-text.basic-2.size-sm {\n padding-left: 16px;\n padding-right: 16px;\n }\n}\n@supports (container-type: size) {\n @container covet-pics-gallery-item-detail (min-width: 240px) and (max-width: 479.98px) {\n covet-pics-crop-text .crop-text.basic-2 {\n padding-left: 32px;\n padding-right: 32px;\n }\n }\n}\n@supports not (container-type: size) {\n covet-pics-crop-text .crop-text.basic-2.size-md {\n padding-left: 32px;\n padding-right: 32px;\n }\n}\n@supports (container-type: size) {\n @container covet-pics-gallery-item-detail (min-width: 480px) {\n covet-pics-crop-text .crop-text.basic-2 {\n padding-left: 64px;\n padding-right: 64px;\n }\n }\n}\n@supports not (container-type: size) {\n covet-pics-crop-text .crop-text.basic-2.size-lg {\n padding-left: 64px;\n padding-right: 64px;\n }\n}\n@supports (container-type: size) {\n @container covet-pics-gallery-item-detail (max-width: 159.98px) {\n covet-pics-crop-text .crop-text.basic-3 {\n padding-left: 12px;\n padding-right: 12px;\n }\n }\n}\n@supports not (container-type: size) {\n covet-pics-crop-text .crop-text.basic-3.size-xs {\n padding-left: 12px;\n padding-right: 12px;\n }\n}\n@supports (container-type: size) {\n @container covet-pics-gallery-item-detail (min-width: 160px) and (max-width: 239.98px) {\n covet-pics-crop-text .crop-text.basic-3 {\n padding-left: 16px;\n padding-right: 16px;\n }\n }\n}\n@supports not (container-type: size) {\n covet-pics-crop-text .crop-text.basic-3.size-sm {\n padding-left: 16px;\n padding-right: 16px;\n }\n}\n@supports (container-type: size) {\n @container covet-pics-gallery-item-detail (min-width: 240px) and (max-width: 479.98px) {\n covet-pics-crop-text .crop-text.basic-3 {\n padding-left: 32px;\n padding-right: 32px;\n }\n }\n}\n@supports not (container-type: size) {\n covet-pics-crop-text .crop-text.basic-3.size-md {\n padding-left: 32px;\n padding-right: 32px;\n }\n}\n@supports (container-type: size) {\n @container covet-pics-gallery-item-detail (min-width: 480px) {\n covet-pics-crop-text .crop-text.basic-3 {\n padding-left: 64px;\n padding-right: 64px;\n }\n }\n}\n@supports not (container-type: size) {\n covet-pics-crop-text .crop-text.basic-3.size-lg {\n padding-left: 64px;\n padding-right: 64px;\n }\n}\n@supports (container-type: size) {\n @container covet-pics-gallery-item-detail (max-width: 159.98px) {\n covet-pics-crop-text .crop-text.basic-4 {\n padding-left: 12px;\n padding-right: 12px;\n }\n }\n}\n@supports not (container-type: size) {\n covet-pics-crop-text .crop-text.basic-4.size-xs {\n padding-left: 12px;\n padding-right: 12px;\n }\n}\n@supports (container-type: size) {\n @container covet-pics-gallery-item-detail (min-width: 160px) and (max-width: 239.98px) {\n covet-pics-crop-text .crop-text.basic-4 {\n padding-left: 16px;\n padding-right: 16px;\n }\n }\n}\n@supports not (container-type: size) {\n covet-pics-crop-text .crop-text.basic-4.size-sm {\n padding-left: 16px;\n padding-right: 16px;\n }\n}\n@supports (container-type: size) {\n @container covet-pics-gallery-item-detail (min-width: 240px) and (max-width: 479.98px) {\n covet-pics-crop-text .crop-text.basic-4 {\n padding-left: 32px;\n padding-right: 32px;\n }\n }\n}\n@supports not (container-type: size) {\n covet-pics-crop-text .crop-text.basic-4.size-md {\n padding-left: 32px;\n padding-right: 32px;\n }\n}\n@supports (container-type: size) {\n @container covet-pics-gallery-item-detail (min-width: 480px) {\n covet-pics-crop-text .crop-text.basic-4 {\n padding-left: 64px;\n padding-right: 64px;\n }\n }\n}\n@supports not (container-type: size) {\n covet-pics-crop-text .crop-text.basic-4.size-lg {\n padding-left: 64px;\n padding-right: 64px;\n }\n}\n@supports (container-type: size) {\n @container covet-pics-gallery-item-detail (max-width: 159.98px) {\n covet-pics-crop-text .crop-text.basic-5 {\n padding-left: 12px;\n padding-right: 12px;\n }\n }\n}\n@supports not (container-type: size) {\n covet-pics-crop-text .crop-text.basic-5.size-xs {\n padding-left: 12px;\n padding-right: 12px;\n }\n}\n@supports (container-type: size) {\n @container covet-pics-gallery-item-detail (min-width: 160px) and (max-width: 239.98px) {\n covet-pics-crop-text .crop-text.basic-5 {\n padding-left: 16px;\n padding-right: 16px;\n }\n }\n}\n@supports not (container-type: size) {\n covet-pics-crop-text .crop-text.basic-5.size-sm {\n padding-left: 16px;\n padding-right: 16px;\n }\n}\n@supports (container-type: size) {\n @container covet-pics-gallery-item-detail (min-width: 240px) and (max-width: 479.98px) {\n covet-pics-crop-text .crop-text.basic-5 {\n padding-left: 32px;\n padding-right: 32px;\n }\n }\n}\n@supports not (container-type: size) {\n covet-pics-crop-text .crop-text.basic-5.size-md {\n padding-left: 32px;\n padding-right: 32px;\n }\n}\n@supports (container-type: size) {\n @container covet-pics-gallery-item-detail (min-width: 480px) {\n covet-pics-crop-text .crop-text.basic-5 {\n padding-left: 64px;\n padding-right: 64px;\n }\n }\n}\n@supports not (container-type: size) {\n covet-pics-crop-text .crop-text.basic-5.size-lg {\n padding-left: 64px;\n padding-right: 64px;\n }\n}\n@supports (container-type: size) {\n @container covet-pics-gallery-item-detail (max-width: 159.98px) {\n covet-pics-crop-text .crop-text.basic-6 {\n padding-left: 12px;\n padding-right: 12px;\n }\n }\n}\n@supports not (container-type: size) {\n covet-pics-crop-text .crop-text.basic-6.size-xs {\n padding-left: 12px;\n padding-right: 12px;\n }\n}\n@supports (container-type: size) {\n @container covet-pics-gallery-item-detail (min-width: 160px) and (max-width: 239.98px) {\n covet-pics-crop-text .crop-text.basic-6 {\n padding-left: 16px;\n padding-right: 16px;\n }\n }\n}\n@supports not (container-type: size) {\n covet-pics-crop-text .crop-text.basic-6.size-sm {\n padding-left: 16px;\n padding-right: 16px;\n }\n}\n@supports (container-type: size) {\n @container covet-pics-gallery-item-detail (min-width: 240px) and (max-width: 479.98px) {\n covet-pics-crop-text .crop-text.basic-6 {\n padding-left: 32px;\n padding-right: 32px;\n }\n }\n}\n@supports not (container-type: size) {\n covet-pics-crop-text .crop-text.basic-6.size-md {\n padding-left: 32px;\n padding-right: 32px;\n }\n}\n@supports (container-type: size) {\n @container covet-pics-gallery-item-detail (min-width: 480px) {\n covet-pics-crop-text .crop-text.basic-6 {\n padding-left: 64px;\n padding-right: 64px;\n }\n }\n}\n@supports not (container-type: size) {\n covet-pics-crop-text .crop-text.basic-6.size-lg {\n padding-left: 64px;\n padding-right: 64px;\n }\n}";
|
|
12
12
|
const CovetPicsCropTextStyle0 = covetPicsCropTextCss;
|
|
13
13
|
|
|
14
14
|
const CovetPicsCropText = class {
|
|
@@ -78,13 +78,13 @@ const CovetPicsCropText = class {
|
|
|
78
78
|
};
|
|
79
79
|
const { fontSize, maxLines } = calculateMaxLines();
|
|
80
80
|
return this.cropCSS = {
|
|
81
|
-
"--covet-
|
|
82
|
-
"--covet-
|
|
83
|
-
"--covet-
|
|
81
|
+
"--covet-crop-text-max-lines": `${maxLines}`,
|
|
82
|
+
"--covet-crop-text-font-size": `${fontSize}px`,
|
|
83
|
+
"--covet-crop-text-color": `${this.textColor}`,
|
|
84
84
|
};
|
|
85
85
|
}
|
|
86
86
|
render() {
|
|
87
|
-
return (index.h(index.Host, { key: '
|
|
87
|
+
return (index.h(index.Host, { key: '267a53f8c90cb3c1fc0bf646745538a9f6d50d4b', style: this.cropCSS }, index.h("p", { key: '69ae4dc6cfb2116c4b4d1bcdf2f25750b8993c36', class: `crop-text ${this.textClass}`, innerHTML: this.text })));
|
|
88
88
|
}
|
|
89
89
|
get el() { return index.getElement(this); }
|
|
90
90
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"covet-pics-crop-text.entry.cjs.js","mappings":"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","names":["getSize","getStyle","h","Host"],"sources":["src/components/covet-pics-crop-text/covet-pics-crop-text.scss?tag=covet-pics-crop-text","src/components/covet-pics-crop-text/covet-pics-crop-text.tsx"],"sourcesContent":["@import \"../covet-pics-gallery-item-detail/covet-pics-gallery-item-mixins.scss\";\n\n$black: #000000;\n$black2: #151515;\n$white: #FFFFFF;\n$gray: rgba($black, 0.1);\n$gray3: rgba($white, 0.1);\n\ncovet-pics-crop-text {\n display: flex;\n flex: none;\n justify-content: center;\n align-items: center;\n position: relative;\n flex-grow: 1;\n box-sizing: border-box;\n overflow: hidden;\n width: 100%;\n &.text-review {\n height: 100%;\n max-height: 100%;\n }\n &.collage {\n &:before {\n content: \"\";\n display: inline-block;\n bottom: 0;\n width: 1px;\n height: 0;\n padding-top: 100%;\n visibility: hidden;\n opacity: 0;\n }\n }\n\n &.basic-1 {\n position: absolute;\n left: 0;\n top: 0;\n &:after {\n content: \"\";\n display: block;\n position: absolute;\n width: 100%;\n height: 1px;\n left: 0;\n bottom: 0;\n background-color: $gray;\n }\n @include size-xs { \n padding: 12px; \n } \n @include size-sm { \n padding: 24px 16px; \n }\n @include size-md { \n padding: 32px; \n } \n @include size-lg { \n padding: 64px; \n } \n } \n\n &.basic-1.verified {\n @include size-xs { \n padding: 35px 12px 12px 12px; \n } \n @include size-sm { \n padding: 33px 16px 16px 16px; \n } \n }\n\n &.basic-2 {\n background-color: #F7F7F7;\n position: absolute;\n left: 0;\n top: 0;\n @include size-xs { \n padding: 12px; \n } \n &.size-xs.verified { \n padding: 35px 12px 12px 12px; \n } \n @include size-sm { \n padding: 24px 16px; \n } \n &.size-sm.verified { \n padding: 33px 16px 16px 16px; \n }\n @include size-md { \n padding: 32px; \n } \n @include size-lg { \n padding: 64px; \n }\n }\n &.basic-2.verified {\n @include size-xs { \n padding: 35px 12px 12px 12px; \n } \n @include size-sm { \n padding: 33px 16px 16px 16px; \n }\n }\n\n &.basic-3 {\n position: absolute;\n left: 0;\n top: 0;\n width: 100%;\n background-color: #F7F7F7;\n @include size-xs { \n padding: 12px; \n } \n @include size-sm { \n padding: 24px 16px; \n } \n @include size-md { \n padding: 32px; \n } \n @include size-lg { \n padding: 64px; \n } \n }\n\n &.basic-3.verified {\n @include size-xs { \n padding: 35px 12px 12px 12px; \n }\n @include size-sm { \n padding: 33px 16px 16px 16px; \n } \n }\n\n &.basic-4 {\n position: absolute;\n left: 0;\n top: 0;\n &:after {\n content: \"\";\n display: block;\n position: absolute;\n width: 100%;\n height: 1px;\n left: 0;\n bottom: 0;\n background-color: $gray;\n }\n @include size-xs { \n padding: 12px; \n }\n &.size-xs.verified { \n padding: 35px 12px 12px 12px; \n } \n @include size-sm { \n padding: 24px 16px; \n } \n &.size-sm.verified { \n padding: 33px 16px 16px 16px; \n }\n @include size-md { \n padding: 32px; \n } \n @include size-lg { \n padding: 64px; \n } \n }\n\n &.basic-4.verified {\n @include size-xs { \n padding: 35px 12px 12px 12px; \n }\n @include size-sm { \n padding: 33px 16px 16px 16px; \n }\n }\n\n &.basic-5 {\n position: absolute;\n left: 0;\n top: 0;\n &:after {\n content: \"\";\n display: block;\n position: absolute;\n width: 100%;\n height: 1px;\n left: 0;\n bottom: 0;\n background-color: $black;\n }\n &.size-xs { \n padding: 12px; \n } \n &.size-xs.verified { \n padding: 35px 12px 12px 12px; \n } \n &.size-sm { \n padding: 24px 16px; \n }\n &.size-sm.verified { \n padding: 35px 16px 16px 16px; \n } \n &.size-md { \n padding: 32px; \n }\n &.size-md.verified { \n padding: 38px 32px 32px 32px; \n } \n &.size-lg { \n padding: 64px; \n } \n }\n\n &.basic-6 {\n position: absolute;\n left: 0;\n top: 0;\n background-color: $black2;\n &:after {\n content: \"\";\n display: block;\n position: absolute;\n width: 100%;\n height: 1px;\n left: 0;\n bottom: 0;\n background-color: $gray3;\n }\n @include size-xs { \n padding: 12px; \n } \n @include size-sm { \n padding: 24px 16px; \n } \n @include size-md { \n padding: 32px; \n } \n @include size-lg { \n padding: 64px; \n } \n }\n\n &.basic-6.verified {\n @include size-xs { \n padding: 35px 12px 12px 12px; \n }\n @include size-sm { \n padding: 33px 16px 16px 16px; \n }\n } \n\n .crop-text {\n position: absolute;\n box-sizing: border-box;\n margin: auto;\n text-align: center;\n width: 100%;\n color: var(--covet-pics-crop-text-color);\n display: -webkit-box;\n overflow: hidden;\n -webkit-box-orient: vertical;\n font-size: var(--covet-pics-crop-text-font-size);\n line-height: 1.4;\n -webkit-line-clamp: var(--covet-pics-crop-text-max-lines);\n \n &.basic-1 {\n @include size-xs { \n padding-left: 12px; \n padding-right: 12px; \n } \n @include size-sm { \n padding-left: 16px; \n padding-right: 16px; \n }\n @include size-md { \n padding-left: 32px; \n padding-right: 32px; \n } \n @include size-lg { \n padding-left: 64px; \n padding-right: 64px; \n } \n }\n \n &.basic-2 {\n @include size-xs { \n padding-left: 12px; \n padding-right: 12px; \n } \n @include size-sm { \n padding-left: 16px; \n padding-right: 16px; \n } \n @include size-md { \n padding-left: 32px; \n padding-right: 32px; \n } \n @include size-lg { \n padding-left: 64px; \n padding-right: 64px; \n } \n }\n \n &.basic-3 {\n @include size-xs { \n padding-left: 12px; \n padding-right: 12px; \n } \n @include size-sm { \n padding-left: 16px; \n padding-right: 16px; \n } \n @include size-md { \n padding-left: 32px; \n padding-right: 32px; \n } \n @include size-lg { \n padding-left: 64px; \n padding-right: 64px;\n } \n }\n \n &.basic-4 {\n @include size-xs { \n padding-left: 12px; \n padding-right: 12px; \n } \n @include size-sm { \n padding-left: 16px; \n padding-right: 16px; \n } \n @include size-md { \n padding-left: 32px; \n padding-right: 32px; \n } \n @include size-lg { \n padding-left: 64px; \n padding-right: 64px;\n } \n }\n \n &.basic-5 {\n @include size-xs { \n padding-left: 12px; \n padding-right: 12px; \n } \n @include size-sm { \n padding-left: 16px; \n padding-right: 16px; \n } \n @include size-md { \n padding-left: 32px; \n padding-right: 32px; \n } \n @include size-lg { \n padding-left: 64px; \n padding-right: 64px;\n } \n }\n \n &.basic-6 {\n @include size-xs { \n padding-left: 12px; \n padding-right: 12px; \n } \n @include size-sm { \n padding-left: 16px; \n padding-right: 16px; \n } \n @include size-md { \n padding-left: 32px; \n padding-right: 32px; \n } \n @include size-lg { \n padding-left: 64px; \n padding-right: 64px;\n } \n }\n }\n}\n","import { Component, Element, h, Host, Prop, State } from \"@stencil/core\";\nimport { getSize, getStyle } from \"../../utils/utils\";\n\n@Component({\n tag: \"covet-pics-crop-text\",\n styleUrl: \"covet-pics-crop-text.scss\"\n})\nexport class CovetPicsCropText {\n @Element() el: HTMLCovetPicsCropTextElement;\n\n /**\n * text\n */\n @Prop() text: string = \"\";\n\n /**\n * class styles\n */\n @Prop() textClass: string = \"\";\n\n /**\n * class styles\n */\n @Prop() textColor: string = \"#000000\";\n \n /**\n * ratio (font-size / max-lines)\n */\n @Prop() ratio = [\n { size: 48, lines: 2 },\n { size: 26, lines: 5 },\n { size: 16, lines: 8 }\n ];\n\n @State() cropCSS: { [key: string]: string; } = {}; \n private resizeObserver: ResizeObserver;\n private elHeight: number;\n private elWidth: number;\n\n componentWillLoad() {\n this.resizeObserver = new ResizeObserver(() => {\n if (this.elHeight !== getSize(this.el, \"height\") || this.elWidth !== getSize(this.el, \"width\")) {\n this.elHeight = getSize(this.el, \"height\");\n this.elWidth = getSize(this.el, \"width\");\n this.getReviewCSS();\n }\n });\n this.resizeObserver.observe(this.el);\n \n this.getReviewCSS();\n }\n\n disconnectedCallback() {\n this.resizeObserver.disconnect();\n }\n\n private getReviewCSS() {\n const PT = getStyle(this.el, \"padding-top\");\n const PB = getStyle(this.el, \"padding-bottom\");\n\n const elHeight = getSize(this.el, \"height\") - PT - PB;\n \n const textEl = this.el.querySelector(\".crop-text\") as HTMLElement;\n if (this.text === null || textEl === null) return;\n\n textEl.style.fontSize = `${this.ratio[0].size}px`;\n let textElLineHeight = getStyle(textEl, \"line-height\");\n textEl.style.webkitLineClamp = `${Math.round(elHeight / textElLineHeight) + 2}`;\n\n const calculateMaxLines = () => {\n let fontSize = this.ratio[0].size;\n let maxLines = this.ratio[0].lines;\n let testMaxLines = Math.round(getSize(textEl, \"height\") / textElLineHeight);\n for (let i = 0; i < this.ratio.length; i++) {\n // last\n if (i === this.ratio.length - 1) {\n if (maxLines * textElLineHeight > elHeight) {\n fontSize = this.ratio[i].size;\n maxLines = Math.floor(elHeight / textElLineHeight) > 0\n ? Math.floor(elHeight / textElLineHeight)\n : 1;\n }\n textEl.removeAttribute(\"style\");\n return { fontSize, maxLines };\n }\n\n if (getSize(textEl, \"height\") < elHeight && testMaxLines <= maxLines) {\n textEl.removeAttribute(\"style\");\n return { fontSize, maxLines };\n }\n\n fontSize = this.ratio[i + 1].size;\n textEl.style.fontSize = `${this.ratio[i + 1].size}px`;\n maxLines = this.ratio[i + 1].lines;\n textElLineHeight = getStyle(textEl, \"line-height\");\n textEl.style.webkitLineClamp = `${Math.round(elHeight / textElLineHeight) + 2}`;\n testMaxLines = Math.round(getSize(textEl, \"height\") / textElLineHeight);\n }\n };\n\n const { fontSize, maxLines } = calculateMaxLines();\n\n return this.cropCSS = {\n \"--covet-pics-crop-text-max-lines\": `${maxLines}`,\n \"--covet-pics-crop-text-font-size\": `${fontSize}px`,\n \"--covet-pics-crop-text-color\": `${this.textColor}`,\n };\n }\n\n render() {\n return (\n <Host style={this.cropCSS}>\n <p class={`crop-text ${this.textClass}`} innerHTML={this.text}></p>\n </Host>\n );\n }\n}"],"version":3}
|
|
1
|
+
{"file":"covet-pics-crop-text.entry.cjs.js","mappings":"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","names":["getSize","getStyle","h","Host"],"sources":["src/components/covet-pics-crop-text/covet-pics-crop-text.scss?tag=covet-pics-crop-text","src/components/covet-pics-crop-text/covet-pics-crop-text.tsx"],"sourcesContent":["@import \"../covet-pics-gallery-item-detail/covet-pics-gallery-item-mixins.scss\";\n\n$black: #000000;\n$black2: #151515;\n$white: #FFFFFF;\n$gray: rgba($black, 0.1);\n$gray3: rgba($white, 0.1);\n\ncovet-pics-crop-text {\n display: flex;\n flex: none;\n justify-content: center;\n align-items: center;\n position: relative;\n flex-grow: 1;\n box-sizing: border-box;\n overflow: hidden;\n width: 100%;\n &.text-review {\n height: 100%;\n max-height: 100%;\n }\n &.collage {\n &:before {\n content: \"\";\n display: inline-block;\n bottom: 0;\n width: 1px;\n height: 0;\n padding-top: 100%;\n visibility: hidden;\n opacity: 0;\n }\n }\n\n &.basic-1 {\n position: absolute;\n left: 0;\n top: 0;\n &:after {\n content: \"\";\n display: block;\n position: absolute;\n width: 100%;\n height: 1px;\n left: 0;\n bottom: 0;\n background-color: $gray;\n }\n @include size-xs { \n padding: 12px; \n } \n @include size-sm { \n padding: 24px 16px; \n }\n @include size-md { \n padding: 32px; \n } \n @include size-lg { \n padding: 64px; \n } \n } \n\n &.basic-1.verified {\n @include size-xs { \n padding: 35px 12px 12px 12px; \n } \n @include size-sm { \n padding: 33px 16px 16px 16px; \n } \n }\n\n &.basic-2 {\n background-color: #F7F7F7;\n position: absolute;\n left: 0;\n top: 0;\n @include size-xs { \n padding: 12px; \n } \n &.size-xs.verified { \n padding: 35px 12px 12px 12px; \n } \n @include size-sm { \n padding: 24px 16px; \n } \n &.size-sm.verified { \n padding: 33px 16px 16px 16px; \n }\n @include size-md { \n padding: 32px; \n } \n @include size-lg { \n padding: 64px; \n }\n }\n &.basic-2.verified {\n @include size-xs { \n padding: 35px 12px 12px 12px; \n } \n @include size-sm { \n padding: 33px 16px 16px 16px; \n }\n }\n\n &.basic-3 {\n position: absolute;\n left: 0;\n top: 0;\n width: 100%;\n background-color: #F7F7F7;\n @include size-xs { \n padding: 12px; \n } \n @include size-sm { \n padding: 24px 16px; \n } \n @include size-md { \n padding: 32px; \n } \n @include size-lg { \n padding: 64px; \n } \n }\n\n &.basic-3.verified {\n @include size-xs { \n padding: 35px 12px 12px 12px; \n }\n @include size-sm { \n padding: 33px 16px 16px 16px; \n } \n }\n\n &.basic-4 {\n position: absolute;\n left: 0;\n top: 0;\n &:after {\n content: \"\";\n display: block;\n position: absolute;\n width: 100%;\n height: 1px;\n left: 0;\n bottom: 0;\n background-color: $gray;\n }\n @include size-xs { \n padding: 12px; \n }\n &.size-xs.verified { \n padding: 35px 12px 12px 12px; \n } \n @include size-sm { \n padding: 24px 16px; \n } \n &.size-sm.verified { \n padding: 33px 16px 16px 16px; \n }\n @include size-md { \n padding: 32px; \n } \n @include size-lg { \n padding: 64px; \n } \n }\n\n &.basic-4.verified {\n @include size-xs { \n padding: 35px 12px 12px 12px; \n }\n @include size-sm { \n padding: 33px 16px 16px 16px; \n }\n }\n\n &.basic-5 {\n position: absolute;\n left: 0;\n top: 0;\n &:after {\n content: \"\";\n display: block;\n position: absolute;\n width: 100%;\n height: 1px;\n left: 0;\n bottom: 0;\n background-color: $black;\n }\n &.size-xs { \n padding: 12px; \n } \n &.size-xs.verified { \n padding: 35px 12px 12px 12px; \n } \n &.size-sm { \n padding: 24px 16px; \n }\n &.size-sm.verified { \n padding: 35px 16px 16px 16px; \n } \n &.size-md { \n padding: 32px; \n }\n &.size-md.verified { \n padding: 38px 32px 32px 32px; \n } \n &.size-lg { \n padding: 64px; \n } \n }\n\n &.basic-6 {\n position: absolute;\n left: 0;\n top: 0;\n background-color: $black2;\n &:after {\n content: \"\";\n display: block;\n position: absolute;\n width: 100%;\n height: 1px;\n left: 0;\n bottom: 0;\n background-color: $gray3;\n }\n @include size-xs { \n padding: 12px; \n } \n @include size-sm { \n padding: 24px 16px; \n } \n @include size-md { \n padding: 32px; \n } \n @include size-lg { \n padding: 64px; \n } \n }\n\n &.basic-6.verified {\n @include size-xs { \n padding: 35px 12px 12px 12px; \n }\n @include size-sm { \n padding: 33px 16px 16px 16px; \n }\n } \n\n .crop-text {\n position: absolute;\n box-sizing: border-box;\n margin: auto;\n text-align: center;\n width: 100%;\n color: var(--covet-crop-text-color);\n display: -webkit-box;\n overflow: hidden;\n -webkit-box-orient: vertical;\n font-size: var(--covet-crop-text-font-size);\n line-height: 1.4;\n -webkit-line-clamp: var(--covet-crop-text-max-lines);\n \n &.basic-1 {\n @include size-xs { \n padding-left: 12px; \n padding-right: 12px; \n } \n @include size-sm { \n padding-left: 16px; \n padding-right: 16px; \n }\n @include size-md { \n padding-left: 32px; \n padding-right: 32px; \n } \n @include size-lg { \n padding-left: 64px; \n padding-right: 64px; \n } \n }\n \n &.basic-2 {\n @include size-xs { \n padding-left: 12px; \n padding-right: 12px; \n } \n @include size-sm { \n padding-left: 16px; \n padding-right: 16px; \n } \n @include size-md { \n padding-left: 32px; \n padding-right: 32px; \n } \n @include size-lg { \n padding-left: 64px; \n padding-right: 64px; \n } \n }\n \n &.basic-3 {\n @include size-xs { \n padding-left: 12px; \n padding-right: 12px; \n } \n @include size-sm { \n padding-left: 16px; \n padding-right: 16px; \n } \n @include size-md { \n padding-left: 32px; \n padding-right: 32px; \n } \n @include size-lg { \n padding-left: 64px; \n padding-right: 64px;\n } \n }\n \n &.basic-4 {\n @include size-xs { \n padding-left: 12px; \n padding-right: 12px; \n } \n @include size-sm { \n padding-left: 16px; \n padding-right: 16px; \n } \n @include size-md { \n padding-left: 32px; \n padding-right: 32px; \n } \n @include size-lg { \n padding-left: 64px; \n padding-right: 64px;\n } \n }\n \n &.basic-5 {\n @include size-xs { \n padding-left: 12px; \n padding-right: 12px; \n } \n @include size-sm { \n padding-left: 16px; \n padding-right: 16px; \n } \n @include size-md { \n padding-left: 32px; \n padding-right: 32px; \n } \n @include size-lg { \n padding-left: 64px; \n padding-right: 64px;\n } \n }\n \n &.basic-6 {\n @include size-xs { \n padding-left: 12px; \n padding-right: 12px; \n } \n @include size-sm { \n padding-left: 16px; \n padding-right: 16px; \n } \n @include size-md { \n padding-left: 32px; \n padding-right: 32px; \n } \n @include size-lg { \n padding-left: 64px; \n padding-right: 64px;\n } \n }\n }\n}\n","import { Component, Element, h, Host, Prop, State } from \"@stencil/core\";\nimport { getSize, getStyle } from \"../../utils/utils\";\n\n@Component({\n tag: \"covet-pics-crop-text\",\n styleUrl: \"covet-pics-crop-text.scss\"\n })\nexport class CovetPicsCropText {\n @Element() el: HTMLCovetPicsCropTextElement;\n\n /**\n * text\n */\n @Prop() text: string = \"\";\n\n /**\n * class styles\n */\n @Prop() textClass: string = \"\";\n\n /**\n * class styles\n */\n @Prop() textColor: string = \"#000000\";\n \n /**\n * ratio (font-size / max-lines)\n */\n @Prop() ratio = [\n { size: 48, lines: 2 },\n { size: 26, lines: 5 },\n { size: 16, lines: 8 }\n ];\n\n @State() cropCSS: { [key: string]: string; } = {}; \n private resizeObserver: ResizeObserver;\n private elHeight: number;\n private elWidth: number;\n\n componentWillLoad() {\n this.resizeObserver = new ResizeObserver(() => {\n if (this.elHeight !== getSize(this.el, \"height\") || this.elWidth !== getSize(this.el, \"width\")) {\n this.elHeight = getSize(this.el, \"height\");\n this.elWidth = getSize(this.el, \"width\");\n this.getReviewCSS();\n }\n });\n this.resizeObserver.observe(this.el);\n \n this.getReviewCSS();\n }\n\n disconnectedCallback() {\n this.resizeObserver.disconnect();\n }\n\n private getReviewCSS() {\n const PT = getStyle(this.el, \"padding-top\");\n const PB = getStyle(this.el, \"padding-bottom\");\n\n const elHeight = getSize(this.el, \"height\") - PT - PB;\n \n const textEl = this.el.querySelector(\".crop-text\") as HTMLElement;\n if (this.text === null || textEl === null) return;\n\n textEl.style.fontSize = `${this.ratio[0].size}px`;\n let textElLineHeight = getStyle(textEl, \"line-height\");\n textEl.style.webkitLineClamp = `${Math.round(elHeight / textElLineHeight) + 2}`;\n\n const calculateMaxLines = () => {\n let fontSize = this.ratio[0].size;\n let maxLines = this.ratio[0].lines;\n let testMaxLines = Math.round(getSize(textEl, \"height\") / textElLineHeight);\n for (let i = 0; i < this.ratio.length; i++) {\n // last\n if (i === this.ratio.length - 1) {\n if (maxLines * textElLineHeight > elHeight) {\n fontSize = this.ratio[i].size;\n maxLines = Math.floor(elHeight / textElLineHeight) > 0\n ? Math.floor(elHeight / textElLineHeight)\n : 1;\n }\n textEl.removeAttribute(\"style\");\n return { fontSize, maxLines };\n }\n\n if (getSize(textEl, \"height\") < elHeight && testMaxLines <= maxLines) {\n textEl.removeAttribute(\"style\");\n return { fontSize, maxLines };\n }\n\n fontSize = this.ratio[i + 1].size;\n textEl.style.fontSize = `${this.ratio[i + 1].size}px`;\n maxLines = this.ratio[i + 1].lines;\n textElLineHeight = getStyle(textEl, \"line-height\");\n textEl.style.webkitLineClamp = `${Math.round(elHeight / textElLineHeight) + 2}`;\n testMaxLines = Math.round(getSize(textEl, \"height\") / textElLineHeight);\n }\n };\n\n const { fontSize, maxLines } = calculateMaxLines();\n\n return this.cropCSS = {\n \"--covet-crop-text-max-lines\": `${maxLines}`,\n \"--covet-crop-text-font-size\": `${fontSize}px`,\n \"--covet-crop-text-color\": `${this.textColor}`,\n };\n }\n\n render() {\n return (\n <Host style={this.cropCSS}>\n <p class={`crop-text ${this.textClass}`} innerHTML={this.text}></p>\n </Host>\n );\n }\n}"],"version":3}
|
|
@@ -13,7 +13,7 @@ const popup = require('./popup-5b9349bc.js');
|
|
|
13
13
|
const index$1 = require('./index-fa6eb1c2.js');
|
|
14
14
|
const popupFuncComponents = require('./popupFuncComponents-fc2016ed.js');
|
|
15
15
|
|
|
16
|
-
const covetPicsDirectBuyCss = "@font-face{font-family:\"swiper-icons\";src:url(\"data:application/font-woff;charset=utf-8;base64, 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\") format(\"woff\");font-weight:400;font-style:normal}:root{--swiper-theme-color:#007aff;}:host{position:relative;display:block;margin-left:auto;margin-right:auto;z-index:1}.swiper{margin-left:auto;margin-right:auto;position:relative;overflow:hidden;list-style:none;padding:0;z-index:1;display:block}.swiper-vertical>.swiper-wrapper{-ms-flex-direction:column;flex-direction:column}.swiper-wrapper{position:relative;width:100%;height:100%;z-index:1;display:-ms-flexbox;display:flex;-webkit-transition-property:-webkit-transform;transition-property:-webkit-transform;transition-property:transform;transition-property:transform, -webkit-transform;-webkit-transition-timing-function:var(--swiper-wrapper-transition-timing-function, initial);transition-timing-function:var(--swiper-wrapper-transition-timing-function, initial);-webkit-box-sizing:content-box;box-sizing:content-box}.swiper-android .swiper-slide,.swiper-ios .swiper-slide,.swiper-wrapper{-webkit-transform:translate3d(0px, 0, 0);transform:translate3d(0px, 0, 0)}.swiper-horizontal{-ms-touch-action:pan-y;touch-action:pan-y}.swiper-vertical{-ms-touch-action:pan-x;touch-action:pan-x}.swiper-slide{-ms-flex-negative:0;flex-shrink:0;width:100%;height:100%;position:relative;-webkit-transition-property:-webkit-transform;transition-property:-webkit-transform;transition-property:transform;transition-property:transform, -webkit-transform;display:block}.swiper-slide-invisible-blank{visibility:hidden}.swiper-autoheight,.swiper-autoheight .swiper-slide{height:auto}.swiper-autoheight .swiper-wrapper{-ms-flex-align:start;align-items:flex-start;-webkit-transition-property:height, -webkit-transform;transition-property:height, -webkit-transform;transition-property:transform, height;transition-property:transform, height, -webkit-transform}.swiper-backface-hidden .swiper-slide{-webkit-transform:translateZ(0);transform:translateZ(0);-webkit-backface-visibility:hidden;backface-visibility:hidden}.swiper-3d.swiper-css-mode .swiper-wrapper{-webkit-perspective:1200px;perspective:1200px}.swiper-3d .swiper-wrapper{-webkit-transform-style:preserve-3d;transform-style:preserve-3d}.swiper-3d{-webkit-perspective:1200px;perspective:1200px}.swiper-3d .swiper-slide,.swiper-3d .swiper-cube-shadow{-webkit-transform-style:preserve-3d;transform-style:preserve-3d}.swiper-css-mode>.swiper-wrapper{overflow:auto;scrollbar-width:none;-ms-overflow-style:none;}.swiper-css-mode>.swiper-wrapper::-webkit-scrollbar{display:none}.swiper-css-mode>.swiper-wrapper>.swiper-slide{scroll-snap-align:start start}.swiper-css-mode.swiper-horizontal>.swiper-wrapper{-webkit-scroll-snap-type:x mandatory;-ms-scroll-snap-type:x mandatory;scroll-snap-type:x mandatory}.swiper-css-mode.swiper-vertical>.swiper-wrapper{-webkit-scroll-snap-type:y mandatory;-ms-scroll-snap-type:y mandatory;scroll-snap-type:y mandatory}.swiper-css-mode.swiper-free-mode>.swiper-wrapper{-webkit-scroll-snap-type:none;-ms-scroll-snap-type:none;scroll-snap-type:none}.swiper-css-mode.swiper-free-mode>.swiper-wrapper>.swiper-slide{scroll-snap-align:none}.swiper-css-mode.swiper-centered>.swiper-wrapper::before{content:\"\";-ms-flex-negative:0;flex-shrink:0;-ms-flex-order:9999;order:9999}.swiper-css-mode.swiper-centered>.swiper-wrapper>.swiper-slide{scroll-snap-align:center center;scroll-snap-stop:always}.swiper-css-mode.swiper-centered.swiper-horizontal>.swiper-wrapper>.swiper-slide:first-child{-webkit-margin-start:var(--swiper-centered-offset-before);margin-inline-start:var(--swiper-centered-offset-before)}.swiper-css-mode.swiper-centered.swiper-horizontal>.swiper-wrapper::before{height:100%;min-height:1px;width:var(--swiper-centered-offset-after)}.swiper-css-mode.swiper-centered.swiper-vertical>.swiper-wrapper>.swiper-slide:first-child{-webkit-margin-before:var(--swiper-centered-offset-before);margin-block-start:var(--swiper-centered-offset-before)}.swiper-css-mode.swiper-centered.swiper-vertical>.swiper-wrapper::before{width:100%;min-width:1px;height:var(--swiper-centered-offset-after)}.swiper-3d .swiper-slide-shadow,.swiper-3d .swiper-slide-shadow-left,.swiper-3d .swiper-slide-shadow-right,.swiper-3d .swiper-slide-shadow-top,.swiper-3d .swiper-slide-shadow-bottom{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none;z-index:10}.swiper-3d .swiper-slide-shadow{background:rgba(0, 0, 0, 0.15)}.swiper-3d .swiper-slide-shadow-left{background-image:-webkit-gradient(linear, right top, left top, from(rgba(0, 0, 0, 0.5)), to(rgba(0, 0, 0, 0)));background-image:linear-gradient(to left, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0))}.swiper-3d .swiper-slide-shadow-right{background-image:-webkit-gradient(linear, left top, right top, from(rgba(0, 0, 0, 0.5)), to(rgba(0, 0, 0, 0)));background-image:linear-gradient(to right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0))}.swiper-3d .swiper-slide-shadow-top{background-image:-webkit-gradient(linear, left bottom, left top, from(rgba(0, 0, 0, 0.5)), to(rgba(0, 0, 0, 0)));background-image:linear-gradient(to top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0))}.swiper-3d .swiper-slide-shadow-bottom{background-image:-webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.5)), to(rgba(0, 0, 0, 0)));background-image:linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0))}.swiper-lazy-preloader{width:42px;height:42px;position:absolute;left:50%;top:50%;margin-left:-21px;margin-top:-21px;z-index:10;-webkit-transform-origin:50%;transform-origin:50%;-webkit-box-sizing:border-box;box-sizing:border-box;border:4px solid var(--swiper-preloader-color, var(--swiper-theme-color));border-radius:50%;border-top-color:transparent}.swiper:not(.swiper-watch-progress) .swiper-lazy-preloader,.swiper-watch-progress .swiper-slide-visible .swiper-lazy-preloader{-webkit-animation:swiper-preloader-spin 1s infinite linear;animation:swiper-preloader-spin 1s infinite linear}.swiper-lazy-preloader-white{--swiper-preloader-color:#fff}.swiper-lazy-preloader-black{--swiper-preloader-color:#000}@-webkit-keyframes swiper-preloader-spin{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes swiper-preloader-spin{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}:host{z-index:1;background-color:#ffffff;--covet-pics-button-size:40px;--covet-pics-padding-size:40px;--covet-pics-font-color:#101010;--covet-pics-background-color:#fcfbfc}:host{position:fixed;bottom:0;overflow:scroll;width:100%;max-height:100%;-webkit-box-shadow:0 -8px 16px 0 rgba(0, 0, 0, 0.05);box-shadow:0 -8px 16px 0 rgba(0, 0, 0, 0.05);-webkit-transition:max-height 0.35s ease-in-out;transition:max-height 0.35s ease-in-out;min-width:auto}.main{margin:0 var(--covet-pics-padding-size);padding-bottom:150px;position:relative}.close{background:none;border:none;position:absolute;top:0;right:0;padding:0;margin:0;cursor:pointer;-webkit-transform:rotate(270deg);transform:rotate(270deg);outline:none !important}.close:hover svg .icon-arrow-path,.close:active svg .icon-arrow-path,.close:focus svg .icon-arrow-path{stroke:#000000}.close svg{width:var(--covet-pics-button-size);height:var(--covet-pics-button-size)}.close svg .icon-arrow-path{-webkit-transition:all 0.25s ease;transition:all 0.25s ease}.title{font-size:14px;font-weight:400;line-height:var(--covet-pics-button-size);width:calc(100% - var(--covet-pics-button-size));overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:center;-webkit-box-sizing:border-box;box-sizing:border-box;margin:10px 0 0 0}.title a{text-decoration:none;color:var(--covet-pics-font-color)}.price-wrap{display:-ms-flexbox;display:flex;height:32px;background:var(--covet-pics-background-color);-ms-flex-pack:justify;justify-content:space-between;-ms-flex-align:center;align-items:center;text-transform:uppercase}.price-wrap label{color:var(--covet-pics-font-color);font-weight:300;max-width:80px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.price-wrap .price{font-weight:600}.btn-buy{border:none;background-color:var(--covet-pics-button-color);color:var(--covet-pics-button-text-color);font-family:inherit;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;width:100%;text-transform:uppercase;text-align:center;cursor:pointer;font-size:14px;line-height:1;padding:17px 17px max(17px, env(safe-area-inset-bottom, 25px)) 17px;margin-bottom:0}.btn-buy:hover,.btn-buy:active,.btn-buy:focus{background-color:var(--covet-pics-button-hover-color)}.btn-buy.style-1:hover,.btn-buy.style-1:active,.btn-buy.style-1:focus{background-color:var(--covet-pics-button-text-hover-color)}.btn-buy.style-2:hover,.btn-buy.style-2:active,.btn-buy.style-2:focus{background-color:var(--covet-pics-button-color);color:var(--covet-pics-button-text-hover-color)}.btn-buy:disabled{background:#EEEEEE;color:#808080;pointer-events:none}.options{display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between;-ms-flex-align:center;align-items:center;border:1px solid transparent;border-bottom-color:#EEE;height:48px;padding:0 8px 0 12px;-moz-text-align-last:right;text-align-last:right;font-weight:300;color:var(--covet-pics-font-color);position:relative;cursor:pointer;outline:none !important;-webkit-transition:border 0.25s ease;transition:border 0.25s ease}.options.opened{border-left:1px solid #EEE;border-right:1px solid #EEE}.options.opened .options-container{display:block}.options:hover,.options:active,.options:focus,.options:focus-within{border-bottom-color:#000000}.options label{width:100%;height:100%;display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between;outline:none !important}.options label .option-name{margin:auto 0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer}.options label .selected-option{margin:auto 0;border:none;-webkit-appearance:none;-moz-appearance:none;appearance:none;outline:none;background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath d='M0 0h24v24H0z'%3E%3C/path%3E%3Cpath stroke='%23A0A0A0' d='M16.95 10.25L12 15.2l-4.95-4.95'%3E%3C/path%3E%3C/g%3E%3C/svg%3E\");background-repeat:no-repeat;background-position:right 50%;background-size:24px;padding-right:26px;text-transform:uppercase;text-align:right;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;width:50%;font-family:inherit;cursor:pointer;font-weight:bold}.options label .selected-option.empty{height:16px;line-height:1rem;width:20%}.options .options-container{display:none;position:absolute;top:48px;left:-1px;background:#FFF;z-index:2;width:100%;border:1px solid #eee;border-top:0;max-height:114px;overflow:auto;cursor:pointer}.options .options-container .option-value{min-height:32px;font-size:12px;color:#101010;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;outline:none !important}.options .options-container .option-value.selected .selected-indic{height:24px;border-left:2px solid #101010}.options .options-container .option-value .value-text{margin-left:4px;margin-right:4px;padding:0 10px;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;width:100%;font-size:12px;min-height:32px}.options .options-container .option-value:hover .value-text,.options .options-container .option-value:active .value-text,.options .options-container .option-value:focus .value-text{background:#F7F7F7}.main-gallery{overflow:hidden;width:100%}.main-gallery .swiper-slide{width:200px;height:200px;-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center}.main-gallery .swiper-slide img{max-width:100%;max-height:100%}.main-gallery .swiper-wrapper{max-height:200px}.footer{background-color:var(--covet-pics-background-color);position:absolute;width:100%;bottom:0;z-index:1}.footer .price-wrap{padding:0 var(--covet-pics-padding-size);width:calc(100% - var(--covet-pics-padding-size) * 2)}.swiper-pagination-bullets{padding:10px 0;border-bottom:1px solid var(--covet-pics-font-color);display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center}.swiper-pagination-bullet{width:8px;height:8px;display:inline-block;-ms-flex:none;flex:none;border-radius:100%;background:var(--covet-pics-font-color);opacity:0.2;margin:0 4px;padding:0;-webkit-transition:all 0.3;transition:all 0.3}.swiper-pagination-bullet:hover,.swiper-pagination-bullet:active,.swiper-pagination-bullet:focus{opacity:0.4;cursor:pointer}.swiper-pagination-bullet.swiper-pagination-bullet-active{opacity:1;background:var(--covet-pics-font-color)}@media only screen and (min-width: 800px){:host{display:block;height:100%;z-index:1;position:absolute;left:0;top:0;right:0;bottom:0;overflow:hidden}.title{width:100%;padding-left:10px}.close{left:calc(var(--covet-pics-button-size) / -2);right:unset;-webkit-transform:unset;transform:unset}.wrap{height:100%;overflow:auto}.footer{position:absolute}}";
|
|
16
|
+
const covetPicsDirectBuyCss = "@font-face{font-family:\"swiper-icons\";src:url(\"data:application/font-woff;charset=utf-8;base64, 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\") format(\"woff\");font-weight:400;font-style:normal}:root{--swiper-theme-color:#007aff;}:host{position:relative;display:block;margin-left:auto;margin-right:auto;z-index:1}.swiper{margin-left:auto;margin-right:auto;position:relative;overflow:hidden;list-style:none;padding:0;z-index:1;display:block}.swiper-vertical>.swiper-wrapper{-ms-flex-direction:column;flex-direction:column}.swiper-wrapper{position:relative;width:100%;height:100%;z-index:1;display:-ms-flexbox;display:flex;-webkit-transition-property:-webkit-transform;transition-property:-webkit-transform;transition-property:transform;transition-property:transform, -webkit-transform;-webkit-transition-timing-function:var(--swiper-wrapper-transition-timing-function, initial);transition-timing-function:var(--swiper-wrapper-transition-timing-function, initial);-webkit-box-sizing:content-box;box-sizing:content-box}.swiper-android .swiper-slide,.swiper-ios .swiper-slide,.swiper-wrapper{-webkit-transform:translate3d(0px, 0, 0);transform:translate3d(0px, 0, 0)}.swiper-horizontal{-ms-touch-action:pan-y;touch-action:pan-y}.swiper-vertical{-ms-touch-action:pan-x;touch-action:pan-x}.swiper-slide{-ms-flex-negative:0;flex-shrink:0;width:100%;height:100%;position:relative;-webkit-transition-property:-webkit-transform;transition-property:-webkit-transform;transition-property:transform;transition-property:transform, -webkit-transform;display:block}.swiper-slide-invisible-blank{visibility:hidden}.swiper-autoheight,.swiper-autoheight .swiper-slide{height:auto}.swiper-autoheight .swiper-wrapper{-ms-flex-align:start;align-items:flex-start;-webkit-transition-property:height, -webkit-transform;transition-property:height, -webkit-transform;transition-property:transform, height;transition-property:transform, height, -webkit-transform}.swiper-backface-hidden .swiper-slide{-webkit-transform:translateZ(0);transform:translateZ(0);-webkit-backface-visibility:hidden;backface-visibility:hidden}.swiper-3d.swiper-css-mode .swiper-wrapper{-webkit-perspective:1200px;perspective:1200px}.swiper-3d .swiper-wrapper{-webkit-transform-style:preserve-3d;transform-style:preserve-3d}.swiper-3d{-webkit-perspective:1200px;perspective:1200px}.swiper-3d .swiper-slide,.swiper-3d .swiper-cube-shadow{-webkit-transform-style:preserve-3d;transform-style:preserve-3d}.swiper-css-mode>.swiper-wrapper{overflow:auto;scrollbar-width:none;-ms-overflow-style:none;}.swiper-css-mode>.swiper-wrapper::-webkit-scrollbar{display:none}.swiper-css-mode>.swiper-wrapper>.swiper-slide{scroll-snap-align:start start}.swiper-css-mode.swiper-horizontal>.swiper-wrapper{-webkit-scroll-snap-type:x mandatory;-ms-scroll-snap-type:x mandatory;scroll-snap-type:x mandatory}.swiper-css-mode.swiper-vertical>.swiper-wrapper{-webkit-scroll-snap-type:y mandatory;-ms-scroll-snap-type:y mandatory;scroll-snap-type:y mandatory}.swiper-css-mode.swiper-free-mode>.swiper-wrapper{-webkit-scroll-snap-type:none;-ms-scroll-snap-type:none;scroll-snap-type:none}.swiper-css-mode.swiper-free-mode>.swiper-wrapper>.swiper-slide{scroll-snap-align:none}.swiper-css-mode.swiper-centered>.swiper-wrapper::before{content:\"\";-ms-flex-negative:0;flex-shrink:0;-ms-flex-order:9999;order:9999}.swiper-css-mode.swiper-centered>.swiper-wrapper>.swiper-slide{scroll-snap-align:center center;scroll-snap-stop:always}.swiper-css-mode.swiper-centered.swiper-horizontal>.swiper-wrapper>.swiper-slide:first-child{-webkit-margin-start:var(--swiper-centered-offset-before);margin-inline-start:var(--swiper-centered-offset-before)}.swiper-css-mode.swiper-centered.swiper-horizontal>.swiper-wrapper::before{height:100%;min-height:1px;width:var(--swiper-centered-offset-after)}.swiper-css-mode.swiper-centered.swiper-vertical>.swiper-wrapper>.swiper-slide:first-child{-webkit-margin-before:var(--swiper-centered-offset-before);margin-block-start:var(--swiper-centered-offset-before)}.swiper-css-mode.swiper-centered.swiper-vertical>.swiper-wrapper::before{width:100%;min-width:1px;height:var(--swiper-centered-offset-after)}.swiper-3d .swiper-slide-shadow,.swiper-3d .swiper-slide-shadow-left,.swiper-3d .swiper-slide-shadow-right,.swiper-3d .swiper-slide-shadow-top,.swiper-3d .swiper-slide-shadow-bottom{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none;z-index:10}.swiper-3d .swiper-slide-shadow{background:rgba(0, 0, 0, 0.15)}.swiper-3d .swiper-slide-shadow-left{background-image:-webkit-gradient(linear, right top, left top, from(rgba(0, 0, 0, 0.5)), to(rgba(0, 0, 0, 0)));background-image:linear-gradient(to left, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0))}.swiper-3d .swiper-slide-shadow-right{background-image:-webkit-gradient(linear, left top, right top, from(rgba(0, 0, 0, 0.5)), to(rgba(0, 0, 0, 0)));background-image:linear-gradient(to right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0))}.swiper-3d .swiper-slide-shadow-top{background-image:-webkit-gradient(linear, left bottom, left top, from(rgba(0, 0, 0, 0.5)), to(rgba(0, 0, 0, 0)));background-image:linear-gradient(to top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0))}.swiper-3d .swiper-slide-shadow-bottom{background-image:-webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.5)), to(rgba(0, 0, 0, 0)));background-image:linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0))}.swiper-lazy-preloader{width:42px;height:42px;position:absolute;left:50%;top:50%;margin-left:-21px;margin-top:-21px;z-index:10;-webkit-transform-origin:50%;transform-origin:50%;-webkit-box-sizing:border-box;box-sizing:border-box;border:4px solid var(--swiper-preloader-color, var(--swiper-theme-color));border-radius:50%;border-top-color:transparent}.swiper:not(.swiper-watch-progress) .swiper-lazy-preloader,.swiper-watch-progress .swiper-slide-visible .swiper-lazy-preloader{-webkit-animation:swiper-preloader-spin 1s infinite linear;animation:swiper-preloader-spin 1s infinite linear}.swiper-lazy-preloader-white{--swiper-preloader-color:#fff}.swiper-lazy-preloader-black{--swiper-preloader-color:#000}@-webkit-keyframes swiper-preloader-spin{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes swiper-preloader-spin{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}:host{z-index:1;--covet-direct-buy-btn-size:40px;--covet-direct-buy-padding-size:40px;--covet-direct-buy-font-color:#101010;--covet-direct-buy-bg-color:#fcfbfc;--covet-direct-buy-dropdown-height:48px}:host{position:fixed;bottom:0;overflow:scroll;width:100%;max-height:100%;-webkit-box-shadow:0 -8px 16px 0 rgba(0, 0, 0, 0.05);box-shadow:0 -8px 16px 0 rgba(0, 0, 0, 0.05);-webkit-transition:max-height 0.35s ease-in-out;transition:max-height 0.35s ease-in-out;min-width:auto}.main{margin:0 var(--covet-direct-buy-padding-size);padding-bottom:150px;position:relative}.close{background:none;border:none;position:absolute;top:0;right:0;padding:0;margin:0;cursor:pointer;-webkit-transform:rotate(270deg);transform:rotate(270deg);outline:none !important}.close:hover svg .icon-arrow-path,.close:active svg .icon-arrow-path,.close:focus svg .icon-arrow-path{stroke:#000000}.close svg{width:var(--covet-direct-buy-btn-size);height:var(--covet-direct-buy-btn-size)}.close svg .icon-arrow-path{-webkit-transition:all 0.25s ease;transition:all 0.25s ease}.title{font-size:14px;font-weight:400;line-height:var(--covet-direct-buy-btn-size);width:calc(100% - var(--covet-direct-buy-btn-size));overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:center;-webkit-box-sizing:border-box;box-sizing:border-box;margin:10px 0 0 0}.title a{text-decoration:none;color:var(--covet-direct-buy-font-color)}.price-wrap{display:-ms-flexbox;display:flex;height:32px;background:var(--covet-direct-buy-bg-color);-ms-flex-pack:justify;justify-content:space-between;-ms-flex-align:center;align-items:center;text-transform:uppercase}.price-wrap label{color:var(--covet-direct-buy-font-color);font-weight:300;max-width:80px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.price-wrap .price{font-weight:600}.btn-buy{border:none;background-color:var(--covet-direct-buy-btn-color);color:var(--covet-direct-buy-btn-text-color);font-family:inherit;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;width:100%;text-transform:uppercase;text-align:center;cursor:pointer;font-size:14px;line-height:1;padding:17px 17px max(17px, env(safe-area-inset-bottom, 25px)) 17px;margin-bottom:0}.btn-buy:hover,.btn-buy:active,.btn-buy:focus{background-color:var(--covet-direct-buy-btn-active-color)}.btn-buy.style-1:hover,.btn-buy.style-1:active,.btn-buy.style-1:focus{background-color:var(--covet-direct-buy-btn-text-hover-color)}.btn-buy.style-2:hover,.btn-buy.style-2:active,.btn-buy.style-2:focus{background-color:var(--covet-direct-buy-btn-color);color:var(--covet-direct-buy-btn-text-hover-color)}.btn-buy:disabled{background:#EEEEEE;color:#808080;pointer-events:none}.options{display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between;-ms-flex-align:center;align-items:center;border:1px solid transparent;border-bottom-color:#EEE;height:var(--covet-direct-buy-dropdown-height);padding:0 8px 0 12px;-moz-text-align-last:right;text-align-last:right;font-weight:300;color:var(--covet-direct-buy-font-color);position:relative;cursor:pointer;outline:none !important;-webkit-transition:border 0.25s ease;transition:border 0.25s ease}.options.opened{border-left:1px solid #EEE;border-right:1px solid #EEE}.options.opened .options-container{display:block}.options:hover,.options:active,.options:focus,.options:focus-within{border-bottom-color:#000000}.options label{width:100%;height:100%;display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between;outline:none !important}.options label .option-name{margin:auto 0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer}.options label .selected-option{margin:auto 0;border:none;-webkit-appearance:none;-moz-appearance:none;appearance:none;outline:none;background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath d='M0 0h24v24H0z'%3E%3C/path%3E%3Cpath stroke='%23A0A0A0' d='M16.95 10.25L12 15.2l-4.95-4.95'%3E%3C/path%3E%3C/g%3E%3C/svg%3E\");background-repeat:no-repeat;background-position:right 50%;background-size:24px;padding-right:26px;text-transform:uppercase;text-align:right;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;width:50%;font-family:inherit;cursor:pointer;font-weight:bold}.options label .selected-option.empty{height:16px;line-height:1rem;width:20%}.options .options-container{display:none;position:absolute;top:var(--covet-direct-buy-dropdown-height);left:-1px;background:#FFF;z-index:2;width:100%;border:1px solid #eee;border-top:0;max-height:114px;overflow:auto;cursor:pointer}.options .options-container .option-value{min-height:32px;font-size:12px;color:#101010;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;outline:none !important}.options .options-container .option-value.selected .selected-indic{height:24px;border-left:2px solid #101010}.options .options-container .option-value .value-text{margin-left:4px;margin-right:4px;padding:0 10px;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;width:100%;font-size:12px;min-height:32px}.options .options-container .option-value:hover .value-text,.options .options-container .option-value:active .value-text,.options .options-container .option-value:focus .value-text{background:#F7F7F7}.main-gallery{overflow:hidden;width:100%}.main-gallery .swiper-slide{width:200px;height:200px;-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center}.main-gallery .swiper-slide img{max-width:100%;max-height:100%}.main-gallery .swiper-wrapper{max-height:200px}.footer{background-color:var(--covet-direct-buy-bg-color);position:absolute;width:100%;bottom:0;z-index:1}.footer .price-wrap{padding:0 var(--covet-direct-buy-padding-size);width:calc(100% - var(--covet-direct-buy-padding-size) * 2)}.swiper-pagination-bullets{padding:10px 0;border-bottom:1px solid var(--covet-direct-buy-font-color);display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center}.swiper-pagination-bullet{width:8px;height:8px;display:inline-block;-ms-flex:none;flex:none;border-radius:100%;background:var(--covet-direct-buy-font-color);opacity:0.2;margin:0 4px;padding:0;-webkit-transition:all 0.3;transition:all 0.3}.swiper-pagination-bullet:hover,.swiper-pagination-bullet:active,.swiper-pagination-bullet:focus{opacity:0.4;cursor:pointer}.swiper-pagination-bullet.swiper-pagination-bullet-active{opacity:1;background:var(--covet-direct-buy-font-color)}@media only screen and (min-width: 800px){:host{display:block;height:100%;z-index:1;position:absolute;left:0;top:0;right:0;bottom:0;overflow:hidden}.title{width:100%;padding-left:10px}.close{left:calc(var(--covet-direct-buy-btn-size) / -2);right:unset;-webkit-transform:unset;transform:unset}.wrap{height:100%;overflow:auto}.footer{position:absolute}}";
|
|
17
17
|
const CovetPicsDirectBuyStyle0 = covetPicsDirectBuyCss;
|
|
18
18
|
|
|
19
19
|
const CovetPicsDirectBuy = class {
|
|
@@ -138,10 +138,10 @@ const CovetPicsDirectBuy = class {
|
|
|
138
138
|
}
|
|
139
139
|
get itemCSSVariables() {
|
|
140
140
|
return {
|
|
141
|
-
"--covet-
|
|
142
|
-
"--covet-
|
|
143
|
-
"--covet-
|
|
144
|
-
"--covet-
|
|
141
|
+
"--covet-direct-buy-button-color": this.settings.popup_buy_button_background_color,
|
|
142
|
+
"--covet-direct-buy-button-active-color": this.settings.popup_buy_button_background_hover_color,
|
|
143
|
+
"--covet-direct-buy-button-text-color": this.settings.popup_buy_button_text_color,
|
|
144
|
+
"--covet-direct-buy-button-text-hover-color": this.settings.popup_buy_button_text_hover_color
|
|
145
145
|
};
|
|
146
146
|
}
|
|
147
147
|
initSwiper() {
|
|
@@ -204,7 +204,7 @@ const CovetPicsDirectBuy = class {
|
|
|
204
204
|
: `product slide ${idx} of ${itemsLength}`;
|
|
205
205
|
}
|
|
206
206
|
render() {
|
|
207
|
-
return (index.h(index.Host, { key: '
|
|
207
|
+
return (index.h(index.Host, { key: '59202a51da33c1d51c48257641769307fdde9291', style: this.itemCSSVariables, onclick: this.hostClickHandler }, index.h("div", { key: '7d7b16687a34276049fc2756b8dd2e6faf0359d5', class: "wrap" }, index.h("div", { key: '4b159fc65d331eb477c7366719d06ae9668691a5', class: "main" }, index.h("button", { key: '125821d273381c091d2572bb09e5cdd2992d2218', class: "close", onClick: this.closeClickHandler, tabindex: "0", "aria-label": "Direct buy close", type: "button" }, index.h("svg", { key: '9f391101bab6f8fa19bf5f3b5f68919fb4ffc537', viewBox: "0 0 40 40", role: "img" }, index.h("title", { key: 'f5dde5baee496fc164c056f8c3529be28f27ef25' }, "close"), index.h("g", { key: 'fb240558696ede6384640601aff3bf4e4800d979', fill: "none", "fill-rule": "evenodd" }, index.h("path", { key: '2712deebc45d2854f9cc3d60dd96f0263047bb2a', d: "M40 0v40H0V0z" }), index.h("path", { key: 'd6728927922543f6051c88d84e2c05cc676eb052', class: "icon-arrow-path", stroke: "#A0A0A0", d: "M22.917 28.25L14.667 20l8.25-8.25" })))), index.h("h2", { key: 'ba2dd30c547066e90f50558fbe6a3b49a845a555', class: "title" }, index.h("a", { key: 'ab6d0cbed3a4837db441bddf706900dc556fcdd9', href: this.product.link, target: "_blank", "aria-label": `Link to '${this.product.title}'` }, this.product.title)), index.h("section", { key: '5c5dcbe38e9acef29c62dd17f168dcc4c6c2778e', class: "main-gallery", role: "region", "aria-label": "direct buy slider" }, index.h("div", { key: '74fd75163be61467330cb80270827d26dfdce928', class: "swiper-wrapper" }, this.product.media && this.product.media.map(image => index.h("div", { class: "swiper-slide" }, index.h("img", { alt: this.imgAltTag(image.alt, image.position, this.product.media.length), src: image.src })))), index.h("div", { key: '181c4e35e58c875ceb9910a5c9810f433a7f959d', class: "swiper-pagination" })), this.renderOptions(this.product.options[0], 1), this.renderOptions(this.product.options[1], 2), this.renderOptions(this.product.options[2], 3)), index.h("div", { key: '92dab646ff9ca0147eb9b81dc72c05d3c6b3c1fe', class: "footer" }, index.h("div", { key: '3a97e6a77599d67343980968ef5c3e1555cf94a1', class: "price-wrap" }, index.h("label", { key: '3240772d8c27c4e67de4583f902f322d87e1fbac' }, this.settings.price_label_caption), index.h("span", { key: 'ee9642c15ffe753a5089ce8060d3552f87a73e62', class: "price", innerHTML: this.price })), index.h("button", { key: '190cb57ad20925bebcbde98026a8a6cb7fe06042', class: `btn-buy ${this.settings._buyButtonStyle}`, disabled: typeof this.selectedVariant === "undefined" || this.selectedVariant["available"] === false, onClick: this.addToCartClickHandler, innerHTML: this.settings.add_to_cart_button_caption, "aria-label": "Add to cart", type: "button" })))));
|
|
208
208
|
}
|
|
209
209
|
get el() { return index.getElement(this); }
|
|
210
210
|
};
|