@element-plus/nightly 0.0.20220327 → 0.0.20220330

package/theme-chalk/src/index.scss

@@ -89,6 +89,7 @@
 @use './timeline-item.scss';
 @use './timeline.scss';
 @use './tooltip.scss';
+@use './tooltip-v2.scss';
 @use './transfer.scss';
 @use './tree.scss';
 @use './upload.scss';

package/theme-chalk/src/tooltip-v2.scss

@@ -0,0 +1,91 @@
+@use 'mixins/mixins' as *;
+@use 'mixins/var' as *;
+@use 'common/var' as *;
+
+@include b(tooltip-v2) {
+  @include e(content) {
+    --el-tooltip-v2-padding: 5px 10px;
+    --el-tooltip-v2-border-radius: 4px;
+    --#{$namespace}-tooltip-v2-border-color: var(--el-border-color);
+
+    border-radius: var(--el-tooltip-v2-border-radius);
+    color: var(--el-color-black);
+    background-color: var(--el-color-white);
+    padding: var(--el-tooltip-v2-padding);
+    border: 1px solid var(--el-border-color);
+
+    $content-selector: &;
+
+    $sides: (
+      'top': 'bottom',
+      'bottom': 'top',
+      'left': 'right',
+      'right': 'left',
+    );
+
+    @include e(arrow) {
+      position: absolute;
+      color: var(--el-color-white);
+      width: var(--#{$namespace}-tooltip-v2-arrow-width);
+      height: var(--#{$namespace}-tooltip-v2-arrow-height);
+      pointer-events: none;
+      left: var(--#{$namespace}-tooltip-v2-arrow-x);
+      top: var(--#{$namespace}-tooltip-v2-arrow-y);
+
+      &::before {
+        content: '';
+        width: 0;
+        height: 0;
+        border: var(--#{$namespace}-tooltip-v2-arrow-border-width) solid
+          transparent;
+        position: absolute;
+      }
+
+      &::after {
+        content: '';
+        width: 0;
+        height: 0;
+        border: var(--#{$namespace}-tooltip-v2-arrow-border-width) solid
+          transparent;
+        position: absolute;
+      }
+
+      @each $side, $opposite in $sides {
+        #{$content-selector}[data-side^='#{$side}'] & {
+          #{$opposite}: 0;
+        }
+
+        #{$content-selector}[data-side^='#{$side}'] &::before {
+          border-#{$side}-color: var(--#{$namespace}-color-white);
+          border-#{$side}-width: var(
+            --#{$namespace}-tooltip-v2-arrow-border-width
+          );
+          border-#{$opposite}: 0;
+          #{$side}: calc(100% - 1px);
+        }
+
+        #{$content-selector}[data-side^='#{$side}'] &::after {
+          border-#{$side}-color: var(--#{$namespace}-border-color);
+          border-#{$side}-width: var(
+            --#{$namespace}-tooltip-v2-arrow-border-width
+          );
+          border-#{$opposite}: 0;
+          #{$side}: 100%;
+          z-index: -1;
+        }
+      }
+    }
+
+    &.is-dark {
+      --#{$namespace}-tooltip-v2-border-color: transparent;
+      background-color: var(--el-color-black);
+      color: var(--el-color-white);
+      border-color: transparent;
+
+      @include e(arrow) {
+        background-color: var(--el-color-black);
+        border-color: transparent;
+      }
+    }
+  }
+}