infinity-forge/dist/system/components/layout/header/version-01/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.HeaderVersion01 = void 0;
var styled_components_1 = __importDefault(require("styled-components"));
exports.HeaderVersion01 = styled_components_1.default.header(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  width: 100%;\n  z-index: 6;\n  top: 0;\n  background: ", ";\n  padding: 10px 0;\n  backdrop-filter: blur(20px);\n  transition: box-shadow 0.2s ease-in-out;\n\n  ", "\n\n  .logo-wrapper {\n    max-width: 285px;\n  }\n\n  .logo {\n    display: flex;\n    width: 100%;\n    max-width: 160px;\n\n    img {\n      object-fit: contain;\n      width: 100%;\n      height: inherit;\n    }\n  }\n\n  .container {\n    display: flex;\n    gap: 15px;\n    align-items: center;\n\n    .left {\n      display: flex;\n      align-items: center;\n      justify-content: flex-start;\n      gap: 10px;\n      width: 100%;\n      max-width: 285px;\n      width: 285px;\n    }\n\n    .right {\n      display: flex;\n      align-items: center;\n      justify-content: space-between;\n      width: 100%;\n      gap: clamp(5px, 0.78vw, 15px);\n      padding-left: 20px;\n    }\n  }\n\n  button.open_menu {\n    padding: 0;\n    border: none;\n    background: none;\n    display: flex;\n    height: 24px;\n    width: 24px;\n\n    svg {\n      width: 100%;\n      height: auto;\n      stroke: #fff;\n    }\n  }\n\n  @media only screen and (max-width: 1700px) {\n    .logo-wrapper,\n    .container.left {\n      max-width: 280px;\n    }\n  }\n\n  @media only screen and (max-width: 1650px) {\n    .logo-wrapper,\n    .container.left {\n      max-width: 275px;\n    }\n  }\n\n  @media only screen and (max-width: 1600px) {\n    .logo-wrapper,\n    .container.left {\n      max-width: 270px;\n    }\n  }\n\n  @media only screen and (max-width: 1550px) {\n    .logo-wrapper,\n    .container.left {\n      max-width: 265px;\n    }\n  }\n\n  @media only screen and (max-width: 1500px) {\n    .logo-wrapper,\n    .container.left {\n      max-width: 260px;\n    }\n  }\n\n  @media only screen and (max-width: 1450px) {\n    .logo-wrapper,\n    .container.left {\n      max-width: 255px;\n    }\n  }\n\n  @media only screen and (max-width: 1400px) {\n    .logo-wrapper,\n    .container.left {\n      max-width: 250px;\n    }\n  }\n\n  @media only screen and (max-width: 1350px) {\n    .logo-wrapper,\n    .container.left {\n      max-width: 245px;\n    }\n  }\n\n  @media only screen and (max-width: 1200px) {\n    .logo-wrapper,\n    .container.left {\n      max-width: 240px;\n    }\n  }\n\n  @media only screen and (max-width: 1280px) {\n    .logo-wrapper {\n      max-width: fit-content;\n    }\n  }\n\n  @media only screen and (max-width: 1024px) {\n    .left {\n      width: 110px !important;\n    }\n  }\n"], ["\n  width: 100%;\n  z-index: 6;\n  top: 0;\n  background: ", ";\n  padding: 10px 0;\n  backdrop-filter: blur(20px);\n  transition: box-shadow 0.2s ease-in-out;\n\n  ", "\n\n  .logo-wrapper {\n    max-width: 285px;\n  }\n\n  .logo {\n    display: flex;\n    width: 100%;\n    max-width: 160px;\n\n    img {\n      object-fit: contain;\n      width: 100%;\n      height: inherit;\n    }\n  }\n\n  .container {\n    display: flex;\n    gap: 15px;\n    align-items: center;\n\n    .left {\n      display: flex;\n      align-items: center;\n      justify-content: flex-start;\n      gap: 10px;\n      width: 100%;\n      max-width: 285px;\n      width: 285px;\n    }\n\n    .right {\n      display: flex;\n      align-items: center;\n      justify-content: space-between;\n      width: 100%;\n      gap: clamp(5px, 0.78vw, 15px);\n      padding-left: 20px;\n    }\n  }\n\n  button.open_menu {\n    padding: 0;\n    border: none;\n    background: none;\n    display: flex;\n    height: 24px;\n    width: 24px;\n\n    svg {\n      width: 100%;\n      height: auto;\n      stroke: #fff;\n    }\n  }\n\n  @media only screen and (max-width: 1700px) {\n    .logo-wrapper,\n    .container.left {\n      max-width: 280px;\n    }\n  }\n\n  @media only screen and (max-width: 1650px) {\n    .logo-wrapper,\n    .container.left {\n      max-width: 275px;\n    }\n  }\n\n  @media only screen and (max-width: 1600px) {\n    .logo-wrapper,\n    .container.left {\n      max-width: 270px;\n    }\n  }\n\n  @media only screen and (max-width: 1550px) {\n    .logo-wrapper,\n    .container.left {\n      max-width: 265px;\n    }\n  }\n\n  @media only screen and (max-width: 1500px) {\n    .logo-wrapper,\n    .container.left {\n      max-width: 260px;\n    }\n  }\n\n  @media only screen and (max-width: 1450px) {\n    .logo-wrapper,\n    .container.left {\n      max-width: 255px;\n    }\n  }\n\n  @media only screen and (max-width: 1400px) {\n    .logo-wrapper,\n    .container.left {\n      max-width: 250px;\n    }\n  }\n\n  @media only screen and (max-width: 1350px) {\n    .logo-wrapper,\n    .container.left {\n      max-width: 245px;\n    }\n  }\n\n  @media only screen and (max-width: 1200px) {\n    .logo-wrapper,\n    .container.left {\n      max-width: 240px;\n    }\n  }\n\n  @media only screen and (max-width: 1280px) {\n    .logo-wrapper {\n      max-width: fit-content;\n    }\n  }\n\n  @media only screen and (max-width: 1024px) {\n    .left {\n      width: 110px !important;\n    }\n  }\n"])), function (props) { return props.theme.primaryColor; }, function (props) {
    return props.$hasSidebarButton &&
        "\n   .container {\n    .left {\n      width: fit-content !important;\n    }\n\n    .right {\n      padding-left: 0 !important;\n    }\n  }\n  ";
});
var templateObject_1;
//# sourceMappingURL=styles.js.map