zotero/scss/components/_toolbarbutton.scss
abaevbog fb26921e11 Opened tabs menu with a search bar
- Matching substrings from tab's title are bolded.
- Drag-and-drop functionality to reorder tabs.
- ArrowUp/ArrowDown navigate the tab's titles. Tab/Shift-Tab move
across both titles and close buttons. Enter from filter field focuses
the first tab's title. Home/PageUp focuses the filter field. End/PageDown
focuses the last tab's title. ArrowUp/ArrowDown from the filter focus
the last/first tab's title respectively. ArrowUp from the first tab or
ArrowDown from the last tab focus the filter.
2024-01-24 23:31:51 -05:00

83 lines
1.5 KiB
SCSS

toolbarbutton {
appearance: none;
flex-shrink: 0;
&:not(.titlebar-button) {
border-radius: 5px;
}
margin: 0;
color: var(--fill-secondary);
-moz-context-properties: fill, fill-opacity, stroke, stroke-opacity;
background-color: transparent;
.toolbarbutton-menu-dropmarker {
-moz-default-appearance: none;
display: block;
visibility: visible;
@include svgicon-menu("chevron-8", "universal", "8");
color: var(--fill-secondary);
width: 8px;
height: 8px;
}
&:hover {
background-color: var(--fill-quinary);
}
&:active, &[selected] {
background-color: var(--fill-quarternary);
}
&:disabled,
&[disabled="true"] {
background-color: transparent;
color: var(--fill-tertiary);
.toolbarbutton-menu-dropmarker {
color: var(--fill-tertiary);
}
}
&[open="true"] {
background-color: var(--fill-quarternary);
}
}
@keyframes rotating {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
toolbarbutton[status=animate] {
.toolbarbutton-icon {
color: var(--fill-secondary);
animation: rotating 2s linear infinite;
}
}
.zotero-tb-separator {
height: 36px;
border-right: var(--material-panedivider);
}
$toolbarbutton-icons: (
collection-add: "add-collection",
collections-search: "magnifier",
add: "add-item",
lookup: "magic-wand",
attachment-add: "add-file",
note-add: "note",
tabs-menu: "chevron",
sync-error: "error",
sync: "sync",
);
@each $cls, $icon in $toolbarbutton-icons {
#zotero-tb-#{$cls} {
@include svgicon-menu($icon, "universal", "20");
}
};