From 74b86a7033c0eb9562c3c14916abd749bd95396f Mon Sep 17 00:00:00 2001
From: Abe Jellinek <jellinek@berkeley.edu>
Date: Tue, 30 Jul 2024 10:17:40 -0400
Subject: [PATCH] Make macOS control normalization into a mixin (#4464)

And include in stylesheets that have been updated.

Have to make sure not to include this mixin in the global scope in
stylesheets that are themselves imported elsewhere (i.e., filename
begins with an underscore).
---
 scss/abstracts/_mixins.scss          | 42 ++++++++++++++++++++++++++++
 scss/components/_advancedSearch.scss |  2 ++
 scss/components/_banners.scss        |  2 ++
 scss/components/_button.scss         | 40 --------------------------
 scss/components/_locateManager.scss  |  2 ++
 scss/preferences.scss                |  2 ++
 6 files changed, 50 insertions(+), 40 deletions(-)

diff --git a/scss/abstracts/_mixins.scss b/scss/abstracts/_mixins.scss
index 902f9df71c..dea8faa483 100644
--- a/scss/abstracts/_mixins.scss
+++ b/scss/abstracts/_mixins.scss
@@ -227,6 +227,48 @@
 		}
 	}
 }
+
+// Normalize margins/paddings for form controls on macOS
+@mixin macOS-normalize-controls {
+	:is(button, toolbarbutton) .button-text {
+		@media (-moz-platform: macos) {
+			margin-block: 1px 0;
+			margin-inline: 3px;
+		}
+	}
+
+	radiogroup {
+		@media (-moz-platform: macos) {
+			margin: 0;
+			column-gap: 8px;
+		}
+	}
+
+	radio, checkbox {
+		@media (-moz-platform: macos) {
+			margin: 0;
+			gap: 6px;
+		}
+	}
+
+	radio :is(.radio-check, .radio-check[checked], .radio-icon, .radio-label),
+	checkbox :is(.checkbox-check, .checkbox-check[checked], .checkbox-icon, .checkbox-label) {
+		@media (-moz-platform: macos) {
+			margin: 0;
+
+			// Can't break these out into separate rules because of specificity:
+
+			&:is(.radio-check, .checkbox-check) {
+				margin-inline-start: -2px;
+			}
+
+			&:is(.checkbox-label) {
+				margin-top: -1px;
+			}
+		}
+	}
+}
+
 /*
 	This mixin replaces the default focus-rings - those are platform-specific, do not show up on some
 	components (e.g. toolbarbutton) and sometimes are too wide (e.g. around textfield on macOS).
diff --git a/scss/components/_advancedSearch.scss b/scss/components/_advancedSearch.scss
index 8d36446a34..cdfdaa18df 100644
--- a/scss/components/_advancedSearch.scss
+++ b/scss/components/_advancedSearch.scss
@@ -1,4 +1,6 @@
 #zotero-advanced-search-dialog {
+	@include macOS-normalize-controls;
+	
 	min-height: 500px;
 	min-width: 700px;
 	
diff --git a/scss/components/_banners.scss b/scss/components/_banners.scss
index 58e238db4a..204d701a47 100644
--- a/scss/components/_banners.scss
+++ b/scss/components/_banners.scss
@@ -1,4 +1,6 @@
 #post-upgrade-banner, #retracted-items-banner, #sync-reminder-banner {
+	@include macOS-normalize-controls;
+
 	display: flex;
 	justify-content: center;
 	text-align: center;
diff --git a/scss/components/_button.scss b/scss/components/_button.scss
index b09d5e7df4..dccf87329d 100644
--- a/scss/components/_button.scss
+++ b/scss/components/_button.scss
@@ -38,43 +38,3 @@ button {
 		margin: 0 -2px -1px;
 	}
 }
-
-// Default margins/paddings for button elements on macOS:
-
-:is(button, toolbarbutton) .button-text {
-	@media (-moz-platform: macos) {
-		margin-block: 1px 0;
-		margin-inline: 3px;
-	}
-}
-
-radiogroup {
-	@media (-moz-platform: macos) {
-		margin: 0;
-		column-gap: 8px;
-	}
-}
-
-radio, checkbox {
-	@media (-moz-platform: macos) {
-		margin: 0;
-		gap: 6px;
-	}
-}
-
-radio :is(.radio-check, .radio-check[checked], .radio-icon, .radio-label),
-checkbox :is(.checkbox-check, .checkbox-check[checked], .checkbox-icon, .checkbox-label) {
-	@media (-moz-platform: macos) {
-		margin: 0;
-		
-		// Can't break these out into separate rules because of specificity:
-
-		&:is(.radio-check, .checkbox-check) {
-			margin-inline-start: -2px;
-		}
-
-		&:is(.checkbox-label) {
-			margin-top: -1px;
-		}
-	}
-}
diff --git a/scss/components/_locateManager.scss b/scss/components/_locateManager.scss
index d01e7835f8..cd28ff0e3c 100644
--- a/scss/components/_locateManager.scss
+++ b/scss/components/_locateManager.scss
@@ -1,4 +1,6 @@
 #zotero-locate-manager-prefs {
+	@include macOS-normalize-controls;
+	
 	#button-bar, #button-bar > hbox {
 		display: flex;
 		gap: 6px;
diff --git a/scss/preferences.scss b/scss/preferences.scss
index d83a763a37..50c78e5add 100644
--- a/scss/preferences.scss
+++ b/scss/preferences.scss
@@ -43,6 +43,8 @@
 @import "preferences/cite";
 @import "preferences/advanced";
 
+@include macOS-normalize-controls;
+
 #zotero-prefs {
 	min-width: 800px;
 	min-height: 600px;