From fdfea802983d9d3fe69438ea2e3bae0ff9d06a71 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= <niels.lyngso@gmail.com>
Date: Wed, 7 Jun 2023 19:20:14 +0200
Subject: [PATCH] apperance styling

---
 .../property-settings-modal.element.ts        | 44 ++++++++++---------
 1 file changed, 24 insertions(+), 20 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/modal/common/property-settings/property-settings-modal.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/modal/common/property-settings/property-settings-modal.element.ts
index 94ef757599..0f85872c75 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/modal/common/property-settings/property-settings-modal.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/modal/common/property-settings/property-settings-modal.element.ts
@@ -332,26 +332,6 @@ export class UmbPropertySettingsModalElement extends UmbModalBaseElement<
 				font-size: 0.8rem;
 				line-height: 1;
 			}
-			.appearance.selected .appearance-label {
-				font-weight: bold;
-			}
-			.appearance:not(.selected):hover {
-				border-color: var(--uui-color-border-emphasis);
-				cursor: pointer;
-				opacity: 1;
-			}
-			.appearance.selected {
-				border-color: var(--uui-color-selected);
-				opacity: 1;
-			}
-			.appearance.selected::after {
-				content: '';
-				position: absolute;
-				inset: 0;
-				border-radius: 6px;
-				opacity: 0.1;
-				background-color: var(--uui-color-selected);
-			}
 			.appearance.left {
 				flex-grow: 1;
 			}
@@ -363,6 +343,30 @@ export class UmbPropertySettingsModalElement extends UmbModalBaseElement<
 				width: 100%;
 				color: var(--uui-color-text);
 			}
+			.appearance.selected .appearance-label {
+				font-weight: bold;
+			}
+			.appearance:not(.selected):hover {
+				border-color: var(--uui-color-border-emphasis);
+				cursor: pointer;
+				opacity: 1;
+			}
+			.appearance.selected {
+				border-color: var(--uui-color-selected);
+				color: var(--uui-color-selected);
+				opacity: 1;
+			}
+			.appearance.selected svg {
+				color: var(--uui-color-selected);
+			}
+			.appearance.selected::after {
+				content: '';
+				position: absolute;
+				inset: 0;
+				border-radius: 6px;
+				opacity: 0.1;
+				background-color: var(--uui-color-selected);
+			}
 			hr {
 				border: none;
 				border-top: 1px solid var(--uui-color-divider);