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/button.scss
+++ b/client/scss/components/button.scss
@@ -0,0 +1,122 @@
+.button {
+	background-color: mc('orange','600');
+	color: #FFF;
+	border: 1px solid mc('orange','700');
+	border-radius: 3px;
+	display: inline-flex;
+	height: 30px;
+	align-items: center;
+	padding: 0 15px;
+	font-size: 13px;
+	font-weight: 600;
+	font-family: $core-font-standard;
+	margin: 0;
+	transition: all .4s ease;
+	cursor: pointer;
+	text-decoration: none;
+	text-transform: uppercase;
+
+	span {
+		font-weight: 600;
+		display: inline-flex;
+		align-items: center;
+		line-height: 14px;
+		height: 14px;
+	}
+
+	i {
+		margin-right: 8px;
+		font-size: 14px;
+		line-height: 14px;
+		height: 14px;
+	}
+
+	&:focus {
+		outline: none;
+		border-color: #FFF;
+	}
+
+	&:hover {
+		background-color: mc('orange','800');
+		text-decoration: none;
+	}
+
+	@each $color, $colorvalue in $material-colors {
+		&.is-#{$color} {
+			background-color: mc($color, '600');
+			border-color: mc($color,'700');
+			color: #FFF;
+
+			&.is-outlined {
+				background-color: #FFF;
+				color: mc($color,'700');
+			}
+
+			&.is-inverted {
+				background-color: rgba(mc($color, '800'), 0);
+				border-color: mc($color, '500');
+			}
+
+			&:hover {
+				background-color: mc($color,'800');
+				color: #FFF;
+				animation: none;
+			}
+		}
+
+	}
+
+	&.is-icon-only {
+		i {
+			margin-right: 0;
+		}
+	}
+
+	&.is-featured {
+		animation: btnInvertedPulse .6s ease alternate infinite;
+	}
+
+	&.is-disabled, &:disabled {
+		background-color: mc('grey', '300');
+		border: 1px solid mc('grey','400');
+		color: mc('grey', '500');
+		cursor: default;
+    transition: none;
+
+    &:hover {
+      background-color: mc('grey', '300') !important;
+      color: mc('grey', '500') !important;
+    }
+	}
+
+}
+
+.button-group {
+
+	.button {
+		border-radius: 0;
+		margin-left: 1px;
+
+		&:first-child {
+			margin-left: 0;
+			border-top-left-radius: 4px;
+			border-bottom-left-radius: 4px;
+		}
+
+		&:last-child {
+			border-top-right-radius: 4px;
+			border-bottom-right-radius: 4px;
+		}
+
+	}
+
+}
+
+@include keyframes(btnInvertedPulse) {
+	0% {
+		background-color: rgba(mc('grey', '500'), 0);
+	}
+	100% {
+		background-color: rgba(mc('grey', '500'), 0.25);
+	}
+}