egroupware/kdots/js/EgwFrameworkApp.styles.ts

import {css} from 'lit';

export default css`

	/* Layout */

	:host {
		position: relative;
		width: 100%;
		height: 100%;

		display: flex;
		flex-direction: column;
	}

	:host > * {
		position: relative;
		display: flex;
	}

	.egw_fw_app__name {
		max-width: 20vw;
		flex: 1 1 20vw;
	}

	.egw_fw_app__header {
		justify-content: flex-start;
		align-items: center;
		justify-items: stretch;
		flex: 1 0 2em;
		max-height: 3em;
	}

	.egw_fw_app__outerSplit {
		grid-column: start / end;
		grid-row: start / end;
		grid-template-rows: subgrid;
	}

	.egw_fw_app__innerSplit {
		grid-template-rows: subgrid;
		grid-column-end: -1;
		grid-row: start / end;
	}

	sl-split-panel::part(divider) {
		grid-row: start / end;
	}

	.egw_fw_app__aside {
		overflow-x: hidden;
		overflow-y: auto;
		display: grid;
		grid-template-rows: subgrid;
		grid-row: start / end;
	}


	.egw_fw_app__aside_header {
		grid-row: sub-header / main;
	}

	.egw_fw_app__aside_content {
		height: 100%;
		grid-row: main / footer;
	}

	.egw_fw_app__aside_footer {
		grid-row: footer / end;
	}

	.egw_fw_app__main {
		flex: 1 1 100%;
		display: grid;
		align-items: stretch;
		justify-content: stretch;
		overflow: hidden;
	}
	.egw_fw_app__header {
		grid-row: sub-header / main;
	}

	.egw_fw_app__main_content {
		grid-row: main / footer;
	}

	.egw_fw_app__footer {
		grid-row: footer / end;
	}

	.header, .footer {
		overflow: hidden;
	}

	@media (min-width: 600px) {
		.egw_fw_app__main {
			grid-template-columns: [start left] min-content [ main] 1fr [right] min-content [end];
			grid-template-rows: [start sub-header] fit-content(2em) [main] auto [footer] fit-content(2em) [end];
		}

		::slotted(*) {
			height: 100%;
		}
	}
	@media (max-width: 599px) {
		.egw_fw_app__main {
			grid-template-columns: [start left main-start] fit-content(50%)  [right] auto [main-end end];
			grid-template-rows: 
				[start sub-header] fit-content(2em) 
				[main] auto 
				[aside-header] fit-content(2em) 
				[aside] min-content 
				[aside-footer] fit-content(4em) 
				[footer] fit-content(4em) 
				[end];
		}

		.egw_fw_app__main_content {
			grid-row: main / aside-header;
			grid-column: start / end;
		}

		.egw_fw_app__aside {
			grid-row: aside-header / footer;
		}

		.egw_fw_app__aside_header {
			grid-row: aside-header / aside;
		}

		.egw_fw_app__aside_content {
			grid-row: aside / aside-footer;
		}

		.egw_fw_app__aside_footer {
			grid-row: aside-footer / footer;
		}

		.egw_fw_app__footer {
			grid-column: start / end;
		}
	}
`