diff --git a/packages/theme-saas/src/switch/index.less b/packages/theme-saas/src/switch/index.less index c7f9d68ad7..28fc3f8a1a 100644 --- a/packages/theme-saas/src/switch/index.less +++ b/packages/theme-saas/src/switch/index.less @@ -27,32 +27,50 @@ width: 38px; } - &&-checked.disabled, - &.disabled { - @apply cursor-not-allowed; - @apply bg-color-text-disabled; - @apply border-color-text-primary; - } - - &&-checked.disabled { - @apply bg-color-brand-disabled; + &&-checked &__button { + left: calc(100% - 18px); } - &::after { - @apply content-['']; + &__button { @apply w-4; @apply h-4; + @apply flex; + @apply items-center; + @apply justify-center; + border-radius: 50%; + @apply content-['']; + @apply ~'top-0.5'; + @apply ~'left-0.5'; @apply rounded-full; @apply bg-color-bg-1; @apply absolute; - @apply ~'left-0.5'; - @apply ~'translate-y-0.5'; @apply cursor-pointer; transition: left 0.2s ease-in-out, width 0.2s ease-in-out; } - &:not(.disabled)::after { - @apply shadow-xsm; + &&-checked.disabled, + &.disabled { + @apply cursor-not-allowed; + background-color: #dbdbdb; + border-color: #dbdbdb; + } + + &&-checked.disabled { + @apply bg-color-brand-disabled; + } + + &__on-loading { + @apply text-xs; + fill: #b3d6ff; + } + + &__off-loading { + @apply text-xs; + fill: #dbdbdb; + } + + &__text { + width: 50px; } &&-checked { @@ -64,9 +82,5 @@ width: calc(~'100% - 25px'); @apply overflow-hidden; } - - &:after { - left: calc(~'100% - 18px'); - } } } \ No newline at end of file diff --git a/packages/vue/src/switch/src/index.ts b/packages/vue/src/switch/src/index.ts index 3a3eb6ecc7..79a5005d3b 100644 --- a/packages/vue/src/switch/src/index.ts +++ b/packages/vue/src/switch/src/index.ts @@ -33,7 +33,7 @@ export const switchProps = { }, showText: { type: Boolean || undefined, - default: undefined + default: false }, types: { type: String