@idds/styles 1.0.26

package/src/components/tooltip.css

@@ -0,0 +1,452 @@
+/**
+ * Tooltip Component Styles
+ * Menggunakan BEM naming convention dengan prefix "ina-"
+ * Support multiple variants: basic, light, dark, media, custom
+ */
+
+/* Base wrapper */
+.ina-tooltip {
+  position: relative;
+  display: inline-block;
+}
+
+.ina-tooltip__trigger {
+  display: inline-block;
+}
+
+/* Tooltip content container */
+.ina-tooltip__content {
+  position: absolute;
+  z-index: 999999;
+  /* Ensure tooltip is always on top of everything */
+  pointer-events: none;
+  /* Prevent clipping by any parent container */
+  transform: translateZ(0);
+  will-change: transform;
+}
+
+/* Basic Tooltip Bubble */
+.ina-tooltip__bubble {
+  background-color: var(--ina-neutral-700, var(--Neutral-700));
+  color: var(--ina-content-white, var(--Content-White));
+  pointer-events: auto;
+  font-size: 12px;
+  font-weight: 600;
+  line-height: 16px;
+  padding: 8px 12px;
+  border-radius: 8px;
+  white-space: nowrap;
+  max-width: 200px;
+}
+
+.ina-tooltip__bubble--basic {
+  white-space: normal;
+  word-wrap: break-word;
+}
+
+/* Card Tooltip (Light, Dark, Media) */
+.ina-tooltip__card {
+  position: relative;
+  pointer-events: auto;
+  border-radius: 8px;
+  box-shadow: 0 12px 16px -4px rgba(0, 0, 0, 0.1),
+    0 4px 6px -2px rgba(0, 0, 0, 0.05);
+  overflow: hidden;
+  width: 320px;
+  display: flex;
+  flex-direction: column;
+}
+
+.ina-tooltip__card--light {
+  background-color: var(--ina-background-primary, var(--ina-neutral-25));
+  color: var(--ina-content-primary, var(--ina-neutral-800));
+}
+
+.ina-tooltip__card--dark {
+  background-color: var(--ina-neutral-900, var(--Neutral-900));
+  color: var(--ina-content-white, var(--Content-White));
+}
+
+.ina-tooltip__card--media {
+  background-color: var(--ina-background-primary, var(--ina-neutral-25));
+  color: var(--ina-content-primary, var(--ina-neutral-800));
+}
+
+/* Close button */
+.ina-tooltip__close {
+  position: absolute;
+  top: 12px;
+  right: 12px;
+  width: 24px;
+  height: 24px;
+  border-radius: 50%;
+  background-color: var(
+    --ina-background-secondary,
+    var(--Background-Secondary)
+  );
+  border: none;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 10;
+  transition: all 0.2s ease;
+  color: var(--ina-content-primary, var(--ina-neutral-800));
+}
+
+.ina-tooltip__close:hover {
+  background-color: var(--ina-background-tertiary, var(--Background-Tertiary));
+}
+
+.ina-tooltip__card--dark .ina-tooltip__close {
+  background-color: var(--ina-neutral-800, var(--Neutral-800));
+  color: var(--ina-content-white, var(--Content-White));
+}
+
+.ina-tooltip__card--dark .ina-tooltip__close:hover {
+  background-color: var(--ina-neutral-700, var(--Neutral-700));
+}
+
+/* Image section (for media variant) */
+.ina-tooltip__image {
+  width: 100%;
+  height: 200px;
+  overflow: hidden;
+  background-color: var(--ina-background-tertiary, var(--Background-Tertiary));
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.ina-tooltip__image img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+/* Content section */
+.ina-tooltip__content-section {
+  padding: 32px 64px;
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.ina-tooltip__title {
+  font-size: 16px;
+  font-weight: 600;
+  line-height: 24px;
+  color: var(--ina-content-primary, var(--ina-neutral-800));
+  margin: 0;
+}
+
+.ina-tooltip__card--dark .ina-tooltip__title {
+  color: var(--ina-content-white, var(--Content-White));
+}
+
+.ina-tooltip__description {
+  font-size: 12px;
+  font-weight: 400;
+  line-height: 16px;
+  color: var(--ina-content-secondary, var(--Content-Secondary));
+  margin: 0;
+}
+
+.ina-tooltip__card--dark .ina-tooltip__description {
+  color: var(--ina-content-tertiary, var(--Content-Tertiary));
+}
+
+/* Pagination dots */
+.ina-tooltip__pagination {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+}
+
+.ina-tooltip__pagination-dot {
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background-color: var(--ina-stroke-primary, var(--Stroke-Primary));
+  transition: all 0.2s ease;
+}
+
+.ina-tooltip__pagination-dot--active {
+  background-color: var(--ina-content-primary, var(--ina-neutral-800));
+  width: 8px;
+  height: 8px;
+}
+
+.ina-tooltip__card--dark .ina-tooltip__pagination-dot {
+  background-color: var(--ina-neutral-600, var(--Neutral-600));
+}
+
+.ina-tooltip__card--dark .ina-tooltip__pagination-dot--active {
+  background-color: var(--ina-content-white, var(--Content-White));
+}
+
+/* Action buttons */
+.ina-tooltip__actions {
+  display: flex;
+  gap: 8px;
+  justify-content: flex-end;
+  margin-top: 8px;
+}
+
+.ina-tooltip__action {
+  flex-shrink: 0;
+}
+
+/* Tooltip arrow */
+.ina-tooltip__arrow {
+  position: absolute;
+  width: 0;
+  height: 0;
+}
+
+/* Arrow colors for variants */
+.ina-tooltip__arrow--variant-basic {
+  border-top-color: var(--ina-neutral-700, var(--Neutral-700));
+  border-bottom-color: var(--ina-neutral-700, var(--Neutral-700));
+  border-left-color: var(--ina-neutral-700, var(--Neutral-700));
+  border-right-color: var(--ina-neutral-700, var(--Neutral-700));
+}
+
+.ina-tooltip__arrow--variant-light {
+  border-top-color: var(--ina-background-primary, var(--ina-neutral-25));
+  border-bottom-color: var(--ina-background-primary, var(--ina-neutral-25));
+  border-left-color: var(--ina-background-primary, var(--ina-neutral-25));
+  border-right-color: var(--ina-background-primary, var(--ina-neutral-25));
+}
+
+.ina-tooltip__arrow--variant-dark {
+  border-top-color: var(--ina-neutral-900, var(--Neutral-900));
+  border-bottom-color: var(--ina-neutral-900, var(--Neutral-900));
+  border-left-color: var(--ina-neutral-900, var(--Neutral-900));
+  border-right-color: var(--ina-neutral-900, var(--Neutral-900));
+}
+
+.ina-tooltip__arrow--variant-media {
+  border-top-color: var(--ina-background-primary, var(--ina-neutral-25));
+  border-bottom-color: var(--ina-background-primary, var(--ina-neutral-25));
+  border-left-color: var(--ina-background-primary, var(--ina-neutral-25));
+  border-right-color: var(--ina-background-primary, var(--ina-neutral-25));
+}
+
+/* Positioning classes */
+.ina-tooltip--placement-top {
+  bottom: 100%;
+  left: 50%;
+  transform: translateX(-50%);
+  margin-bottom: 8px;
+}
+
+.ina-tooltip--placement-top-start {
+  bottom: 100%;
+  left: 0;
+  margin-bottom: 8px;
+}
+
+.ina-tooltip--placement-top-end {
+  bottom: 100%;
+  right: 0;
+  margin-bottom: 8px;
+}
+
+.ina-tooltip--placement-bottom {
+  top: 100%;
+  left: 50%;
+  transform: translateX(-50%);
+  margin-top: 8px;
+}
+
+.ina-tooltip--placement-bottom-start {
+  top: 100%;
+  left: 0;
+  margin-top: 8px;
+}
+
+.ina-tooltip--placement-bottom-end {
+  top: 100%;
+  right: 0;
+  margin-top: 8px;
+}
+
+.ina-tooltip--placement-left {
+  right: 100%;
+  top: 50%;
+  transform: translateY(-50%);
+  margin-right: 8px;
+}
+
+.ina-tooltip--placement-left-start {
+  right: 100%;
+  top: 0;
+  margin-right: 8px;
+}
+
+.ina-tooltip--placement-left-end {
+  right: 100%;
+  bottom: 0;
+  margin-right: 8px;
+}
+
+.ina-tooltip--placement-right {
+  left: 100%;
+  top: 50%;
+  transform: translateY(-50%);
+  margin-left: 8px;
+}
+
+.ina-tooltip--placement-right-start {
+  left: 100%;
+  top: 0;
+  margin-left: 8px;
+}
+
+.ina-tooltip--placement-right-end {
+  left: 100%;
+  bottom: 0;
+  margin-left: 8px;
+}
+
+/* Arrow positioning - Top arrows (pointing down) */
+.ina-tooltip__arrow--placement-top {
+  left: 50%;
+  transform: translateX(-50%);
+  bottom: -6px;
+  border-left: 6px solid transparent;
+  border-right: 6px solid transparent;
+  border-top: 6px solid;
+}
+
+.ina-tooltip__arrow--placement-top-start {
+  left: 16px;
+  bottom: -6px;
+  border-left: 6px solid transparent;
+  border-right: 6px solid transparent;
+  border-top: 6px solid;
+}
+
+.ina-tooltip__arrow--placement-top-end {
+  right: 16px;
+  bottom: -6px;
+  border-left: 6px solid transparent;
+  border-right: 6px solid transparent;
+  border-top: 6px solid;
+}
+
+/* Bottom arrows (pointing up) */
+.ina-tooltip__arrow--placement-bottom {
+  left: 50%;
+  transform: translateX(-50%);
+  top: -6px;
+  border-left: 6px solid transparent;
+  border-right: 6px solid transparent;
+  border-bottom: 6px solid;
+}
+
+.ina-tooltip__arrow--placement-bottom-start {
+  left: 16px;
+  top: -6px;
+  border-left: 6px solid transparent;
+  border-right: 6px solid transparent;
+  border-bottom: 6px solid;
+}
+
+.ina-tooltip__arrow--placement-bottom-end {
+  right: 16px;
+  top: -6px;
+  border-left: 6px solid transparent;
+  border-right: 6px solid transparent;
+  border-bottom: 6px solid;
+}
+
+/* Left arrows (pointing right) */
+.ina-tooltip__arrow--placement-left {
+  top: 50%;
+  transform: translateY(-50%);
+  right: -6px;
+  border-top: 6px solid transparent;
+  border-bottom: 6px solid transparent;
+  border-left: 6px solid;
+}
+
+.ina-tooltip__arrow--placement-left-start {
+  top: 16px;
+  right: -6px;
+  border-top: 6px solid transparent;
+  border-bottom: 6px solid transparent;
+  border-left: 6px solid;
+}
+
+.ina-tooltip__arrow--placement-left-end {
+  bottom: 16px;
+  right: -6px;
+  border-top: 6px solid transparent;
+  border-bottom: 6px solid transparent;
+  border-left: 6px solid;
+}
+
+/* Right arrows (pointing left) */
+.ina-tooltip__arrow--placement-right {
+  top: 50%;
+  transform: translateY(-50%);
+  left: -6px;
+  border-top: 6px solid transparent;
+  border-bottom: 6px solid transparent;
+  border-right: 6px solid;
+}
+
+.ina-tooltip__arrow--placement-right-start {
+  top: 16px;
+  left: -6px;
+  border-top: 6px solid transparent;
+  border-bottom: 6px solid transparent;
+  border-right: 6px solid;
+}
+
+.ina-tooltip__arrow--placement-right-end {
+  bottom: 16px;
+  left: -6px;
+  border-top: 6px solid transparent;
+  border-bottom: 6px solid transparent;
+  border-right: 6px solid;
+}
+
+/* Visibility states */
+.ina-tooltip__content--visible {
+  opacity: 1;
+  visibility: visible;
+  transition: opacity 0.2s ease, visibility 0.2s ease;
+}
+
+.ina-tooltip__content--hidden {
+  opacity: 0;
+  visibility: hidden;
+  transition: opacity 0.2s ease, visibility 0.2s ease;
+}
+
+/* Focus styles */
+.ina-tooltip:focus {
+  outline: 2px solid var(--ina-primary-500, var(--Primary-500));
+  outline-offset: 2px;
+}
+
+/* Responsive adjustments */
+@media (max-width: 640px) {
+  .ina-tooltip__bubble {
+    font-size: 11px;
+    max-width: 180px;
+    white-space: normal;
+    padding: 6px 10px;
+  }
+
+  .ina-tooltip__card {
+    width: 280px;
+  }
+
+  .ina-tooltip__content-section {
+    padding: 24px 32px;
+  }
+}