mirror of
https://github.com/directus/directus.git
synced 2026-02-12 23:35:06 -05:00
4fd9f4c31c
* initial tests and preparation for filter interface * get basic structure down * improve visuals and interaction * stop modifying props 🙃 * update logic blocks style * clean up filter interface * lint css * support m2a and simplify visited relations * allow for recursive loading of fields * use filter interface on conditions * Use dynamic useFilterTree instead of old one (#7569) * use advanced field tree on field template * update to advanced field tree * remove old useFieldTree * update to new design * add border on nested nodes * tweak styling * Fix linter warnings * Fix field-setup * clean up interface * clean up interface * clean up and rename files * clean up code * use default filter structure * fix changing fields * Add monospace style option to tooltips * Various small stylistic tweaks * Add menu placement * Cleanup "big interface" usage * Remove seamless * Add dropdown on add filter * Cleanup import/export, add v-select-placeholder-co * Fix staging issue * Allow overriding preview slow, fix padding * Show field path inline * Cleanup empty state * Use new filter-interface in permissions setup Co-authored-by: rijkvanzanten <rijkvanzanten@me.com>
120 lines
2.1 KiB
SCSS
120 lines
2.1 KiB
SCSS
#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;
|
|
}
|
|
}
|