fix(interface): 💄 fix select dropdown arrow

JamesNZL · Jul 16, 2022 · be24484 · be24484
1 parent 2899320
commit be24484
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 1 deletion.
diff --git a/src/style/stylesheet.scss b/src/style/stylesheet.scss
@@ -321,7 +321,7 @@ label {
 			position: absolute;
 			top: 0.0625em;
 			right: 0;
-			margin-inline-end: 10px;
+			margin-inline-end: 20px;
 		}
 	}
 }
@@ -384,6 +384,13 @@ textarea {
 	text-align: center;
 }
 
+select {
+	appearance: none;
+	background-image: var(--select-dropdown-arrow);
+	background-repeat: no-repeat;
+	background-position: right 20px center;
+}
+
 .invalid-input-error,
 .validating-input-status {
 	display: block;

diff --git a/src/style/themes/_theme-map.scss b/src/style/themes/_theme-map.scss
@@ -70,6 +70,9 @@
 		'code-text-colour': $_code-text-colour,
 		'link-text-colour': $_link-text-colour,
 		'link-text-hover-colour': $_link-text-hover-colour,
+
+		// Other
+		'select-dropdown-arrow': url('data:image/svg+xml, <svg width="0.5em" height="0.5em" viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg" fill="rgb(#{red($_text-colour)} #{green($_text-colour)} #{blue($_text-colour)})"><path d="m5.22538,9.17326l-4.93857,-5.11715c-0.58283,-0.60207 -0.10915,-1.54765 0.77538,-1.54765l9.87715,0a1.02973,0.93345 0 0 1 0.77538,1.54859l-4.93857,5.11528a1.02973,0.93345 0 0 1 -1.55077,0l0,0.00093z" /></svg>'),
 	);
 }