IntenseWebs/discourse
3
0
Fork 0
mirror of https://github.com/discourse/discourse.git synced 2024-11-25 10:20:58 -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
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 10 additions and 19 deletions
Show Stats 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 {
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

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

@ -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;
}
}
}