element-plus 1.3.0-beta.8 → 1.3.0-beta.9

package/theme-chalk/src/common/var.scss

@@ -758,21 +758,6 @@ $skeleton: map.merge(
   $skeleton
 );
 
-// Tooltip
-// css3 var in packages/theme-chalk/src/tooltip.scss
-$tooltip: () !default;
-$tooltip: map.merge(
-  (
-    'fill': var(--el-text-color-primary),
-    'text-color': var(--el-color-white),
-    'font-size': 12px,
-    'border-color': var(--el-text-color-primary),
-    'arrow-size': 6px,
-    'padding': 10px,
-  ),
-  $tooltip
-);
-
 // Tag
 // css3 var in packages/theme-chalk/src/tag.scss
 $tag: () !default;

package/theme-chalk/src/popper.scss

@@ -9,10 +9,10 @@
 @include b(popper) {
   position: absolute;
   border-radius: var(--el-popper-border-radius);
-  padding: 10px;
+  padding: 6px 12px;
   z-index: 2000;
   font-size: 12px;
-  line-height: 1.2;
+  line-height: 20px;
   min-width: 10px;
   word-wrap: break-word;
   visibility: visible;
@@ -22,6 +22,7 @@
   @include when(dark) {
     color: var(--el-color-white);
     background: var(--el-text-color-primary);
+
     #{$arrow-selector}::before {
       background: var(--el-text-color-primary);
       right: 0;
@@ -29,6 +30,8 @@
   }
 
   @include when(light) {
+    // cause border has 1px offset
+    padding: 5px 11px;
     background: var(--el-color-white);
     border: 1px solid var(--el-border-color-light);
 
@@ -71,6 +74,21 @@
   @each $placement, $opposite in $placements {
     &[data-popper-placement^='#{$placement}'] > #{$arrow-selector} {
       #{$opposite}: -5px;
+
+      &::before {
+        @if $placement == top {
+          border-bottom-right-radius: 2px;
+        }
+        @if $placement == bottom {
+          border-top-left-radius: 2px;
+        }
+        @if $placement == left {
+          border-top-right-radius: 2px;
+        }
+        @if $placement == right {
+          border-bottom-left-radius: 2px;
+        }
+      }
     }
   }
 

package/theme-chalk/src/tooltip.scss

@@ -1,95 +0,0 @@
-@use 'sass:map';
-
-@use 'mixins/mixins' as *;
-@use 'mixins/var' as *;
-@use 'common/var' as *;
-
-$positions: top, bottom, left, right;
-
-$positionMap: (
-  'top': 'bottom',
-  'bottom': 'top',
-  'left': 'right',
-  'right': 'left',
-);
-
-@include b(tooltip) {
-  @include set-component-css-var('tooltip', $tooltip);
-}
-
-@include b(tooltip) {
-  &:focus:not(.focusing),
-  &:focus:hover {
-    outline-width: 0;
-  }
-  @include e(popper) {
-    position: absolute;
-    border-radius: 4px;
-    padding: var(--el-tooltip-padding);
-    z-index: var(--el-index-popper);
-    font-size: var(--el-tooltip-font-size);
-    line-height: 1.2;
-    min-width: 10px;
-    word-wrap: break-word;
-
-    .popper__arrow,
-    .popper__arrow::after {
-      position: absolute;
-      display: block;
-      width: 0;
-      height: 0;
-      border-color: transparent;
-      border-style: solid;
-    }
-
-    .popper__arrow {
-      border-width: var(--el-tooltip-arrow-size);
-    }
-
-    .popper__arrow::after {
-      content: ' ';
-      border-width: 5px;
-    }
-
-    @each $position in $positions {
-      &[x-placement^='#{$position}'] {
-        margin-#{map.get($positionMap, $position)}: calc(
-          var(--el-tooltip-arrow-size) + 6px
-        );
-      }
-
-      &[x-placement^='#{$position}'] .popper__arrow {
-        #{map.get($positionMap, $position)}: calc(
-          0px - var(--el-tooltip-arrow-size)
-        );
-        border-#{$position}-color: var(--el-tooltip-border-color);
-        border-#{map.get($positionMap, $position)}-width: 0;
-
-        &::after {
-          #{map.get($positionMap, $position)}: 1px;
-          border-#{$position}-color: var(--el-tooltip-fill);
-          border-#{map.get($positionMap, $position)}-width: 0;
-        }
-      }
-    }
-
-    @include when(dark) {
-      background: var(--el-tooltip-fill);
-      color: var(--el-tooltip-color);
-    }
-
-    @include when(light) {
-      background: var(--el-tooltip-color);
-      border: 1px solid var(--el-tooltip-fill);
-
-      @each $position in $positions {
-        &[x-placement^='#{$position}'] .popper__arrow {
-          border-top-color: var(--el-tooltip-fill);
-          &::after {
-            border-top-color: var(--el-tooltip-color);
-          }
-        }
-      }
-    }
-  }
-}