mirror of
https://github.com/fleetdm/fleet
synced 2026-04-21 21:47:20 +00:00
7e974970bb
relates to #15435 fix for tooltip text alignment across multiple browsers. Firefox needs additional styles to make the tooltip text appear correct. - [x] Changes file added for user-visible changes in `changes/` or `orbit/changes/`. - [x] Manual QA for all new/changed functionality
33 lines
783 B
SCSS
33 lines
783 B
SCSS
.component__tooltip-wrapper {
|
|
display: inline-flex;
|
|
|
|
&__element {
|
|
white-space: nowrap;
|
|
line-height: initial;
|
|
}
|
|
|
|
&__underline {
|
|
width: fit-content;
|
|
border-bottom: 1px dashed $ui-fleet-black-50;
|
|
}
|
|
|
|
&__tip-text {
|
|
@include tooltip-text;
|
|
}
|
|
}
|
|
|
|
// for firefox we need to slightly shift the tooltip text to fit in line with the
|
|
// other text next to the tooltip. This is because firefox renders the layout
|
|
// slightly differently than webkit and edge, which makes it appear higher
|
|
// than text next to it.
|
|
// TODO: investigate more to see if there is a solution that will work
|
|
// cross browser.
|
|
@-moz-document url-prefix() {
|
|
.component__tooltip-wrapper {
|
|
&__underline {
|
|
position: relative;
|
|
top: 2px;
|
|
padding-bottom: 1px;
|
|
}
|
|
}
|
|
}
|