@vuesax-alpha/nightly/theme-chalk/vs-switch.css

A Component Library for Vue 3

@keyframes vs-rotate-switch{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}.vs-switch{display:flex;justify-content:center;align-items:center;color:#fff;padding:5px;border-radius:20px;min-width:48px;height:28px;border:0;position:relative;background:rgba(var(--vs-gray-3),1);transition:var(--vs-transition-ease);overflow:hidden;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;user-select:none}.vs-switch.is-icon .vs-switch__input:checked~.vs-switch__circle{color:#fff!important}.vs-switch.is-icon .vs-switch__circle{background:0 0!important;box-shadow:none!important}.vs-switch.is-icon .vs-switch__circle i{opacity:1;font-size:1.3rem}.vs-switch.is-indeterminate .vs-switch__input{pointer-events:none}.vs-switch.is-indeterminate .vs-switch__circle{left:50%!important;transform:translate(-50%)}.vs-switch.is-square{border-radius:5px}.vs-switch.is-square .vs-switch__background{border-radius:5px!important}.vs-switch.is-square .vs-switch__circle{border-radius:5px!important}.vs-switch.is-loading{width:28px!important;min-width:28px!important;pointer-events:none;border-radius:20px!important}.vs-switch.is-loading .vs-switch__input:not(:checked)~.vs-switch__circle{--vs-color:var(--vs-divider);color:rgba(var(--vs-divider),1)!important}.vs-switch.is-loading .vs-switch__circle{border-radius:50%!important}.vs-switch.is-loading .vs-switch__background{opacity:0!important}.vs-switch:hover{background:rgba(var(--vs-gray-4),1)}.vs-switch:active{transform:scale(.9)}.vs-switch__background{width:100%;height:auto;position:absolute;background:rgba(var(--vs-color),1);border-radius:inherit;z-index:2;transition:all .25s ease-out;transform:scale(1);left:-100%;border-radius:50%;padding-bottom:100%}.vs-switch__text{display:flex;justify-content:center;align-items:center;font-size:.7rem;padding:5px;padding-left:25px;transition:all .25s ease 50ms;color:rgba(var(--vs-text),1);z-index:9;position:relative;overflow:hidden;white-space:nowrap;-webkit-user-select:none;-moz-user-select:none;user-select:none}.vs-switch__text.is-on{transform:translate(-100%);position:absolute;opacity:0}.vs-switch__text i{font-size:1rem;opacity:.7}.vs-switch__circle{display:flex;justify-content:center;align-items:center;width:20px;height:20px;background:rgba(var(--vs-background),1);border-radius:20px;transition:var(--vs-transition-ease);position:absolute;z-index:10;left:4px;color:rgba(var(--vs-text),1)}.vs-switch__circle i{font-size:.8rem}.vs-switch__input{position:absolute;width:100%;opacity:0!important;z-index:-1;height:100%;border-radius:inherit;top:0;left:0;margin:0;cursor:pointer}.vs-switch__input:active:checked~.vs-switch__circle{left:calc(100% - 30px)}.vs-switch__input:active~.vs-switch__circle{width:25px}.vs-switch__input:checked~.vs-switch__background{opacity:1;transform:scale(1);width:100%;padding-bottom:100%;left:0;border-radius:50%;transition:all .25s ease}.vs-switch__input:checked~.vs-switch__text{padding-left:5px;padding-right:25px;color:#fff}.vs-switch__input:checked~.vs-switch__text i{opacity:1}.vs-switch__input:checked~.vs-switch__text.is-on{transform:translate(0);position:relative;opacity:1}.vs-switch__input:checked~.vs-switch__text.is-off{transform:translate(100%);position:absolute;opacity:0}.vs-switch__input:checked~.vs-switch__circle{left:calc(100% - 24px);box-shadow:-5px 0 25px 0 rgba(var(--vs-background),.6);color:rgba(var(--vs-color),1)}