infinity-forge/dist/ui/atena/presentation/dynamic-elements/pages/post/box-carousel/styles.js

codie Library

"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.BoxCarousel = void 0;
var styled_components_1 = __importDefault(require("styled-components"));
exports.BoxCarousel = (0, styled_components_1.default)('div')(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  width: 100%;\n  position: relative;\n  background-color: #fff;\n  border-radius: 20px;\n  padding: 20px;\n  display: flex;\n  justify-content: space-between;\n  gap: 20px;\n  border: 1px solid #00000029;\n  border-radius: 10px;\n\n  > div {\n    width: 100%;\n    overflow: hidden;\n    max-width: 97%;\n    margin: 0 auto;\n  }\n\n  .swiper {\n    width: 100%;\n    border-radius: 10px;\n  }\n\n  img {\n    width: 100%;\n    object-fit: cover;\n    aspect-ratio: 882/406;\n    transition: transform 0.3s ease;\n\n    &:hover {\n      cursor: pointer;\n      transform: scale(1.05);\n    }\n  }\n\n  .swiper-slide {\n    overflow: hidden;\n    width: 100%;\n    max-width: 400px;\n    border-radius: 10px;\n  }\n\n  > button {\n    padding: 0;\n    border: none;\n    background: none;\n    position: absolute;\n    top: 50%;\n    transform: translateY(-50%);\n    z-index: 2;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n\n    svg {\n      width: 20px;\n      height: 20px;\n      fill: ", ";\n    }\n\n    &:first-child {\n      left: 15px;\n    }\n\n    &:last-child {\n      right: 15px;\n    }\n\n    &:disabled {\n      opacity: 0.5;\n      cursor: not-allowed;\n    }\n  }\n\n  @media only screen and (max-width: 1400px) {\n    padding: 35px;\n  }\n\n  @media only screen and (max-width: 1200px) {\n    padding: 30px;\n  }\n\n  @media only screen and (max-width: 1024px) {\n    padding: 25px;\n\n    > button {\n      svg {\n        width: 15px;\n        height: 15px;\n      }\n\n      &:first-child {\n        left: 5px;\n      }\n\n      &:last-child {\n        right: 5px;\n      }\n    }\n  }\n\n  @media only screen and (max-width: 768px) {\n    padding: 20px;\n  }\n"], ["\n  width: 100%;\n  position: relative;\n  background-color: #fff;\n  border-radius: 20px;\n  padding: 20px;\n  display: flex;\n  justify-content: space-between;\n  gap: 20px;\n  border: 1px solid #00000029;\n  border-radius: 10px;\n\n  > div {\n    width: 100%;\n    overflow: hidden;\n    max-width: 97%;\n    margin: 0 auto;\n  }\n\n  .swiper {\n    width: 100%;\n    border-radius: 10px;\n  }\n\n  img {\n    width: 100%;\n    object-fit: cover;\n    aspect-ratio: 882/406;\n    transition: transform 0.3s ease;\n\n    &:hover {\n      cursor: pointer;\n      transform: scale(1.05);\n    }\n  }\n\n  .swiper-slide {\n    overflow: hidden;\n    width: 100%;\n    max-width: 400px;\n    border-radius: 10px;\n  }\n\n  > button {\n    padding: 0;\n    border: none;\n    background: none;\n    position: absolute;\n    top: 50%;\n    transform: translateY(-50%);\n    z-index: 2;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n\n    svg {\n      width: 20px;\n      height: 20px;\n      fill: ", ";\n    }\n\n    &:first-child {\n      left: 15px;\n    }\n\n    &:last-child {\n      right: 15px;\n    }\n\n    &:disabled {\n      opacity: 0.5;\n      cursor: not-allowed;\n    }\n  }\n\n  @media only screen and (max-width: 1400px) {\n    padding: 35px;\n  }\n\n  @media only screen and (max-width: 1200px) {\n    padding: 30px;\n  }\n\n  @media only screen and (max-width: 1024px) {\n    padding: 25px;\n\n    > button {\n      svg {\n        width: 15px;\n        height: 15px;\n      }\n\n      &:first-child {\n        left: 5px;\n      }\n\n      &:last-child {\n        right: 5px;\n      }\n    }\n  }\n\n  @media only screen and (max-width: 768px) {\n    padding: 20px;\n  }\n"])), function (props) { return props.theme.primaryColor; });
var templateObject_1;
//# sourceMappingURL=styles.js.map