angular/adev/shared-docs/styles/_kbd.scss
Joey Perrott 2d8635d29d refactor(docs-infra): migrate @angular/docs from dev-infra into adev directory (#57132)
To increase the ease of development we are moving @angular/docs into the adev directory within this repo. While
we are doing this to improve our development experience in the short term, efforts are also in place
to maintain a division between this @angular/docs (shared) code and adev itself, so that it can be extracted
back out in the future when components is ready to leverage it as well.

PR Close #57132
2024-07-30 15:51:26 +00:00

33 lines
902 B
SCSS

@mixin kbd() {
// We only target non-nested kbd elements
kbd:not(:has(kbd)) {
position: relative;
color: var(---tertiary-contrast);
border: 1px solid var(--quinary-contrast);
box-shadow:
0 1px 0 rgba(0, 0, 0, 0.2),
0 0 0 2px var(--octonary-contrast) inset;
// NOTE: This line (in addition to others) prevents proper contrast checking in Lighthouse
text-shadow: 0 1px 0 var(--octonary-contrast);
border-radius: 3px;
display: inline-block;
font-family: sans-serif;
line-height: 1.5;
margin: 0 0.1em;
padding: 1px 0.4em;
min-width: 14px;
min-height: 20px;
vertical-align: middle;
text-align: center;
@media (prefers-reduced-motion: no-preference) {
*:hover > & {
box-shadow:
0 0.5px 0 rgba(0, 0, 0, 0.2),
0 0 0 2px var(--octonary-contrast) inset;
top: 1px;
}
}
}
}