From bc64fe6d0d4e2d2ed3494991a4684154757cf35d Mon Sep 17 00:00:00 2001
From: djmaze <djmaze@djmaze.lan>
Date: Fri, 19 Feb 2021 14:40:13 +0100
Subject: [PATCH] Use custom dropdown icon on <select>

---
 dev/External/SquireUI.js          |  3 ++-
 dev/Styles/SquireUI.less          |  9 ++-------
 vendors/bootstrap/less/forms.less | 13 +++++--------
 3 files changed, 9 insertions(+), 16 deletions(-)

diff --git a/dev/External/SquireUI.js b/dev/External/SquireUI.js
index 0b2f8c194..3d1a7d170 100644
--- a/dev/External/SquireUI.js
+++ b/dev/External/SquireUI.js
@@ -366,7 +366,7 @@ class SquireUI
 		this.plain = plain;
 		this.wysiwyg = wysiwyg;
 
-		toolbar.className = 'squire-toolbar';
+		toolbar.className = 'squire-toolbar btn-toolbar';
 		let touchTap;
 		for (let group in actions) {
 			if ('bidi' == group && !rl.settings.app('allowHtmlEditorBitiButtons')) {
@@ -386,6 +386,7 @@ class SquireUI
 					ev = 'change';
 				} else if (cfg.select) {
 					input = doc.createElement('select');
+					input.className = 'btn';
 					if (Array.isArray(cfg.select)) {
 						cfg.select.forEach(value => {
 							var option = new Option(value, value);
diff --git a/dev/Styles/SquireUI.less b/dev/Styles/SquireUI.less
index 4d6aab66a..6088d037b 100644
--- a/dev/Styles/SquireUI.less
+++ b/dev/Styles/SquireUI.less
@@ -1,7 +1,6 @@
 
 .squire-toolbar {
 	padding: 2px;
-	box-shadow: none;
 	border-bottom: 1px solid #b6b6b6;
 	background: #EEE;
 	overflow-x: auto;
@@ -9,14 +8,10 @@
 	white-space: nowrap;
 }
 
-.squire-toolbar .btn-group {
-	display: inline-block;
-}
-
 .squire-toolbar select {
 	font-size: 12px;
-	margin: 0;
-	padding: 0;
+	padding-left: 0;
+	text-align: left;
 	vertical-align: middle;
 	width: 7em;
 }
diff --git a/vendors/bootstrap/less/forms.less b/vendors/bootstrap/less/forms.less
index 3f19097d0..fe609a7e7 100644
--- a/vendors/bootstrap/less/forms.less
+++ b/vendors/bootstrap/less/forms.less
@@ -118,15 +118,12 @@ input[type="checkbox"] {
 
 // Make select elements obey height by applying a border
 select {
-  width: 223px; // default input width + 10px of padding that doesn't get applied
+  appearance: none;
+  background: @inputBackground url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' height='10px' width='15px'><text x='0' y='10' fill='rgb(85,85,85)'>▾</text></svg>") right center/1em no-repeat border-box;
   border: 1px solid @inputBorder;
-  background-color: @inputBackground; // Chrome on Linux and Mobile Safari need background-color
-}
-
-// Make multiple select elements height not fixed
-select[multiple],
-select[size] {
-  height: auto;
+  cursor: pointer;
+  padding-right: 1.5em;
+  width: 223px; // default input width + 10px of padding that doesn't get applied
 }
 
 // Focus for select, file, radio, and checkbox