mirror of
https://github.com/discourse/discourse.git
synced 2024-11-25 09:23:13 +08:00
e19d907f0f
* 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)
113 lines
2.0 KiB
SCSS
113 lines
2.0 KiB
SCSS
$d-popover-background: $secondary;
|
|
$d-popover-border: $primary-medium;
|
|
|
|
@-webkit-keyframes popoverFadeIn {
|
|
from {
|
|
opacity: 0;
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
@keyframes popoverFadeIn {
|
|
from {
|
|
opacity: 0;
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
#d-popover {
|
|
background-color: $d-popover-background;
|
|
position: absolute;
|
|
z-index: z("modal", "tooltip");
|
|
border-color: $d-popover-border;
|
|
border-style: solid;
|
|
border-width: 1px;
|
|
max-width: 300px;
|
|
-webkit-animation: popoverFadeIn 0.5s;
|
|
animation: popoverFadeIn 0.5s;
|
|
background-clip: padding-box;
|
|
display: block;
|
|
box-shadow: shadow("dropdown");
|
|
border-radius: 2px;
|
|
|
|
&.is-under {
|
|
margin-top: 0px;
|
|
|
|
.d-popover-top-arrow {
|
|
display: block;
|
|
}
|
|
|
|
.d-popover-bottom-arrow {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
&.is-above {
|
|
margin-top: 0px;
|
|
|
|
.d-popover-bottom-arrow {
|
|
display: block;
|
|
}
|
|
|
|
.d-popover-top-arrow {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
&.retina {
|
|
border-width: 0.5px;
|
|
}
|
|
|
|
.d-popover-content {
|
|
padding: 0.5em;
|
|
font-size: $font-down-1;
|
|
overflow-wrap: break-word;
|
|
-webkit-animation: popoverFadeIn 0.5s;
|
|
animation: popoverFadeIn 0.5s;
|
|
}
|
|
|
|
.d-popover-arrow {
|
|
border-style: solid;
|
|
color: transparent;
|
|
content: "";
|
|
position: absolute;
|
|
z-index: z("tooltip") - 100;
|
|
}
|
|
|
|
.d-popover-top-arrow {
|
|
border-color: transparent transparent $d-popover-border;
|
|
top: -8px;
|
|
border-width: 0 8px 8px;
|
|
|
|
&:after {
|
|
border-color: transparent transparent $d-popover-background;
|
|
border-style: solid;
|
|
border-width: 0 7px 7px;
|
|
bottom: -8.5px;
|
|
margin-left: -7px;
|
|
position: absolute;
|
|
content: "";
|
|
}
|
|
}
|
|
|
|
.d-popover-bottom-arrow {
|
|
border-color: $d-popover-border transparent transparent;
|
|
top: 100%;
|
|
border-width: 8px 8px 0;
|
|
|
|
&:after {
|
|
position: absolute;
|
|
content: "";
|
|
border-color: $d-popover-background transparent transparent;
|
|
border-style: solid;
|
|
border-width: 7px 7px 0;
|
|
bottom: 1.5px;
|
|
transform: translate(-7px, 0);
|
|
}
|
|
}
|
|
}
|