@agorapulse/ui-theme 20.1.17 → 20.1.19

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

@@ -0,0 +1,228 @@
+/* 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;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@agorapulse/ui-theme",
-  "version": "20.1.17",
+  "version": "20.1.19",
   "description": "Agorapulse UI Theme Library",
   "repository": {
     "type": "git",