X-Git-Url: https://git.njae.me.uk/?a=blobdiff_plain;f=assets%2Fmain%2Fsass%2Fcomponents%2F_button.scss;h=7e085339d94dd4b8ca0aef0b5331187664faf5a2;hb=283508bd265ef3430abc21e0599313c250e57942;hp=b0b4821e2e1fcdc0c56e607a88965e91582f0176;hpb=8af2079e4b096e77ba2f922d6a18224ce01cb7bd;p=editorial.git

diff --git a/assets/main/sass/components/_button.scss b/assets/main/sass/components/_button.scss
index b0b4821..7e08533 100644
--- a/assets/main/sass/components/_button.scss
+++ b/assets/main/sass/components/_button.scss
@@ -1,5 +1,5 @@
 ///
-/// Massively by HTML5 UP
+/// Editorial by HTML5 UP
 /// html5up.net | @ajlkn
 /// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
 ///
@@ -14,54 +14,38 @@
 		@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'
 		));
+		background-color: transparent;
+		border-radius: _size(border-radius);
 		border: 0;
-		border-radius: 0;
+		box-shadow: inset 0 0 0 2px _palette(accent);
+		color: _palette(accent) !important;
 		cursor: pointer;
 		display: inline-block;
 		font-family: _font(family-heading);
-		font-size: 0.8rem;
+		font-size: 0.8em;
 		font-weight: _font(weight-heading);
-		letter-spacing: 0.075em;
-		height: 3rem;
-		line-height: 3rem;
-		padding: 0 2rem;
+		height: 3.5em;
+		letter-spacing: _font(kerning-heading);
+		line-height: 3.5em;
+		padding: 0 2.25em;
 		text-align: center;
 		text-decoration: none;
 		text-transform: uppercase;
 		white-space: nowrap;
 
-		&.icon {
-			&:before {
-				margin-right: 0.5rem;
-			}
+		&:hover {
+			background-color: transparentize(_palette(accent), 0.95);
+		}
 
-			&.solo {
-				position: relative;
-				width: 4rem;
-				height: 4rem;
-				line-height: 4rem;
-				border-radius: 4rem;
-				text-indent: 4rem;
-				overflow: hidden;
-				padding: 0;
-				white-space: nowrap;
+		&:active {
+			background-color: transparentize(_palette(accent), 0.85);
+		}
 
-				&: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;
-				}
+		&.icon {
+			&:before {
+				margin-right: 0.5em;
 			}
 		}
 
@@ -70,28 +54,26 @@
 		}
 
 		&.small {
-			font-size: 0.7rem;
-			height: 2.5rem;
-			line-height: 2.5rem;
-			padding: 0 1.5rem;
+			font-size: 0.6em;
 		}
 
 		&.large {
-			font-size: 0.9rem;
-			height: 3.5rem;
-			line-height: 3.5rem;
-			padding: 0 2.75rem;
+			font-size: 1em;
+			height: 3.65em;
+			line-height: 3.65em;
 		}
 
-		@include breakpoint('<=medium') {
-			font-size: 0.9rem;
-			height: 3.25rem;
-			line-height: 3.25rem;
+		&.primary {
+			background-color: _palette(accent);
+			box-shadow: none;
+			color: _palette(bg) !important;
+
+			&:hover {
+				background-color: lighten(_palette(accent), 3);
+			}
 
-			&.large {
-				font-size: 1rem;
-				height: 3.75rem;
-				line-height: 3.75rem;
+			&:active {
+				background-color: darken(_palette(accent), 3);
 			}
 		}
 
@@ -100,35 +82,4 @@
 			@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
+	}
\ No newline at end of file