mirror of
https://github.com/directus/directus.git
synced 2026-02-13 05:45:26 -05:00
1a52c23761
* Add tooltips on feature hover on the interface * Add marker on geocoder search result * Improve map interface style
120 lines
2.1 KiB
SCSS
120 lines
2.1 KiB
SCSS
.tooltip, #tooltip {
|
|
$arrow-alignment: 5px;
|
|
|
|
--tooltip-foreground-color: var(--foreground-inverted);
|
|
--tooltip-background-color: var(--background-inverted);
|
|
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
z-index: 850;
|
|
display: none;
|
|
max-width: 260px;
|
|
padding: 4px 8px;
|
|
color: var(--tooltip-foreground-color);
|
|
word-break: break-word;
|
|
background-color: var(--tooltip-background-color);
|
|
border-radius: 4px;
|
|
transition: opacity 200ms;
|
|
|
|
&.inverted {
|
|
--tooltip-foreground-color: var(--foreground-normal);
|
|
--tooltip-background-color: var(--background-subdued);
|
|
}
|
|
|
|
&.monospace {
|
|
font-family: var(--family-monospace);
|
|
}
|
|
|
|
&.visible {
|
|
display: block;
|
|
}
|
|
|
|
&.enter,
|
|
&.leave-active {
|
|
opacity: 0;
|
|
}
|
|
|
|
&.enter-active,
|
|
&.leave {
|
|
opacity: 1;
|
|
}
|
|
|
|
&::after {
|
|
position: absolute;
|
|
top: -5px;
|
|
left: calc(50% - 5px);
|
|
width: 0;
|
|
height: 0;
|
|
border-right: 5px solid transparent;
|
|
border-bottom: 5px solid var(--tooltip-background-color);
|
|
border-left: 5px solid transparent;
|
|
content: '';
|
|
}
|
|
|
|
&.start::after {
|
|
right: $arrow-alignment;
|
|
left: unset;
|
|
}
|
|
|
|
&.end::after {
|
|
left: $arrow-alignment;
|
|
}
|
|
|
|
&.top::after {
|
|
top: unset;
|
|
bottom: -5px;
|
|
left: calc(50% - 5px);
|
|
border-top: 5px solid var(--tooltip-background-color);
|
|
border-right: 5px solid transparent;
|
|
border-bottom: unset;
|
|
border-left: 5px solid transparent;
|
|
}
|
|
|
|
&.top.start::after {
|
|
right: $arrow-alignment;
|
|
left: unset;
|
|
}
|
|
|
|
&.top.end::after {
|
|
left: $arrow-alignment;
|
|
}
|
|
|
|
&.left::after {
|
|
top: calc(50% - 5px);
|
|
right: -5px;
|
|
left: unset;
|
|
border-top: 5px solid transparent;
|
|
border-right: unset;
|
|
border-bottom: 5px solid transparent;
|
|
border-left: 5px solid var(--tooltip-background-color);
|
|
}
|
|
|
|
&.left.start::after {
|
|
top: unset;
|
|
bottom: $arrow-alignment;
|
|
}
|
|
|
|
&.left.end::after {
|
|
top: $arrow-alignment;
|
|
}
|
|
|
|
&.right::after {
|
|
top: calc(50% - 5px);
|
|
left: -5px;
|
|
border-top: 5px solid transparent;
|
|
border-right: 5px solid var(--tooltip-background-color);
|
|
border-bottom: 5px solid transparent;
|
|
border-left: unset;
|
|
}
|
|
|
|
&.right.start::after {
|
|
top: unset;
|
|
bottom: $arrow-alignment;
|
|
}
|
|
|
|
&.right.end::after {
|
|
top: $arrow-alignment;
|
|
}
|
|
}
|