@dialpad/dialtone-css
Version:
Dialpad's design system
55 lines (48 loc) • 1.4 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;
align-items: center;
justify-content: center;
box-sizing: border-box;
padding-right: var(--dt-space-300);
padding-left: var(--dt-space-300);
font-size: var(--dt-font-size-100);
font-family: var(--dt-font-family-body);
border: var(--dt-size-100) solid;
border-color: var(--dt-color-border-default);
border-radius: var(--dt-size-radius-300);
&--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: rect(0 0 0 0);
clip-path: inset(50%);
}
&__icon,
&__item {
margin-right: var(--dt-space-200);
color: var(--dt-color-foreground-tertiary);
&--inverted {
color: var(--dt-color-foreground-secondary-inverted);
}
}
}