Update tag selector styling for macOS

chrome/content/zotero/components/button.jsx

@@ -57,7 +57,7 @@ class Button extends PureComponent {
 	}
 	
 	get menuMarker() {
-		if (!Zotero.isNode) {
+		if (!Zotero.isNode && !Zotero.isMac) {
 			return this.props.isMenu && <span className="menu-marker"/>
 		}
 		return this.props.isMenu && <IconDownChevron className="menu-marker"/>

chrome/content/zotero/components/icons.jsx

@@ -20,13 +20,13 @@ Icon.propTypes = {
 module.exports = { Icon }
 
 
-function i(name, svgOrSrc) {
+function i(name, svgOrSrc, hasDPI=true) {
 	const icon = class extends PureComponent {
 		render() {
 			const { className } = this.props
 			
 			if (typeof svgOrSrc == 'string') {
-				if (window.devicePixelRatio >= 1.25) {
+				if (hasDPI && window.devicePixelRatio >= 1.25) {
 					let parts = svgOrSrc.split('.');
 					parts[parts.length-2] = parts[parts.length-2] + '@2x';
 					svgOrSrc = parts.join('.')

scripts/sass.js

@@ -22,7 +22,13 @@ async function getSass(source, options, signatures={}) {
 		let newFileSignature = await getFileSignature(f);
 		let destFile = getPathRelativeTo(f, 'scss');
 		destFile = path.join(path.dirname(destFile), path.basename(destFile, '.scss') + '.css');
-		const dest = path.join.apply(this, ['build', 'chrome', 'skin', 'default', 'zotero', destFile]);
+		let dest = path.join.apply(this, ['build', 'chrome', 'skin', 'default', 'zotero', destFile]);
+		if (['win', 'mac', 'unix'].some(platform => f.endsWith(`-${platform}.scss`))) {
+			let platform = f.slice(f.lastIndexOf('-')+1, f.lastIndexOf('.'));
+			destFile = destFile.slice(0, destFile.lastIndexOf('-'))
+				+ destFile.slice(destFile.lastIndexOf('-')+1+platform.length);
+			dest = path.join.apply(this, ['build', 'chrome', 'content', 'zotero-platform', platform, destFile]);
+		}
 
 		if (f in signatures) {
 			if (compareSignatures(newFileSignature, signatures[f])) {

scss/_zotero-react-client.scss

@@ -22,3 +22,4 @@
 
 @import "components/tag-selector";
 @import "components/button";
+@import "components/icons";

scss/components/_button.scss

@@ -30,7 +30,6 @@
     }
     svg, img {
       vertical-align: middle;
-      width: 16px;
     }
   }
   span.menu-marker {

scss/components/_icons.scss

@@ -0,0 +1,7 @@
+.icon > svg, .icon > img {
+  width: 16px;
+}
+
+.icon.icon-downchevron > img {
+  width: 7px;
+}

scss/mac/_button.scss

@@ -0,0 +1,11 @@
+//
+// Button
+// --------------------------------------------------
+
+.btn {
+  -moz-appearance: none;
+  
+  span.menu-marker {
+    -moz-appearance: none;
+  }
+}

scss/zotero-react-client-linux.scss

@@ -0,0 +1,6 @@
+@import "zotero-react-client";
+
+//
+// Linux specific
+// --------------------------------------------------
+

scss/zotero-react-client-mac.scss

@@ -0,0 +1,8 @@
+@import "zotero-react-client";
+
+//
+// MacOS specific
+// --------------------------------------------------
+
+@import "mac/button";
+@import "mac/tag-selector";

scss/zotero-react-client-win.scss

@@ -0,0 +1,6 @@
+@import "zotero-react-client";
+
+//
+// Windows specific
+// --------------------------------------------------
+