@dialpad/dialtone-css
Version:
Dialpad's design system
68 lines (58 loc) • 1.67 kB
text/less
//
// DIALTONE
// COMPONENTS: Keyboard Shortcut
//
// These are the styles for Keyboard Shortcut component.
//
// TABLE OF CONTENTS
// • BASE STYLE
//
// ============================================================================
// $ BASE STYLE
// ----------------------------------------------------------------------------
.d-keyboard-shortcut {
display: inline-flex;
gap: var(--dt-space-200);
align-items: center;
justify-content: center;
box-sizing: border-box;
padding-inline: var(--dt-space-350);
font: var(--dt-typography-body-sm);
line-height: var(--dt-font-line-height-400);
min-inline-size: 1lh;
border: var(--dt-size-100) solid;
border-color: var(--dt-color-border-default);
border-radius: var(--dt-size-radius-300);
font-variant-numeric: tabular-nums;
&--inverted {
border-color: var(--dt-color-border-moderate-inverted);
}
/* Hiding class, making content visible only to screen readers but not visually */
/* "sr" meaning "screen-reader" */
/* https://css-tricks.com/inclusively-hidden/ */
&--sr-only:not(:focus, :active) {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
white-space: nowrap;
clip-path: inset(50%);
}
&__icon,
&__item {
min-height: 1lh;
color: var(--dt-color-foreground-tertiary);
&.d-icon--plus {
color: var(--dt-color-foreground-muted);
}
&.d-icon--plus {
color: var(--dt-color-foreground-muted);
.d-keyboard-shortcut--inverted & {
color: var(--dt-color-foreground-muted-inverted);
}
}
&--inverted {
color: var(--dt-color-foreground-secondary-inverted);
}
}
}