Discource-C
/
discourse
mirror of https://github.com/discourse/discourse.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

FIX: Correct the misalignment of popover arrows (#9947) 

* Fixes position of the top arrow, and border width of both
* Merged top and transform properties
* .5px values are required to make arrow border appear the same with as overall popover border width

I did have a chance to try it out on a Windows machine with a non-high DPI display and there were no issues. And I just re-tested it with Firefox on macOS using the "Open in Low Resolution" option and it looked more or less ok (bearing in mind that it the whole app is then a blurry mess, and that using custom zoom levels causes the arrow to break slightly, but that was also the case on Firefox before this change)
This commit is contained in:
Jarek Radosz 2020-06-01 16:31:53 +02:00 committed by GitHub
parent d8b258b4e5
commit e19d907f0f
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 4 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
app/assets/stylesheets/common/base/d-popover.scss
View File

@ -80,15 +80,14 @@ $d-popover-border: $primary-medium;
.d-popover-top-arrow { .d-popover-top-arrow {
border-color: transparent transparent $d-popover-border; border-color: transparent transparent $d-popover-border;
top: 8px; top: -8px;
transform: translate(0, -15px);
border-width: 0 8px 8px; border-width: 0 8px 8px;
&:after { &:after {
border-color: transparent transparent $d-popover-background; border-color: transparent transparent $d-popover-background;
border-style: solid; border-style: solid;
border-width: 0 7px 7px; border-width: 0 7px 7px;
bottom: -8px; bottom: -8.5px;
margin-left: -7px; margin-left: -7px;
position: absolute; position: absolute;
content: ""; content: "";
@ -97,8 +96,7 @@ $d-popover-border: $primary-medium;
.d-popover-bottom-arrow { .d-popover-bottom-arrow {
border-color: $d-popover-border transparent transparent; border-color: $d-popover-border transparent transparent;
top: calc(100% + 16px); top: 100%;
transform: translate(0, -16px);
border-width: 8px 8px 0; border-width: 8px 8px 0;
&:after { &:after {
@ -107,7 +105,7 @@ $d-popover-border: $primary-medium;
border-color: $d-popover-background transparent transparent; border-color: $d-popover-background transparent transparent;
border-style: solid; border-style: solid;
border-width: 7px 7px 0; border-width: 7px 7px 0;
bottom: 2px; bottom: 1.5px;
transform: translate(-7px, 0); transform: translate(-7px, 0);
} }
} }