assembly/plugins/v-tooltip/v-tooltip.css
Georges KABBOUCHI 5d00313260 wip
2021-07-25 02:40:30 +03:00

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;
}