From bfaa6d8dcc04c10d2c7c9fb88dc9be283cc3b058 Mon Sep 17 00:00:00 2001
From: Alasdair Smith <ali@alasdairsmith.co.uk>
Date: Tue, 29 May 2018 11:41:08 +0100
Subject: [PATCH 01/10] Improve styling of buttons

---
 .../stylesheets/app/editor/toolbar.less       | 25 ++++++++++++++++++-
 1 file changed, 24 insertions(+), 1 deletion(-)

diff --git a/services/web/public/stylesheets/app/editor/toolbar.less b/services/web/public/stylesheets/app/editor/toolbar.less
index a73f46abc3..f4521c1600 100644
--- a/services/web/public/stylesheets/app/editor/toolbar.less
+++ b/services/web/public/stylesheets/app/editor/toolbar.less
@@ -184,8 +184,12 @@
 	}
 }
 
+/**************************************
+	Toggle Switch
+***************************************/
+
 .toggle-wrapper {
-	width: 200px;
+	min-width: 200px;
 	height: 24px;
 }
 
@@ -241,3 +245,22 @@
   transform: translate(100%);
   border-radius: 0 @btn-border-radius-base @btn-border-radius-base 0;
 }
+
+/**************************************
+	Formatting buttons
+***************************************/
+.formatting-btn {
+	padding: 0;
+	min-width: 32px;
+	height: 100%;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	box-shadow: none;
+	border: none;
+	border-left: 1px solid #ccc;
+
+	&:last-child {
+		border-right: 1px solid #ccc;
+	}
+}

From 7384cfba1a411149e0c550bfa5f2191823477329 Mon Sep 17 00:00:00 2001
From: Alasdair Smith <ali@alasdairsmith.co.uk>
Date: Tue, 29 May 2018 16:56:38 +0100
Subject: [PATCH 02/10] Style wrapped buttons so the toolbar can be resized

---
 services/web/public/stylesheets/app/editor.less       |  1 +
 .../web/public/stylesheets/app/editor/toolbar.less    | 11 +++++++++++
 2 files changed, 12 insertions(+)

