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

Universal javascript client application for patternplate

.navigation {
	height: 100vh;
	position: relative;
	z-index: 2;
	display: flex;
	flex-direction: column;
	> .navigation-tree {
		flex-grow: 1;
		flex-shrink: 1;
		overflow-x: hidden;
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
		> .navigation-item {
			&:first-child {
				border-top: none;
			}
		}
		.navigation-tree {
			border-left: @nav-stream-width solid fadeout(@active-color, 50%);
		}
	}
}

.navigation-item {
	&&--pattern {
		.navigation-link {
			&.child-active {
				border-color: @active-color;
			}
		}
	}
}

.navigation-toolbar {
	z-index: 1;
	display: flex;
	min-height: @nav-toolbar-height;
	background: @root-background;
	box-shadow: @shadow-up;
	.slim & {
		flex-wrap: wrap;
		justify-content: center;
		padding: 10px 0;
	}
	&__container {
		display: flex;
		align-items: center;
		flex-grow: 1;
		padding: 5px;
	}
	&__action {
		display: none;
		flex-grow: 0;
		flex-shrink: 0;
		align-items: center;
		justify-content: center;
		margin-left: auto;
		width: 30px;
		transition: .3s width ease-in-out;
		.slim & {
			width: 50px;
			transition: .3s .3s width ease-in-out;
		}
		@media screen and (min-width: 500px) {
			display: flex;
		}
	}
	&__links {
		display: flex;
		width: 100%;
		padding: 0;
		margin: 0;
		list-style-type: none;
		@media screen and (min-width: 500px) {
			.slim & {
				flex-wrap: wrap;
				justify-content: center;
			}
		}
	}
	&__link {
		@media screen and (min-width: 500px) {
			.slim & {
				font-size: .9em;
			}
		}
		&:not(:last-child) {
			margin-right: 5px;
			@media screen and (min-width: 500px) {
				.slim & {
					margin-right: 0;
					margin-bottom: 5px;
				}
			}
		}
	}
}

.navigation-meta {
	display: flex;
	.slim & {
		width: 100%;
		min-height: 50px;
		justify-content: center;
		align-items: center;
	}
	&__handle {
		position: relative;
		z-index: 2;
		cursor: pointer;
		&:hover {
			color: @active-color;
			transition: .3s color ease-in-out;
		}
	}

	&__data {
		position: absolute;
		top: 100%;
	}
	&__cruft {
		.slim & {
			display: none;
		}
	}
}

.navigation-tree {
	margin: 0;
	padding: 0;
	list-style: none;
	.navigation-tree {
		background-color: @sidebar-bg-sub;
	}
}

.navigation-item {
	position: relative;
	margin: 0;
	// border-top: 1px solid @border-color;
	font-weight: bold;
	width: 100%;
	transition: 150ms margin-left ease-in-out;
	&.anchored {
		position: fixed;
		z-index: 1;
		top: 60px;
		width: 100%;
		margin: 0;
		@media screen and (min-width: 900px) {
			width: @navWidthWide;
		}
		.navigation-link {
			border-right: 1px solid @border-color;
			border-bottom: 1px solid @border-color;
			background-color: @sidebar-bg-hl;
			box-shadow: 0 0 2px;
		}
	}
	&.child-active {
		margin-left: 2px;
		width: ~'calc(100% - 2px)';
		background-color: @sidebar-bg-sub;
	}
	.navigation-item {
		// padding-left: 40px;
		border-top-width: 0;
		font-weight: normal;
	}
	.navigation-link {
		display: block;
		display: flex;
		flex-direction: row;
		align-items: center;
		overflow: hidden;
		padding: 0 20px 0 10px;
		height: 40px;
		color: inherit;
		border-left: @nav-stream-width solid transparent;
		line-height: 30px;
		white-space: nowrap;
		text-decoration: none;
		text-overflow: ellipsis;
		transition: color 0.3s ease-in-out, background-color 0.3s ease-in-out;
		&.child-active {
			border-color: fadeout(@active-color, 50%);
		}
		&.hidden:not(.active) {
			display: none;
		}
		&.active, &:hover, &:focus {
			background-color: @sidebar-bg-hl;
			color: @hover-color;
			outline: none;
		}
		&.active {
			border-left-color: currentcolor;
		}
		&.active,
		&.child-active {
			color: @active-color;
			+ .navigation-tree {
				background-color: @sidebar-bg-sub;
			}
		}
		@media screen and (min-width: 500px) {
			+ .navigation-tree {
				overflow: hidden;
				height: 0;
				padding: 0;
			}
		}
	}
	.icon {
		margin-right: 10px;
		flex-shrink: 0;
		.svg-icon {
			height: 25px;
			width: 25px;
		}
	}
}

.navigation__search-field {
	font-weight: bold;
	height: 40px;
	margin: 5px;
	border: 1px solid @border-color;
	input {
		height: 100%;
		width: 100%;
		border: 0;
		color: inherit;
	}
}

::-webkit-input-placeholder {
   color: inherit;
}
::-moz-placeholder {  /* Firefox 19+ */
	color: inherit;
}
:-ms-input-placeholder {
	color: inherit;
}

.slim {
	.search-field {
		margin-top: -40px;
		&__icon {
			margin-right: 0;
			transition: margin-right .3s ease-in-out;
		}
	}
	.search-field__input {
		color: transparent;
		padding: 0;
		transition: padding .3s ease-in-out, color .3s ease-in-out;
	}
}

.search-field {
	overflow: hidden;
	transition: margin-top .3s .6s ease-in-out;
	&__container {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 100%;
		padding-left: 9px;
		cursor: text;
	}
	&__icon {
		flex-shrink: 0;
		order: -1;
		margin-right: 8px;
		transition: margin-right .3s .3s ease-in-out;
		.svg-icon {
			height: 25px;
			width: 25px;
		}
	}
	&__input {
		background: transparent;
		padding-right: 5px;
		transition: padding .3s .3s ease-in-out, color .3s .3s ease-in-out;
		&:focus {
			outline: none;
			+ .search-field__icon {
				color: @active-color;
			}
		}
	}
}

// Slim is only for wide(r) screens
@media screen and (min-width: 500px) {
	.slim {
		.navigation-item {
			margin: 0;
		}
		.navigation-tree .navigation-tree {
			position: absolute;
			z-index: 1;
			top: 0;
			left: 100%;
			padding-bottom: 0;
			box-shadow: 0 0 7px rgba(0,0,0,0.1);
			border-left: none;
			width: auto !important;
			.navigation-item {
				padding-left: 0;
			}
		}
		> .navigation-tree {
			overflow: visible;
			// overflow-y: auto;
			> .navigation-item > .navigation-tree {
				// margin-left: 2px;
				width: 100%;
			}
		}
		.navigation__search-field {
			border-color: transparent;
		}
	}

	.navigation:not(.slim) .navigation-item a.active + .navigation-tree,
	.navigation:not(.slim) .navigation-item.child-active > .navigation-tree,
	.slim .navigation-item:hover > .navigation-tree,
	.slim > .navigation-tree .navigation-item:hover > .navigation-tree {
		overflow: visible;
		height: auto;
	}
}