.t-float-left { float: left; } .t-float-right { float: right; } @keyframes tdesign-fade-out { from { opacity: 1; } to { opacity: 0; } } .hotspot-expanded.relative { position: relative; } .hotspot-expanded::after { content: ''; display: block; position: absolute; left: 0; top: 0; right: 0; bottom: 0; transform: scale(1.5); } page { --td-input-bg-color: #fff; --td-input-text-color: #000000; --td-input-placeholder-text-color: rgba(0, 0, 0, 0.4); --td-input-error-msg-color: rgba(0, 0, 0, 0.4); --td-input-disabled-text-color: #000000; --td-input-label-color: #000; --td-input-icon-color: #bbbbbb; --td-input-error-text-color: #e34d59; --td-input-suffix-text-color: #000000; --td-input-border-color: #e7e7e7; } .t-input--bordered::after { position: absolute; box-sizing: border-box; content: ' '; pointer-events: none; right: 0; left: 0; bottom: 0; border-bottom: 1px solid var(--td-input-border-color); transform: scaleY(0.5); left: 32rpx; } .t-input { position: relative; display: flex; padding: 24rpx 32rpx; background: var(--td-input-bg-color); } .t-input__label { width: 164rpx; color: var(--td-input-label-color); margin-right: 32rpx; flex: none; } .t-input__icon-wrap, .t-input__icon--prefix, .t-input__icon--suffix { display: flex; align-items: center; } .t-input__icon--prefix { margin-right: 8rpx; } .t-input__content { display: flex; align-items: center; width: 100%; font-size: 32rpx; } .t-input__wrap { display: flex; flex-wrap: wrap; flex: auto; } .t-input__wrap--suffix, .t-input__wrap--icon { flex: 0 0 auto; margin-left: 24rpx; color: var(--td-input-icon-color); font-size: 32rpx; } .t-input__wrap--suffix:empty, .t-input__wrap--icon:empty { display: none; } .t-input__wrap--suffix { position: relative; padding-left: 24rpx; } .t-input__wrap--suffix::after { position: absolute; box-sizing: border-box; content: ' '; pointer-events: none; top: 0; bottom: 0; left: 0; border-left: 1px solid #e6e6e6; transform: scaleX(0.5); } .t-input__wrap--suffix-text { position: relative; padding-left: 24rpx; color: var(--td-input-suffix-text-color); } .t-input__control { display: block; box-sizing: border-box; width: 100%; min-width: 0; margin: 0; padding: 0; color: var(--td-input-text-color); line-height: inherit; text-align: left; background-color: transparent; border: 0; resize: none; font-size: inherit; } .t-input__control::placeholder { color: var(--td-input-placeholder-text-color); } .t-input__control:disabled { color: var(--td-input-disabled-text-color); background-color: transparent; cursor: not-allowed; opacity: 1; -webkit-text-fill-color: currentColor; } .t-input__control:read-only { cursor: default; } .t-input__control--right { text-align: right; } .t-input__control--center { text-align: center; } .t-input__placeholder { color: var(--td-input-placeholder-text-color); } .t-input.t-is-error { align-items: flex-start; } .t-input.t-is-error .t-input__control { color: var(--td-input-error-text-color); } .t-input.t-is-error .t-input__control::placeholder { color: var(--td-input-error-text-color); } .t-input.t-is-error .t-input__placeholder { color: var(--td-input-error-text-color); } .t-input.t-is-error .t-input__error-msg { text-align: left; padding-top: 24rpx; font-size: 24rpx; line-height: 1; color: var(--td-input-error-msg-color); width: 100%; } .t-input--size-medium { padding-top: 32rpx; padding-bottom: 32rpx; } .t-input--size-small { padding-top: 24rpx; padding-bottom: 24rpx; }