Style Keys in Keyboard Accessibility Table (#2780)

jpmorganchase · Dec 19, 2023 · bf13562 · bf13562 · vercel · Dec 19, 2023
1 parent bb25094
commit bf13562
Showing 1 changed file with 13 additions and 4 deletions.
diff --git a/site/src/components/keyboard-controls/KeyboardControls.module.css b/site/src/components/keyboard-controls/KeyboardControls.module.css
@@ -3,14 +3,23 @@
   margin-bottom: calc(2 * var(--salt-size-unit));
 }
 
-.table td {
-  vertical-align: top;
-}
-
 .table td > :last-child {
   margin-bottom: 0;
 }
 
+.table kbd {
+  display: inline-block;
+  background-color: var(--salt-container-primary-background);
+  border: var(--salt-size-border) var(--salt-container-borderStyle) var(--salt-container-primary-borderColor);
+  border-radius: 3px;
+  font-family: var(--salt-text-label-fontFamily);
+  font-size: var(--salt-text-label-fontSize);
+  font-weight: var(--salt-text-label-fontWeight-strong);
+  margin: var(--salt-spacing-25);
+  padding: var(--salt-spacing-25) var(--salt-spacing-75);
+  box-shadow: var(--salt-shadow-200-color) 0px 2px;
+}
+
 .keyCol {
   min-width: 10rem;
 }