discourse/app/assets/stylesheets/common/float-kit/d-tooltip.scss
Jarek Radosz f5c9e75438
UX: Fix alignment issues around user status (#26491)
Minor changes but they 1. correct the html structure (no divs in spans) 2. unify the margins
2024-04-09 11:10:12 +02:00

102 lines
1.5 KiB
SCSS

@keyframes d-tooltip-opening {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
.fk-d-tooltip {
background-color: var(--secondary);
border-radius: var(--d-border-radius);
border: 1px solid var(--primary-low);
box-shadow: var(--shadow-menu-panel);
z-index: z("max");
width: max-content;
position: absolute;
top: 0;
display: flex !important;
padding: 0;
&__trigger {
display: inline-flex;
cursor: pointer;
.touch & {
@include unselectable;
}
&-container {
display: flex;
}
}
&.-animated {
animation: d-tooltip-opening 0.15s ease-in;
&[data-placement^="bottom"] {
transform-origin: top center;
}
&[data-placement^="top"] {
transform-origin: bottom center;
}
&[data-placement^="right"] {
transform-origin: center left;
}
&[data-placement^="left"] {
transform-origin: center right;
}
}
&__inner-content {
display: flex;
overflow: hidden;
overflow-wrap: break-word;
padding: 0.5rem;
align-items: center;
}
.arrow {
z-index: z("max");
position: absolute;
}
&[data-placement^="top"] {
.arrow {
bottom: -10px;
rotate: 180deg;
}
}
&[data-placement^="top-start"] {
.arrow {
margin-left: 10px;
}
}
&[data-placement^="bottom"] {
.arrow {
top: -10px;
}
}
&[data-placement^="right"] {
.arrow {
rotate: -90deg;
left: -10px;
}
}
&[data-placement^="left"] {
.arrow {
rotate: 90deg;
right: -10px;
}
}
}