infinity-forge/dist/system/components/data/menu/modes/collapsed-menu/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.CollapsedMenu = void 0;
var styled_components_1 = __importDefault(require("styled-components"));
var styles_1 = require("../../styles.js");
exports.CollapsedMenu = (0, styled_components_1.default)(styles_1.DefaultMenuStyle)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  padding: 41px 0 15px 0;\n  z-index: 99;\n  width: 65px;\n  min-width: 65px;\n  position: absolute;\n  z-index: 2;\n  left: 0;\n  top: 0;\n\n  .ghost {\n    width: 65px;\n  }\n\n  &.open {\n    width: 240px !important;\n    transition: 0.3s;\n\n    .expand {\n      svg {\n        transform: rotate(180deg);\n      }\n    }\n  }\n\n  .expand {\n    position: absolute;\n    top: 10px;\n    right: -12px;\n    padding: 8px;\n    width: 24px;\n    height: 24px;\n    border-radius: 100%;\n    background-color: ", ";\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    border: 0;\n    z-index: 56;\n\n    svg {\n      width: 100%;\n      fill: #fff;\n      height: auto;\n    }\n  }\n\n  &:not(.open) > ul {\n    > li {\n      .link-menu {\n        grid-template-columns: 1fr !important;\n\n        > div {\n          width: fit-content;\n          margin: auto;\n        }\n\n        a,\n        .arrow {\n          display: none;\n        }\n      }\n    }\n\n    ul {\n      min-width: max-content;\n      width: 240px;\n    }\n  }\n\n  &:not(.open) > ul > li .link-menu > div {\n    gap: 0;\n\n    > span {\n      display: none;\n    }\n  }\n\n  .submenu > li .link-menu > div > span {\n    display: block !important;\n  }\n\n  > ul > li > div {\n    width: 100%;\n  }\n"], ["\n  padding: 41px 0 15px 0;\n  z-index: 99;\n  width: 65px;\n  min-width: 65px;\n  position: absolute;\n  z-index: 2;\n  left: 0;\n  top: 0;\n\n  .ghost {\n    width: 65px;\n  }\n\n  &.open {\n    width: 240px !important;\n    transition: 0.3s;\n\n    .expand {\n      svg {\n        transform: rotate(180deg);\n      }\n    }\n  }\n\n  .expand {\n    position: absolute;\n    top: 10px;\n    right: -12px;\n    padding: 8px;\n    width: 24px;\n    height: 24px;\n    border-radius: 100%;\n    background-color: ", ";\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    border: 0;\n    z-index: 56;\n\n    svg {\n      width: 100%;\n      fill: #fff;\n      height: auto;\n    }\n  }\n\n  &:not(.open) > ul {\n    > li {\n      .link-menu {\n        grid-template-columns: 1fr !important;\n\n        > div {\n          width: fit-content;\n          margin: auto;\n        }\n\n        a,\n        .arrow {\n          display: none;\n        }\n      }\n    }\n\n    ul {\n      min-width: max-content;\n      width: 240px;\n    }\n  }\n\n  &:not(.open) > ul > li .link-menu > div {\n    gap: 0;\n\n    > span {\n      display: none;\n    }\n  }\n\n  .submenu > li .link-menu > div > span {\n    display: block !important;\n  }\n\n  > ul > li > div {\n    width: 100%;\n  }\n"])), function (props) { return props.theme.primaryColor; });
var templateObject_1;
//# sourceMappingURL=styles.js.map