@aquera/nile-elements 0.1.35-beta-2.0 → 0.1.36-beta-1.0

package/src/nile-tooltip/nile-tooltip.css.ts

@@ -11,93 +11,60 @@ import { css } from 'lit';
  * Tooltip CSS
  */
 export const styles = css`
+  :host {
+    --max-width: 20rem;
+    --hide-delay: 0ms;
+    --show-delay: 150ms;
 
-
-:host {
-      position: relative;
-      display: inline-block;
-    }
-    .tooltip {
-      position: fixed;
-      z-index: 1000;
-      background-color: var(--nile-tooltip-color-background, #333);
-      color: var(--nile-colors-white-base, #fff);
-      padding: 6px 10px;
-      border-radius: 4px;
-      font-size: var(--nile-tooltip-font-size-sm, 14px);
-      line-height: var(--nile-tooltip-line-height-sm, 1.5);
-      opacity: 0;
-      transition: opacity 0.2s, transform 0.2s;
-      pointer-events: none;
-      white-space: normal;
-      visibility: hidden;
-      overflow: visible;
- 
-    }
-    :host([open]) .tooltip {
-      opacity: 1;
-      visibility: visible;
-      pointer-events: auto;
-    }
-    .tooltip-content {
-      overflow: auto;
-      max-width: 250px;
-      max-height: 116px;
-    }
-    .tooltip-caret {
-      position: absolute;
-      width: calc(2 * var(--caret-size, 6px));
-      height: calc(2 * var(--caret-size, 6px));
-      background-color: inherit;
-      transform: rotate(45deg);
-      z-index: -1;
-    }
-    .trigger-container {
-      display: inline-block;
-    }
- 
- 
-:host([open]) .tooltip {
-  visibility: visible;
-  pointer-events: auto;
-  animation: fadeIn 150ms forwards;
-}
-
- 
-.tooltip.hide {
-  animation: fadeOut 100ms forwards;
-}
-
- 
-@keyframes fadeIn {
-  from {
-    opacity: 0;
-    transform: translateY(5px);
+    display: contents;
   }
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}
 
- 
-@keyframes fadeOut {
-  from {
-    opacity: 1;
-    transform: translateY(0);
+  .tooltip {
+    --arrow-size: 6px;
+    --arrow-color: var(--nile-tooltip-color-background);
   }
-  to {
-    opacity: 0;
-    transform: translateY(5px);
+
+  .tooltip::part(popup) {
+    pointer-events: none;
+    z-index: 1000;
   }
-}
 
+  .tooltip[placement^='top']::part(popup) {
+    transform-origin: bottom;
+  }
 
+  .tooltip[placement^='bottom']::part(popup) {
+    transform-origin: top;
+  }
 
+  .tooltip[placement^='left']::part(popup) {
+    transform-origin: right;
+  }
 
+  .tooltip[placement^='right']::part(popup) {
+    transform-origin: left;
+  }
 
+  .tooltip__body {
+    display: block;
+    width: max-content;
+    max-width: var(--max-width);
+    border-radius: 4px;
+    background-color: var(--nile-tooltip-color-background);
+    font-size: var(--nile-tooltip-font-size-sm);
+    font-weight: var(--nile-tooltip-font-weight-sm);
+    line-height: var(--nile-tooltip-line-height-sm);
+    padding: var(--nile-tooltip-padding-y) var(--nile-tooltip-padding-x);
+    color: var(--nile-colors-white-base);
+    pointer-events: none;
+    word-break: break-word;
+  }
 
- 
+  .tooltip__body--large {
+    font-size: var(--nile-tooltip-font-size-lg);
+    line-height: var(--nile-tooltip-line-height-lg);
+    font-weight: var(--nile-tooltip-font-weight-lg);
+  }
 `;
 
-export default [styles];
+export default [styles];