mirror of
https://github.com/notion-enhancer/notion-enhancer.git
synced 2025-04-11 15:59:03 +00:00
dragonwocky
f0e2570448
faster + more powerful + better documented + more active than twind. sticking with custom preset-icons to avoid fetching over cdn + to load custom icons
31 lines
925 B
JavaScript
31 lines
925 B
JavaScript
/**
|
|
* notion-enhancer
|
|
* (c) 2024 dragonwocky <thedragonring.bod@gmail.com> (https://dragonwocky.me/)
|
|
* (https://notion-enhancer.github.io/) under the MIT license
|
|
*/
|
|
|
|
"use strict";
|
|
|
|
function TopbarButton({ icon, ...props }, ...children) {
|
|
const { html, extendProps } = globalThis.__enhancerApi;
|
|
extendProps(props, {
|
|
tabindex: 0,
|
|
class: `notion-enhancer--topbar-button
|
|
text-[color:var(--theme--fg-primary)] mr-[2px]
|
|
select-none h-[28px] w-[33px] duration-[20ms]
|
|
transition inline-flex items-center justify-center
|
|
rounded-[3px] hover:bg-[color:var(--theme--bg-hover)]
|
|
has-[span]:w-auto [&>span]:(text-[14px] leading-[1.2] px-[8px])
|
|
[&[data-active]]:bg-[color:var(--theme--bg-hover)]
|
|
[&>i]:size-[20px]`,
|
|
});
|
|
|
|
return html`<button ...${props}>
|
|
${props.innerHTML || children.length
|
|
? children
|
|
: html`<i class="i-${icon}" />`}
|
|
</button>`;
|
|
}
|
|
|
|
export { TopbarButton };
|