graphicek/client/src/assets/pages/_dashboard-page.scss

.dashboard {
	height: 100%;
	overflow: auto;
	display: flex;
	flex-direction: column;
}

.dashboard-head {
	display: flex;
	align-items: center;
	margin-left: auto;
	flex: 1;
	justify-content: flex-end;

	&.vertical {
		button.icon {
			margin-left: 0.25rem;
		}
	}

	.dashboard-switch {
		flex: 1;
		display: flex;
		align-items: center;

		button {
			margin-left: 0.25rem;
			font-size: 125%;
		}
	}

	.spacer {
		margin: 0 1rem;
		width: 1px;
		background: var(--header-spacer-color);
		height: 20px;
	}

	.filter-button {
		font-size: 125%;
		cursor: pointer;
		display: flex;
		align-items: center;
		margin-left: 0.5rem;
	}
}

.filters-panel {
	position: fixed;
	right: 0;
	top: 0;
	bottom: 0;
	z-index: 3;
	width: 15rem;
	display: flex;
	max-width: 100%;
	overflow: auto;

	.inner {
		background-color: var(--box-bg-color);
		padding: 0.25rem 0.5rem;
		flex: 1;
	}

	.shadow {
		background: var(--filters-menu-shadow);
		width: 8px;
		flex-shrink: 0;
		flex-grow: 0;
	}

	.filter-close {
		cursor: pointer;
		font-size: 150%;
	}
}