| | |
| | | align-items: center; |
| | | justify-content: center; |
| | | flex-wrap: nowrap; |
| | | font-size: var(--td-swtich-label-font-size, 28rpx); |
| | | color: var(--td-switch-label-color, var(--td-font-gray-4, rgba(0, 0, 0, 0.26))); |
| | | font-size: var(--td-switch-label-font-size, 28rpx); |
| | | color: var(--td-switch-label-color, var(--td-text-color-disabled, var(--td-font-gray-4, rgba(0, 0, 0, 0.26)))); |
| | | overflow: hidden; |
| | | } |
| | | .t-switch__label--checked { |
| | |
| | | color: var(--td-switch-checked-disabled-color, var(--td-brand-color-disabled, var(--td-primary-color-3, #b5c7ff))); |
| | | } |
| | | .t-switch__label--large { |
| | | font-size: var(--td-swtich-label-font-size, 32rpx); |
| | | font-size: var(--td-switch-label-large-font-size, 32rpx); |
| | | } |
| | | .t-switch__label--small { |
| | | font-size: var(--td-swtich-label-font-size, 24rpx); |
| | | font-size: var(--td-switch-label-small-font-size, 24rpx); |
| | | } |
| | | .t-switch__label:empty { |
| | | display: none; |
| | |
| | | width: var(--td-switch-width, 90rpx); |
| | | height: var(--td-switch-height, 56rpx); |
| | | border-radius: var(--td-switch-radius, calc(var(--td-switch-height, 56rpx) / 2)); |
| | | background-color: var(--td-switch-unchecked-color, var(--td-font-gray-4, rgba(0, 0, 0, 0.26))); |
| | | background-color: var(--td-switch-unchecked-color, var(--td-bg-color-secondarycontainer-active, var(--td-gray-color-4, #dcdcdc))); |
| | | position: relative; |
| | | transition: all 0.3s ease; |
| | | overflow: hidden; |
| | |
| | | width: var(--td-switch-dot-size, 44rpx); |
| | | height: var(--td-switch-dot-size, 44rpx); |
| | | border-radius: 50%; |
| | | background-color: var(--td-bg-color-container, var(--td-font-white-1, #ffffff)); |
| | | background-color: var(--td-font-white-1, #ffffff); |
| | | transition: all 0.3s; |
| | | transform: translateY(-50%); |
| | | box-shadow: var(--td-switch-dot-shadow, var(--td-shadow-1, 0 1px 10px rgba(0, 0, 0, 0.05), 0 4px 5px rgba(0, 0, 0, 0.08), 0 2px 4px -1px rgba(0, 0, 0, 0.12))); |
| | |
| | | top: 0; |
| | | width: 200%; |
| | | height: 200%; |
| | | border: 1px solid var(--td-switch-dot-border-color, var(--td-bg-color-secondarycontainer, var(--td-gray-color-1, #f3f3f3))); |
| | | border: 1px solid var(--td-switch-dot-border-color, var(--td-gray-color-4, #dcdcdc)); |
| | | border-radius: 50%; |
| | | transform: scale(0.5); |
| | | transform-origin: 0 0; |