🚚 Move Keyboard Shortcuts

docs/content/components/labels.md

@@ -135,3 +135,23 @@ Counters can also be used in `Box` headers to indicate the number of items in a
   </ul>
 </div>
 ```
+
+## Keyboard Shortcuts
+
+Wrap keybard shortcuts with `<kbd>` elements. No CSS classes are needed. It will make the shortcuts look like mini keybard keys. If multiple keys need to be pressed at the same time, wrap them in a single `<kbd>`. For example `<kbd>⌘ shift p</kbd>`. If multiple keys don't need to be pressed at the same time, use a `<kbd>` for each key. For example `<kbd>g</kbd> <kbd>d</kbd>`.
+
+
+```html live
+<p>
+  Focus search bar <kbd>s</kbd> or <kbd>/</kbd>
+</p>
+<p>
+  Preview comment <kbd>⌘ shift p</kbd>
+</p>
+<p>
+  Go to dashboard <kbd>g</kbd> <kbd>d</kbd>
+</p>
+<p>
+  Show keyboard shortcuts <kbd>?</kbd>
+</p>
+```

src/labels/index.scss

@@ -2,3 +2,4 @@
 @import "./labels.scss";
 @import "./states.scss";
 @import "./counters.scss";
+@import "./keyboard-shortcuts.scss";

src/labels/keyboard-shortcuts.scss

@@ -0,0 +1,27 @@
+//
+// Keyboard Shortcuts
+// Note: .markdown-body overrides these styles.
+//
+// stylelint-disable selector-max-type
+kbd {
+  display: inline-block;
+  padding: 3px 5px;
+  font: 11px $mono-font;
+  line-height: 10px;
+  color: $gray-700;
+  vertical-align: middle;
+  background-color: $bg-gray-light;
+  border: solid 1px $gray-300;
+  border-bottom-color: darken($gray-300, 4%);
+  border-radius: 3px;
+  box-shadow: inset 0 -1px 0 darken($gray-300, 4%);
+}
+
+.badmono {
+  font-family: sans-serif;
+  font-weight: $font-weight-bold;
+}
+
+.kb-shortcut-dialog {
+  min-width: 800px;
+}