Move .zotero-clicky to its own SCSS component

This will allow it to be included in shadow DOM.
This commit is contained in:
Dan Stillman 2020-08-04 23:21:33 -04:00
parent 87f2716da8
commit 3c6f0b26af
3 changed files with 48 additions and 52 deletions

View file

@ -140,58 +140,6 @@ label.zotero-text-link {
cursor: pointer; 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 .zotero-message-error
{ {
font-weight: bold; font-weight: bold;

View file

@ -24,6 +24,7 @@
@import "components/annotation"; @import "components/annotation";
@import "components/autosuggest"; @import "components/autosuggest";
@import "components/button"; @import "components/button";
@import "components/clicky";
@import "components/createParent"; @import "components/createParent";
@import "components/dictionaryManager"; @import "components/dictionaryManager";
@import "components/editable"; @import "components/editable";

View file

@ -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);
}