infinity-forge/dist/ui/codie-dynamic/components/interactions/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.Modal = exports.Evaluations = void 0;
var styled_components_1 = __importDefault(require("styled-components"));
exports.Evaluations = (0, styled_components_1.default)('section')(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  * {\n    color: ", ";\n  }\n\n  h5 {\n    margin-bottom: 5px;\n  }\n\n  > div {\n    border-radius: 30px;\n    padding: 40px;\n    background-color: ", ";\n\n    .top {\n      display: flex;\n      align-items: center;\n      border-bottom: 1px solid #dcdcdc;\n      margin-bottom: 30px;\n      padding-bottom: 30px;\n      justify-content: space-between;\n\n      .container-stars {\n        display: flex;\n        align-items: center;\n        gap: 8px;\n        margin-bottom: 10px;\n      }\n\n      .stars {\n        .star {\n          color: ", " !important;\n        }\n\n        .number {\n          display: none;\n        }\n      }\n\n      > .item:nth-child(1) {\n        span {\n          svg {\n            margin-left: 8px;\n          }\n\n          &:last-child {\n            color: ", ";\n            margin-top: 10px;\n          }\n        }\n      }\n\n      > .item:nth-child(2) {\n        margin: 0 15px 0 15px;\n        padding: 0 15px 0 15px;\n        width: fit-content;\n        border-left: 1px solid #dcdcdc;\n        border-right: 1px solid #dcdcdc;\n\n        > div {\n          display: grid;\n          grid-template-columns: 125px 180px 30px;\n          align-items: center;\n          gap: 20px;\n          \n          & + div {\n            margin-top: 15px;\n          }\n\n          .back-bar {\n            height: 10px;\n            border-radius: 100rem;\n            background: #aaaaaa;\n            position: relative;\n            z-index: 2;\n          }\n\n          .bar {\n            height: 10px;\n            border-radius: 100rem;\n            background: ", ";\n            position: relative;\n            z-index: 3;\n          }\n        }\n      }\n\n      > .item:nth-child(3) {\n        color: ", ";\n        padding: 0;\n        background: none;\n        border: none;\n        border: 1px solid currentColor;\n        height: 48px;\n        padding: 0 20px;\n        border-radius: 100rem;\n        display: flex;\n        align-items: center;\n        gap: 10px;\n        transition: 0.1s;\n\n        &:hover {\n          color: #fff;\n          background: ", ";\n\n          svg {\n            fill: #fff;\n          }\n        }\n\n        svg {\n          width: 16px;\n          height: auto;\n          fill: currentColor;\n        }\n      }\n    }\n\n    .bottom {\n      > div + div {\n        margin-top: 30px;\n      }\n    }\n  }\n\n  @media only screen and (max-width: 1600px) {\n    > div {\n      padding: 30px;\n      border-radius: 25px;\n\n      .top {\n        margin-bottom: 28px;\n        padding-bottom: 28px;\n\n        > .item:nth-child(2) {\n          margin: 0 20px 0 20px;\n          padding: 0 20px 0 20px;\n\n          > div {\n            grid-template-columns: 115px 160px 30px;\n            gap: 18px;\n          }\n        }\n\n        > .item:nth-child(3) {\n          height: 46px;\n          padding: 0 18px;\n\n          svg {\n            width: 15px;\n          }\n        }\n      }\n    }\n  }\n\n  @media only screen and (max-width: 1400px) {\n    > div {\n      padding: 25px;\n      border-radius: 20px;\n\n      .top {\n        margin-bottom: 25px;\n        padding-bottom: 25px;\n\n        > .item:nth-child(2) {\n          margin: 0 15px 0 15px;\n          padding: 0 15px 0 15px;\n\n          > div {\n            grid-template-columns: 105px 140px 30px;\n            gap: 15px;\n          }\n        }\n\n        > .item:nth-child(3) {\n          height: 46px;\n          padding: 0 18px;\n\n          svg {\n            width: 15px;\n          }\n        }\n      }\n    }\n  }\n\n  @media only screen and (max-width: 1200px) {\n    > div {\n      padding: 20px;\n      border-radius: 15px;\n\n      .top {\n        margin-bottom: 20px;\n        padding-bottom: 20px;\n        gap: 5px;\n\n        .container-stars {\n          align-items: start;\n          flex-direction: column;\n        }\n\n        > .item:nth-child(1) {\n          svg {\n            width: 110px;\n            height: auto;\n          }\n        }\n\n        > .item:nth-child(2) {\n          margin: 0 0;\n          padding: 0 10px;\n\n          > div {\n            grid-template-columns: 100px 80px 30px;\n            gap: 8px;\n          }\n        }\n\n        > .item:nth-child(3) {\n          height: 44px;\n          padding: 0 16px;\n\n          svg {\n            width: 13px;\n          }\n        }\n      }\n    }\n  }\n\n  @media only screen and (max-width: 1024px) {\n    > div {\n      padding: 15px;\n      border-radius: 10px;\n\n      .top {\n        display: grid;\n        grid-template-columns: repeat(2, 1fr);\n\n        .container-stars {\n          flex-direction: row;\n          align-items: center;\n        }\n\n        > .item:nth-child(1) {\n          span {\n            &:last-child {\n              margin-top: 5px;\n            }\n          }\n        }\n\n        > .item:nth-child(2) {\n          border-right: none;\n          padding-right: 0;\n\n          > div {\n            font-size: 14px;\n            grid-template-columns: 100px 100px 30px;\n\n            & + div {\n              margin-top: 10px;\n            }\n          }\n        }\n\n        > .item:nth-child(3) {\n          height: 42px;\n          max-width: fit-content;\n\n          svg {\n            width: 12px;\n          }\n        }\n      }\n    }\n  }\n\n  @media only screen and (max-width: 800px) {\n    > div .top > .item:nth-child(2) > div {\n      gap: 3px;\n      grid-template-columns: 100px 60px 25px;\n    }\n  }\n\n  @media only screen and (max-width: 768px) {\n    > div {\n      padding: 10px;\n      background-color: transparent;\n\n      .top {\n        display: grid;\n        grid-template-columns: 1fr 1fr;\n\n        > .item:nth-child(2) {\n          border-right: none;\n          margin-left: 0;\n          padding-left: 0;\n          padding-right: 0;\n          border-left: none;\n          width: 100%;\n\n          > div {\n            grid-template-columns: 115px 90px 25px;\n          }\n        }\n\n        > .item:nth-child(3) {\n          width: fit-content;\n          height: 40px;\n          margin-top: 5px;\n\n          svg {\n            width: 12px;\n          }\n        }\n      }\n    }\n  }\n\n  @media only screen and (max-width: 600px) {\n    > div {\n      .top {\n        display: flex;\n        align-items: center;\n        flex-direction: column;\n        gap: 10px;\n\n        .item > div {\n          justify-content: center;\n        }\n\n        > .item:nth-child(3) {\n          height: 34px;\n        }\n\n        .container-stars {\n          justify-content: center;\n        }\n      }\n    }\n  }\n"], ["\n  * {\n    color: ", ";\n  }\n\n  h5 {\n    margin-bottom: 5px;\n  }\n\n  > div {\n    border-radius: 30px;\n    padding: 40px;\n    background-color: ", ";\n\n    .top {\n      display: flex;\n      align-items: center;\n      border-bottom: 1px solid #dcdcdc;\n      margin-bottom: 30px;\n      padding-bottom: 30px;\n      justify-content: space-between;\n\n      .container-stars {\n        display: flex;\n        align-items: center;\n        gap: 8px;\n        margin-bottom: 10px;\n      }\n\n      .stars {\n        .star {\n          color: ", " !important;\n        }\n\n        .number {\n          display: none;\n        }\n      }\n\n      > .item:nth-child(1) {\n        span {\n          svg {\n            margin-left: 8px;\n          }\n\n          &:last-child {\n            color: ", ";\n            margin-top: 10px;\n          }\n        }\n      }\n\n      > .item:nth-child(2) {\n        margin: 0 15px 0 15px;\n        padding: 0 15px 0 15px;\n        width: fit-content;\n        border-left: 1px solid #dcdcdc;\n        border-right: 1px solid #dcdcdc;\n\n        > div {\n          display: grid;\n          grid-template-columns: 125px 180px 30px;\n          align-items: center;\n          gap: 20px;\n          \n          & + div {\n            margin-top: 15px;\n          }\n\n          .back-bar {\n            height: 10px;\n            border-radius: 100rem;\n            background: #aaaaaa;\n            position: relative;\n            z-index: 2;\n          }\n\n          .bar {\n            height: 10px;\n            border-radius: 100rem;\n            background: ", ";\n            position: relative;\n            z-index: 3;\n          }\n        }\n      }\n\n      > .item:nth-child(3) {\n        color: ", ";\n        padding: 0;\n        background: none;\n        border: none;\n        border: 1px solid currentColor;\n        height: 48px;\n        padding: 0 20px;\n        border-radius: 100rem;\n        display: flex;\n        align-items: center;\n        gap: 10px;\n        transition: 0.1s;\n\n        &:hover {\n          color: #fff;\n          background: ", ";\n\n          svg {\n            fill: #fff;\n          }\n        }\n\n        svg {\n          width: 16px;\n          height: auto;\n          fill: currentColor;\n        }\n      }\n    }\n\n    .bottom {\n      > div + div {\n        margin-top: 30px;\n      }\n    }\n  }\n\n  @media only screen and (max-width: 1600px) {\n    > div {\n      padding: 30px;\n      border-radius: 25px;\n\n      .top {\n        margin-bottom: 28px;\n        padding-bottom: 28px;\n\n        > .item:nth-child(2) {\n          margin: 0 20px 0 20px;\n          padding: 0 20px 0 20px;\n\n          > div {\n            grid-template-columns: 115px 160px 30px;\n            gap: 18px;\n          }\n        }\n\n        > .item:nth-child(3) {\n          height: 46px;\n          padding: 0 18px;\n\n          svg {\n            width: 15px;\n          }\n        }\n      }\n    }\n  }\n\n  @media only screen and (max-width: 1400px) {\n    > div {\n      padding: 25px;\n      border-radius: 20px;\n\n      .top {\n        margin-bottom: 25px;\n        padding-bottom: 25px;\n\n        > .item:nth-child(2) {\n          margin: 0 15px 0 15px;\n          padding: 0 15px 0 15px;\n\n          > div {\n            grid-template-columns: 105px 140px 30px;\n            gap: 15px;\n          }\n        }\n\n        > .item:nth-child(3) {\n          height: 46px;\n          padding: 0 18px;\n\n          svg {\n            width: 15px;\n          }\n        }\n      }\n    }\n  }\n\n  @media only screen and (max-width: 1200px) {\n    > div {\n      padding: 20px;\n      border-radius: 15px;\n\n      .top {\n        margin-bottom: 20px;\n        padding-bottom: 20px;\n        gap: 5px;\n\n        .container-stars {\n          align-items: start;\n          flex-direction: column;\n        }\n\n        > .item:nth-child(1) {\n          svg {\n            width: 110px;\n            height: auto;\n          }\n        }\n\n        > .item:nth-child(2) {\n          margin: 0 0;\n          padding: 0 10px;\n\n          > div {\n            grid-template-columns: 100px 80px 30px;\n            gap: 8px;\n          }\n        }\n\n        > .item:nth-child(3) {\n          height: 44px;\n          padding: 0 16px;\n\n          svg {\n            width: 13px;\n          }\n        }\n      }\n    }\n  }\n\n  @media only screen and (max-width: 1024px) {\n    > div {\n      padding: 15px;\n      border-radius: 10px;\n\n      .top {\n        display: grid;\n        grid-template-columns: repeat(2, 1fr);\n\n        .container-stars {\n          flex-direction: row;\n          align-items: center;\n        }\n\n        > .item:nth-child(1) {\n          span {\n            &:last-child {\n              margin-top: 5px;\n            }\n          }\n        }\n\n        > .item:nth-child(2) {\n          border-right: none;\n          padding-right: 0;\n\n          > div {\n            font-size: 14px;\n            grid-template-columns: 100px 100px 30px;\n\n            & + div {\n              margin-top: 10px;\n            }\n          }\n        }\n\n        > .item:nth-child(3) {\n          height: 42px;\n          max-width: fit-content;\n\n          svg {\n            width: 12px;\n          }\n        }\n      }\n    }\n  }\n\n  @media only screen and (max-width: 800px) {\n    > div .top > .item:nth-child(2) > div {\n      gap: 3px;\n      grid-template-columns: 100px 60px 25px;\n    }\n  }\n\n  @media only screen and (max-width: 768px) {\n    > div {\n      padding: 10px;\n      background-color: transparent;\n\n      .top {\n        display: grid;\n        grid-template-columns: 1fr 1fr;\n\n        > .item:nth-child(2) {\n          border-right: none;\n          margin-left: 0;\n          padding-left: 0;\n          padding-right: 0;\n          border-left: none;\n          width: 100%;\n\n          > div {\n            grid-template-columns: 115px 90px 25px;\n          }\n        }\n\n        > .item:nth-child(3) {\n          width: fit-content;\n          height: 40px;\n          margin-top: 5px;\n\n          svg {\n            width: 12px;\n          }\n        }\n      }\n    }\n  }\n\n  @media only screen and (max-width: 600px) {\n    > div {\n      .top {\n        display: flex;\n        align-items: center;\n        flex-direction: column;\n        gap: 10px;\n\n        .item > div {\n          justify-content: center;\n        }\n\n        > .item:nth-child(3) {\n          height: 34px;\n        }\n\n        .container-stars {\n          justify-content: center;\n        }\n      }\n    }\n  }\n"])), function (props) { return props.theme.darkColor; }, function (props) { return props.theme.grey; }, function (p) { return p.$themeInteractions.baseColor || p.theme.primaryColor; }, function (props) { return props.theme.grey40; }, function (props) { return props.$themeInteractions.baseColor || props.theme.primaryColor; }, function (props) { return props.theme.grey60; }, function (props) { return props.theme.grey60 || '#000'; });
exports.Modal = (0, styled_components_1.default)('div')(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  padding: 40px 60px;\n  border-radius: 30px;\n  background-color: ", ";\n\n  h4 {\n        text-align: center;\n        margin-bottom: 0;\n  }\n\n  .subtitle {\n    display: block;\n    width: 100%;\n    text-align: center;\n    margin-top: 5px;\n  }\n\n  .rating {\n\n\n    .container-switch {\n      justify-content: center;\n\n      label {\n        span {\n          font-size: 40px;\n        }\n      }\n    }\n  }\n\n  .separator {\n        border-bottom: 1px solid #dcdcdc;\n        margin-bottom: 20px;\n        margin-top: 25px;\n  }\n\n  .ratings {\n    label {\n      font-size: 18px !important;\n    }\n  }\n\n  form {\n    padding-top: 10px;\n  \n    .conntent_form_infinity_forge {\n      padding: 0;\n\n      label {\n        margin-bottom: 0 !important;\n        font-weight: 400 !important;\n      }\n    }\n\n    .input-star {\n        label {\n        font-size: 18px !important;\n        }\n    }\n\n    .container-switch {\n      display: flex;\n      align-items: center;\n      justify-content: space-between;\n      margin-bottom: 20px;\n\n      > * {\n        flex: 1;\n      }\n\n      .input-content:has([role='radiogroup']) {\n        flex: unset;\n      }\n\n      label:has(input:checked) span {\n        color: ", ";\n      }\n\n      span:hover,\n      span.active {\n        color: ", ";\n      }\n    }\n\n    .input-wrapper label {\n      margin-bottom: 0 !important;\n    }\n\n    textarea {\n      width: 100%;\n      height: 90px;\n      resize: none;\n      padding: 10px;\n      text-align: left;\n    }\n\n    .form-button > div {\n      display: flex;\n      justify-content: center;\n\n      button {\n        font-weight: bold;\n        max-width: 311px;\n        margin: 0 auto;\n        background-color: ", ";\n        border: none;\n        border-radius: 100px;\n      }\n    }\n  }\n\n  @media only screen and (max-width: 1600px) {\n    padding: 30px 40px;\n    border-radius: 25px;\n\n    form {\n      padding-top: 20px;\n\n      .container-switch {\n        margin-bottom: 15px;\n      }\n\n      textarea {\n        padding: 10px 15px;\n      }\n    }\n  }\n\n  @media only screen and (max-width: 1024px) {\n    padding: 25px 30px;\n    border-radius: 20px;\n\n    form {\n      padding-top: 15px;\n\n      .container-switch {\n        margin-bottom: 10px;\n      }\n\n      textarea {\n        padding: 8px 12px;\n      }\n    }\n  }\n\n  @media only screen and (max-width: 768px) {\n    padding: 15px;\n    border-radius: 10px;\n\n    form {\n      padding-top: 10px;\n\n      .container-switch {\n        margin-bottom: 5px;\n      }\n\n      textarea {\n        padding: 5px 8px;\n      }\n\n      .form-button button {\n        max-width: 260px;\n      }\n\n      label span {\n        font-size: 1.8rem;\n      }\n\n      [role='radiogroup'] {\n        gap: 3px;\n      }\n    }\n  }\n"], ["\n  padding: 40px 60px;\n  border-radius: 30px;\n  background-color: ", ";\n\n  h4 {\n        text-align: center;\n        margin-bottom: 0;\n  }\n\n  .subtitle {\n    display: block;\n    width: 100%;\n    text-align: center;\n    margin-top: 5px;\n  }\n\n  .rating {\n\n\n    .container-switch {\n      justify-content: center;\n\n      label {\n        span {\n          font-size: 40px;\n        }\n      }\n    }\n  }\n\n  .separator {\n        border-bottom: 1px solid #dcdcdc;\n        margin-bottom: 20px;\n        margin-top: 25px;\n  }\n\n  .ratings {\n    label {\n      font-size: 18px !important;\n    }\n  }\n\n  form {\n    padding-top: 10px;\n  \n    .conntent_form_infinity_forge {\n      padding: 0;\n\n      label {\n        margin-bottom: 0 !important;\n        font-weight: 400 !important;\n      }\n    }\n\n    .input-star {\n        label {\n        font-size: 18px !important;\n        }\n    }\n\n    .container-switch {\n      display: flex;\n      align-items: center;\n      justify-content: space-between;\n      margin-bottom: 20px;\n\n      > * {\n        flex: 1;\n      }\n\n      .input-content:has([role='radiogroup']) {\n        flex: unset;\n      }\n\n      label:has(input:checked) span {\n        color: ", ";\n      }\n\n      span:hover,\n      span.active {\n        color: ", ";\n      }\n    }\n\n    .input-wrapper label {\n      margin-bottom: 0 !important;\n    }\n\n    textarea {\n      width: 100%;\n      height: 90px;\n      resize: none;\n      padding: 10px;\n      text-align: left;\n    }\n\n    .form-button > div {\n      display: flex;\n      justify-content: center;\n\n      button {\n        font-weight: bold;\n        max-width: 311px;\n        margin: 0 auto;\n        background-color: ", ";\n        border: none;\n        border-radius: 100px;\n      }\n    }\n  }\n\n  @media only screen and (max-width: 1600px) {\n    padding: 30px 40px;\n    border-radius: 25px;\n\n    form {\n      padding-top: 20px;\n\n      .container-switch {\n        margin-bottom: 15px;\n      }\n\n      textarea {\n        padding: 10px 15px;\n      }\n    }\n  }\n\n  @media only screen and (max-width: 1024px) {\n    padding: 25px 30px;\n    border-radius: 20px;\n\n    form {\n      padding-top: 15px;\n\n      .container-switch {\n        margin-bottom: 10px;\n      }\n\n      textarea {\n        padding: 8px 12px;\n      }\n    }\n  }\n\n  @media only screen and (max-width: 768px) {\n    padding: 15px;\n    border-radius: 10px;\n\n    form {\n      padding-top: 10px;\n\n      .container-switch {\n        margin-bottom: 5px;\n      }\n\n      textarea {\n        padding: 5px 8px;\n      }\n\n      .form-button button {\n        max-width: 260px;\n      }\n\n      label span {\n        font-size: 1.8rem;\n      }\n\n      [role='radiogroup'] {\n        gap: 3px;\n      }\n    }\n  }\n"])), function (p) { return p.theme.grey; }, function (p) { return p.$themeInteractions.baseColor || p.theme.primaryColor; }, function (p) { return p.$themeInteractions.baseColor || p.theme.primaryColor; }, function (p) { return p.$themeInteractions.baseColor || p.theme.primaryColor; });
var templateObject_1, templateObject_2;
//# sourceMappingURL=styles.js.map