infinity-forge/dist/ui/components/pix/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.Pix = void 0;
var styled_components_1 = __importDefault(require("styled-components"));
exports.Pix = (0, styled_components_1.default)('div')(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  width: 100%;\n  margin: 30px auto 30px;\n  display: flex;\n  flex-direction: column;\n  text-align: center;\n  align-items: center;\n\n  .container-pix {\n    display: flex;\n    flex-direction: column;\n    max-width: 400px;\n  }\n\n  .preco-pix {\n    margin-bottom: 20px;\n    font-size: 16px;\n    font-weight: 400;\n\n    span {\n      font-weight: bold;\n      font-size: 18px;\n    }\n  }\n\n  .validade {\n    font-size: 14px;\n    color: #000;\n    opacity: 0.8;\n    margin-bottom: 20px;\n  }\n\n  > img {\n    height: 300px;\n    width: 290px;\n    object-fit: contain;\n    border: 1px solid #000;\n    margin: 10px auto 10px;\n  }\n\n  .copy {\n    p {\n      font-size: 16px;\n      margin-bottom: 10px;\n    }\n\n    .container-input {\n      position: relative;\n    }\n\n    input,\n    button {\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      font-size: 16px;\n      width: 100%;\n      height: 36px;\n      padding: 0px 20px;\n      text-align: center;\n      border: unset;\n    }\n\n    input {\n      border: 1px solid #000;\n      margin-bottom: 10px;\n      padding-right: 30px !important;\n    }\n\n    button {\n      width: 30px;\n      height: calc(100% - 2px);\n      padding: 0;\n      position: absolute;\n      bottom: 1px;\n      right: 1px;\n      color: white;\n      border-radius: 0;\n      background-color: ", ";\n\n      svg {\n        width: 16px;\n        height: auto;\n\n        path {\n          stroke: #fff;\n        }\n      }\n    }\n  }\n\n  button {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    font-size: 16px;\n    width: 100%;\n    height: 36px;\n    padding: 0px 20px;\n    text-align: center;\n    border: unset;\n\n    color: white;\n    border-radius: 10px;\n    background-color: ", ";\n  }\n\n  @media only screen and (max-width: 900px) {\n    margin-bottom: 30px !important;\n\n    .preco-pix {\n      margin-bottom: 10px;\n    }\n  }\n\n  @media only screen and (max-width: 768px) {\n    .validade {\n      margin-bottom: 10px;\n    }\n\n    img {\n      height: 250px;\n      width: 250px;\n      margin: 0 auto;\n    }\n\n    .copy {\n      input {\n        height: 34px;\n        padding-left: 10px;\n      }\n    }\n\n    .preco-pix {\n      margin-bottom: 5px;\n    }\n  }\n"], ["\n  width: 100%;\n  margin: 30px auto 30px;\n  display: flex;\n  flex-direction: column;\n  text-align: center;\n  align-items: center;\n\n  .container-pix {\n    display: flex;\n    flex-direction: column;\n    max-width: 400px;\n  }\n\n  .preco-pix {\n    margin-bottom: 20px;\n    font-size: 16px;\n    font-weight: 400;\n\n    span {\n      font-weight: bold;\n      font-size: 18px;\n    }\n  }\n\n  .validade {\n    font-size: 14px;\n    color: #000;\n    opacity: 0.8;\n    margin-bottom: 20px;\n  }\n\n  > img {\n    height: 300px;\n    width: 290px;\n    object-fit: contain;\n    border: 1px solid #000;\n    margin: 10px auto 10px;\n  }\n\n  .copy {\n    p {\n      font-size: 16px;\n      margin-bottom: 10px;\n    }\n\n    .container-input {\n      position: relative;\n    }\n\n    input,\n    button {\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      font-size: 16px;\n      width: 100%;\n      height: 36px;\n      padding: 0px 20px;\n      text-align: center;\n      border: unset;\n    }\n\n    input {\n      border: 1px solid #000;\n      margin-bottom: 10px;\n      padding-right: 30px !important;\n    }\n\n    button {\n      width: 30px;\n      height: calc(100% - 2px);\n      padding: 0;\n      position: absolute;\n      bottom: 1px;\n      right: 1px;\n      color: white;\n      border-radius: 0;\n      background-color: ", ";\n\n      svg {\n        width: 16px;\n        height: auto;\n\n        path {\n          stroke: #fff;\n        }\n      }\n    }\n  }\n\n  button {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    font-size: 16px;\n    width: 100%;\n    height: 36px;\n    padding: 0px 20px;\n    text-align: center;\n    border: unset;\n\n    color: white;\n    border-radius: 10px;\n    background-color: ", ";\n  }\n\n  @media only screen and (max-width: 900px) {\n    margin-bottom: 30px !important;\n\n    .preco-pix {\n      margin-bottom: 10px;\n    }\n  }\n\n  @media only screen and (max-width: 768px) {\n    .validade {\n      margin-bottom: 10px;\n    }\n\n    img {\n      height: 250px;\n      width: 250px;\n      margin: 0 auto;\n    }\n\n    .copy {\n      input {\n        height: 34px;\n        padding-left: 10px;\n      }\n    }\n\n    .preco-pix {\n      margin-bottom: 5px;\n    }\n  }\n"])), function (_a) {
    var theme = _a.theme;
    return theme.primaryColor;
}, function (_a) {
    var theme = _a.theme;
    return theme.primaryColor;
});
var templateObject_1;
//# sourceMappingURL=styles.js.map