From b36461bca7f50736aa0c38b3dc4718841ec6450a Mon Sep 17 00:00:00 2001
From: Philipp Stracker <p.stracker@syde.com>
Date: Wed, 22 Jan 2025 17:53:35 +0100
Subject: [PATCH] =?UTF-8?q?=E2=99=BB=EF=B8=8F=20Extract=20general=20styles?=
 =?UTF-8?q?=20to=20own=20SCSS=20file?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../resources/css/components/_reusable.scss   |  1 +
 .../reusable-components/_elements.scss        | 71 +++++++++++++++++++
 .../reusable-components/_settings-block.scss  | 66 -----------------
 3 files changed, 72 insertions(+), 66 deletions(-)
 create mode 100644 modules/ppcp-settings/resources/css/components/reusable-components/_elements.scss

diff --git a/modules/ppcp-settings/resources/css/components/_reusable.scss b/modules/ppcp-settings/resources/css/components/_reusable.scss
index 2de887f57..c15273368 100644
--- a/modules/ppcp-settings/resources/css/components/_reusable.scss
+++ b/modules/ppcp-settings/resources/css/components/_reusable.scss
@@ -3,6 +3,7 @@
 @import './reusable-components/badge-box';
 @import './reusable-components/busy-state';
 @import './reusable-components/button';
+@import './reusable-components/elements';
 @import './reusable-components/fields';
 @import './reusable-components/hstack';
 @import './reusable-components/navigation';
diff --git a/modules/ppcp-settings/resources/css/components/reusable-components/_elements.scss b/modules/ppcp-settings/resources/css/components/reusable-components/_elements.scss
new file mode 100644
index 000000000..600d8850c
--- /dev/null
+++ b/modules/ppcp-settings/resources/css/components/reusable-components/_elements.scss
@@ -0,0 +1,71 @@
+/**
+ * General styling for reusable components in the "Elements" folder.
+ */
+
+.ppcp--header {
+	display: flex;
+	flex-direction: column;
+	gap: 6px;
+
+	&:not(:last-child) {
+		padding-bottom: var(--block-header-gap, 6px);
+	}
+}
+
+.ppcp--title {
+	@include font(11, 22, 600);
+	color: var(--color-text-title);
+	display: block;
+	text-transform: uppercase;
+
+	&.ppcp--no-caps {
+		@include font(14, 16, 600);
+		text-transform: none;
+	}
+
+	&.ppcp--big {
+		@include font(16, 20, 600);
+	}
+
+	.ppcp-r-title-badge {
+		text-transform: none;
+		margin-left: 6px;
+	}
+}
+
+.ppcp--title-extra {
+	@include font(13, 20, 400);
+	color: var(--color-text-teriary);
+	text-transform: none;
+	margin-left: 5px;
+}
+
+.ppcp--title-wrapper {
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+}
+
+.ppcp--description {
+	@include font(13, 20, 400);
+	margin: 0;
+	color: var(--color-text-description);
+
+	&:not(:last-child) {
+		padding-bottom: 1em;
+	}
+
+	a {
+		color: var(--color-blueberry);
+	}
+
+	strong {
+		color: var(--color-gray-800);
+	}
+}
+
+.ppcp--action {
+	& + .ppcp--action {
+		margin-top: var(--block-action-gap, 16px);
+	}
+}
diff --git a/modules/ppcp-settings/resources/css/components/reusable-components/_settings-block.scss b/modules/ppcp-settings/resources/css/components/reusable-components/_settings-block.scss
index bc66032f6..58fdd3e3b 100644
--- a/modules/ppcp-settings/resources/css/components/reusable-components/_settings-block.scss
+++ b/modules/ppcp-settings/resources/css/components/reusable-components/_settings-block.scss
@@ -6,50 +6,6 @@
 	flex-direction: column;
 	gap: var(--block-item-gap, 16px);
 
-	.ppcp--header {
-		display: flex;
-		flex-direction: column;
-		gap: 6px;
-
-		&:not(:last-child) {
-			padding-bottom: var(--block-header-gap, 6px);
-		}
-	}
-
-	.ppcp--title {
-		@include font(11, 22, 600);
-		color: var(--color-text-title);
-		display: block;
-		text-transform: uppercase;
-
-		&.ppcp--no-caps {
-			@include font(14, 16, 600);
-			text-transform: none;
-		}
-
-		&.ppcp--big {
-			@include font(16, 20, 600);
-		}
-
-		.ppcp-r-title-badge {
-			text-transform: none;
-			margin-left: 6px;
-		}
-	}
-
-	.ppcp--title-extra {
-		@include font(13, 20, 400);
-		color: var(--color-text-teriary);
-		text-transform: none;
-		margin-left: 5px;
-	}
-
-	.ppcp--title-wrapper {
-		display: flex;
-		justify-content: space-between;
-		align-items: center;
-	}
-
 	&.ppcp-r-settings-block__feature {
 		.ppcp--title {
 			@include font(13, 20, 600);
@@ -63,33 +19,11 @@
 		}
 	}
 
-	.ppcp--description {
-		@include font(13, 20, 400);
-		margin: 0;
-		color: var(--color-text-description);
-
-		&:not(:last-child) {
-			padding-bottom: 1em;
-		}
-
-		a {
-			color: var(--color-blueberry);
-		}
-
-		strong {
-			color: var(--color-gray-800);
-		}
-	}
-
 	+ .ppcp-r-settings-block:not(.ppcp--no-gap) {
 		margin-top: var(--block-separator-gap, 32px);
 		padding-top: var(--block-separator-gap, 32px);
 		border-top: var(--block-separator-size, 1px) solid var(--block-separator-color);
 	}
-
-	.ppcp--action + .ppcp--action {
-		margin-top: var(--block-action-gap, 16px);
-	}
 }
 
 .ppcp-r-settings-block {