@empathyco/x-components/js/components/layouts/multi-column-max-width-layout.vue4.js

Empathy X Components

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-5319aaa7]{--x-size-gap-default:var(--x-size-column-gap-layout-columns,20px);--x-size-margin-max-width:calc((100vw - var(--x-size-max-width-layout-columns, 1440px))/2);--x-size-margin-layout-columns:max(var(--x-size-min-margin-layout-columns,20px),var(--x-size-margin-max-width));--x-number-columns-header-middle:calc(var(--x-number-columns-layout-columns, 5) - 2);--x-number-columns-sub-header-content:var(--x-number-columns-header-middle);--x-number-columns-toolbar-body:calc(var(--x-number-columns-layout-columns, 5) - 1);align-content:stretch;display:grid;grid-template-columns:[page-start] 1fr [scroll-to-top-start] calc(var(--x-size-margin-layout-columns) + var(--x-size-gap-default)) [scroll-to-top-end 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 [scroll-to-top-start] auto [main-end scroll-to-top-end page-end];max-height:100%}.x-layout__header[data-v-5319aaa7]{background-color:var(--x-color-background-layout-columns-header,transparent);border-color:var(--x-color-border-layout-columns-header,transparent);border-style:solid;border-width:var(--x-size-border-width-layout-columns-header,0);column-gap:var(--x-size-gap-default);display:grid;grid-column:page;grid-row:header;grid-template-columns:[header-start] var(--x-size-margin-layout-columns) [start-content-start] 1fr [start-content-end middle-content-start] repeat(var(--x-number-columns-header-middle),1fr) [middle-content-end end-content-start] 1fr [end-content-end] var(--x-size-margin-layout-columns) [header-end];margin-bottom:var(--x-size-margin-bottom-layout-columns-header,0);margin-top:var(--x-size-margin-top-layout-columns-header,0);padding-bottom:var(--x-size-padding-bottom-layout-columns-header,0);padding-top:var(--x-size-padding-top-layout-columns-header,0)}.x-layout__header-start[data-v-5319aaa7]{grid-column:start-content}.x-layout__header-start.x-list[data-v-5319aaa7]{align-items:var(--x-size-align-layout-columns-header-start,flex start);flex-flow:var(--x-flow-layout-columns-header-start,row nowrap);justify-content:var(--x-size-justify-layout-columns-header-start,flex start)}.x-layout__header-middle[data-v-5319aaa7]{grid-column:middle-content}.x-layout__header-middle.x-list[data-v-5319aaa7]{align-items:var(--x-size-align-layout-columns-header-middle,flex start);flex-flow:var(--x-flow-layout-columns-header-middle,row nowrap);justify-content:var(--x-size-justify-layout-columns-header-middle,center)}.x-layout__header-end[data-v-5319aaa7]{grid-column:end-content}.x-layout__header-end.x-list[data-v-5319aaa7]{align-items:var(--x-size-align-layout-columns-header-end,flex-start);flex-flow:var(--x-flow-layout-columns-header-end,row nowrap);justify-content:var(--x-size-justify-layout-columns-header-end,flex-end)}.x-layout__sub-header[data-v-5319aaa7]{background-color:var(--x-color-background-layout-columns-sub-header,transparent);border-color:var(--x-color-border-layout-columns-sub-header,transparent);border-style:solid;border-width:var(--x-size-border-width-layout-columns-sub-header,0);column-gap:var(--x-size-gap-default);display:grid;grid-column:page;grid-row:sub-header;grid-template-columns:[sub-header-start] var(--x-size-margin-layout-columns) 1fr [sub-header-content-start] repeat(var(--x-number-columns-sub-header-content),1fr) [sub-header-content-end] 1fr var(--x-size-margin-layout-columns) [sub-header-end];margin-bottom:var(--x-size-margin-bottom-layout-columns-sub-header,0);margin-top:var(--x-size-margin-top-layout-columns-sub-header,0);padding-bottom:var(--x-size-padding-bottom-layout-columns-sub-header),0;padding-top:var(--x-size-padding-top-layout-columns-sub-header,0)}.x-layout__sub-header-content[data-v-5319aaa7]{grid-column:sub-header-content}.x-layout__sub-header-content.x-list[data-v-5319aaa7]{align-items:var(--x-size-align-layout-columns-sub-header,flex-start);flex-flow:var(--x-flow-layout-columns-sub-header,row nowrap);justify-content:var(--x-size-justify-layout-columns-sub-header,flex-start)}.x-layout__toolbar[data-v-5319aaa7]{background-color:var(--x-color-background-layout-columns-toolbar,transparent);border-color:var(--x-color-border-layout-columns-toolbar,transparent);border-style:solid;border-width:var(--x-size-border-width-layout-columns-toolbar,0);column-gap:var(--x-size-gap-default);display:grid;grid-column:page;grid-row:toolbar;grid-template-columns:[toolbar-start] var(--x-size-margin-layout-columns) [toolbar-aside-start] 1fr [toolbar-aside-end toolbar-body-start] repeat(var(--x-number-columns-toolbar-body),1fr) [toolbar-body-end] var(--x-size-margin-layout-columns) [toolbar-end];margin-bottom:var(--x-size-margin-bottom-layout-columns-toolbar,0);margin-top:var(--x-size-margin-top-layout-columns-toolbar,0);padding-bottom:var(--x-size-padding-bottom-layout-columns-toolbar,0);padding-top:var(--x-size-padding-top-layout-columns-toolbar,0)}.x-layout__toolbar-aside[data-v-5319aaa7]{grid-column:toolbar-aside}.x-layout__toolbar-aside.x-list[data-v-5319aaa7]{align-items:var(--x-size-align-layout-columns-toolbar-aside,center);flex-flow:var(--x-flow-layout-columns-toolbar-aside,row nowrap);justify-content:var(--x-size-justify-layout-columns-toolbar-aside,flex-start)}.x-layout__toolbar-body[data-v-5319aaa7]{grid-column:toolbar-body}.x-layout__toolbar-body.x-list[data-v-5319aaa7]{align-items:var(--x-size-align-layout-columns-toolbar-body,center);flex-flow:var(--x-flow-layout-columns-toolbar-body,row nowrap);justify-content:var(--x-size-justify-layout-columns-toolbar-body,flex-end)}.x-layout__main[data-v-5319aaa7]{background-color:var(--x-color-background-layout-columns-main,transparent);border-color:var(--x-color-border-layout-columns-main,transparent);border-style:solid;border-width:var(--x-size-border-width-layout-columns-main,0);display:flex;flex-flow:row nowrap;grid-column:page;grid-row:main;justify-content:stretch;margin-bottom:var(--x-size-margin-bottom-layout-columns-main,0);margin-top:var(--x-size-margin-top-layout-columns-main,0);min-height:0;padding-bottom:var(--x-size-padding-bottom-layout-columns-main,0);padding-left:calc(var(--x-size-margin-layout-columns) + var(--x-size-gap-default));padding-top:var(--x-size-padding-top-layout-columns-main,0)}.x-layout__collapse-aside[data-v-5319aaa7]{width:calc((100% - var(--x-size-gap-default)*(var(--x-number-columns-layout-columns, 5)) - var(--x-size-margin-layout-columns))/var(--x-number-columns-layout-columns, 5) + var(--x-size-gap-default))}.x-layout__aside-scroll[data-v-5319aaa7]{height:100%;margin-right:var(--x-size-gap-default)}.x-layout__body-scroll[data-v-5319aaa7]{flex:1 1 auto;padding-right:calc(var(--x-size-margin-layout-columns) + var(--x-size-gap-default) - 16px);width:0}.x-layout__body-scroll.x-scroll[data-v-5319aaa7]{overflow-y:scroll}.x-layout__main-body[data-v-5319aaa7]{overflow-x:hidden}.x-layout__scroll-to-top[data-v-5319aaa7]{display:flex;grid-area:scroll-to-top;justify-content:flex-end;pointer-events:none;width:100%;z-index:1}[dir=ltr] .x-layout__scroll-to-top-content[data-v-5319aaa7]{padding-left:var(--x-size-margin-left-layout-columns-scroll-to-top,10px)}[dir=rtl] .x-layout__scroll-to-top-content[data-v-5319aaa7]{padding-right:var(--x-size-margin-left-layout-columns-scroll-to-top,10px)}.x-layout__scroll-to-top-content[data-v-5319aaa7]{flex:1 0 auto;padding-bottom:var(--x-size-margin-bottom-layout-columns-scroll-to-top,10px)}.x-layout__scroll-to-top-content[data-v-5319aaa7]>*{pointer-events:all}";
injectCss(css);

export { css, css as default };
//# sourceMappingURL=multi-column-max-width-layout.vue4.js.map