Merged core back into main project

2017-04-02 19:56:47 -04:00
parent 67bd4acdeb
commit 1ced194cd2
34 changed files with 9452 additions and 44 deletions
--- a/client/scss/components/nav.scss
+++ b/client/scss/components/nav.scss
@@ -0,0 +1,182 @@
+
+.nav {
+	align-items: stretch;
+	background-color: mc($primary, '500');
+	display: flex;
+	min-height: 50px;
+	position: relative;
+	text-align: center;
+	box-shadow: 0 2px 3px rgba(mc($primary, '500'), 0.2);
+	z-index: 2;
+	color: #FFF;
+
+	@each $color, $colorvalue in $material-colors {
+		&.is-#{$color} {
+			background-color: mc($color, '500');
+			box-shadow: 0 2px 3px rgba(mc($color, '500'), 0.2);
+
+			.nav-item {
+
+				.button {
+					border: 1px solid mc($color, '900');
+					background-color: mc($color, '800');
+
+					&.is-outlined {
+						background-color: mc($color, '600');
+						border-color: mc($color, '800');
+						color: mc($color, '100');
+					}
+
+					&:hover {
+						border-color: mc($color, '900');
+						background-color: mc($color, '900');
+					}
+
+				}
+
+			}
+
+		}
+	}
+
+}
+
+.nav-left {
+	align-items: stretch;
+	display: flex;
+	flex-basis: 0;
+	flex-grow: 1;
+	justify-content: flex-start;
+	overflow: hidden;
+	overflow-x: auto;
+	white-space: nowrap;
+}
+
+.nav-center {
+	align-items: stretch;
+	display: flex;
+	justify-content: center;
+	margin-left: auto;
+	margin-right: auto;
+}
+
+.nav-right {
+	@include tablet {
+		align-items: stretch;
+		display: flex;
+		flex-basis: 0;
+		flex-grow: 1;
+		justify-content: flex-end;
+	}
+}
+
+.nav-item {
+	align-items: center;
+	display: flex;
+	justify-content: center;
+	padding: 0 10px;
+
+	// LINKS
+
+	@at-root .nav-item a, a.nav-item {
+		color: mc($primary, '50');
+		transition: color .4s ease;
+		cursor: pointer;
+
+		&:hover {
+			color: mc($primary, '200');
+			text-decoration: none;
+		}
+
+	}
+
+	// LOGO
+
+	img {
+		max-height: 34px;
+	}
+
+	// HEADERS
+
+	h1 {
+		font-size: 16px;
+		font-weight: 400;
+		letter-spacing: 0.5px;
+		text-transform: uppercase;
+		transition: color .4s ease;
+		color: #FFF;
+		padding-left: 10px;
+
+		i {
+			margin-right: 8px;
+		}
+
+		&:hover {
+			color: mc('indigo', '100');
+		}
+	}
+
+	@at-root h2.nav-item, .nav-item h2 {
+		color: mc($primary, '50');
+	}
+
+	// BUTTONS
+
+	.button {
+		border: 1px solid mc($primary, '900');
+		background-color: mc($primary, '800');
+		transition: all .4s ease;
+		color: #FFF;
+		border-radius: 0;
+
+		&:first-child {
+			border-top-left-radius: 4px;
+			border-bottom-left-radius: 4px;
+		}
+
+		&:last-child {
+			border-top-right-radius: 4px;
+			border-bottom-right-radius: 4px;
+		}
+
+		&.is-outlined {
+			background-color: mc($primary, '600');
+			border-color: mc($primary, '800');
+			color: mc($primary, '100');
+		}
+
+		&:hover {
+			border-color: mc($primary, '900');
+			background-color: mc($primary, '900');
+			color: #FFF;
+		}
+
+	}
+
+	.button + .button {
+		margin-left: 1px;
+	}
+
+	// INPUTS
+
+	.control {
+
+		input[type=text] {
+			background-color: mc($primary, '800');
+			border-color: mc($primary, '400');
+			color: mc($primary, '50');
+
+			&:focus {
+				border-color: mc($primary, '200');
+				box-shadow: inset 0 0 5px 0 rgba(mc($primary, '900'), 0.5);
+			}
+
+			@include placeholder {
+				color: mc($primary, '200');
+			}
+
+		}
+
+	}
+
+}