From 254c890cd0903a4e19d9744e95d44893eb823159 Mon Sep 17 00:00:00 2001
From: James Lyne <jim+github@not-null.co.uk>
Date: Sun, 20 Dec 2020 14:53:16 +0000
Subject: [PATCH] Improve disabled button styles

---
 src/scss/_placeholders.scss     | 15 +++++++++++++--
 src/scss/_variables.scss        |  6 +++++-
 src/scss/leaflet/_controls.scss | 12 +++++++++++-
 3 files changed, 29 insertions(+), 4 deletions(-)

diff --git a/src/scss/_placeholders.scss b/src/scss/_placeholders.scss
index b088e85..afeb315 100644
--- a/src/scss/_placeholders.scss
+++ b/src/scss/_placeholders.scss
@@ -28,12 +28,12 @@
 	transition: color 0.2s ease-in, background-color 0.2s ease-in;
 
 	&:hover, &.active {
-		background-color: #cccccc;
+		background-color: $global-focus-color;
 		color: #222222;
 	}
 
 	&:focus {
-		outline-color: #cccccc;
+		outline-color: $global-focus-color;
 		outline-width: 0.2rem;
 	}
 
@@ -42,6 +42,17 @@
 		color: #121212;
 	}
 
+	&[disabled], &.disabled {
+		background-color: $global-disabled-background;
+		color: $global-disabled-text-color;
+		cursor: not-allowed;
+
+		&:hover, &:focus, &:active {
+			background-color: $global-disabled-background;
+			color: $global-disabled-text-color;
+		}
+	}
+
 	.svg-icon {
 		display: inline-block;
 		width: 3rem;
diff --git a/src/scss/_variables.scss b/src/scss/_variables.scss
index 413c1f6..74b42f4 100644
--- a/src/scss/_variables.scss
+++ b/src/scss/_variables.scss
@@ -17,4 +17,8 @@
 $global-text-color: #cccccc;
 $global-border-radius: 1rem;
 $global-background: #222222;
-$global-focus-color: #cccccc;
\ No newline at end of file
+$global-focus-color: #cccccc;
+$global-border-color: #333333;
+
+$global-disabled-background: #555555;
+$global-disabled-text-color: #bbbbbb;
\ No newline at end of file
diff --git a/src/scss/leaflet/_controls.scss b/src/scss/leaflet/_controls.scss
index 15fba0b..bf94098 100644
--- a/src/scss/leaflet/_controls.scss
+++ b/src/scss/leaflet/_controls.scss
@@ -35,7 +35,17 @@
 
 	a {
 		border-radius: 0;
-		border-bottom: 0.1rem solid #333333;
+		border-bottom: 0.1rem solid $global-border-color;
+
+		&.leaflet-disabled {
+			background-color: $global-disabled-background;
+			cursor: not-allowed;
+
+			&:hover {
+				color: $global-disabled-text-color;
+				border-bottom-color: $global-border-color;
+			}
+		}
 	}
 }