IntenseWebs/discourse
3
0
Fork 0
mirror of https://github.com/discourse/discourse.git synced 2025-02-25 18:55:32 -06:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source 
Having many elements with multiple box-shadows (e.g. in keyboard shortcuts modal) was tanking scrolling performance in some browsers.
This commit is contained in:
Jarek Radosz
2020-06-01 15:00:56 +02:00
committed by GitHub
parent ef8e44af73
commit 921751f128
2 changed files with 10 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
app/assets/stylesheets/common/base/topic-post.scss
View File

@@ -644,18 +644,20 @@ pre {
} }
kbd { kbd {
border-radius: 3px; align-items: center;
box-shadow: shadow("kbd");
background: dark-light-choose(#fafafa, #303030); background: dark-light-choose(#fafafa, #303030);
border: 1px solid dark-light-choose(#d0d0d0, #505050); border: 1px solid dark-light-choose(#d0d0d0, #505050);
border-bottom: none; border-bottom-width: 2px;
border-radius: 3px;
box-sizing: border-box;
color: $primary; color: $primary;
display: inline-block; display: inline-flex;
font-size: $font-down-1; font-size: $font-down-1;
justify-content: center;
line-height: $line-height-large; line-height: $line-height-large;
margin: 0 0.1em; margin: 0 0.15em;
padding: 0.1em 0.6em; min-width: 24px;
padding: 0.15em 0.6em;
// don't allow more than 3 nested elements to prevent FF from crashing // don't allow more than 3 nested elements to prevent FF from crashing
// cf. http://what.thedailywtf.com/t/nested-elements/7927 // cf. http://what.thedailywtf.com/t/nested-elements/7927

13
app/assets/stylesheets/common/components/keyboard_shortcuts.scss
View File

@@ -55,7 +55,7 @@
border-radius: 3px; border-radius: 3px;
display: inline-flex; display: inline-flex;
margin: 0 6px; margin: 0 6px;
padding: 1px 0 5px; padding: 2px 1px 4px;
} }
span:first-child { span:first-child {
@@ -63,19 +63,8 @@
} }
kbd { kbd {
align-items: center;
box-sizing: border-box;
color: dark-light-choose(#333, #aaa);
display: inline-flex;
font-family: $base-font-family; font-family: $base-font-family;
font-weight: bold; font-weight: bold;
height: 24px;
justify-content: center;
margin: 0 3px;
min-width: 24px;
padding: 0 6px;
vertical-align: bottom;
white-space: nowrap;
} }
} }
} }