infinity-forge/dist/system/components/data/detail-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.DetailCard = void 0;
var styled_components_1 = __importDefault(require("styled-components"));
exports.DetailCard = (0, styled_components_1.default)('div')(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  width: 100%;\n  padding: 10px;\n  border-radius: 5px;\n  display: flex;\n  justify-content: space-between;\n\n  &.highlight {\n    background: currentColor;\n\n    span {\n      color: #fff;\n    }\n\n    > div {\n      > div:first-child {\n        background: rgba(255, 255, 255, 0.22) !important;\n      }\n    }\n\n    svg {\n      fill: #fff;\n    }\n  }\n\n  > div {\n    display: flex;\n    width: fit-content;\n  }\n\n  span {\n    display: block;\n    line-height: 1;\n  }\n\n  .content {\n    margin-left: 15px;\n    display: flex;\n    justify-content: center;\n    flex-direction: column;\n    gap: 6px;\n    color: ", ";\n  }\n\n  svg {\n    width: 100%;\n    height: auto;\n    fill: currentColor;\n  }\n\n  .icon {\n    display: flex;\n    width: 16px;\n    height: 16px;\n  }\n\n  .action-box {\n    display: flex;\n    color: #828282;\n    align-items: flex-start;\n    gap: 15px;\n    height: fit-content;\n    margin: auto 0;\n\n    svg {\n      width: 100%;\n      height: auto;\n      fill: currentColor;\n    }\n\n    .icon {\n      display: flex;\n      width: 11.5px;\n      height: 11.5px;\n    }\n\n    button {\n      color: #828282;\n      background: none;\n      padding: 0;\n      border: 0;\n      min-width: 40px;\n      min-height: 40px;\n      border-radius: 5px;\n      border: 1px solid #828282;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      cursor: pointer;\n      padding: 11px;\n\n      svg {\n      }\n    }\n  }\n\n  @media only screen and (max-width: 1800px) {\n    > div {\n      align-items: center;\n    }\n\n    .content {\n      margin-left: 10px;\n    }\n  }\n\n  @media only screen and (max-width: 1600px) {\n    .detail-title {\n      font-size: 1.6rem;\n    }\n\n    .detail-subtitle {\n      font-size: 1.4rem;\n    }\n  }\n\n  @media only screen and (max-width: 1400px) {\n    > div {\n      > div:first-child {\n        min-width: 45px;\n        min-height: 45px;\n        width: 45px;\n        height: 45px;\n      }\n    }\n\n    .detail-title {\n      font-size: 1.4rem;\n    }\n\n    .detail-subtitle {\n      font-size: 1.2rem;\n    }\n  }\n\n  @media only screen and (max-width: 1200px) {\n    > div {\n      > div:first-child {\n        min-width: 40px;\n        min-height: 40px;\n        width: 40px;\n        height: 40px;\n        padding: 10px;\n      }\n    }\n  }\n"], ["\n  width: 100%;\n  padding: 10px;\n  border-radius: 5px;\n  display: flex;\n  justify-content: space-between;\n\n  &.highlight {\n    background: currentColor;\n\n    span {\n      color: #fff;\n    }\n\n    > div {\n      > div:first-child {\n        background: rgba(255, 255, 255, 0.22) !important;\n      }\n    }\n\n    svg {\n      fill: #fff;\n    }\n  }\n\n  > div {\n    display: flex;\n    width: fit-content;\n  }\n\n  span {\n    display: block;\n    line-height: 1;\n  }\n\n  .content {\n    margin-left: 15px;\n    display: flex;\n    justify-content: center;\n    flex-direction: column;\n    gap: 6px;\n    color: ", ";\n  }\n\n  svg {\n    width: 100%;\n    height: auto;\n    fill: currentColor;\n  }\n\n  .icon {\n    display: flex;\n    width: 16px;\n    height: 16px;\n  }\n\n  .action-box {\n    display: flex;\n    color: #828282;\n    align-items: flex-start;\n    gap: 15px;\n    height: fit-content;\n    margin: auto 0;\n\n    svg {\n      width: 100%;\n      height: auto;\n      fill: currentColor;\n    }\n\n    .icon {\n      display: flex;\n      width: 11.5px;\n      height: 11.5px;\n    }\n\n    button {\n      color: #828282;\n      background: none;\n      padding: 0;\n      border: 0;\n      min-width: 40px;\n      min-height: 40px;\n      border-radius: 5px;\n      border: 1px solid #828282;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      cursor: pointer;\n      padding: 11px;\n\n      svg {\n      }\n    }\n  }\n\n  @media only screen and (max-width: 1800px) {\n    > div {\n      align-items: center;\n    }\n\n    .content {\n      margin-left: 10px;\n    }\n  }\n\n  @media only screen and (max-width: 1600px) {\n    .detail-title {\n      font-size: 1.6rem;\n    }\n\n    .detail-subtitle {\n      font-size: 1.4rem;\n    }\n  }\n\n  @media only screen and (max-width: 1400px) {\n    > div {\n      > div:first-child {\n        min-width: 45px;\n        min-height: 45px;\n        width: 45px;\n        height: 45px;\n      }\n    }\n\n    .detail-title {\n      font-size: 1.4rem;\n    }\n\n    .detail-subtitle {\n      font-size: 1.2rem;\n    }\n  }\n\n  @media only screen and (max-width: 1200px) {\n    > div {\n      > div:first-child {\n        min-width: 40px;\n        min-height: 40px;\n        width: 40px;\n        height: 40px;\n        padding: 10px;\n      }\n    }\n  }\n"])), function (props) { return props.theme.darkColor; });
var templateObject_1;
//# sourceMappingURL=styles.js.map