From 921751f128f989cc58bc570509977de4590f2835 Mon Sep 17 00:00:00 2001
From: Jarek Radosz <jradosz@gmail.com>
Date: Mon, 1 Jun 2020 15:00:56 +0200
Subject: [PATCH] UX: Remove box-shadow from kbd, unify styling (#9948)

Having many elements with multiple box-shadows (e.g. in keyboard shortcuts modal) was tanking scrolling performance in some browsers.
---
 .../stylesheets/common/base/topic-post.scss      | 16 +++++++++-------
 .../common/components/keyboard_shortcuts.scss    | 13 +------------
 2 files changed, 10 insertions(+), 19 deletions(-)

diff --git a/app/assets/stylesheets/common/base/topic-post.scss b/app/assets/stylesheets/common/base/topic-post.scss
index 1efad4f214f..8ae08056b60 100644
--- a/app/assets/stylesheets/common/base/topic-post.scss
+++ b/app/assets/stylesheets/common/base/topic-post.scss
@@ -644,18 +644,20 @@ pre {
 }
 
 kbd {
-  border-radius: 3px;
-  box-shadow: shadow("kbd");
+  align-items: center;
   background: dark-light-choose(#fafafa, #303030);
   border: 1px solid dark-light-choose(#d0d0d0, #505050);
-  border-bottom: none;
-
+  border-bottom-width: 2px;
+  border-radius: 3px;
+  box-sizing: border-box;
   color: $primary;
-  display: inline-block;
+  display: inline-flex;
   font-size: $font-down-1;
+  justify-content: center;
   line-height: $line-height-large;
-  margin: 0 0.1em;
-  padding: 0.1em 0.6em;
+  margin: 0 0.15em;
+  min-width: 24px;
+  padding: 0.15em 0.6em;
 
   // don't allow more than 3 nested elements to prevent FF from crashing
   // cf. http://what.thedailywtf.com/t/nested-elements/7927
diff --git a/app/assets/stylesheets/common/components/keyboard_shortcuts.scss b/app/assets/stylesheets/common/components/keyboard_shortcuts.scss
index 303acbdd65e..644b357dde5 100644
--- a/app/assets/stylesheets/common/components/keyboard_shortcuts.scss
+++ b/app/assets/stylesheets/common/components/keyboard_shortcuts.scss
@@ -55,7 +55,7 @@
       border-radius: 3px;
       display: inline-flex;
       margin: 0 6px;
-      padding: 1px 0 5px;
+      padding: 2px 1px 4px;
     }
 
     span:first-child {
@@ -63,19 +63,8 @@
     }
 
     kbd {
-      align-items: center;
-      box-sizing: border-box;
-      color: dark-light-choose(#333, #aaa);
-      display: inline-flex;
       font-family: $base-font-family;
       font-weight: bold;
-      height: 24px;
-      justify-content: center;
-      margin: 0 3px;
-      min-width: 24px;
-      padding: 0 6px;
-      vertical-align: bottom;
-      white-space: nowrap;
     }
   }
 }