From 79bf18cae2e8bdf282c8eab88c8a9763d787451a Mon Sep 17 00:00:00 2001
From: Henriette Darge <h.darge@openproject.com>
Date: Tue, 18 Nov 2025 11:46:42 +0100
Subject: [PATCH] Move component specific styles to an own file

---
 frontend/src/global_styles/openproject.sass   |  1 +
 .../src/global_styles/openproject/_forms.sass | 51 -------------------
 lib/primer/open_project/forms/_index.sass     |  1 +
 .../forms/advanced_form_group.sass            | 50 ++++++++++++++++++
 4 files changed, 52 insertions(+), 51 deletions(-)
 create mode 100644 lib/primer/open_project/forms/_index.sass
 create mode 100644 lib/primer/open_project/forms/advanced_form_group.sass

diff --git a/frontend/src/global_styles/openproject.sass b/frontend/src/global_styles/openproject.sass
index 3716309a004..d8164407754 100644
--- a/frontend/src/global_styles/openproject.sass
+++ b/frontend/src/global_styles/openproject.sass
@@ -31,3 +31,4 @@
 // Component specific Styles
 @import "../../../app/components/_index.sass"
 @import "../../../app/forms/_index.sass"
+@import "../../../lib/primer/open_project/forms/_index.sass"
diff --git a/frontend/src/global_styles/openproject/_forms.sass b/frontend/src/global_styles/openproject/_forms.sass
index 2ad2073b2b2..38c0f64a858 100644
--- a/frontend/src/global_styles/openproject/_forms.sass
+++ b/frontend/src/global_styles/openproject/_forms.sass
@@ -171,54 +171,3 @@ input[type="number"]
   &::-webkit-outer-spin-button
     -webkit-appearance: none
     margin: 0
-
-.FormControl-advanced-check-group-wrap,
-.FormControl-advanced-radio-group-wrap
-  & fieldset
-    padding: 0
-    margin: 0
-    border: 0
-
-.FormControl-advanced-check-group-list,
-.FormControl-advanced-radio-group-list
-  display: grid
-  grid-template-columns: repeat(2, 1fr)
-  gap: var(--base-size-12) var(--base-size-16)
-
-  @media screen and (max-width: $breakpoint-sm)
-    grid-template-columns: 1fr
-
-.FormControl-advanced-checkbox-wrap,
-.FormControl-advanced-radio-wrap
-  display: flex
-  background-color: var(--bgColor-inset)
-  border: var(--borderWidth-thin, 1px) solid var(--borderColor-default)
-  border-radius: var(--borderRadius-medium)
-
-  &:has(input:hover)
-    background-color: var(--bgColor-accent-muted)
-    border-color: var(--borderColor-accent-muted)
-
-  &:has(input:checked)
-    background-color: var(--bgColor-accent-muted)
-    border-color: var(--control-checked-borderColor-rest)
-
-  & .FormControl-label
-    display: block
-    flex: 1
-    cursor: pointer
-
-.FormControl-advanced-checkbox-content,
-.FormControl-advanced-radio-content
-  display: grid
-  grid-template-columns: min-content auto min-content
-  gap: var(--base-size-8)
-  padding: var(--base-size-12)
-
-.FormControl-advanced-checkbox-label-text,
-.FormControl-advanced-radio-label-text
-  color: var(--fgColor-accent)
-
-.FormControl-advanced-checkbox-icon,
-.FormControl-advanced-radio-icon
-  fill: var(--fgColor-accent)
diff --git a/lib/primer/open_project/forms/_index.sass b/lib/primer/open_project/forms/_index.sass
new file mode 100644
index 00000000000..4eee9f5aee3
--- /dev/null
+++ b/lib/primer/open_project/forms/_index.sass
@@ -0,0 +1 @@
+@import "advanced_form_group"
diff --git a/lib/primer/open_project/forms/advanced_form_group.sass b/lib/primer/open_project/forms/advanced_form_group.sass
new file mode 100644
index 00000000000..2b9236d6b24
--- /dev/null
+++ b/lib/primer/open_project/forms/advanced_form_group.sass
@@ -0,0 +1,50 @@
+.FormControl-advanced-check-group-wrap,
+.FormControl-advanced-radio-group-wrap
+  & fieldset
+    padding: 0
+    margin: 0
+    border: 0
+
+.FormControl-advanced-check-group-list,
+.FormControl-advanced-radio-group-list
+  display: grid
+  grid-template-columns: repeat(2, 1fr)
+  gap: var(--base-size-12) var(--base-size-16)
+
+  @media screen and (max-width: $breakpoint-sm)
+    grid-template-columns: 1fr
+
+.FormControl-advanced-checkbox-wrap,
+.FormControl-advanced-radio-wrap
+  display: flex
+  background-color: var(--bgColor-inset)
+  border: var(--borderWidth-thin, 1px) solid var(--borderColor-default)
+  border-radius: var(--borderRadius-medium)
+
+  &:has(input:hover)
+    background-color: var(--bgColor-accent-muted)
+    border-color: var(--borderColor-accent-muted)
+
+  &:has(input:checked)
+    background-color: var(--bgColor-accent-muted)
+    border-color: var(--control-checked-borderColor-rest)
+
+  & .FormControl-label
+    display: block
+    flex: 1
+    cursor: pointer
+
+.FormControl-advanced-checkbox-content,
+.FormControl-advanced-radio-content
+  display: grid
+  grid-template-columns: min-content auto min-content
+  gap: var(--base-size-8)
+  padding: var(--base-size-12)
+
+.FormControl-advanced-checkbox-label-text,
+.FormControl-advanced-radio-label-text
+  color: var(--fgColor-accent)
+
+.FormControl-advanced-checkbox-icon,
+.FormControl-advanced-radio-icon
+  fill: var(--fgColor-accent)