From 72772881b614d30109d0bc24d33b97854d94c670 Mon Sep 17 00:00:00 2001
From: James Lyne <jim+github@not-null.co.uk>
Date: Thu, 27 May 2021 17:34:14 +0100
Subject: [PATCH] Split button placeholder into mixins for easier use with
 non-button elements

---
 src/scss/_mixins.scss       | 66 +++++++++++++++++++++++++++++++++++++
 src/scss/_placeholders.scss | 54 +++---------------------------
 2 files changed, 71 insertions(+), 49 deletions(-)

diff --git a/src/scss/_mixins.scss b/src/scss/_mixins.scss
index deb1d1d..85b371a 100644
--- a/src/scss/_mixins.scss
+++ b/src/scss/_mixins.scss
@@ -10,3 +10,69 @@
 		@content;
 	}
 }
+
+@mixin button {
+	appearance: none;
+	border: none;
+	box-shadow: none;
+	background-color: var(--background-base);
+	color: var(--text-base);
+	border-radius: var(--border-radius);
+	cursor: pointer;
+	display: block;
+	text-align: center;
+	position: relative;
+	transition: color 0.2s ease-in, background-color 0.2s ease-in;
+	font-size: 1.6rem;
+	font-family: Raleway, sans-serif;
+	box-sizing: border-box;
+
+	.svg-icon {
+		display: inline-block;
+		width: 3rem;
+		height: 3rem;
+		pointer-events: none;
+
+		&:only-child {
+			position: absolute;
+			top: 0;
+			right: 0;
+			bottom: 0;
+			left: 0;
+			margin: auto;
+		}
+	}
+}
+
+@mixin button-hovered {
+	background-color: var(--background-hover);
+	color: var(--text-hover);
+}
+
+@mixin button-focused {
+	outline: var(--outline-focus) auto thick !important;
+	background-color: var(--background-base);
+	color: var(--text-base);
+	z-index: 1;
+}
+
+@mixin button-active {
+	background-color: var(--background-active);
+	color: var(--text-active);
+}
+
+@mixin button-disabled {
+	background-color: var(--background-disabled);
+	color: var(--text-disabled);
+	cursor: not-allowed;
+
+	&:hover, &:active {
+		background-color: var(--background-disabled);
+		color: var(--text-disabled);
+	}
+
+	@include focus {
+		background-color: var(--background-disabled);
+		color: var(--text-disabled);
+	}
+}
\ No newline at end of file
diff --git a/src/scss/_placeholders.scss b/src/scss/_placeholders.scss
index c364aa5..a5fc4bd 100644
--- a/src/scss/_placeholders.scss
+++ b/src/scss/_placeholders.scss
@@ -17,66 +17,22 @@
 @import "mixins";
 
 %button {
-	appearance: none;
-	border: none;
-	box-shadow: none;
-	background-color: var(--background-base);
-	color: var(--text-base);
-	border-radius: var(--border-radius);
-	cursor: pointer;
-	display: block;
-	text-align: center;
-	position: relative;
-	transition: color 0.2s ease-in, background-color 0.2s ease-in;
-	font-size: 1.6rem;
-	font-family: Raleway, sans-serif;
+	@include button;
 
 	&:hover, &.active {
-		background-color: var(--background-hover);
-		color: var(--text-hover);
+		@include button-hovered;
 	}
 
 	@include focus {
-		outline: var(--outline-focus) auto thick !important;
-		background-color: var(--background-base);
-		color: var(--text-base);
-		z-index: 1;
+		@include button-focused;
 	}
 
 	&:active {
-		background-color: var(--background-active);
-		color: var(--text-active);
+		@include button-active;
 	}
 
 	&[disabled], &.disabled {
-		background-color: var(--background-disabled);
-		color: var(--text-disabled);
-		cursor: not-allowed;
-
-		&:hover, &:active {
-			background-color: var(--background-disabled);
-			color: var(--text-disabled);
-		}
-
-		@include focus {
-			background-color: var(--background-disabled);
-			color: var(--text-disabled);
-		}
-	}
-
-	.svg-icon {
-		display: inline-block;
-		width: 3rem;
-		height: 3rem;
-
-		&:only-child {
-			position: absolute;
-			top: 0;
-			right: 0;
-			bottom: 0;
-			left: 0;
-			margin: auto;
-		}
+		@include button-disabled;
 	}
 }