docs(Link): update docs and style files (#1887)

Co-authored-by: anlyyao <[email protected]>
Tencent · Aug 20, 2024 · 41d40c7 · 41d40c7
1 parent a2335a9
commit 41d40c7
Show file tree

Hide file tree

Showing 4 changed files with 103 additions and 20 deletions.
diff --git a/docs/mobile/api/link.en-US.md b/docs/mobile/api/link.en-US.md
@@ -0,0 +1,17 @@
+---
+title: Link 
+description: Links are used to start a new task or jump to a new page.
+
+spline: base
+isComponent: true
+toc: false
+---
+
+
+### 01 Component Type
+
+{{ base }}
+
+### 02 Component Status
+
+{{ status }}
diff --git a/docs/mobile/api/link.md b/docs/mobile/api/link.md
@@ -0,0 +1,15 @@
+---
+title: Link 标签
+description: 用于开启一个任务或跳转一个新页面。
+spline: base
+isComponent: true
+toc: false
+---
+
+### 01 组件类型
+
+{{ base }}
+
+### 02 组件状态
+
+{{ status }}
diff --git a/style/mobile/components/link/_index.less b/style/mobile/components/link/_index.less
@@ -35,11 +35,13 @@
       color: @@disabledColor;
     }
 
-    &.@{link}--hover {
-      color: @@activeColor;
+    &:active {
+      &.@{link}--hover {
+        color: @@activeColor;
 
-      &.@{link}--underline::after {
-        border-color: @@activeColor;
+        &.@{link}--underline::after {
+          border-color: @@activeColor;
+        }
       }
     }
   }
@@ -60,23 +62,26 @@
   display: flex;
   align-items: center;
   box-sizing: content-box;
+  text-decoration: none;
 
   &--underline::after {
     content: "";
     position: absolute;
     left: 0;
     right: 0;
     height: 0;
-    bottom: 0;
+    bottom: 2px;
     opacity: 1;
     border-bottom: 1px solid rgb(205, 11, 231);
   }
 
   &__prefix-icon:not(:empty) + &__content:not(:empty) {
     padding-left: 4px;
+    display: inherit;
   }
 
   &__content:not(:empty) + &__suffix-icon:not(:empty) {
     padding-left: 4px;
+    display: inherit;
   }
 }
diff --git a/style/mobile/components/link/_var.less b/style/mobile/components/link/_var.less
@@ -1,28 +1,73 @@
 // 状态色 - 默认色
 
-@link-default-color: var(--td-link-default-color, @font-gray-1); // default 主题默认态颜色
-@link-default-active-color: var(--td-link-default-active-color, @brand-color-active); // default 主题激活态颜色
-@link-default-disabled-color: var(--td-link-default-disabled-color, @text-color-disabled); // default 主题禁用态颜色
+@link-default-color: var(
+  --td-link-default-color,
+  @text-color-primary
+); // default 主题默认态颜色
+@link-default-active-color: var(
+  --td-link-default-active-color,
+  @brand-color-active
+); // default 主题激活态颜色
+@link-default-disabled-color: var(
+  --td-link-default-disabled-color,
+  @text-color-disabled
+); // default 主题禁用态颜色
 
 // 状态色 - 主色
-@link-primary-color: var(--td-link-primary-color, @brand-color); // primary 主题默认态颜色
-@link-primary-active-color: var(--td-link-primary-active-color, @brand-color-active); // primary 主题激活态颜色
-@link-primary-disabled-color: var(--td-link-primary-disabled-color, @brand-color-disabled); // primary 主题禁用态颜色
+@link-primary-color: var(
+  --td-link-primary-color,
+  @brand-color
+); // primary 主题默认态颜色
+@link-primary-active-color: var(
+  --td-link-primary-active-color,
+  @brand-color-active
+); // primary 主题激活态颜色
+@link-primary-disabled-color: var(
+  --td-link-primary-disabled-color,
+  @brand-color-disabled
+); // primary 主题禁用态颜色
 
 // 状态色 - 成功
-@link-success-color: var(--td-link-success-color, @success-color); // success 主题默认态颜色
-@link-success-active-color: var(--td-link-success-active-color, @success-color-active); // success 主题激活态颜色
-@link-success-disabled-color: var(--td-link-success-disabled-color, @success-color-disabled); // success 主题禁用态颜色
+@link-success-color: var(
+  --td-link-success-color,
+  @success-color
+); // success 主题默认态颜色
+@link-success-active-color: var(
+  --td-link-success-active-color,
+  @success-color-active
+); // success 主题激活态颜色
+@link-success-disabled-color: var(
+  --td-link-success-disabled-color,
+  @success-color-disabled
+); // success 主题禁用态颜色
 
 // 状态色 - 警告
-@link-warning-color: var(--td-link-warning-color, @warning-color); // warning 主题默认态颜色
-@link-warning-active-color: var(--td-link-warning-active-color, @warning-color-active); // warning 主题激活态颜色
-@link-warning-disabled-color: var(--td-link-warning-disabled-color, @warning-color-disabled); // warning 主题禁用态颜色
+@link-warning-color: var(
+  --td-link-warning-color,
+  @warning-color
+); // warning 主题默认态颜色
+@link-warning-active-color: var(
+  --td-link-warning-active-color,
+  @warning-color-active
+); // warning 主题激活态颜色
+@link-warning-disabled-color: var(
+  --td-link-warning-disabled-color,
+  @warning-color-disabled
+); // warning 主题禁用态颜色
 
 // 状态色 - 危险
-@link-danger-color: var(--td-link-danger-color, @error-color); // danger 主题默认态颜色
-@link-danger-active-color: var(--td-link-danger-active-color, @error-color-active); // danger 主题激活态颜色
-@link-danger-disabled-color: var(--td-link-danger-disabled-color, @error-color-disabled); // danger 主题禁用态颜色
+@link-danger-color: var(
+  --td-link-danger-color,
+  @error-color
+); // danger 主题默认态颜色
+@link-danger-active-color: var(
+  --td-link-danger-active-color,
+  @error-color-active
+); // danger 主题激活态颜色
+@link-danger-disabled-color: var(
+  --td-link-danger-disabled-color,
+  @error-color-disabled
+); // danger 主题禁用态颜色
 
 // 字号
 @link-content-small-font-size: 12px;
@@ -37,6 +82,7 @@
 @link-content-large-line-height: 24px;
 @link-icon-large-font-size: 18px;
 
+@link-icon-margin: 6px;
 @themes: primary, success, warning, default, danger;
 
 @link: ~"@{prefix}-link";