mirror of
https://github.com/Instadapp/assembly.git
synced 2024-07-29 22:37:06 +00:00
74 lines
1.8 KiB
CSS
74 lines
1.8 KiB
CSS
|
.tooltip {
|
||
|
|
@apply z-50 block;
|
||
|
|
@apply max-w-xs;
|
||
|
|
}
|
||
|
|
.tooltip .tooltip-inner {
|
||
|
|
@apply px-4 py-2 font-medium rounded bg-navi-pure text-light text-14;
|
||
|
|
}
|
||
|
|
.tooltip .tooltip-arrow {
|
||
|
|
z-index: 1;
|
||
|
|
@apply absolute w-0 h-0 m-1 border border-navi-pure;
|
||
|
|
}
|
||
|
|
.dark .tooltip .tooltip-inner {
|
||
|
|
@apply bg-dark-300 text-light;
|
||
|
|
}
|
||
|
|
.dark .tooltip .tooltip-arrow {
|
||
|
|
@apply border-dark-300;
|
||
|
|
}
|
||
|
|
.tooltip[x-placement^='top'] {
|
||
|
|
@apply mb-1;
|
||
|
|
}
|
||
|
|
.tooltip[x-placement^='top'] .tooltip-arrow {
|
||
|
|
border-width: 4px 4px 0 4px;
|
||
|
|
border-left-color: transparent !important;
|
||
|
|
border-right-color: transparent !important;
|
||
|
|
border-bottom-color: transparent !important;
|
||
|
|
bottom: -4px;
|
||
|
|
left: calc(50% - 4px);
|
||
|
|
@apply my-0;
|
||
|
|
}
|
||
|
|
.tooltip[x-placement^='bottom'] {
|
||
|
|
@apply mt-1;
|
||
|
|
}
|
||
|
|
.tooltip[x-placement^='bottom'] .tooltip-arrow {
|
||
|
|
border-width: 0 4px 4px 4px;
|
||
|
|
border-left-color: transparent !important;
|
||
|
|
border-right-color: transparent !important;
|
||
|
|
border-top-color: transparent !important;
|
||
|
|
top: -4px;
|
||
|
|
left: calc(50% - 4px);
|
||
|
|
@apply my-0;
|
||
|
|
}
|
||
|
|
.tooltip[x-placement^='right'] {
|
||
|
|
@apply ml-1;
|
||
|
|
}
|
||
|
|
.tooltip[x-placement^='right'] .tooltip-arrow {
|
||
|
|
border-width: 4px 4px 4px 0;
|
||
|
|
border-left-color: transparent !important;
|
||
|
|
border-top-color: transparent !important;
|
||
|
|
border-bottom-color: transparent !important;
|
||
|
|
left: -4px;
|
||
|
|
top: calc(50% - 4px);
|
||
|
|
@apply mx-0;
|
||
|
|
}
|
||
|
|
.tooltip[x-placement^='left'] {
|
||
|
|
@apply mr-1;
|
||
|
|
}
|
||
|
|
.tooltip[x-placement^='left'] .tooltip-arrow {
|
||
|
|
border-width: 4px 0 4px 4px;
|
||
|
|
border-top-color: transparent !important;
|
||
|
|
border-right-color: transparent !important;
|
||
|
|
border-bottom-color: transparent !important;
|
||
|
|
right: -4px;
|
||
|
|
top: calc(50% - 4px);
|
||
|
|
@apply mx-0;
|
||
|
|
}
|
||
|
|
.tooltip[aria-hidden='true'] {
|
||
|
|
transition: opacity 0.15s, visibility 0.15s;
|
||
|
|
@apply invisible opacity-0;
|
||
|
|
}
|
||
|
|
.tooltip[aria-hidden='false'] {
|
||
|
|
@apply visible opacity-100;
|
||
|
|
transition: opacity 0.15s;
|
||
|
|
}
|