infinity-forge/dist/system/components/data/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.Overlay = exports.SubMenu = exports.DefaultMenuStyle = void 0;
var styled_components_1 = __importDefault(require("styled-components"));
exports.DefaultMenuStyle = (0, styled_components_1.default)('aside')(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: block;\n  width: 285px;\n  padding: 25px 0 15px 0;\n  border-right: 1px solid #e1e1e1;\n  z-index: 8;\n  background: #fff;\n  transition: 0.3s;\n\n  * {\n    transition: all 0.2s;\n  }\n\n  ul {\n    list-style-type: none;\n    padding: 0;\n    margin-top: 0;\n    /* margin-bottom: clamp(10px, 0.75vw, 15px); */\n    background: #fff;\n\n    &.submenu {\n      width: fit-content;\n    }\n\n    & + & {\n      margin-top: clamp(10px, 0.75vw, 15px);\n    }\n\n    * {\n      color: ", ";\n      text-decoration: none;\n    }\n\n    li:has(> ul > .active-page) {\n      background: ", ";\n\n      * {\n        color: #fff;\n      }\n    }\n\n    li {\n      position: relative;\n      border-radius: 5px;\n\n      cursor: pointer;\n      width: 100%;\n\n      &:hover,\n      &.open {\n        background: ", ";\n\n        * {\n          color: #fff;\n        }\n      }\n\n      svg {\n        width: 100%;\n        height: auto;\n        fill: currentColor;\n      }\n\n      .link-menu {\n        display: grid;\n        grid-template-columns: max-content 14px;\n        align-items: center;\n        justify-content: space-between;\n        padding: 0px 15px;\n        height: 100%;\n        height: clamp(34px, 2.08vw, 40px);\n\n        > div {\n          display: flex;\n          align-items: center;\n          gap: 5px;\n        }\n\n        .icon {\n          display: flex;\n          width: 20px;\n          height: 20px;\n        }\n\n        .arrow {\n          width: 7px !important;\n          display: flex;\n        }\n      }\n\n      &:hover {\n        > ul {\n          display: block;\n        }\n      }\n    }\n  }\n\n  // Responsives\n\n  @media only screen and (max-width: 1024px) {\n    position: fixed;\n    top: 0;\n    left: 0;\n    transform: translateX(-120%);\n    transition: transform 0.3s;\n    min-height: 100dvh;\n\n    &.open {\n      transform: translateX(0);\n    }\n\n    li.open {\n      ul {\n        display: block;\n      }\n    }\n  }\n"], ["\n  position: block;\n  width: 285px;\n  padding: 25px 0 15px 0;\n  border-right: 1px solid #e1e1e1;\n  z-index: 8;\n  background: #fff;\n  transition: 0.3s;\n\n  * {\n    transition: all 0.2s;\n  }\n\n  ul {\n    list-style-type: none;\n    padding: 0;\n    margin-top: 0;\n    /* margin-bottom: clamp(10px, 0.75vw, 15px); */\n    background: #fff;\n\n    &.submenu {\n      width: fit-content;\n    }\n\n    & + & {\n      margin-top: clamp(10px, 0.75vw, 15px);\n    }\n\n    * {\n      color: ", ";\n      text-decoration: none;\n    }\n\n    li:has(> ul > .active-page) {\n      background: ", ";\n\n      * {\n        color: #fff;\n      }\n    }\n\n    li {\n      position: relative;\n      border-radius: 5px;\n\n      cursor: pointer;\n      width: 100%;\n\n      &:hover,\n      &.open {\n        background: ", ";\n\n        * {\n          color: #fff;\n        }\n      }\n\n      svg {\n        width: 100%;\n        height: auto;\n        fill: currentColor;\n      }\n\n      .link-menu {\n        display: grid;\n        grid-template-columns: max-content 14px;\n        align-items: center;\n        justify-content: space-between;\n        padding: 0px 15px;\n        height: 100%;\n        height: clamp(34px, 2.08vw, 40px);\n\n        > div {\n          display: flex;\n          align-items: center;\n          gap: 5px;\n        }\n\n        .icon {\n          display: flex;\n          width: 20px;\n          height: 20px;\n        }\n\n        .arrow {\n          width: 7px !important;\n          display: flex;\n        }\n      }\n\n      &:hover {\n        > ul {\n          display: block;\n        }\n      }\n    }\n  }\n\n  // Responsives\n\n  @media only screen and (max-width: 1024px) {\n    position: fixed;\n    top: 0;\n    left: 0;\n    transform: translateX(-120%);\n    transition: transform 0.3s;\n    min-height: 100dvh;\n\n    &.open {\n      transform: translateX(0);\n    }\n\n    li.open {\n      ul {\n        display: block;\n      }\n    }\n  }\n"])), function (props) { return props.theme.darkColor; }, function (props) { return props.theme.darkColor; }, function (props) { return props.theme.darkColor; });
exports.SubMenu = styled_components_1.default.ul(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: none;\n  position: absolute;\n  left: 100%;\n  top: 0;\n  border-radius: 5px;\n  /* padding: 4px !important; */\n  z-index: 24;\n  background-color: #ffffff;\n  border: 1px solid #d1d5db;\n  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);\n  transition: background-color 0.3s, border-color 0.3s;\n  width: 100%;\n\n  * {\n    color: ", " !important;\n  }\n\n  li {\n    &:hover {\n      background: rgb(225, 225, 225) !important;\n    }\n\n    &.active-page {\n      background: rgb(225, 225, 225) !important;\n    }\n  }\n\n  @media only screen and (max-width: 1024px) {\n    position: relative;\n    box-shadow: none;\n    border: none;\n    border-radius: 0;\n    inset: unset;\n  }\n"], ["\n  display: none;\n  position: absolute;\n  left: 100%;\n  top: 0;\n  border-radius: 5px;\n  /* padding: 4px !important; */\n  z-index: 24;\n  background-color: #ffffff;\n  border: 1px solid #d1d5db;\n  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);\n  transition: background-color 0.3s, border-color 0.3s;\n  width: 100%;\n\n  * {\n    color: ", " !important;\n  }\n\n  li {\n    &:hover {\n      background: rgb(225, 225, 225) !important;\n    }\n\n    &.active-page {\n      background: rgb(225, 225, 225) !important;\n    }\n  }\n\n  @media only screen and (max-width: 1024px) {\n    position: relative;\n    box-shadow: none;\n    border: none;\n    border-radius: 0;\n    inset: unset;\n  }\n"])), function (props) { return props.theme.darkColor || '#000'; });
exports.Overlay = (0, styled_components_1.default)('div')(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  position: fixed;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100dvh;\n  background: rgba(0, 0, 0, 0.4);\n  z-index: 7;\n"], ["\n  position: fixed;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100dvh;\n  background: rgba(0, 0, 0, 0.4);\n  z-index: 7;\n"])));
var templateObject_1, templateObject_2, templateObject_3;
//# sourceMappingURL=styles.js.map