feat: add kbd hint #1495
feat: add kbd hint #1495
Conversation
| } | ||
|
|
||
| /* Only show on wider viewports where the inline search is visible */ | ||
| @media (max-width: 959px) { |
There was a problem hiding this comment.
Where is this value defined? Can we somehow take it from the theme named constants?
There was a problem hiding this comment.
not sure regd. that, can we take 60em instead?
| justify-content: center; | ||
| height: 20px; | ||
| padding: 0 6px; | ||
| border-radius: 4px; | ||
| border: 1px solid var(--md-default-fg-color--lightest, rgba(0,0,0,.2)); | ||
| background: var(--md-default-bg-color, #fff); | ||
| color: var(--md-default-fg-color, rgba(0,0,0,.87)); | ||
| font: 500 12px/1 var(--md-text-font, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, sans-serif); | ||
| opacity: .72; |
There was a problem hiding this comment.
These seem to mostly repeat things that are already set in .kbd-hint. I'm not that well versed in CSS, is this really necessary? Why do we need them as two independent settings?
There was a problem hiding this comment.
they’re separate because one is a DOM element and the other is a pseudo-element positioned inside the input. If we want both contexts covered (inside the field on desktop, next to the icon on mobile/when the field is hidden), we need both targets.
There was a problem hiding this comment.
What do you mean by next to the icon on mobile / when the field is hidden? For me, when the field is hidden, the hint is hidden as well?
Uh oh!
There was an error while loading. Please reload this page.