Move .zotero-clicky to its own SCSS component
This will allow it to be included in shadow DOM.
This commit is contained in:
parent
87f2716da8
commit
3c6f0b26af
3 changed files with 48 additions and 52 deletions
|
@ -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;
|
||||||
|
|
|
@ -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";
|
||||||
|
|
47
scss/components/_clicky.scss
Normal file
47
scss/components/_clicky.scss
Normal 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);
|
||||||
|
}
|
Loading…
Reference in a new issue