@pathscale/ui 0.0.163 → 0.0.164

package/dist/tooltip/tooltip.css

@@ -1,198 +0,0 @@
-@layer components {
-  .tooltip {
-      position: relative;
-      display: inline-block;
-      --tt-bg: var(--color-neutral);
-      --tt-off: calc(100% + 0.5rem);
-      --tt-tail: calc(100% + 1px + 0.25rem);
-    }
-
-  .tooltip > .tooltip-content,
-    .tooltip[data-tip]:before {
-      position: absolute;
-      max-width: 20rem;
-      border-radius: var(--radius-field);
-      padding-inline: calc(0.25rem * 2);
-      padding-block: calc(0.25rem * 1);
-      text-align: center;
-      white-space: normal;
-      color: var(--color-neutral-content);
-      opacity: 0%;
-      font-size: 0.875rem;
-      line-height: 1.25;
-      background-color: var(--tt-bg);
-      width: max-content;
-      pointer-events: none;
-      z-index: 2;
-      --tw-content: attr(data-tip);
-      content: var(--tw-content);
-    }
-
-  .tooltip:after {
-      opacity: 0%;
-      background-color: var(--tt-bg);
-      content: "";
-      pointer-events: none;
-      width: 0.625rem;
-      height: 0.25rem;
-      display: block;
-      position: absolute;
-      mask-repeat: no-repeat;
-      mask-position: -1px 0;
-      --mask-tooltip: url("data:image/svg+xml,%3Csvg width='10' height='4' viewBox='0 0 8 4' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0.500009 1C3.5 1 3.00001 4 5.00001 4C7 4 6.5 1 9.5 1C10 1 10 0.499897 10 0H0C-1.99338e-08 0.5 0 1 0.500009 1Z' fill='black'/%3E%3C/svg%3E%0A");
-      mask-image: var(--mask-tooltip);
-    }
-
-  @media (prefers-reduced-motion: no-preference) {
-    .tooltip > .tooltip-content,
-    .tooltip[data-tip]:before,
-    .tooltip:after {
-      transition: opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1) 75ms, transform 0.2s cubic-bezier(0.4, 0, 0.2, 1) 75ms;
-    }
-    }
-
-  .tooltip:is([data-tip]:not([data-tip=""]), :has(.tooltip-content:not(:empty))).tooltip-open > .tooltip-content,
-    .tooltip:is([data-tip]:not([data-tip=""]), :has(.tooltip-content:not(:empty))).tooltip-open[data-tip]:before,
-    .tooltip:is([data-tip]:not([data-tip=""]), :has(.tooltip-content:not(:empty))).tooltip-open:after,
-    .tooltip:is([data-tip]:not([data-tip=""]), :has(.tooltip-content:not(:empty))):hover > .tooltip-content,
-    .tooltip:is([data-tip]:not([data-tip=""]), :has(.tooltip-content:not(:empty))):hover[data-tip]:before,
-    .tooltip:is([data-tip]:not([data-tip=""]), :has(.tooltip-content:not(:empty))):hover:after,
-    .tooltip:is([data-tip]:not([data-tip=""]), :has(.tooltip-content:not(:empty))):has(:focus-visible) > .tooltip-content,
-    .tooltip:is([data-tip]:not([data-tip=""]), :has(.tooltip-content:not(:empty))):has(:focus-visible)[data-tip]:before,
-    .tooltip:is([data-tip]:not([data-tip=""]), :has(.tooltip-content:not(:empty))):has(:focus-visible):after {
-      opacity: 100%;
-      --tt-pos: 0rem;
-    }
-
-  @media (prefers-reduced-motion: no-preference) {
-    .tooltip:is([data-tip]:not([data-tip=""]), :has(.tooltip-content:not(:empty))).tooltip-open > .tooltip-content,
-    .tooltip:is([data-tip]:not([data-tip=""]), :has(.tooltip-content:not(:empty))).tooltip-open[data-tip]:before,
-    .tooltip:is([data-tip]:not([data-tip=""]), :has(.tooltip-content:not(:empty))).tooltip-open:after,
-    .tooltip:is([data-tip]:not([data-tip=""]), :has(.tooltip-content:not(:empty))):hover > .tooltip-content,
-    .tooltip:is([data-tip]:not([data-tip=""]), :has(.tooltip-content:not(:empty))):hover[data-tip]:before,
-    .tooltip:is([data-tip]:not([data-tip=""]), :has(.tooltip-content:not(:empty))):hover:after,
-    .tooltip:is([data-tip]:not([data-tip=""]), :has(.tooltip-content:not(:empty))):has(:focus-visible) > .tooltip-content,
-    .tooltip:is([data-tip]:not([data-tip=""]), :has(.tooltip-content:not(:empty))):has(:focus-visible)[data-tip]:before,
-    .tooltip:is([data-tip]:not([data-tip=""]), :has(.tooltip-content:not(:empty))):has(:focus-visible):after {
-      transition: opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1) 0s, transform 0.2s cubic-bezier(0.4, 0, 0.2, 1) 0s;
-    }
-    }
-
-  .tooltip > .tooltip-content,
-    .tooltip[data-tip]:before {
-      transform: translateX(-50%) translateY(var(--tt-pos, 0.25rem));
-      inset: auto auto var(--tt-off) 50%;
-    }
-
-  .tooltip:after {
-      transform: translateX(-50%) translateY(var(--tt-pos, 0.25rem));
-      inset: auto auto var(--tt-tail) 50%;
-    }
-
-  .tooltip-bottom > .tooltip-content,
-    .tooltip-bottom[data-tip]:before {
-      transform: translateX(-50%) translateY(var(--tt-pos, -0.25rem));
-      inset: var(--tt-off) auto auto 50%;
-    }
-
-  .tooltip-bottom:after {
-      transform: translateX(-50%) translateY(var(--tt-pos, -0.25rem)) rotate(180deg);
-      inset: var(--tt-tail) auto auto 50%;
-    }
-
-  .tooltip-left > .tooltip-content,
-    .tooltip-left[data-tip]:before {
-      transform: translateX(calc(var(--tt-pos, 0.25rem) - 0.25rem)) translateY(-50%);
-      inset: 50% var(--tt-off) auto auto;
-    }
-
-  .tooltip-left:after {
-      transform: translateX(var(--tt-pos, 0.25rem)) translateY(-50%) rotate(-90deg);
-      inset: 50% calc(var(--tt-tail) + 1px) auto auto;
-    }
-
-  .tooltip-right > .tooltip-content,
-    .tooltip-right[data-tip]:before {
-      transform: translateX(calc(var(--tt-pos, -0.25rem) + 0.25rem)) translateY(-50%);
-      inset: 50% auto auto var(--tt-off);
-    }
-
-  .tooltip-right:after {
-      transform: translateX(var(--tt-pos, -0.25rem)) translateY(-50%) rotate(90deg);
-      inset: 50% auto auto calc(var(--tt-tail) + 1px);
-    }
-
-  .tooltip-top > .tooltip-content,
-    .tooltip-top[data-tip]:before {
-      transform: translateX(-50%) translateY(var(--tt-pos, 0.25rem));
-      inset: auto auto var(--tt-off) 50%;
-    }
-
-  .tooltip-top:after {
-      transform: translateX(-50%) translateY(var(--tt-pos, 0.25rem));
-      inset: auto auto var(--tt-tail) 50%;
-    }
-
-  .tooltip-accent {
-      --tt-bg: var(--color-accent);
-    }
-
-  .tooltip-accent > .tooltip-content,
-    .tooltip-accent[data-tip]:before {
-      color: var(--color-accent-content);
-    }
-
-  .tooltip-error {
-      --tt-bg: var(--color-error);
-    }
-
-  .tooltip-error > .tooltip-content,
-    .tooltip-error[data-tip]:before {
-      color: var(--color-error-content);
-    }
-
-  .tooltip-info {
-      --tt-bg: var(--color-info);
-    }
-
-  .tooltip-info > .tooltip-content,
-    .tooltip-info[data-tip]:before {
-      color: var(--color-info-content);
-    }
-
-  .tooltip-primary {
-      --tt-bg: var(--color-primary);
-    }
-
-  .tooltip-primary > .tooltip-content,
-    .tooltip-primary[data-tip]:before {
-      color: var(--color-primary-content);
-    }
-
-  .tooltip-secondary {
-      --tt-bg: var(--color-secondary);
-    }
-
-  .tooltip-secondary > .tooltip-content,
-    .tooltip-secondary[data-tip]:before {
-      color: var(--color-secondary-content);
-    }
-
-  .tooltip-success {
-      --tt-bg: var(--color-success);
-    }
-
-  .tooltip-success > .tooltip-content,
-    .tooltip-success[data-tip]:before {
-      color: var(--color-success-content);
-    }
-
-  .tooltip-warning {
-      --tt-bg: var(--color-warning);
-    }
-
-  .tooltip-warning > .tooltip-content,
-    .tooltip-warning[data-tip]:before {
-      color: var(--color-warning-content);
-    }
-}