From 3c6f0b26af61c12da1f13b8587db338ab898a55a Mon Sep 17 00:00:00 2001
From: Dan Stillman <dstillman@zotero.org>
Date: Tue, 4 Aug 2020 23:21:33 -0400
Subject: [PATCH] Move .zotero-clicky to its own SCSS component

This will allow it to be included in shadow DOM.
---
 chrome/skin/default/zotero/zotero.css | 52 ---------------------------
 scss/_zotero-react-client.scss        |  1 +
 scss/components/_clicky.scss          | 47 ++++++++++++++++++++++++
 3 files changed, 48 insertions(+), 52 deletions(-)
 create mode 100644 scss/components/_clicky.scss

diff --git a/chrome/skin/default/zotero/zotero.css b/chrome/skin/default/zotero/zotero.css
index 69ae9fbd17..2dc1353781 100644
--- a/chrome/skin/default/zotero/zotero.css
+++ b/chrome/skin/default/zotero/zotero.css
@@ -140,58 +140,6 @@ label.zotero-text-link {
 	cursor: pointer;
 }
 
-.zotero-clicky
-{	
-	border-radius: 6px;
-	border: 1px solid transparent;
-}
-
-/* Minus and plus buttons with clicky glow effect */
-.zotero-clicky-minus, .zotero-clicky-plus
-{
-	color: transparent !important;
-	padding: 0 !important;
-	margin: 0 5px 0 0 !important;
-	width: 18px;
-	height: 18px;
-}
-
-.zotero-clicky-minus {
-	background: url(chrome://zotero/skin/minus.png) center/auto 18px no-repeat !important;
-	border: 0px !important;
-}
-
-.zotero-clicky-plus {
-	background: url(chrome://zotero/skin/plus.png) center/auto 18px no-repeat !important;
-	border: 0px !important;
-}
-
-.zotero-clicky-minus[disabled=true], .zotero-clicky-plus[disabled=true] {
-	opacity: .5;
-}
-
-.zotero-clicky-minus:not([disabled=true]):active {
-	background-image: url('chrome://zotero/skin/minus-active.png') !important;
-}
-
-.zotero-clicky-plus:not([disabled=true]):active {
-	background-image: url('chrome://zotero/skin/plus-active.png') !important;
-}
-
-.zotero-clicky:not([disabled=true]):not(.disabled):hover
-{
-	background: rgb(187, 206, 241);
-	border: 1px solid rgb(109, 149, 224);
-}
-
-.zotero-clicky:not([disabled=true]):not(.disabled):active,
-.zotero-clicky[selected="true"],
-.zotero-clicky.selected
-{
-	color: white;
-	background: rgb(89, 139, 236);
-}
-
 .zotero-message-error
 {
 	font-weight: bold;
diff --git a/scss/_zotero-react-client.scss b/scss/_zotero-react-client.scss
index 6c26b7ed73..44ff5b7e6a 100644
--- a/scss/_zotero-react-client.scss
+++ b/scss/_zotero-react-client.scss
@@ -24,6 +24,7 @@
 @import "components/annotation";
 @import "components/autosuggest";
 @import "components/button";
+@import "components/clicky";
 @import "components/createParent";
 @import "components/dictionaryManager";
 @import "components/editable";
diff --git a/scss/components/_clicky.scss b/scss/components/_clicky.scss
new file mode 100644
index 0000000000..17463de934
--- /dev/null
+++ b/scss/components/_clicky.scss
@@ -0,0 +1,47 @@
+.zotero-clicky {
+	border-radius: 6px;
+	border: 1px solid transparent;
+}
+
+/* Minus and plus buttons with clicky glow effect */
+.zotero-clicky-minus, .zotero-clicky-plus {
+	color: transparent !important;
+	padding: 0 !important;
+	margin: 0 5px 0 0 !important;
+	width: 18px;
+	height: 18px;
+}
+
+.zotero-clicky-minus {
+	background: url(chrome://zotero/skin/minus.png) center/auto 18px no-repeat !important;
+	border: 0px !important;
+}
+
+.zotero-clicky-plus {
+	background: url(chrome://zotero/skin/plus.png) center/auto 18px no-repeat !important;
+	border: 0px !important;
+}
+
+.zotero-clicky-minus[disabled=true], .zotero-clicky-plus[disabled=true] {
+	opacity: .5;
+}
+
+.zotero-clicky-minus:not([disabled=true]):active {
+	background-image: url('chrome://zotero/skin/minus-active.png') !important;
+}
+
+.zotero-clicky-plus:not([disabled=true]):active {
+	background-image: url('chrome://zotero/skin/plus-active.png') !important;
+}
+
+.zotero-clicky:not([disabled=true]):not(.disabled):hover {
+	background: rgb(187, 206, 241);
+	border: 1px solid rgb(109, 149, 224);
+}
+
+.zotero-clicky:not([disabled=true]):not(.disabled):active,
+.zotero-clicky[selected="true"],
+.zotero-clicky.selected {
+	color: white;
+	background: rgb(89, 139, 236);
+}