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