search

ssleptsov / ninja-keys

Keyboard shortcuts interface for your website. Working with static HTML, Vanilla JS, Vue, React, Svelte.
https://ninja-keys-demo.vercel.app/
MIT License
1.65k stars 60 forks source link

--ninja-font-family #22

Closed rubjo closed 2 years ago

rubjo commented 2 years ago

🇺🇦

Huge thanks for making this very nice library! Is there any way to set the font-family for the whole modal?

I've tried

.ninja-keys {
    --ninja-font-family: 'Titillium';
    &::part(ninja-input) {
      font-family: var(--ninja-font-family);
    }
}

...but have found no way of setting the font for the breadcrumbs.

ssleptsov commented 2 years ago

Hmm..weird that font-family was not passed, because it must inherit from parent, like html/body. Anyway, good catch @rubjo! Thank you! I have pushed fix, version 1.2.1

So, both ways working now in Chrome/FF/Safari for whole modal

ninja-keys {
  font-family: 'Victor Mono', monospace;
}

Or with css variable 

ninja-keys {
  --ninja-font-family: 'Victor Mono', monospace;
}

Looks good with Victor Font too 😀

Font