@empathyco/x-components
Version:
Empathy X Components
8 lines (5 loc) • 2.95 kB
JavaScript
import injectCss from '../../../tools/inject-css.js';
var css = ".dev-mode .slot-helper{align-items:center;border:1px dashed grey;border-radius:10px;box-sizing:border-box;color:grey;display:flex;font-family:inherit;height:100%;justify-content:center;width:100%}.x-layout[data-v-d5a25402]{--x-size-margin-max-width:calc((100vw - var(--x-size-max-width-layout, 1440px))/2);--x-size-margin-layout:max(var(--x-size-min-margin-layout,20px),var(--x-size-margin-max-width));align-content:stretch;display:grid;grid-template-columns:[page-start] var(--x-size-margin-layout) [max-width-start] 1fr [max-width-end] var(--x-size-margin-layout) [page-end];grid-template-rows:[page-start header-start] auto [header-end sub-header-start] auto [sub-header-end toolbar-start] auto [toolbar-end main-start] 1fr [main-end page-end];max-height:100%;min-height:100%}.x-layout__header[data-v-d5a25402]{background:var(--x-color-background-layout-header,transparent);border-color:var(--x-size-border-color-layout-header,transparent);border-style:solid;border-width:var(--x-size-border-width-layout-header,0);grid-column:page;grid-row:header;max-height:var(--x-size-max-height-layout-header,auto);padding:0 var(--x-size-margin-layout);position:sticky;top:-.5px;z-index:2}.x-layout__sub-header[data-v-d5a25402]{background:var(--x-color-background-layout-sub-header,transparent);border-color:var(--x-size-border-color-layout-sub-header,transparent);border-style:solid;border-width:var(--x-size-border-width-layout-sub-header,0);grid-column:page;grid-row:sub-header;padding:0 var(--x-size-margin-layout)}.x-layout__toolbar[data-v-d5a25402]{grid-column:max-width;grid-row:toolbar}.x-layout__main[data-v-d5a25402]{grid-column:max-width;grid-row:main}.x-layout[data-v-d5a25402] .x-layout__aside.x-modal{flex-flow:row nowrap;z-index:3}.x-layout[data-v-d5a25402] .x-layout__aside--right.x-modal{justify-content:flex-end}.x-layout[data-v-d5a25402] .x-layout__aside{pointer-events:none}.x-layout[data-v-d5a25402] .x-layout__aside>:not(.slot-helper){pointer-events:all}.x-layout__scroll-to-top[data-v-d5a25402]{bottom:var(--x-size-margin-bottom-layout-scroll-to-top,16px);position:fixed;right:var(--x-size-margin-right-layout-scroll-to-top,16px);z-index:1}.x-layout__header-backdrop[data-v-d5a25402]{background-color:var(\n --x-color-background-layout-header-backdrop,var(--x-color-base-neutral-100,#fff)\n );grid-column:page;grid-row:page;height:var(--x-size-height-layout-backdrop,40vh);mask:linear-gradient(180deg,rgba(0,0,0,.8),transparent);opacity:0;pointer-events:none;position:sticky;top:-.5px;transition:opacity .2s ease-out;width:100%;z-index:1}.x-layout__header-backdrop--is-visible[data-v-d5a25402]{opacity:1}.x-layout[data-v-d5a25402] .x-layout__aside .x-modal__content{background-color:transparent;height:100%;width:var(--x-size-width-layout-aside,300px)}";
injectCss(css);
export { css, css as default };
//# sourceMappingURL=fixed-header-and-asides-layout.vue3.js.map