@idds/styles 1.2.11 → 1.2.12

package/src/components/tooltip.css

@@ -1,343 +0,0 @@
-/**
- * Tooltip Test Component Styles - Versi Sederhana
- * Menggunakan CSS murni seperti W3Schools
- * Support force :hover state dari developer tools
- */
-
-/* Base wrapper - sama seperti existing */
-.ina-tooltip {
-  position: relative;
-  display: inline-block;
-  cursor: pointer;
-}
-
-/* Tooltip content - hidden by default, shown on hover */
-.ina-tooltip__content {
-  visibility: hidden;
-  opacity: 0;
-  position: absolute;
-  z-index: 999999;
-  pointer-events: none;
-  transition: opacity 0.2s ease, visibility 0.2s ease;
-}
-
-/* Show tooltip on hover - support force state dari dev tools */
-.ina-tooltip:hover .ina-tooltip__content,
-.ina-tooltip[data-hover='true'] .ina-tooltip__content,
-.ina-tooltip__content:hover {
-  visibility: visible;
-  opacity: 1;
-  pointer-events: auto;
-}
-
-/* Hide tooltip when closed - override hover behavior */
-.ina-tooltip--closed .ina-tooltip__content,
-.ina-tooltip--closed:hover .ina-tooltip__content {
-  visibility: hidden !important;
-  opacity: 0 !important;
-  pointer-events: none !important;
-}
-
-/* Basic Tooltip Bubble */
-.ina-tooltip__bubble {
-  background-color: #000;
-  color: #fff;
-  text-align: center;
-  padding: 8px 12px;
-  border-radius: 6px;
-  font-size: 12px;
-  max-width: 320px;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
-}
-
-/* Positioning - Top */
-.ina-tooltip--placement-top .ina-tooltip__content {
-  bottom: calc(100% - 10px);
-  left: 50%;
-  transform: translateX(-50%);
-  margin-bottom: 8px;
-}
-
-/* Positioning - Bottom */
-.ina-tooltip--placement-bottom .ina-tooltip__content {
-  top: calc(100% - 10px);
-  left: 50%;
-  transform: translateX(-50%);
-  margin-top: 8px;
-}
-
-/* Positioning - Left */
-.ina-tooltip--placement-left .ina-tooltip__content {
-  right: calc(100% - 10px);
-  top: 50%;
-  transform: translateY(-50%);
-  margin-right: 8px;
-}
-
-/* Positioning - Right */
-.ina-tooltip--placement-right .ina-tooltip__content {
-  left: calc(100% - 10px);
-  top: 50%;
-  transform: translateY(-50%);
-  margin-left: 8px;
-}
-
-/* Arrow untuk tooltip - menggunakan ::after */
-.ina-tooltip__content--show-arrow::after {
-  content: '';
-  position: absolute;
-  width: 0;
-  height: 0;
-  border-style: solid;
-  pointer-events: none;
-}
-
-/* Arrow untuk top placement (arrow di bawah, pointing down) */
-.ina-tooltip--placement-top .ina-tooltip__content--show-arrow::after {
-  top: 100%;
-  left: 50%;
-  margin-left: -5px;
-  border-width: 5px;
-  border-color: #000 transparent transparent transparent;
-}
-
-/* Arrow untuk bottom placement (arrow di atas, pointing up) */
-.ina-tooltip--placement-bottom .ina-tooltip__content--show-arrow::after {
-  bottom: 100%;
-  left: 50%;
-  margin-left: -5px;
-  border-width: 5px;
-  border-color: transparent transparent #000 transparent;
-}
-
-/* Arrow untuk left placement (arrow di kanan, pointing right) */
-.ina-tooltip--placement-left .ina-tooltip__content--show-arrow::after {
-  left: 100%;
-  top: 50%;
-  margin-top: -5px;
-  border-width: 5px;
-  border-color: transparent transparent transparent #000;
-}
-
-/* Arrow untuk right placement (arrow di kiri, pointing left) */
-.ina-tooltip--placement-right .ina-tooltip__content--show-arrow::after {
-  right: 100%;
-  top: 50%;
-  margin-top: -5px;
-  border-width: 5px;
-  border-color: transparent #000 transparent transparent;
-}
-
-/* Card Tooltip (Light, Dark, Media) */
-.ina-tooltip__card {
-  position: relative;
-  pointer-events: auto;
-  border-radius: 8px;
-  box-shadow: 0 12px 16px -4px rgba(10, 13, 18, 0.08),
-    0 4px 6px -2px rgba(10, 13, 18, 0.03);
-  overflow: hidden;
-  width: 320px;
-  display: flex;
-  flex-direction: column;
-  background-color: #fff;
-  color: #1a1a1a;
-}
-
-.ina-tooltip__card--light {
-  background-color: #fff;
-  color: #1a1a1a;
-}
-
-.ina-tooltip__card--dark {
-  background-color: #1a1a1a;
-  color: #fff;
-}
-
-.ina-tooltip__card--media {
-  background-color: #fff;
-  color: #1a1a1a;
-}
-
-/* Close button */
-.ina-tooltip__close {
-  position: absolute;
-  top: 12px;
-  right: 12px;
-  width: 24px;
-  height: 24px;
-  border-radius: 50%;
-  background-color: rgba(0, 0, 0, 0.05);
-  border: none;
-  cursor: pointer;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  z-index: 10;
-  transition: all 0.2s ease;
-  color: #1a1a1a;
-  padding: 0;
-}
-
-.ina-tooltip__close:hover {
-  background-color: rgba(0, 0, 0, 0.1);
-}
-
-.ina-tooltip__card--dark .ina-tooltip__close {
-  background-color: rgba(255, 255, 255, 0.1);
-  color: #fff;
-}
-
-.ina-tooltip__card--dark .ina-tooltip__close:hover {
-  background-color: rgba(255, 255, 255, 0.2);
-}
-
-.ina-tooltip__close svg {
-  width: 16px;
-  height: 16px;
-  stroke: currentColor;
-}
-
-/* Image section (for media variant) */
-.ina-tooltip__image {
-  width: 100%;
-  height: 200px;
-  overflow: hidden;
-  background-color: #f5f5f5;
-  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: 16px;
-  display: flex;
-  flex-direction: column;
-  gap: 12px;
-}
-
-.ina-tooltip__title {
-  font-size: 16px;
-  font-weight: 600;
-  line-height: 24px;
-  color: #1a1a1a;
-  margin: 0;
-}
-
-.ina-tooltip__card--dark .ina-tooltip__title {
-  color: #fff;
-}
-
-.ina-tooltip__description {
-  font-size: 12px;
-  font-weight: 400;
-  line-height: 16px;
-  color: #666;
-  margin: 0;
-}
-
-.ina-tooltip__card--dark .ina-tooltip__description {
-  color: rgba(255, 255, 255, 0.7);
-}
-
-/* Action buttons */
-.ina-tooltip__actions {
-  display: flex;
-  gap: 8px;
-  justify-content: flex-end;
-  margin-top: 8px;
-}
-
-.ina-tooltip__action {
-  padding: 8px 16px;
-  border: none;
-  border-radius: 6px;
-  font-size: 14px;
-  font-weight: 500;
-  cursor: pointer;
-  transition: all 0.2s ease;
-}
-
-.ina-tooltip__action--close {
-  background-color: #fff;
-  color: #1a1a1a;
-  border: 1px solid #e0e0e0;
-}
-
-.ina-tooltip__action--close:hover {
-  background-color: #f5f5f5;
-}
-
-.ina-tooltip__action--next {
-  background-color: #e91e63;
-  color: #fff;
-}
-
-.ina-tooltip__action--next:hover {
-  background-color: #c2185b;
-}
-
-.ina-tooltip__card--dark .ina-tooltip__action--close {
-  background-color: rgba(255, 255, 255, 0.1);
-  color: #fff;
-  border-color: rgba(255, 255, 255, 0.2);
-}
-
-.ina-tooltip__card--dark .ina-tooltip__action--close:hover {
-  background-color: rgba(255, 255, 255, 0.2);
-}
-
-/* Arrow colors untuk card variant */
-.ina-tooltip--placement-top
-  .ina-tooltip__content--show-arrow.ina-tooltip--variant-light::after,
-.ina-tooltip--placement-top
-  .ina-tooltip__content--show-arrow.ina-tooltip--variant-media::after {
-  border-top-color: #fff;
-}
-
-.ina-tooltip--placement-top
-  .ina-tooltip__content--show-arrow.ina-tooltip--variant-dark::after {
-  border-top-color: #1a1a1a;
-}
-
-.ina-tooltip--placement-bottom
-  .ina-tooltip__content--show-arrow.ina-tooltip--variant-light::after,
-.ina-tooltip--placement-bottom
-  .ina-tooltip__content--show-arrow.ina-tooltip--variant-media::after {
-  border-bottom-color: #fff;
-}
-
-.ina-tooltip--placement-bottom
-  .ina-tooltip__content--show-arrow.ina-tooltip--variant-dark::after {
-  border-bottom-color: #1a1a1a;
-}
-
-.ina-tooltip--placement-left
-  .ina-tooltip__content--show-arrow.ina-tooltip--variant-light::after,
-.ina-tooltip--placement-left
-  .ina-tooltip__content--show-arrow.ina-tooltip--variant-media::after {
-  border-left-color: #fff;
-}
-
-.ina-tooltip--placement-left
-  .ina-tooltip__content--show-arrow.ina-tooltip--variant-dark::after {
-  border-left-color: #1a1a1a;
-}
-
-.ina-tooltip--placement-right
-  .ina-tooltip__content--show-arrow.ina-tooltip--variant-light::after,
-.ina-tooltip--placement-right
-  .ina-tooltip__content--show-arrow.ina-tooltip--variant-media::after {
-  border-right-color: #fff;
-}
-
-.ina-tooltip--placement-right
-  .ina-tooltip__content--show-arrow.ina-tooltip--variant-dark::after {
-  border-right-color: #1a1a1a;
-}