@ctsy/layui-vue/es/switch/index.css

a component library for Vue 3 base on layui-vue

.layui-form-switch{position:relative;height:22px;line-height:22px;min-width:35px;padding:0 4px;border-radius:20px;cursor:pointer;background-color:var(--global-neutral-color-6);-webkit-transition:.1s linear;transition:.1s linear}.layui-form-switch span{position:absolute;display:flex;align-items:center;justify-content:center;left:3px;top:2px;width:18px;height:18px;line-height:18px;border-radius:20px;background-color:#fff;box-shadow:0 2px 4px #00230b33;-webkit-transition:.1s linear;transition:.1s linear}.layui-form-switch em{position:relative;top:0;width:25px;margin-left:21px;padding:0!important;text-align:center!important;color:#999!important;font-style:normal!important;font-size:12px}.layui-form-onswitch{border-color:var(--global-checked-color);background-color:var(--global-checked-color)}.layui-form-onswitch span{left:100%;margin-left:-21px;background-color:#fff}.layui-form-onswitch em{margin-left:5px;margin-right:21px;color:#fff!important}.layui-switch-disabled[lay-skin=primary] span{background:0 0!important;color:var(--global-neutral-color-8)!important}.layui-switch-disabled[lay-skin=primary]:hover i{border-color:var(--global-neutral-color-6)}.layui-switch-disabled,.layui-switch-disabled i{border-color:var(--global-neutral-color-3)!important}.layui-switch-disabled span{background-color:var(--global-neutral-color-3)!important}.layui-switch-disabled em{color:var(--global-neutral-color-6)!important}.layui-switch-disabled:hover i{color:#fff!important}