infinity-forge/dist/ui/codie-dynamic/components/interactions/card/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.ReviewCard = void 0;
var styled_components_1 = __importDefault(require("styled-components"));
exports.ReviewCard = (0, styled_components_1.default)('div')(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n\n  .title-box {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    gap: 10px;\n\n    h5 {\n      overflow: hidden;\n      display: -webkit-box;\n      -webkit-line-clamp: 1;\n      line-clamp: 1;\n      -webkit-box-orient: vertical;\n      margin-bottom: 0;\n    }\n\n    .date {\n      color: #aaa;\n    }\n  }\n\n  > img {\n    width: 100%;\n    height: 100%;\n    max-width: 50px;\n    border-radius: 50%;\n    margin-right: 10px;\n    object-fit: cover;\n    aspect-ratio: 1/1;\n    flex-shrink: 0;\n  }\n\n  .description {\n    margin-top: 5px;\n  }\n\n  .stars {\n    .star {\n      color: ", ";\n    }\n\n    .number {\n      display: none;\n    }\n  }\n\n  @media only screen and (max-width: 1400px) {\n    .title-box {\n      gap: 8px;\n    }\n\n    > img {\n      max-width: 45px;\n    }\n\n    .description {\n      color: ", ";\n      margin-top: 3px;\n    }\n\n    svg {\n      width: 95px;\n      height: auto;\n    }\n  }\n\n  @media only screen and (max-width: 1200px) {\n    > img {\n      max-width: 40px;\n    }\n  }\n\n  @media only screen and (max-width: 1024px) {\n    > img {\n      max-width: 35px;\n    }\n  }\n\n  @media only screen and (max-width: 768px) {\n    > img {\n      max-width: 40px;\n    }\n\n    svg {\n      width: 90px;\n    }\n  }\n\n  @media only screen and (max-width: 550px) {\n    flex-direction: column;\n    gap: 8px;\n\n    .date {\n      font-size: 14px;\n    }\n\n    h5 {\n      font-size: 16px;\n    }\n\n    .description {\n      font-size: 14px;\n    }\n\n    .title-box {\n      align-items: flex-start;\n      flex-direction: column;\n      gap: 4px;\n    }\n  }\n"], ["\n  display: flex;\n\n  .title-box {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    gap: 10px;\n\n    h5 {\n      overflow: hidden;\n      display: -webkit-box;\n      -webkit-line-clamp: 1;\n      line-clamp: 1;\n      -webkit-box-orient: vertical;\n      margin-bottom: 0;\n    }\n\n    .date {\n      color: #aaa;\n    }\n  }\n\n  > img {\n    width: 100%;\n    height: 100%;\n    max-width: 50px;\n    border-radius: 50%;\n    margin-right: 10px;\n    object-fit: cover;\n    aspect-ratio: 1/1;\n    flex-shrink: 0;\n  }\n\n  .description {\n    margin-top: 5px;\n  }\n\n  .stars {\n    .star {\n      color: ", ";\n    }\n\n    .number {\n      display: none;\n    }\n  }\n\n  @media only screen and (max-width: 1400px) {\n    .title-box {\n      gap: 8px;\n    }\n\n    > img {\n      max-width: 45px;\n    }\n\n    .description {\n      color: ", ";\n      margin-top: 3px;\n    }\n\n    svg {\n      width: 95px;\n      height: auto;\n    }\n  }\n\n  @media only screen and (max-width: 1200px) {\n    > img {\n      max-width: 40px;\n    }\n  }\n\n  @media only screen and (max-width: 1024px) {\n    > img {\n      max-width: 35px;\n    }\n  }\n\n  @media only screen and (max-width: 768px) {\n    > img {\n      max-width: 40px;\n    }\n\n    svg {\n      width: 90px;\n    }\n  }\n\n  @media only screen and (max-width: 550px) {\n    flex-direction: column;\n    gap: 8px;\n\n    .date {\n      font-size: 14px;\n    }\n\n    h5 {\n      font-size: 16px;\n    }\n\n    .description {\n      font-size: 14px;\n    }\n\n    .title-box {\n      align-items: flex-start;\n      flex-direction: column;\n      gap: 4px;\n    }\n  }\n"])), function (p) { return p.$theme.baseColor || p.theme.primaryColor; }, function (props) { return props.theme.grey80; });
var templateObject_1;
//# sourceMappingURL=styles.js.map