@element-plus/nightly 0.0.20240226 → 0.0.20240227

package/theme-chalk/src/anchor-link.scss

@@ -0,0 +1,42 @@
+@use 'sass:map';
+
+@use 'mixins/mixins' as *;
+@use 'mixins/var' as *;
+@use 'common/var' as *;
+
+@include b(anchor) {
+
+  @include e(item) {
+    overflow: hidden;
+    display: flex;
+    flex-direction: column;
+  }
+
+  @include e(link) {
+    font-size: getCssVar('anchor-font-size');
+    line-height: getCssVar('anchor-line-height');
+    padding: 4px 0;
+    color: getCssVar('anchor-color');
+    transition: color getCssVar('transition-duration');
+    white-space: nowrap;
+    text-decoration: none;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    max-width: 100%;
+    outline: none;
+    cursor: pointer;
+
+    &:hover, &:focus {
+      color: getCssVar('anchor-color');
+    }
+
+    @include when(active) {
+      color: getCssVar('anchor-active-color');
+    }
+  }
+
+  & .#{$namespace}-anchor__list .#{$namespace}-anchor__item a {
+    display: inline-block;
+  }
+
+}

package/theme-chalk/src/anchor.scss

@@ -0,0 +1,93 @@
+@use 'sass:map';
+
+@use 'mixins/mixins' as *;
+@use 'mixins/var' as *;
+@use 'common/var' as *;
+
+@include b(anchor) {
+  @include set-component-css-var('anchor', $anchor);
+
+  position: relative;
+  background-color: getCssVar('anchor-bg-color') ;
+
+  @include e(marker) {
+    position: absolute;
+    background-color: getCssVar('anchor-marker-bg-color');
+    border-radius: 4px;
+    opacity: 0;
+    z-index: 0;
+  }
+
+  &.#{$namespace}-anchor--vertical {
+
+    @include e(marker) {
+      width: 4px;
+      height: 14px;
+      top: 8px;
+      left: 0;
+      transition: top .25s cubic-bezier(0,1,.5,1),opacity .25s;
+    }
+
+    @include e(list) {
+      padding-left: getCssVar('anchor-padding-indent');
+    }
+
+    &.#{$namespace}-anchor--underline {
+      &::before {
+        position: absolute;
+        left: 0;
+        width: 2px;
+        height: 100%;
+        background-color: rgba(5, 5, 5, 0.06);
+        content: "";
+      }
+  
+      @include e(marker) {
+        width: 2px;
+        border-radius: unset;
+      }
+    }
+
+  }
+
+  &.#{$namespace}-anchor--horizontal {
+
+    @include e(marker) {
+      height: 2px;
+      width: 20px;
+      bottom: 0;
+      transition: left .25s cubic-bezier(0,1,.5,1),opacity .25s, width .25s;
+    }
+
+    @include e(list) {
+      display: flex;
+      padding-bottom: 4px;
+
+      @include e(item) {
+        padding-left: 16px;
+
+        &:first-child {
+          padding-left: 0;
+        }
+      }
+    }
+
+    &.#{$namespace}-anchor--underline {
+      &::before {
+        position: absolute;
+        bottom: 0;
+        width: 100%;
+        height: 2px;
+        background-color: rgba(5, 5, 5, 0.06);
+        content: "";
+      }
+  
+      @include e(marker) {
+        height: 2px;
+        border-radius: unset;
+      }
+    }
+
+  }
+
+}

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

@@ -816,6 +816,22 @@ $tour: map.merge(
   $tour
 );
 
+// Anchor
+// css3 var in packages/theme-chalk/src/anchor.scss
+$anchor: () !default;
+$anchor: map.merge(
+  (
+    'bg-color': getCssVar('bg-color'),
+    'padding-indent': 14px,
+    'line-height': 22px,
+    'font-size': 12px,
+    'color': getCssVar('text-color-secondary'),
+    'active-color': getCssVar('color-primary'),
+    'marker-bg-color': getCssVar('color-primary'),
+  ),
+  $anchor
+);
+
 // Table
 // css3 var in packages/theme-chalk/src/table.scss
 $table: () !default;

package/theme-chalk/src/index.scss

@@ -104,3 +104,5 @@
 @use './option-group.scss';
 @use './statistic.scss';
 @use './tour.scss';
+@use './anchor.scss';
+@use './anchor-link.scss';