react-product-slider/dist/cjs/style.js

product slider for e-commerce websites

"use strict";
var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
    return cooked;
};
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.Thumbnails = exports.SelectedPicture = exports.SliderContainer = void 0;
var styled_components_1 = __importDefault(require("styled-components"));
exports.SliderContainer = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  background-color: #fff;\n  display: flex;\n  justify-content: space-between;\n  width: 100%;\n  height: 100%;\n  max-height: 100vh;\n  width: 100%;\n  left: 0;\n  top: 0;\n  box-sizing: border-box;\n  z-index: 999;\n  flex-direction: ", ";\n  ", "\n  .close-but {\n    font-size: 24px;\n    position: absolute;\n    top: 16px;\n    left: 16px;\n    color: #000;\n    cursor: pointer;\n    z-index: 1;\n  }\n  @media only screen and (max-width: 768px) {\n    ", "\n  }\n"], ["\n  background-color: #fff;\n  display: flex;\n  justify-content: space-between;\n  width: 100%;\n  height: 100%;\n  max-height: 100vh;\n  width: 100%;\n  left: 0;\n  top: 0;\n  box-sizing: border-box;\n  z-index: 999;\n  flex-direction: ", ";\n  ", "\n  .close-but {\n    font-size: 24px;\n    position: absolute;\n    top: 16px;\n    left: 16px;\n    color: #000;\n    cursor: pointer;\n    z-index: 1;\n  }\n  @media only screen and (max-width: 768px) {\n    ", "\n  }\n"])), function (_a) {
    var reverse = _a.reverse;
    return (reverse ? "row-reverse" : "row");
}, function (_a) {
    var zoomStatus = _a.zoomStatus;
    return zoomStatus
        ? "\n    padding: 64px;\n    position: fixed;\n  "
        : "";
}, function (_a) {
    var zoomStatus = _a.zoomStatus;
    return zoomStatus
        ? "\n    padding: 16px;\n  "
        : "";
});
exports.SelectedPicture = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  width: ", ";\n  min-height: 100%;\n  display: flex;\n  justify-content: center;\n  cursor: ", ";\n  background-image: url(", ");\n  background-repeat: no-repeat;\n  background-position: center;\n  background-size: ", ";\n  transition: 0.3s all;\n  position: relative;\n  @media only screen and (max-width: 768px) {\n    width: ", ";\n  }\n"], ["\n  width: ", ";\n  min-height: 100%;\n  display: flex;\n  justify-content: center;\n  cursor: ", ";\n  background-image: url(", ");\n  background-repeat: no-repeat;\n  background-position: center;\n  background-size: ", ";\n  transition: 0.3s all;\n  position: relative;\n  @media only screen and (max-width: 768px) {\n    width: ", ";\n  }\n"])), function (_a) {
    var zoomStatus = _a.zoomStatus;
    return (zoomStatus ? "90%" : "80%");
}, function (_a) {
    var zoomStatus = _a.zoomStatus;
    return (zoomStatus ? "default" : "zoom-in");
}, function (_a) {
    var background = _a.background;
    return background;
}, function (_a) {
    var zoomStatus = _a.zoomStatus;
    return (zoomStatus ? "contain" : "cover");
}, function (_a) {
    var zoomStatus = _a.zoomStatus;
    return (zoomStatus ? "90%" : "85%");
});
exports.Thumbnails = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  width: ", ";\n  max-height: 100%;\n  display: flex;\n  justify-content: center;\n  flex-direction: column;\n  overflow-y: auto;\n  justify-content: flex-start;\n  -ms-overflow-style: none;\n  scrollbar-width: none;\n  &::-webkit-scrollbar {\n    display: none;\n  }\n  .thumbnail {\n    margin-bottom: 16px;\n    cursor: pointer;\n    opacity: 0.5;\n    img {\n      width: 100%;\n    }\n    &:last-child {\n      margin-bottom: 0;\n    }\n  }\n  .selected {\n    opacity: 1;\n    cursor: ns-resize;\n  }\n  @media only screen and (max-width: 768px) {\n    width: ", ";\n  }\n"], ["\n  width: ", ";\n  max-height: 100%;\n  display: flex;\n  justify-content: center;\n  flex-direction: column;\n  overflow-y: auto;\n  justify-content: flex-start;\n  -ms-overflow-style: none;\n  scrollbar-width: none;\n  &::-webkit-scrollbar {\n    display: none;\n  }\n  .thumbnail {\n    margin-bottom: 16px;\n    cursor: pointer;\n    opacity: 0.5;\n    img {\n      width: 100%;\n    }\n    &:last-child {\n      margin-bottom: 0;\n    }\n  }\n  .selected {\n    opacity: 1;\n    cursor: ns-resize;\n  }\n  @media only screen and (max-width: 768px) {\n    width: ", ";\n  }\n"])), function (_a) {
    var zoomStatus = _a.zoomStatus;
    return (zoomStatus ? "8%" : "18%");
}, function (_a) {
    var zoomStatus = _a.zoomStatus;
    return (zoomStatus ? "8%" : "14%");
});
var templateObject_1, templateObject_2, templateObject_3;