UX: Remove box-shadow from kbd, unify styling (#9948)

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.

diff --git a/app/assets/stylesheets/common/base/topic-post.scss b/app/assets/stylesheets/common/base/topic-post.scss
index 1efad4f..8ae0805 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 303acbd..644b357 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;
     }
   }
 }

GitHub sha: 921751f1

1 Like

This commit appears in #9948 which was merged by CvX.