feat(textarea): support borderless

Tencent · Nov 19, 2024 · 2e22f97 · 2e22f97
1 parent 483aae0
commit 2e22f97
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 0 deletions.
diff --git a/style/web/components/textarea/_index.less b/style/web/components/textarea/_index.less
@@ -14,6 +14,23 @@
   position: relative;
   width: 100%;
 
+  // borderless mode
+  &--borderless:not(&--focused) {
+    border-color: transparent;
+    transition: @textarea-inner-transition;
+
+    &:hover {
+      border-color: @component-border;
+      background-color: @bg-color-container-hover;
+      cursor: pointer;
+    }
+
+    &.@{prefix}-is-disabled {
+      border: none;
+      background-color: @textarea-bg-color-disabled;
+    }
+  }
+
   &__inner {
     display: flex;
     width: 100%;

diff --git a/style/web/components/textarea/_var.less b/style/web/components/textarea/_var.less
@@ -52,3 +52,6 @@
 @textarea-box-shadow-color-error-focus: @error-color-focus;
 
 @textarea-border-radius: @border-radius-default;
+
+// 动画
+@textarea-inner-transition: border @anim-time-fn-easing @anim-duration-base, box-shadow @anim-time-fn-easing @anim-duration-base, background-color @anim-time-fn-easing @anim-duration-base;