@arco-design/web-react
Version:
Arco Design React UI Library.
1 lines • 6.91 kB
CSS
.switchSlideText-appear,.switchSlideText-enter{left:-100%}.switchSlideText-appear-active,.switchSlideText-enter-active{left:8px;transition:left .2s cubic-bezier(.34,.69,.1,1)}.switchSlideText-exit{left:100%}.switchSlideText-exit-active{left:26px;transition:left .2s cubic-bezier(.34,.69,.1,1)}.arco-switch{position:relative;outline:0;height:24px;line-height:24px;min-width:40px;background-color:var(--color-fill-4);border-radius:12px;border:none;cursor:pointer;transition:background-color .2s cubic-bezier(.34,.69,.1,1);padding:0;box-sizing:border-box;vertical-align:middle;overflow:hidden}.arco-switch-type-circle:focus-visible,.arco-switch-type-round:focus-visible{box-shadow:0 0 0 2px rgb(var(--gray-6))}.arco-switch-type-circle.arco-switch-checked:focus-visible,.arco-switch-type-round.arco-switch-checked:focus-visible{box-shadow:0 0 0 2px var(--color-primary-light-3)}.arco-switch-type-line:focus-visible .arco-switch-dot{box-shadow:0 0 0 2px rgb(var(--gray-6));transition:none}.arco-switch-type-line.arco-switch-checked:focus-visible .arco-switch-dot{box-shadow:0 0 0 2px var(--color-primary-light-3)}.arco-switch-dot{position:absolute;display:flex;align-items:center;justify-content:center;top:4px;left:4px;width:16px;height:16px;border-radius:50%;background-color:var(--color-bg-white);color:var(--color-neutral-3);font-size:12px;transition:all .2s cubic-bezier(.34,.69,.1,1)}.arco-switch-checked{background-color:rgb(var(--primary-6))}.arco-switch-checked .arco-switch-dot{color:rgb(var(--primary-6));left:calc(100% - 16px - 4px)}.arco-switch[disabled] .arco-switch-dot{color:var(--color-fill-2)}.arco-switch[disabled].arco-switch-checked .arco-switch-dot{color:var(--color-primary-light-3)}.arco-switch[disabled] .arco-switch-dot{color:var(--color-fill-2)}.arco-switch[disabled].arco-switch-checked .arco-switch-dot{color:var(--color-primary-light-3)}.arco-switch-text-holder{opacity:0;font-size:12px;margin:0 8px 0 26px}.arco-switch-text{position:absolute;color:var(--color-white);font-size:12px;top:0;left:26px}.arco-switch-checked .arco-switch-text-holder{margin:0 26px 0 8px}.arco-switch-checked .arco-switch-text{left:8px;color:var(--color-white)}.arco-switch[disabled]{cursor:not-allowed;background-color:var(--color-fill-2)}.arco-switch[disabled] .arco-switch-text{color:var(--color-white)}.arco-switch[disabled].arco-switch-checked{background-color:var(--color-primary-light-3)}.arco-switch[disabled].arco-switch-checked .arco-switch-text{color:var(--color-white)}.arco-switch-loading{background-color:var(--color-fill-2)}.arco-switch-loading .arco-switch-dot{color:var(--color-neutral-3)}.arco-switch-loading .arco-switch-text{color:var(--color-white)}.arco-switch-loading.arco-switch-checked{background-color:var(--color-primary-light-3)}.arco-switch-loading.arco-switch-checked .arco-switch-dot{color:var(--color-primary-light-3)}.arco-switch-loading.arco-switch-checked .arco-switch-text{color:var(--color-primary-light-1)}.arco-switch-small{height:16px;line-height:16px;min-width:28px}.arco-switch-small .arco-switch-dot{top:2px;left:2px;width:12px;height:12px;border-radius:8px}.arco-switch-small .arco-switch-dot-icon{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) scale(.66667)}.arco-switch-small.arco-switch-checked .arco-switch-dot{left:calc(100% - 12px - 2px)}.arco-switch-type-round{border-radius:var(--border-radius-small);min-width:40px}.arco-switch-type-round .arco-switch-dot{border-radius:2px}.arco-switch-type-round.arco-switch-small{border-radius:2px;height:16px;line-height:16px;min-width:28px}.arco-switch-type-round.arco-switch-small .arco-switch-dot{border-radius:1px}.arco-switch-type-line{min-width:36px;background-color:transparent;overflow:unset}.arco-switch-type-line::after{content:'';display:block;width:100%;border-radius:3px;height:6px;background-color:var(--color-fill-4);transition:background-color .2s cubic-bezier(.34,.69,.1,1)}.arco-switch-type-line .arco-switch-dot{top:2px;left:0;border-radius:10px;width:20px;height:20px;background-color:var(--color-bg-white);box-shadow:0 1px 3px var(--color-neutral-6)}.arco-switch-type-line.arco-switch-checked{background-color:transparent}.arco-switch-type-line.arco-switch-checked::after{background-color:rgb(var(--primary-6))}.arco-switch-type-line.arco-switch-checked .arco-switch-dot{left:calc(100% - 20px)}.arco-switch-type-line[disabled]{cursor:not-allowed;background-color:transparent}.arco-switch-type-line[disabled]::after{background-color:var(--color-fill-2)}.arco-switch-type-line[disabled].arco-switch-checked{background-color:transparent}.arco-switch-type-line[disabled].arco-switch-checked::after{background-color:var(--color-primary-light-3)}.arco-switch-type-line.arco-switch-loading{background-color:transparent}.arco-switch-type-line.arco-switch-loading::after{background-color:var(--color-fill-2)}.arco-switch-type-line.arco-switch-loading.arco-switch-checked{background-color:transparent}.arco-switch-type-line.arco-switch-loading.arco-switch-checked::after{background-color:var(--color-primary-light-3)}.arco-switch-type-line.arco-switch-small{height:16px;line-height:16px;min-width:28px}.arco-switch-type-line.arco-switch-small.arco-switch-checked{padding-left:0}.arco-switch-type-line.arco-switch-small .arco-switch-dot{top:0;width:16px;height:16px;border-radius:8px}.arco-switch-type-line.arco-switch-small .arco-switch-dot-icon{transform:translate(-50%,-50%) scale(1)}.arco-switch-type-line.arco-switch-small.arco-switch-checked .arco-switch-dot{left:calc(100% - 16px)}.arco-switch-rtl{direction:rtl}.arco-switch-rtl .switchSlideText-appear,.arco-switch-rtl .switchSlideText-enter{right:-100%;left:initial}.arco-switch-rtl .switchSlideText-appear-active,.arco-switch-rtl .switchSlideText-enter-active{left:initial;right:8px;transition:right .2s cubic-bezier(.34,.69,.1,1)}.arco-switch-rtl .switchSlideText-exit{right:100%;left:initial}.arco-switch-rtl .switchSlideText-exit-active{left:initial;right:26px;transition:right .2s cubic-bezier(.34,.69,.1,1)}.arco-switch-rtl .arco-switch-dot{left:initial;right:4px}.arco-switch-rtl .arco-switch-text-holder{margin:0 26px 0 8px}.arco-switch-rtl .arco-switch-text{left:initial;right:26px}.arco-switch-rtl.arco-switch-small .arco-switch-dot{right:2px}.arco-switch-rtl.arco-switch-type-line .arco-switch-dot{right:0}.arco-switch-rtl.arco-switch-checked .arco-switch-dot{right:calc(100% - 16px - 4px)}.arco-switch-rtl.arco-switch-checked .arco-switch-text-holder{margin:0 8px 0 26px}.arco-switch-rtl.arco-switch-checked .arco-switch-text{right:8px;left:initial}.arco-switch-rtl.arco-switch-checked.arco-switch-small{padding-left:0}.arco-switch-rtl.arco-switch-checked.arco-switch-small.arco-switch-type-line{padding-right:0;padding-left:0}.arco-switch-rtl.arco-switch-checked.arco-switch-small .arco-switch-dot{left:initial;right:calc(100% - 12px - 2px)}