From 5f4b4ec3d4bdd92ecac3b031c2bcd54b4a96a050 Mon Sep 17 00:00:00 2001
From: Azri Kahar <42867097+azrikahar@users.noreply.github.com>
Date: Tue, 14 Mar 2023 20:14:20 +0800
Subject: [PATCH] Use light primary border color for fields when they are
 inside groups (#17777)

* use light primary border for fields in groups

* remove !important & use higher CSS specificity
---
 .../fields/components/field-select.vue           | 16 +++++++++++-----
 1 file changed, 11 insertions(+), 5 deletions(-)

diff --git a/app/src/modules/settings/routes/data-model/fields/components/field-select.vue b/app/src/modules/settings/routes/data-model/fields/components/field-select.vue
index f33812ab2a..640b2fdbbb 100644
--- a/app/src/modules/settings/routes/data-model/fields/components/field-select.vue
+++ b/app/src/modules/settings/routes/data-model/fields/components/field-select.vue
@@ -459,16 +459,22 @@ export default defineComponent({
 	& + & {
 		margin-top: 8px;
 	}
+
+	&.nested {
+		.field :deep(.input) {
+			border: var(--border-width) solid var(--primary-25);
+		}
+	}
 }
 
 .field {
-	:deep(.input) {
-		border: var(--border-width) solid var(--border-subdued) !important;
+	&.v-input :deep(.input) {
+		border: var(--border-width) solid var(--border-subdued);
 	}
 
-	:deep(.input:hover) {
-		background-color: var(--card-face-color) !important;
-		border: var(--border-width) solid var(--border-normal-alt) !important;
+	&.v-input :deep(.input:hover) {
+		background-color: var(--card-face-color);
+		border: var(--border-width) solid var(--border-normal-alt);
 	}
 
 	.label {