X-Git-Url: https://git.njae.me.uk/?a=blobdiff_plain;ds=sidebyside;f=assets%2Fmain%2Fsass%2Fcomponents%2F_button.scss;fp=assets%2Fmain%2Fsass%2Fcomponents%2F_button.scss;h=b0b4821e2e1fcdc0c56e607a88965e91582f0176;hb=8af2079e4b096e77ba2f922d6a18224ce01cb7bd;hp=0000000000000000000000000000000000000000;hpb=d047bc8b5126c4af647c4e508022ca94452fc856;p=editorial.git

diff --git a/assets/main/sass/components/_button.scss b/assets/main/sass/components/_button.scss
new file mode 100644
index 0000000..b0b4821
--- /dev/null
+++ b/assets/main/sass/components/_button.scss
@@ -0,0 +1,134 @@
+///
+/// Massively by HTML5 UP
+/// html5up.net | @ajlkn
+/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
+///
+
+/* Button */
+
+	input[type="submit"],
+	input[type="reset"],
+	input[type="button"],
+	button,
+	.button {
+		@include vendor('appearance', 'none');
+		@include vendor('transition', (
+			'background-color #{_duration(transition)} ease-in-out',
+			'box-shadow #{_duration(transition)} ease-in-out',
+			'color #{_duration(transition)} ease-in-out'
+		));
+		border: 0;
+		border-radius: 0;
+		cursor: pointer;
+		display: inline-block;
+		font-family: _font(family-heading);
+		font-size: 0.8rem;
+		font-weight: _font(weight-heading);
+		letter-spacing: 0.075em;
+		height: 3rem;
+		line-height: 3rem;
+		padding: 0 2rem;
+		text-align: center;
+		text-decoration: none;
+		text-transform: uppercase;
+		white-space: nowrap;
+
+		&.icon {
+			&:before {
+				margin-right: 0.5rem;
+			}
+
+			&.solo {
+				position: relative;
+				width: 4rem;
+				height: 4rem;
+				line-height: 4rem;
+				border-radius: 4rem;
+				text-indent: 4rem;
+				overflow: hidden;
+				padding: 0;
+				white-space: nowrap;
+
+				&:before {
+					position: absolute;
+					display: block;
+					top: 0;
+					left: 0;
+					width: inherit;
+					height: inherit;
+					line-height: inherit;
+					font-size: 1.25rem;
+					margin-right: 0;
+					text-align: center;
+					text-indent: 0;
+				}
+			}
+		}
+
+		&.fit {
+			width: 100%;
+		}
+
+		&.small {
+			font-size: 0.7rem;
+			height: 2.5rem;
+			line-height: 2.5rem;
+			padding: 0 1.5rem;
+		}
+
+		&.large {
+			font-size: 0.9rem;
+			height: 3.5rem;
+			line-height: 3.5rem;
+			padding: 0 2.75rem;
+		}
+
+		@include breakpoint('<=medium') {
+			font-size: 0.9rem;
+			height: 3.25rem;
+			line-height: 3.25rem;
+
+			&.large {
+				font-size: 1rem;
+				height: 3.75rem;
+				line-height: 3.75rem;
+			}
+		}
+
+		&.disabled,
+		&:disabled {
+			@include vendor('pointer-events', 'none');
+			opacity: 0.25;
+		}
+	}
+
+	@mixin color-button($p: null) {
+		$highlight: _palette($p, highlight);
+
+		input[type="submit"],
+		input[type="reset"],
+		input[type="button"],
+		button,
+		.button {
+			background-color: transparent;
+			box-shadow: inset 0 0 0 2px _palette($p, fg-bold);
+			color: _palette($p, fg-bold) !important;
+
+			&:hover {
+				box-shadow: inset 0 0 0 2px _palette($p, accent);
+				color: _palette($p, accent) !important;
+			}
+
+			&.primary {
+				background-color: _palette($p, fg-bold);
+				box-shadow: none;
+				color: _palette($p, bg) !important;
+
+				&:hover {
+					background-color: _palette($p, accent);
+				}
+			}
+		}
+	}
+
+	@include color-button;
\ No newline at end of file