Add kbd tag styling (#901)

* Add `kbd` tag styling * updated `kbd` tag style for zoom correction
Automattic · Oct 16, 2018 · 4f78140 · 4f78140
1 parent 45494d0
commit 4f78140
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 1 deletion.
diff --git a/lib/note-detail/style.scss b/lib/note-detail/style.scss
@@ -72,6 +72,7 @@
 }
 
 .is-line-length-full {
+
   .note-detail-textarea,
   .note-detail-markdown {
     max-width: none;
@@ -128,6 +129,7 @@
   h1 {
     font-weight: $light;
   }
+
   h5,
   h6 {
     text-transform: uppercase;
@@ -149,29 +151,49 @@
     font-size: 85%;
     background: $gray-lightest;
   }
+
   pre {
     border: 1px solid lighten($gray, 20%);
     padding: 1em;
     border-radius: $border-radius;
   }
+
   pre code {
     color: darken($gray, 10%);
     background: transparent;
   }
+
   table {
     border-collapse: collapse;
     border-spacing: 0;
     display: block;
     width: 100%;
+
     tr:nth-child(2n) {
       background-color: lighten($gray, 40%);
     }
-    th, td {
+
+    th,
+    td {
       border: 1px solid lighten($gray, 20%);
       padding: 6px 13px;
     }
+
     th {
       font-weight: 600;
     }
   }
+
+  kbd {
+    display: inline-block;
+    padding: 3px 4px;
+    line-height: 100%;
+    color: #444d56;
+    vertical-align: middle;
+    background-color: #fafbfc;
+    border: solid 1px #c6cbd1;
+    border-bottom-color: #959da5;
+    border-radius: 3px;
+    box-shadow: inset 0 0 0 #959da5;
+  }
 }
diff --git a/lib/utils/sanitize-html.js b/lib/utils/sanitize-html.js
@@ -39,6 +39,7 @@ const isAllowedTag = node => {
     case 'i':
     case 'img':
     case 'ins':
+    case 'kbd':
     case 'li':
     case 'ol':
     case 'p':