@agorapulse/ui-theme 20.1.19 → 20.1.21

package/assets/style/css-ui/tooltip.css

@@ -1,228 +0,0 @@
-/* Agorapulse Tooltip Styles */
-
-.ap-tooltip {
-    --ap-arrow-width: 16px;
-    --ap-arrow-height: 8px;
-    --ap-arrow-offset: 10px;
-
-    width: fit-content;
-    max-width: 350px;
-    background: var(--comp-tooltip-text-color-main-default-bg);
-    border-radius: var(--ref-border-radius-md);
-    position: absolute;
-    z-index: 9999999;
-    animation: ap-tooltip-fade-in var(--ref-animation-short, 0.15s) ease-in-out;
-}
-
-@keyframes ap-tooltip-fade-in {
-    0% {
-        opacity: 0;
-    }
-    100% {
-        opacity: 1;
-    }
-}
-
-/* Tooltip content container */
-.ap-tooltip-content {
-    padding: var(--ref-spacing-xxs) var(--ref-spacing-xs);
-    border-radius: var(--ref-border-radius-md);
-}
-
-/* Tooltip text */
-.ap-tooltip-text {
-    color: var(--comp-tooltip-text-default-color);
-    font-family: var(--comp-tooltip-text-style-font-family);
-    font-size: var(--comp-tooltip-text-style-size);
-    font-weight: var(--comp-tooltip-text-style-weight);
-    line-height: var(--comp-tooltip-text-style-line-height);
-}
-
-/* Tooltip arrow */
-.ap-tooltip-arrow {
-    color: var(--ref-color-grey-100);
-    position: absolute;
-    z-index: 10000;
-    width: var(--ap-arrow-width);
-    height: var(--ap-arrow-height);
-    display: block;
-}
-
-.ap-tooltip-arrow path {
-    fill: currentColor;
-}
-
-/* Arrow positioning - Top */
-.ap-tooltip.top .ap-tooltip-arrow,
-.ap-tooltip.top-left .ap-tooltip-arrow,
-.ap-tooltip.top-right .ap-tooltip-arrow {
-    bottom: 0;
-    transform: translateY(100%);
-}
-
-.ap-tooltip.top .ap-tooltip-arrow {
-    left: 50%;
-    transform: translateX(-50%) translateY(100%);
-}
-
-.ap-tooltip.top-left .ap-tooltip-arrow {
-    left: var(--ap-arrow-offset);
-    transform: translateY(100%);
-}
-
-.ap-tooltip.top-right .ap-tooltip-arrow {
-    right: var(--ap-arrow-offset);
-    transform: translateY(100%);
-}
-
-/* Arrow positioning - Bottom */
-.ap-tooltip.bottom .ap-tooltip-arrow,
-.ap-tooltip.bottom-left .ap-tooltip-arrow,
-.ap-tooltip.bottom-right .ap-tooltip-arrow {
-    top: 0;
-    transform: rotate(180deg) translateY(100%);
-}
-
-.ap-tooltip.bottom .ap-tooltip-arrow {
-    left: 50%;
-    transform: translateX(-50%) rotate(180deg) translateY(100%);
-}
-
-.ap-tooltip.bottom-left .ap-tooltip-arrow {
-    left: var(--ap-arrow-offset);
-    transform: rotate(180deg) translateY(100%);
-}
-
-.ap-tooltip.bottom-right .ap-tooltip-arrow {
-    right: var(--ap-arrow-offset);
-    transform: rotate(180deg) translateY(100%);
-}
-
-/* Arrow positioning - Left */
-.ap-tooltip.left .ap-tooltip-arrow {
-    right: 0;
-    top: 50%;
-    transform: translateX(100%) translateY(-50%) rotate(90deg);
-}
-
-/* Arrow positioning - Right */
-.ap-tooltip.right .ap-tooltip-arrow {
-    left: 0;
-    top: 50%;
-    transform: translateX(-100%) translateY(-50%) rotate(-90deg);
-}
-
-/* Custom template tooltip (white background) */
-.ap-tooltip.custom {
-    background-color: var(--ref-color-white);
-    filter: drop-shadow(0 0 10px rgba(0, 0, 0, 0.08));
-}
-
-.ap-tooltip.custom .ap-tooltip-text {
-    color: var(--ref-color-grey-100);
-}
-
-.ap-tooltip.custom .ap-tooltip-arrow {
-    color: var(--ref-color-white);
-}
-
-/* Predefined tooltip (with scrollable content) */
-.ap-tooltip.predefined {
-    max-width: 256px;
-    width: 256px;
-    max-height: 280px;
-    border-radius: var(--ref-border-radius-sm);
-    background: var(--ref-color-white);
-    box-shadow: 0 4px 25px -2px rgba(52, 69, 99, 0.15), 0 4px 6px -2px rgba(52, 69, 99, 0.15);
-}
-
-.ap-tooltip.predefined .ap-tooltip-content {
-    padding: 0;
-}
-
-.ap-tooltip.predefined .ap-tooltip-arrow {
-    color: var(--ref-color-white);
-}
-
-/* Predefined tooltip content structure */
-.ap-tooltip-container {
-    display: flex;
-    flex-direction: column;
-    width: 100%;
-    height: 100%;
-    max-height: 280px;
-    overflow: auto;
-    padding: var(--ref-spacing-xs);
-    gap: var(--ref-spacing-xxxs);
-    scrollbar-color: var(--ref-color-grey-20) transparent;
-    scrollbar-width: thin;
-}
-
-.ap-tooltip-title {
-    color: var(--ref-color-grey-100);
-    font-family: Averta, sans-serif;
-    font-size: var(--ref-font-size-md);
-    font-weight: var(--ref-font-weight-bold);
-    line-height: var(--ref-font-line-height-lg);
-    margin: 0;
-}
-
-.ap-tooltip-caption {
-    color: var(--ref-color-grey-80);
-    font-family: Averta, sans-serif;
-    font-size: var(--ref-font-size-sm);
-    font-weight: var(--ref-font-weight-regular);
-    line-height: var(--ref-font-line-height-sm);
-    margin: 0;
-}
-
-/* Tooltip list */
-.ap-tooltip-list {
-    display: flex;
-    flex-direction: column;
-    align-items: flex-start;
-    gap: var(--ref-spacing-xs);
-}
-
-.ap-tooltip-item {
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    gap: var(--ref-spacing-xxs);
-}
-
-.ap-tooltip-item-info {
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: flex-start;
-    flex: 1;
-}
-
-.ap-tooltip-item-title {
-    display: -webkit-box;
-    -webkit-box-orient: vertical;
-    -webkit-line-clamp: 1;
-    overflow: hidden;
-    color: var(--ref-color-grey-100);
-    text-overflow: ellipsis;
-    font-family: Averta, sans-serif;
-    font-size: var(--ref-font-size-sm);
-    font-weight: var(--ref-font-weight-bold);
-    line-height: var(--ref-font-line-height-sm);
-    margin: 0;
-}
-
-.ap-tooltip-item-caption {
-    display: -webkit-box;
-    -webkit-box-orient: vertical;
-    -webkit-line-clamp: 1;
-    overflow: hidden;
-    color: var(--ref-color-grey-80);
-    text-overflow: ellipsis;
-    font-family: Averta, sans-serif;
-    font-size: var(--ref-font-size-xs);
-    font-weight: var(--ref-font-weight-regular);
-    line-height: var(--ref-font-line-height-xs);
-    margin: 0;
-}