From 5036880fc037e5d112206b93a729f60be12bf8ab Mon Sep 17 00:00:00 2001 From: riku <risaku@163.com> Date: 星期四, 07 十一月 2024 17:03:13 +0800 Subject: [PATCH] 2024.11.07 bug修复 --- miniprogram_npm/tdesign-miniprogram/button/button.wxss | 75 +++++++++++++++++++++++++++++-------- 1 files changed, 59 insertions(+), 16 deletions(-) diff --git a/miniprogram_npm/tdesign-miniprogram/button/button.wxss b/miniprogram_npm/tdesign-miniprogram/button/button.wxss index a627360..c3c7d1b 100644 --- a/miniprogram_npm/tdesign-miniprogram/button/button.wxss +++ b/miniprogram_npm/tdesign-miniprogram/button/button.wxss @@ -66,8 +66,9 @@ font-size: var(--td-button-large-icon-font-size, 48rpx); } .t-button--default { - color: var(--td-button-default-color, var(--td-font-gray-1, rgba(0, 0, 0, 0.9))); + color: var(--td-button-default-color, var(--td-text-color-primary, var(--td-font-gray-1, rgba(0, 0, 0, 0.9)))); background-color: var(--td-button-default-bg-color, var(--td-bg-color-component, var(--td-gray-color-3, #e7e7e7))); + border-color: var(--td-button-default-border-color, var(--td-bg-color-component, var(--td-gray-color-3, #e7e7e7))); } .t-button--default::after { border-width: var(--td-button-border-width, 4rpx); @@ -76,20 +77,23 @@ .t-button--default.t-button--hover { z-index: 0; } +.t-button--default.t-button--hover, .t-button--default.t-button--hover::after { background-color: var(--td-button-default-active-bg-color, var(--td-bg-color-component-active, var(--td-gray-color-6, #a6a6a6))); border-color: var(--td-button-default-active-border-color, var(--td-bg-color-component-active, var(--td-gray-color-6, #a6a6a6))); } .t-button--default.t-button--disabled { - color: var(--td-button-default-disabled-color, var(--td-font-gray-4, rgba(0, 0, 0, 0.26))); + color: var(--td-button-default-disabled-color, var(--td-text-color-disabled, var(--td-font-gray-4, rgba(0, 0, 0, 0.26)))); background-color: var(--td-button-default-disabled-bg, var(--td-bg-color-component-disabled, var(--td-gray-color-2, #eeeeee))); } +.t-button--default.t-button--disabled, .t-button--default.t-button--disabled::after { border-color: var(--td-button-default-disabled-border-color, var(--td-bg-color-component-disabled, var(--td-gray-color-2, #eeeeee))); } .t-button--primary { color: var(--td-button-primary-color, var(--td-font-white-1, #ffffff)); background-color: var(--td-button-primary-bg-color, var(--td-brand-color, var(--td-primary-color-7, #0052d9))); + border-color: var(--td-button-primary-border-color, var(--td-brand-color, var(--td-primary-color-7, #0052d9))); } .t-button--primary::after { border-width: var(--td-button-border-width, 4rpx); @@ -98,6 +102,7 @@ .t-button--primary.t-button--hover { z-index: 0; } +.t-button--primary.t-button--hover, .t-button--primary.t-button--hover::after { background-color: var(--td-button-primary-active-bg-color, var(--td-brand-color-active, var(--td-primary-color-8, #003cab))); border-color: var(--td-button-primary-active-border-color, var(--td-brand-color-active, var(--td-primary-color-8, #003cab))); @@ -106,12 +111,14 @@ color: var(--td-button-primary-disabled-color, var(--td-font-white-1, #ffffff)); background-color: var(--td-button-primary-disabled-bg, var(--td-brand-color-disabled, var(--td-primary-color-3, #b5c7ff))); } +.t-button--primary.t-button--disabled, .t-button--primary.t-button--disabled::after { border-color: var(--td-button-primary-disabled-border-color, var(--td-brand-color-disabled, var(--td-primary-color-3, #b5c7ff))); } .t-button--light { color: var(--td-button-light-color, var(--td-brand-color, var(--td-primary-color-7, #0052d9))); background-color: var(--td-button-light-bg-color, var(--td-brand-color-light, var(--td-primary-color-1, #f2f3ff))); + border-color: var(--td-button-light-border-color, var(--td-brand-color-light, var(--td-primary-color-1, #f2f3ff))); } .t-button--light::after { border-width: var(--td-button-border-width, 4rpx); @@ -120,6 +127,7 @@ .t-button--light.t-button--hover { z-index: 0; } +.t-button--light.t-button--hover, .t-button--light.t-button--hover::after { background-color: var(--td-button-light-active-bg-color, var(--td-brand-color-light-active, var(--td-primary-color-2, #d9e1ff))); border-color: var(--td-button-light-active-border-color, var(--td-brand-color-light-active, var(--td-primary-color-2, #d9e1ff))); @@ -128,12 +136,14 @@ color: var(--td-button-light-disabled-color, var(--td-brand-color-disabled, var(--td-primary-color-3, #b5c7ff))); background-color: var(--td-button-light-disabled-bg, var(--td-brand-color-light, var(--td-primary-color-1, #f2f3ff))); } +.t-button--light.t-button--disabled, .t-button--light.t-button--disabled::after { border-color: var(--td-button-light-disabled-border-color, var(--td-brand-color-light, var(--td-primary-color-1, #f2f3ff))); } .t-button--danger { color: var(--td-button-danger-color, var(--td-font-white-1, #ffffff)); background-color: var(--td-button-danger-bg-color, var(--td-error-color, var(--td-error-color-6, #d54941))); + border-color: var(--td-button-danger-border-color, var(--td-error-color, var(--td-error-color-6, #d54941))); } .t-button--danger::after { border-width: var(--td-button-border-width, 4rpx); @@ -142,6 +152,7 @@ .t-button--danger.t-button--hover { z-index: 0; } +.t-button--danger.t-button--hover, .t-button--danger.t-button--hover::after { background-color: var(--td-button-danger-active-bg-color, var(--td-error-color-7, #ad352f)); border-color: var(--td-button-danger-active-border-color, var(--td-error-color-7, #ad352f)); @@ -150,6 +161,7 @@ color: var(--td-button-danger-disabled-color, var(--td-font-white-1, #ffffff)); background-color: var(--td-button-danger-disabled-bg, var(--td-error-color-3, #ffb9b0)); } +.t-button--danger.t-button--disabled, .t-button--danger.t-button--disabled::after { border-color: var(--td-button-danger-disabled-border-color, var(--td-error-color-3, #ffb9b0)); } @@ -168,6 +180,7 @@ font-family: PingFang SC, Microsoft YaHei, Arial Regular; font-weight: var(--td-button-font-weight, 600); vertical-align: top; + box-sizing: border-box; cursor: pointer; -webkit-tap-highlight-color: transparent; -webkit-user-select: none; @@ -179,66 +192,75 @@ border-radius: calc(var(--td-button-border-radius, var(--td-radius-default, 12rpx)) * 2); } .t-button--text { - color: var(--td-button-default-color, var(--td-font-gray-1, rgba(0, 0, 0, 0.9))); - background: none; + color: var(--td-button-default-color, var(--td-text-color-primary, var(--td-font-gray-1, rgba(0, 0, 0, 0.9)))); + background-color: var(--td-bg-color-container, var(--td-font-white-1, #ffffff)); } +.t-button--text, .t-button--text::after { border: 0; } +.t-button--text.t-button--hover, .t-button--text.t-button--hover::after { background-color: var(--td-button-default-text-active-bg-color, var(--td-bg-color-container-active, var(--td-gray-color-3, #e7e7e7))); } .t-button--text.t-button--primary { color: var(--td-button-primary-text-color, var(--td-brand-color, var(--td-primary-color-7, #0052d9))); - background: none; + background-color: var(--td-bg-color-container, var(--td-font-white-1, #ffffff)); } +.t-button--text.t-button--primary.t-button--hover, .t-button--text.t-button--primary.t-button--hover::after { background-color: var(--td-button-primary-text-active-bg-color, var(--td-bg-color-container-active, var(--td-gray-color-3, #e7e7e7))); } .t-button--text.t-button--primary.t-button--disabled { color: var(--td-button-primary-text-disabled-color, var(--td-brand-color-disabled, var(--td-primary-color-3, #b5c7ff))); - background: none; + background-color: var(--td-bg-color-container, var(--td-font-white-1, #ffffff)); } .t-button--text.t-button--danger { color: var(--td-button-danger-text-color, var(--td-error-color, var(--td-error-color-6, #d54941))); - background: none; + background-color: var(--td-bg-color-container, var(--td-font-white-1, #ffffff)); } +.t-button--text.t-button--danger.t-button--hover, .t-button--text.t-button--danger.t-button--hover::after { background-color: var(--td-button-danger-text-active-bg-color, var(--td-bg-color-container-active, var(--td-gray-color-3, #e7e7e7))); } .t-button--text.t-button--danger.t-button--disabled { color: var(--td-button-danger-text-disabled-color, var(--td-button-danger-disabled-color, var(--td-font-white-1, #ffffff))); - background: none; + background-color: var(--td-bg-color-container, var(--td-font-white-1, #ffffff)); } .t-button--text.t-button--light { color: var(--td-button-light-text-color, var(--td-brand-color, var(--td-primary-color-7, #0052d9))); - background: none; + background-color: var(--td-bg-color-container, var(--td-font-white-1, #ffffff)); } +.t-button--text.t-button--light.t-button--hover, .t-button--text.t-button--light.t-button--hover::after { background-color: var(--td-button-light-text-active-bg-color, var(--td-bg-color-container-active, var(--td-gray-color-3, #e7e7e7))); } .t-button--text.t-button--disabled { - color: var(--td-button-default-disabled-color, var(--td-font-gray-4, rgba(0, 0, 0, 0.26))); + color: var(--td-button-default-disabled-color, var(--td-text-color-disabled, var(--td-font-gray-4, rgba(0, 0, 0, 0.26)))); } .t-button--ghost { background-color: transparent; color: var(--td-button-ghost-color, var(--td-bg-color-container, var(--td-font-white-1, #ffffff))); } +.t-button--ghost, .t-button--ghost::after { border-color: var(--td-button-ghost-border-color, var(--td-button-ghost-color, var(--td-bg-color-container, var(--td-font-white-1, #ffffff)))); } +.t-button--ghost.t-button--hover, .t-button--ghost.t-button--hover::after { background: none; } .t-button--ghost.t-button--primary { color: var(--td-button-ghost-primary-color, var(--td-brand-color, var(--td-primary-color-7, #0052d9))); } +.t-button--ghost.t-button--primary, .t-button--ghost.t-button--primary::after { border-color: var(--td-button-ghost-primary-border-color, var(--td-brand-color, var(--td-primary-color-7, #0052d9))); } .t-button--ghost.t-button--danger { color: var(--td-button-ghost-danger-color, var(--td-error-color, var(--td-error-color-6, #d54941))); } +.t-button--ghost.t-button--danger, .t-button--ghost.t-button--danger::after { border-color: var(--td-button-ghost-danger-border-color, var(--td-error-color, var(--td-error-color-6, #d54941))); } @@ -246,16 +268,19 @@ background-color: transparent; color: var(--td-button-ghost-disabled-color, rgba(255, 255, 255, 0.35)); } +.t-button--ghost.t-button--disabled, .t-button--ghost.t-button--disabled::after { border-color: var(--td-button-ghost-disabled-color, rgba(255, 255, 255, 0.35)); } .t-button--outline { - color: var(--td-button-default-outline-color, var(--td-font-gray-1, rgba(0, 0, 0, 0.9))); - background-color: transparent; + color: var(--td-button-default-outline-color, var(--td-text-color-primary, var(--td-font-gray-1, rgba(0, 0, 0, 0.9)))); + background-color: var(--td-bg-color-container, var(--td-font-white-1, #ffffff)); } +.t-button--outline, .t-button--outline::after { border-color: var(--td-button-default-outline-border-color, var(--td-component-border, var(--td-gray-color-4, #dcdcdc))); } +.t-button--outline.t-button--hover, .t-button--outline.t-button--hover::after { background-color: var(--td-button-default-outline-active-bg-color, var(--td-bg-color-container-active, var(--td-gray-color-3, #e7e7e7))); border-color: var(--td-button-default-outline-active-border-color, var(--td-component-border, var(--td-gray-color-4, #dcdcdc))); @@ -263,12 +288,14 @@ .t-button--outline.t-button--disabled { color: var(--td-button-default-outline-disabled-color, var(--td-component-border, var(--td-gray-color-4, #dcdcdc))); } +.t-button--outline.t-button--disabled, .t-button--outline.t-button--disabled::after { border-color: var(--td-button-default-outline-disabled-color, var(--td-component-border, var(--td-gray-color-4, #dcdcdc))); } .t-button--outline.t-button--primary { color: var(--td-button-primary-outline-color, var(--td-brand-color, var(--td-primary-color-7, #0052d9))); } +.t-button--outline.t-button--primary, .t-button--outline.t-button--primary::after { border-color: var(--td-button-primary-outline-border-color, var(--td-button-primary-outline-color, var(--td-brand-color, var(--td-primary-color-7, #0052d9)))); } @@ -283,12 +310,14 @@ background-color: transparent; color: var(--td-button-primary-outline-disabled-color, var(--td-brand-color-disabled, var(--td-primary-color-3, #b5c7ff))); } +.t-button--outline.t-button--primary.t-button--disabled, .t-button--outline.t-button--primary.t-button--disabled::after { border-color: var(--td-button-primary-outline-disabled-color, var(--td-brand-color-disabled, var(--td-primary-color-3, #b5c7ff))); } .t-button--outline.t-button--danger { color: var(--td-button-danger-outline-color, var(--td-error-color, var(--td-error-color-6, #d54941))); } +.t-button--outline.t-button--danger, .t-button--outline.t-button--danger::after { border-color: var(--td-button-danger-outline-border-color, var(--td-button-danger-outline-color, var(--td-error-color, var(--td-error-color-6, #d54941)))); } @@ -300,9 +329,10 @@ border-color: var(--td-button-danger-outline-active-border-color, var(--td-error-color-7, #ad352f)); } .t-button--outline.t-button--danger.t-button--disabled { - background-color: transparent; + background-color: var(--td-bg-color-container, var(--td-font-white-1, #ffffff)); color: var(--td-button-danger-outline-disabled-color, var(--td-error-color-3, #ffb9b0)); } +.t-button--outline.t-button--danger.t-button--disabled, .t-button--outline.t-button--danger.t-button--disabled::after { border-color: var(--td-button-danger-outline-disabled-color, var(--td-error-color-3, #ffb9b0)); } @@ -310,42 +340,55 @@ color: var(--td-button-light-outline-color, var(--td-brand-color, var(--td-primary-color-7, #0052d9))); background-color: var(--td-button-light-outline-bg-color, var(--td-brand-color-light, var(--td-primary-color-1, #f2f3ff))); } +.t-button--outline.t-button--light, .t-button--outline.t-button--light::after { border-color: var(--td-button-light-outline-border-color, var(--td-button-light-outline-color, var(--td-brand-color, var(--td-primary-color-7, #0052d9)))); } .t-button--outline.t-button--light.t-button--hover { color: var(--td-button-light-outline-active-border-color, var(--td-brand-color-active, var(--td-primary-color-8, #003cab))); } +.t-button--outline.t-button--light.t-button--hover, .t-button--outline.t-button--light.t-button--hover::after { background-color: var(--td-button-light-outline-active-bg-color, var(--td-brand-color-light-active, var(--td-primary-color-2, #d9e1ff))); border-color: var(--td-button-light-outline-active-border-color, var(--td-brand-color-active, var(--td-primary-color-8, #003cab))); } .t-button--outline.t-button--light.t-button--disabled { - background-color: transparent; + background-color: var(--td-bg-color-container, var(--td-font-white-1, #ffffff)); color: var(--td-button-light-outline-disabled-color, var(--td-brand-color-disabled, var(--td-primary-color-3, #b5c7ff))); } +.t-button--outline.t-button--light.t-button--disabled, .t-button--outline.t-button--light.t-button--disabled::after { border-color: var(--td-button-light-outline-disabled-color, var(--td-brand-color-disabled, var(--td-primary-color-3, #b5c7ff))); } .t-button--dashed { - background-color: transparent; + background-color: var(--td-bg-color-container, var(--td-font-white-1, #ffffff)); border-style: dashed; + border-width: 2rpx; +} +.t-button--dashed.t-button--hover, +.t-button--dashed.t-button--hover::after { + background-color: var(--td-button-default-outline-active-bg-color, var(--td-bg-color-container-active, var(--td-gray-color-3, #e7e7e7))); + border-color: var(--td-button-default-outline-active-border-color, var(--td-component-border, var(--td-gray-color-4, #dcdcdc))); } .t-button--dashed.t-button--primary { color: var(--td-button-primary-dashed-color, var(--td-brand-color, var(--td-primary-color-7, #0052d9))); + border-color: var(--td-button-primary-dashed-border-color, var(--td-button-primary-dashed-color, var(--td-brand-color, var(--td-primary-color-7, #0052d9)))); } .t-button--dashed.t-button--primary::after { border-color: var(--td-button-primary-dashed-border-color, var(--td-button-primary-dashed-color, var(--td-brand-color, var(--td-primary-color-7, #0052d9)))); + border: 0; } .t-button--dashed.t-button--primary.t-button--disabled { - background-color: transparent; + background-color: var(--td-bg-color-container, var(--td-font-white-1, #ffffff)); color: var(--td-button-primary-dashed-disabled-color, var(--td-brand-color-disabled, var(--td-primary-color-3, #b5c7ff))); + border-color: var(--td-button-primary-dashed-disabled-color, var(--td-brand-color-disabled, var(--td-primary-color-3, #b5c7ff))); } .t-button--dashed.t-button--primary.t-button--disabled::after { border-color: var(--td-button-primary-dashed-disabled-color, var(--td-brand-color-disabled, var(--td-primary-color-3, #b5c7ff))); } .t-button--dashed.t-button--danger { color: var(--td-button-danger-dashed-color, var(--td-error-color, var(--td-error-color-6, #d54941))); + border-color: var(--td-button-danger-dashed-border-color, var(--td-button-danger-dashed-color, var(--td-error-color, var(--td-error-color-6, #d54941)))); } .t-button--dashed.t-button--danger::after { border-color: var(--td-button-danger-dashed-border-color, var(--td-button-danger-dashed-color, var(--td-error-color, var(--td-error-color-6, #d54941)))); -- Gitblit v1.9.3