diff --git a/services/web/public/stylesheets/app/editor.less b/services/web/public/stylesheets/app/editor.less
index 0e3d48cf87..af3063cf22 100644
--- a/services/web/public/stylesheets/app/editor.less
+++ b/services/web/public/stylesheets/app/editor.less
@@ -92,6 +92,7 @@
 .toolbar-editor {
 	height: @editor-toolbar-height;
 	background-color: @editor-toolbar-bg;
+	overflow: hidden;
 }
 
 .loading-screen {
diff --git a/services/web/public/stylesheets/app/editor/toolbar.less b/services/web/public/stylesheets/app/editor/toolbar.less
index f4521c1600..e5601fe4d3 100644
--- a/services/web/public/stylesheets/app/editor/toolbar.less
+++ b/services/web/public/stylesheets/app/editor/toolbar.less
@@ -249,9 +249,14 @@
 /**************************************
 	Formatting buttons
 ***************************************/
+.button-measurer-wrapper {
+	display: flex;
+}
+
 .formatting-btn {
 	padding: 0;
 	min-width: 32px;
+	width: 32px;
 	height: 100%;
 	display: flex;
 	align-items: center;
@@ -259,8 +264,14 @@
 	box-shadow: none;
 	border: none;
 	border-left: 1px solid #ccc;
+	border-radius: 0;
 
 	&:last-child {
 		border-right: 1px solid #ccc;
 	}
 }
+
+.formatting-btn-icon {
+	font-style: normal;
+	line-height: 1.5;
+}

From aaf5da877e07ff672cd74014e0561c2ad4289155 Mon Sep 17 00:00:00 2001
From: Alasdair Smith <ali@alasdairsmith.co.uk>
Date: Thu, 31 May 2018 13:31:24 +0100
Subject: [PATCH 03/10] Style different buttons

---
 .../stylesheets/app/editor/toolbar.less       | 20 +++++++++++++++----
 1 file changed, 16 insertions(+), 4 deletions(-)

diff --git a/services/web/public/stylesheets/app/editor/toolbar.less b/services/web/public/stylesheets/app/editor/toolbar.less
index e5601fe4d3..008536152b 100644
--- a/services/web/public/stylesheets/app/editor/toolbar.less
+++ b/services/web/public/stylesheets/app/editor/toolbar.less
@@ -249,14 +249,15 @@
 /**************************************
 	Formatting buttons
 ***************************************/
-.button-measurer-wrapper {
+formatting-buttons {
 	display: flex;
+	width: 100%;
+	overflow: hidden;
 }
 
 .formatting-btn {
 	padding: 0;
-	min-width: 32px;
-	width: 32px;
+	margin: 3px 0;
 	height: 100%;
 	display: flex;
 	align-items: center;
@@ -265,12 +266,23 @@
 	border: none;
 	border-left: 1px solid #ccc;
 	border-radius: 0;
+}
 
-	&:last-child {
+.formatting-btn-with-icon {
+	min-width: 32px;
+	width: 32px;
+
+	&:nth-child(-1) {
 		border-right: 1px solid #ccc;
 	}
 }
 
+.formatting-btn-overflowed {
+	margin-left: auto;
+	padding-left: 5px;
+	padding-right: 5px;
+}
+
 .formatting-btn-icon {
 	font-style: normal;
 	line-height: 1.5;

From c5f62d3aa3ad341b90f63e0a0b2377832382a296 Mon Sep 17 00:00:00 2001
From: Alasdair Smith <ali@alasdairsmith.co.uk>
Date: Thu, 31 May 2018 16:10:40 +0100
Subject: [PATCH 04/10] Style dropdown & clean up naming

---
 .../stylesheets/app/editor/toolbar.less       | 38 ++++++++++++-------
 1 file changed, 24 insertions(+), 14 deletions(-)

diff --git a/services/web/public/stylesheets/app/editor/toolbar.less b/services/web/public/stylesheets/app/editor/toolbar.less
index 008536152b..55303a64c6 100644
--- a/services/web/public/stylesheets/app/editor/toolbar.less
+++ b/services/web/public/stylesheets/app/editor/toolbar.less
@@ -257,7 +257,6 @@ formatting-buttons {
 
 .formatting-btn {
 	padding: 0;
-	margin: 3px 0;
 	height: 100%;
 	display: flex;
 	align-items: center;
@@ -266,24 +265,35 @@ formatting-buttons {
 	border: none;
 	border-left: 1px solid #ccc;
 	border-radius: 0;
-}
 
-.formatting-btn-with-icon {
-	min-width: 32px;
-	width: 32px;
+	&--icon {
+		min-width: 32px;
+		width: 32px;
 
-	&:nth-child(-1) {
-		border-right: 1px solid #ccc;
+		&:last-of-type {
+			border-right: 1px solid @formatting-btn-border;
+		}
+	}
+
+	&--more {
+		padding-left: 9px;
+		padding-right: 9px;
 	}
 }
 
-.formatting-btn-overflowed {
-	margin-left: auto;
-	padding-left: 5px;
-	padding-right: 5px;
-}
-
-.formatting-btn-icon {
+.formatting-icon {
 	font-style: normal;
 	line-height: 1.5;
 }
+
+.formatting-more {
+	margin-left: auto;
+}
+
+.formatting-menu {
+	min-width: auto;
+
+	.formatting-menu-item {
+		float: left;
+	}
+}

From 611a6f9c0bb18dcb93dd6a602886a6cd191ac888 Mon Sep 17 00:00:00 2001
From: Alasdair Smith <ali@alasdairsmith.co.uk>
Date: Thu, 31 May 2018 16:26:40 +0100
Subject: [PATCH 05/10] Reduce width of overflowed button menu

---
 services/web/public/stylesheets/app/editor/toolbar.less | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/services/web/public/stylesheets/app/editor/toolbar.less b/services/web/public/stylesheets/app/editor/toolbar.less
index 55303a64c6..d4162aeb5a 100644
--- a/services/web/public/stylesheets/app/editor/toolbar.less
+++ b/services/web/public/stylesheets/app/editor/toolbar.less
@@ -292,8 +292,13 @@ formatting-buttons {
 
 .formatting-menu {
 	min-width: auto;
+	max-width: 130px;
 
 	.formatting-menu-item {
 		float: left;
+
+		&:nth-of-type(4n + 1) .formatting-btn {
+			border-left: none;
+		}
 	}
 }

From 12d7eb8a46f212853fc1d5efc883ab84aa9f4491 Mon Sep 17 00:00:00 2001
From: Alasdair Smith <ali@alasdairsmith.co.uk>
Date: Thu, 31 May 2018 17:47:55 +0100
Subject: [PATCH 06/10] Adjust styling to work with wrapper

---
 services/web/public/stylesheets/app/editor/toolbar.less | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/services/web/public/stylesheets/app/editor/toolbar.less b/services/web/public/stylesheets/app/editor/toolbar.less
index d4162aeb5a..f1faddb7a9 100644
--- a/services/web/public/stylesheets/app/editor/toolbar.less
+++ b/services/web/public/stylesheets/app/editor/toolbar.less
@@ -249,12 +249,15 @@
 /**************************************
 	Formatting buttons
 ***************************************/
-formatting-buttons {
-	display: flex;
+.formatting-buttons {
 	width: 100%;
 	overflow: hidden;
 }
 
+.formatting-buttons-wrapper {
+	display: flex;
+}
+
 .formatting-btn {
 	padding: 0;
 	height: 100%;

From ea18d606c41bec4b2be644598481377c352019ae Mon Sep 17 00:00:00 2001
From: Alasdair Smith <ali@alasdairsmith.co.uk>
Date: Fri, 1 Jun 2018 13:19:00 +0100
Subject: [PATCH 07/10] Nicer v2 styles

---
 .../web/public/stylesheets/app/editor/toolbar.less  | 13 ++++++++++++-
 .../public/stylesheets/core/_common-variables.less  |  6 ++++++
 .../web/public/stylesheets/core/ol-variables.less   |  6 ++++++
 3 files changed, 24 insertions(+), 1 deletion(-)

diff --git a/services/web/public/stylesheets/app/editor/toolbar.less b/services/web/public/stylesheets/app/editor/toolbar.less
index f1faddb7a9..55e581c3d6 100644
--- a/services/web/public/stylesheets/app/editor/toolbar.less
+++ b/services/web/public/stylesheets/app/editor/toolbar.less
@@ -259,6 +259,8 @@
 }
 
 .formatting-btn {
+	color: @formatting-btn-color;
+	background-color: @formatting-btn-bg;
 	padding: 0;
 	height: 100%;
 	display: flex;
@@ -266,9 +268,13 @@
 	justify-content: center;
 	box-shadow: none;
 	border: none;
-	border-left: 1px solid #ccc;
+	border-left: 1px solid @formatting-btn-border;
 	border-radius: 0;
 
+	&:hover {
+		color: @formatting-btn-color;
+	}
+
 	&--icon {
 		min-width: 32px;
 		width: 32px;
@@ -296,10 +302,15 @@
 .formatting-menu {
 	min-width: auto;
 	max-width: 130px;
+	background-color: @formatting-menu-bg;
 
 	.formatting-menu-item {
 		float: left;
 
+		.formatting-btn {
+			border-right: none;
+		}
+
 		&:nth-of-type(4n + 1) .formatting-btn {
 			border-left: none;
 		}
diff --git a/services/web/public/stylesheets/core/_common-variables.less b/services/web/public/stylesheets/core/_common-variables.less
index 033ce9c1bf..5d08d9f95d 100644
--- a/services/web/public/stylesheets/core/_common-variables.less
+++ b/services/web/public/stylesheets/core/_common-variables.less
@@ -941,6 +941,12 @@
 @toggle-switch-bg                  : @gray-lightest;
 @toggle-switch-highlight-color     : @brand-primary;
 
+// Formatting buttons
+@formatting-btn-color             : @btn-default-color;
+@formatting-btn-bg                : @btn-default-bg;
+@formatting-btn-border            : @btn-default-border;
+@formatting-menu-bg               : @btn-default-bg;
+
 // Chat
 @chat-bg                          : transparent;
 @chat-message-color               : @text-color;
diff --git a/services/web/public/stylesheets/core/ol-variables.less b/services/web/public/stylesheets/core/ol-variables.less
index 3d3d4468fd..114d07a5b1 100644
--- a/services/web/public/stylesheets/core/ol-variables.less
+++ b/services/web/public/stylesheets/core/ol-variables.less
@@ -244,6 +244,12 @@
 @toggle-switch-radius-left         : @btn-border-radius-base 0 0 @btn-border-radius-base;
 @toggle-switch-radius-right        : 0 @btn-border-radius-base @btn-border-radius-base 0;
 
+// Formatting buttons
+@formatting-btn-color             : #FFF;
+@formatting-btn-bg                : @ol-blue-gray-5;
+@formatting-btn-border            : @ol-blue-gray-4;
+@formatting-menu-bg               : @ol-blue-gray-5;
+
 // Chat
 @chat-bg                          : @ol-blue-gray-5;
 @chat-message-color               : #FFF;

From 9ae92dbeef614436f3ecc21544577b318d87740b Mon Sep 17 00:00:00 2001
From: Alasdair Smith <ali@alasdairsmith.co.uk>
Date: Fri, 1 Jun 2018 13:45:47 +0100
Subject: [PATCH 08/10] Small icon & math icon styling

---
 services/web/public/stylesheets/app/editor/toolbar.less | 9 +++++++++
 1 file changed, 9 insertions(+)

diff --git a/services/web/public/stylesheets/app/editor/toolbar.less b/services/web/public/stylesheets/app/editor/toolbar.less
index 55e581c3d6..2f34e7a258 100644
--- a/services/web/public/stylesheets/app/editor/toolbar.less
+++ b/services/web/public/stylesheets/app/editor/toolbar.less
@@ -293,6 +293,15 @@
 .formatting-icon {
 	font-style: normal;
 	line-height: 1.5;
+
+	&--small {
+		font-size: small;
+		line-height: 1.9;
+	}
+
+	&--serif {
+		font-family: @font-family-serif;
+	}
 }
 
 .formatting-more {

From ad13eccfa71163714a1b4c07fc0ac1b024ba8d73 Mon Sep 17 00:00:00 2001
From: Alasdair Smith <ali@alasdairsmith.co.uk>
Date: Fri, 1 Jun 2018 15:09:15 +0100
Subject: [PATCH 09/10] Flatten rules for readability

---
 .../stylesheets/app/editor/toolbar.less       | 61 ++++++++++---------
 1 file changed, 31 insertions(+), 30 deletions(-)

diff --git a/services/web/public/stylesheets/app/editor/toolbar.less b/services/web/public/stylesheets/app/editor/toolbar.less
index 2f34e7a258..45a0384381 100644
--- a/services/web/public/stylesheets/app/editor/toolbar.less
+++ b/services/web/public/stylesheets/app/editor/toolbar.less
@@ -274,34 +274,34 @@
 	&:hover {
 		color: @formatting-btn-color;
 	}
+}
 
-	&--icon {
-		min-width: 32px;
-		width: 32px;
+.formatting-btn--icon {
+	min-width: 32px;
+	width: 32px;
+}
 
-		&:last-of-type {
-			border-right: 1px solid @formatting-btn-border;
-		}
-	}
+.formatting-btn--icon:last-of-type {
+	border-right: 1px solid @formatting-btn-border;
+}
 
-	&--more {
-		padding-left: 9px;
-		padding-right: 9px;
-	}
+.formatting-btn--more {
+	padding-left: 9px;
+	padding-right: 9px;
 }
 
 .formatting-icon {
 	font-style: normal;
 	line-height: 1.5;
+}
 
-	&--small {
-		font-size: small;
-		line-height: 1.9;
-	}
+.formatting-icon--small {
+	font-size: small;
+	line-height: 1.9;
+}
 
-	&--serif {
-		font-family: @font-family-serif;
-	}
+.formatting-icon--serif {
+	font-family: @font-family-serif;
 }
 
 .formatting-more {
@@ -312,16 +312,17 @@
 	min-width: auto;
 	max-width: 130px;
 	background-color: @formatting-menu-bg;
-
-	.formatting-menu-item {
-		float: left;
-
-		.formatting-btn {
-			border-right: none;
-		}
-
-		&:nth-of-type(4n + 1) .formatting-btn {
-			border-left: none;
-		}
-	}
+}
+
+.formatting-menu-item {
+	float: left;
+}
+
+.formatting-menu-item > .formatting-btn {
+	border-right: none;
+}
+
+// Disable border on left-most icon in menu
+.formatting-menu-item:nth-of-type(4n + 1) > .formatting-btn {
+	border-left: none;
 }

From c4c94419954ea6be10540a651742a7b28203cdab Mon Sep 17 00:00:00 2001
From: Alasdair Smith <ali@alasdairsmith.co.uk>
Date: Tue, 5 Jun 2018 14:55:32 +0100
Subject: [PATCH 10/10] Adjust caret down

---
 services/web/public/stylesheets/app/editor/toolbar.less | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/services/web/public/stylesheets/app/editor/toolbar.less b/services/web/public/stylesheets/app/editor/toolbar.less
index 45a0384381..4006b56a7b 100644
--- a/services/web/public/stylesheets/app/editor/toolbar.less
+++ b/services/web/public/stylesheets/app/editor/toolbar.less
@@ -288,6 +288,10 @@
 .formatting-btn--more {
 	padding-left: 9px;
 	padding-right: 9px;
+
+	.caret {
+		margin-top: 1px;
+	}
 }
 
 .formatting-icon {