infinity-forge/dist/ui/components/pagination/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.PaginationStyle = void 0;
var styled_components_1 = __importDefault(require("styled-components"));
exports.PaginationStyle = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: 28px;\n\n  .nav {\n    width: 9px;\n    display: flex;\n    cursor: pointer;\n\n    svg {\n      width: 10px;\n      height: auto;\n      fill: currentColor;\n    }\n  }\n\n  .navigations {\n    display: flex;\n    align-items: center;\n\n    > button + button {\n      margin-left: 10px;\n    }\n  }\n\n  button,\n  span {\n    width: 30px;\n    height: 30px;\n    border-radius: 5px;\n    color: #000;\n    border: 1px solid var(--theme-color-extra-light);\n    display: flex !important;\n    align-items: center;\n    justify-content: center;\n    cursor: pointer;\n    background: none;\n  }\n\n  button.active {\n    color: #fff;\n    background-color: ", ";\n  }\n\n  @media only screen and (max-width: 1600px) {\n    gap: 25px;\n\n    button,\n    span {\n      width: 40px;\n      height: 40px;\n    }\n  }\n\n  @media only screen and (max-width: 1400px) {\n    gap: 22px;\n\n    button,\n    span {\n      width: 38px;\n      height: 38px;\n    }\n  }\n\n  @media only screen and (max-width: 1200px) {\n    gap: 20px;\n\n    button,\n    span {\n      width: 37px;\n      height: 37px;\n    }\n  }\n\n  @media only screen and (max-width: 1024px) {\n    gap: 17px;\n\n    button,\n    span {\n      width: 36px;\n      height: 36px;\n    }\n  }\n\n  @media only screen and (max-width: 768px) {\n    margin-top: 40px;\n\n    button,\n    span {\n      width: 35px;\n      height: 35px;\n    }\n  }\n\n  @media only screen and (max-width: 500px) {\n    gap: 15px;\n    margin-top: 35px;\n\n    button,\n    span {\n      width: 34px;\n      height: 34px;\n    }\n  }\n\n  @media only screen and (max-width: 400px) {\n    button,\n    span {\n      width: 32px;\n      height: 32px;\n    }\n  }\n"], ["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: 28px;\n\n  .nav {\n    width: 9px;\n    display: flex;\n    cursor: pointer;\n\n    svg {\n      width: 10px;\n      height: auto;\n      fill: currentColor;\n    }\n  }\n\n  .navigations {\n    display: flex;\n    align-items: center;\n\n    > button + button {\n      margin-left: 10px;\n    }\n  }\n\n  button,\n  span {\n    width: 30px;\n    height: 30px;\n    border-radius: 5px;\n    color: #000;\n    border: 1px solid var(--theme-color-extra-light);\n    display: flex !important;\n    align-items: center;\n    justify-content: center;\n    cursor: pointer;\n    background: none;\n  }\n\n  button.active {\n    color: #fff;\n    background-color: ", ";\n  }\n\n  @media only screen and (max-width: 1600px) {\n    gap: 25px;\n\n    button,\n    span {\n      width: 40px;\n      height: 40px;\n    }\n  }\n\n  @media only screen and (max-width: 1400px) {\n    gap: 22px;\n\n    button,\n    span {\n      width: 38px;\n      height: 38px;\n    }\n  }\n\n  @media only screen and (max-width: 1200px) {\n    gap: 20px;\n\n    button,\n    span {\n      width: 37px;\n      height: 37px;\n    }\n  }\n\n  @media only screen and (max-width: 1024px) {\n    gap: 17px;\n\n    button,\n    span {\n      width: 36px;\n      height: 36px;\n    }\n  }\n\n  @media only screen and (max-width: 768px) {\n    margin-top: 40px;\n\n    button,\n    span {\n      width: 35px;\n      height: 35px;\n    }\n  }\n\n  @media only screen and (max-width: 500px) {\n    gap: 15px;\n    margin-top: 35px;\n\n    button,\n    span {\n      width: 34px;\n      height: 34px;\n    }\n  }\n\n  @media only screen and (max-width: 400px) {\n    button,\n    span {\n      width: 32px;\n      height: 32px;\n    }\n  }\n"])), function (props) { var _a; return ((_a = props === null || props === void 0 ? void 0 : props.theme) === null || _a === void 0 ? void 0 : _a.darkColor) || 'unset'; });
var templateObject_1;
//# sourceMappingURL=styles.js.map