patternplate-client/source/assets/style/components/application/index.less

Universal javascript client application for patternplate

.application {
	display: flex;
	width: 100%;
	min-width: 320px;
	font: ~'@{root-font-size}/@{root-line-height} @{root-font-family}';
	color: @root-color;
	background: @root-background;
	&--theme-loading {
		// disable theme switch transitions until we have time to control them
		* {
			transition: none !important;
		}
	}
	@media screen and (max-width: 500px) {
		&--menu-enabled {
			.application__content,
			.application__navigation,
			.application__header {
				transform: translate(0);
			}
		}
	}
	&__content,
	&__navigation {
		display: flex;
		flex-direction: column;
		transition: transform .3s ease-in-out;
		@media screen and (max-width: 500px) {
			display: block;
			position: absolute;
			z-index: 1;
			top: 0;
			bottom: 0;
		}
	}
	&__content {
		display: flex;
		flex-direction: column;
		min-width: 0%; // Weird fix for wrong layout as of FF 38.1.0
		flex: 1;
		overflow-x: hidden;
		@media screen and (max-width: 500px) {
			padding-top: @headerHeight;
		}
	}
	&__content {
		.markdown {
			max-width: 1000px;
		}
		@media screen and (max-width: 900px) {
			width: 70%;
		}
		@media screen and (max-width: 500px) {
			width: 100%;
			left: 100%;
			transform: translateX(-100%);
			// padding: 60px 15px 0 15px;
		}
	}
	&__navigation {
		min-height: 100vh;
		width: 100%;
		transform: translateX(-100%);
		@media screen and (min-width: 500px) {
			width: @navWidthMedium;
			border-right: 1px solid @border-color;
			transform: none;
			transition: .3s .3s width ease-in-out;
			&.slim {
				width: @navWidthSlim;
				transition: .3s width ease-in-out;
			}
		}
		@media screen and (min-width: 900px) {
			width: @navWidthWide;
		}
	}
	&__header {
		@media screen and (max-width: 500px) {
			transform: translateX(100%);
		}
	}

	a {
		text-decoration: none;
		&,
		&:active {
			color: @active-color;
		}
		&:hover {
			color: lighten(@active-color, 15%);
		}
	}

	.button {
		//margin: 0 8px;
		display: inline-block;
		padding: 4px;
		background: transparent;
		border: none;
		color: @active-color;
		vertical-align: middle;
		border: 1px solid @border-color;
		cursor: pointer;
		text-align: center;
		transition: @default-transition;
		&:focus {
			outline: none;
		}
		&:active {
			border-color: currentColor;
		}
		&:hover {
			color: lighten(@active-color, 15%);
			border-color: currentColor;
		}
		&--is-active {
			border-color: currentColor;
		}
		&:disabled {
			cursor: not-allowed;
		}
		.icon {
			margin: 0;
		}
	}
}

.application-container {
	display: flex;
	flex-direction: column;
	min-width: 0%; // Weird fix for wrong layout as of FF 38.1.0
	flex: 1;
	max-height: 100vh;
	overflow-x: hidden;
	-webkit-overflow-scrolling: touch;
	&--home {
		padding: 15px;
		@media screen and (min-width: 500px) {
			padding: 15px 30px;
		}
	}
	&--pattern {
		padding: 0 15px;
		@media screen and (min-width: 500px) {
			padding: 0;
		}
	}
}