dm-vue3-ui/lib/switch/index.css

This Components Library will help get you started developing in Vue 3.

.dm-switch{margin:0;padding:0;border:0;box-sizing:border-box;vertical-align:middle;transition:all .2s;-webkit-user-select:none;-moz-user-select:none;user-select:none;position:relative;cursor:pointer;border-radius:100px}.dm-switch.switch-small{min-width:44px;height:22px}.dm-switch.switch-small .slider{width:18px;height:18px}.dm-switch.switch-small .label{margin:0 7px 0 25px}.dm-switch.switch-medium{min-width:46px;height:24px}.dm-switch.switch-medium .slider{width:20px;height:20px}.dm-switch.switch-medium .label{margin:0 7px 0 27px}.dm-switch.switch-large{min-width:60px;height:32px}.dm-switch.switch-large .slider{width:28px;height:28px}.dm-switch.switch-large .label{margin:0 7px 0 40px}.dm-switch.switch-on{background-color:#7857fc}.dm-switch.switch-on.switch-small .slider{left:calc(100% - 20px)}.dm-switch.switch-on.switch-small .label{margin:0 25px 0 7px}.dm-switch.switch-on.switch-medium .slider{left:calc(100% - 22px)}.dm-switch.switch-on.switch-medium .label{margin:0 27px 0 7px}.dm-switch.switch-on.switch-large .slider{left:calc(100% - 30px)}.dm-switch.switch-on.switch-large .label{margin:0 40px 0 7px}.dm-switch.switch-off{background-color:#00000040}.dm-switch.switch-disabled{cursor:not-allowed;opacity:.4}.dm-switch .slider{position:absolute;top:2px;left:2px;transition:all .2s ease-in-out;background-color:#fff;border-radius:50%}.dm-switch .label{width:fit-content;display:block;color:#fff;font-size:12px;transition:margin .2s}.dm-switch .loading{width:18px;height:18px;border:2px solid #ccc;border-top-color:#4caf50;border-radius:50%;position:absolute;top:50%;left:50%;animation:spin 1s linear infinite}@keyframes spin{0%{transform:translate(-50%,-50%) rotate(0)}to{transform:translate(-50%,-50%) rotate(360deg)}}