From 3a106d952b6ec3217d7f95655f2406457383b873 Mon Sep 17 00:00:00 2001 From: danranVm Date: Tue, 27 Dec 2022 19:11:20 +0800 Subject: [PATCH] fix(comp:anchor): style update and css variable support (#1379) --- packages/components/anchor/docs/Index.zh.md | 1 + packages/components/anchor/docs/Theme.zh.md | 19 ++-------- packages/components/anchor/style/index.less | 37 ++++++++----------- .../anchor/style/themes/default.variable.less | 16 +------- .../anchor/style/themes/seer.variable.less | 7 ---- 5 files changed, 21 insertions(+), 59 deletions(-) diff --git a/packages/components/anchor/docs/Index.zh.md b/packages/components/anchor/docs/Index.zh.md index afc15f3d0..b0065de4f 100644 --- a/packages/components/anchor/docs/Index.zh.md +++ b/packages/components/anchor/docs/Index.zh.md @@ -3,5 +3,6 @@ category: components type: 其他 title: Anchor subtitle: 锚点 +theme: true --- diff --git a/packages/components/anchor/docs/Theme.zh.md b/packages/components/anchor/docs/Theme.zh.md index de6e1feb0..234f232f3 100644 --- a/packages/components/anchor/docs/Theme.zh.md +++ b/packages/components/anchor/docs/Theme.zh.md @@ -1,18 +1,5 @@ | 名称 | default | seer | 备注 | | --- | --- | --- | --- | -| `@anchor-background-color` | `@background-color-component` | - | - | -| `@anchor-wrapper-margin-left` | `-@spacing-xs` | - | - | -| `@anchor-wrapper-padding-left` | `@spacing-xs` | - | - | -| `@anchor-color` | `@text-color` | - | - | -| `@anchor-border-width` | `@border-width-md` | - | - | -| `@anchor-border-color` | `@border-color` | - | - | -| `@anchor-ink-ball-width` | `2px` | `2px` | - | -| `@anchor-ink-ball-height` | `16px` | `16px` | - | -| `@anchor-ink-ball-radius` | `2px` | `2px` | - | -| `@anchor-ink-ball-background-color` | `@color-primary` | - | - | -| `@anchor-link-margin` | `@spacing-md 0 @spacing-md @spacing-lg` | `@spacing-md 0 @spacing-lg @spacing-lg` | - | -| `@anchor-link-font-size` | `@font-size-md` | `@font-size-sm` | - | -| `@anchor-link-line-height` | `1` | - | - | -| `@anchor-ink-line-width` | `1px` | - | - | -| `@anchor-link-active-color` | `@color-primary` | - | - | -| `@anchor-link-hover-color` | `@color-primary` | - | - | +| `@anchor-color-active` | `var(--ix-color-primary)` | - | - | +| `@anchor-ink-ball-width` | `2px` | - | - | +| `@anchor-ink-ball-height` | `16px` | - | - | diff --git a/packages/components/anchor/style/index.less b/packages/components/anchor/style/index.less index bbfe107df..629b311a9 100644 --- a/packages/components/anchor/style/index.less +++ b/packages/components/anchor/style/index.less @@ -2,16 +2,17 @@ @import '../../style/mixins/ellipsis.less'; .@{anchor-prefix} { - .reset-component(); - position: relative; - padding: @spacing-xs 0 @spacing-xs @anchor-border-width; + padding: 4px 0 4px @anchor-ink-ball-width; &-wrapper { - margin-left: @anchor-wrapper-margin-left; - padding-left: @anchor-wrapper-padding-left; + .reset-component-new(); + .reset-font-size(); + .reset-color(); + + margin-left: -4px; + padding-left: 4px; overflow: auto; - background-color: @anchor-background-color; } &-ink { @@ -23,10 +24,10 @@ &::before { position: relative; display: block; - width: @anchor-ink-line-width; + width: 1px; height: 100%; margin: 0 auto; - background-color: @anchor-border-color; + background-color: var(--ix-border-color); content: ' '; } @@ -35,9 +36,9 @@ display: none; width: @anchor-ink-ball-width; height: @anchor-ink-ball-height; - background-color: @anchor-ink-ball-background-color; - border-radius: @anchor-ink-ball-radius; - transition: top @transition-duration-base @ease-in-out; + border-radius: @anchor-ink-ball-width; + background-color: @anchor-color-active; + transition: top var(--ix-transition-duration-fast) var(--ix-ease-in-out); &-visible { display: inline-block; @@ -57,25 +58,19 @@ } &-link { - margin: @anchor-link-margin; - line-height: @anchor-link-line-height; + margin: 8px 0 8px 16px; &-title { .ellipsis(); position: relative; display: block; - font-size: @anchor-link-font-size; - color: @anchor-color; text-decoration: none; - transition: @transition-all-base; + transition: color var(--ix-transition-duration-fast); - &:hover { - color: @anchor-link-hover-color; - } - + &:hover, &-active { - color: @anchor-link-active-color; + color: @anchor-color-active; } } } diff --git a/packages/components/anchor/style/themes/default.variable.less b/packages/components/anchor/style/themes/default.variable.less index 44ee425e5..1cab19001 100644 --- a/packages/components/anchor/style/themes/default.variable.less +++ b/packages/components/anchor/style/themes/default.variable.less @@ -1,18 +1,4 @@ -@anchor-background-color: @background-color-component; -@anchor-wrapper-margin-left: -@spacing-xs; -@anchor-wrapper-padding-left: @spacing-xs; -@anchor-color: @text-color; -@anchor-border-width: @border-width-md; -@anchor-border-color: @border-color; +@anchor-color-active: var(--ix-color-primary); @anchor-ink-ball-width: 2px; @anchor-ink-ball-height: 16px; -@anchor-ink-ball-radius: 2px; -@anchor-ink-ball-background-color: @color-primary; - -@anchor-link-margin: @spacing-md 0 @spacing-md @spacing-lg; -@anchor-link-font-size: @font-size-md; -@anchor-link-line-height: 1; -@anchor-ink-line-width: 1px; -@anchor-link-active-color: @color-primary; -@anchor-link-hover-color: @color-primary; diff --git a/packages/components/anchor/style/themes/seer.variable.less b/packages/components/anchor/style/themes/seer.variable.less index 201942f4d..498793af1 100644 --- a/packages/components/anchor/style/themes/seer.variable.less +++ b/packages/components/anchor/style/themes/seer.variable.less @@ -1,8 +1 @@ @import './default.variable.less'; - -@anchor-ink-ball-width: 2px; -@anchor-ink-ball-height: 16px; -@anchor-ink-ball-radius: 2px; - -@anchor-link-font-size: @font-size-sm; -@anchor-link-margin: @spacing-md 0 @spacing-lg @spacing-lg;