| | |
| | | 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); |
| | |
| | | .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); |
| | |
| | | .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))); |
| | |
| | | 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); |
| | |
| | | .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))); |
| | |
| | | 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); |
| | |
| | | .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)); |
| | |
| | | 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)); |
| | | } |
| | |
| | | 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; |
| | |
| | | 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))); |
| | | } |
| | |
| | | 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))); |
| | |
| | | .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)))); |
| | | } |
| | |
| | | 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)))); |
| | | } |
| | |
| | | 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)); |
| | | } |
| | |
| | | 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)))); |