vue-amazing-ui/lib/switch/Switch.css

An Amazing Vue3 UI Components Library, Using TypeScript.

.switch-wrap[data-v-88dc8f31]{position:relative;display:inline-flex;align-items:center;vertical-align:middle;min-width:44px;height:22px;color:#000000e0;font-size:14px;line-height:22px;background:#00000040;border-radius:100px;cursor:pointer;transition:all .2s;-webkit-user-select:none;user-select:none}.switch-wrap[data-v-88dc8f31]:hover:not(.switch-disabled){background:#00000073}.switch-wrap .switch-inner[data-v-88dc8f31]{display:block;overflow:hidden;border-radius:100px;height:100%;padding-left:24px;padding-right:9px;transition:padding-left .2s ease-in-out,padding-right .2s ease-in-out}.switch-wrap .switch-inner .inner-checked[data-v-88dc8f31]{margin-left:calc(-100% - 26px);margin-right:calc(100% + 26px);display:block;text-align:center;color:#fff;font-size:14px;transition:margin-left .2s ease-in-out,margin-right .2s ease-in-out;pointer-events:none}.switch-wrap .switch-inner .inner-unchecked[data-v-88dc8f31]{margin-top:-22px;margin-left:0;margin-right:0;display:block;text-align:center;color:#fff;font-size:14px;transition:margin-left .2s ease-in-out,margin-right .2s ease-in-out;pointer-events:none}.switch-wrap .switch-circle[data-v-88dc8f31]{display:flex;align-items:center;justify-content:center;position:absolute;top:2px;left:2px;width:18px;height:18px;background:#fff;border-radius:100%;transition:all .2s ease-in-out}.switch-wrap .switch-circle .circular[data-v-88dc8f31]{position:absolute;inset:0;margin:auto;width:14px;height:14px;animation:loadingRotate-88dc8f31 2s linear infinite;-webkit-animation:loadingRotate-88dc8f31 2s linear infinite}@keyframes loadingRotate-88dc8f31{to{transform:rotate(360deg)}}.switch-wrap .switch-circle .circular .path[data-v-88dc8f31]{stroke-dasharray:90,150;stroke-dashoffset:0;stroke:var(--switch-primary-color);stroke-width:5;stroke-linecap:round;animation:loadingDash-88dc8f31 1.5s ease-in-out infinite;-webkit-animation:loadingDash-88dc8f31 1.5s ease-in-out infinite}@keyframes loadingDash-88dc8f31{0%{stroke-dasharray:1,200;stroke-dashoffset:0}50%{stroke-dasharray:90,150;stroke-dashoffset:-40px}to{stroke-dasharray:90,150;stroke-dashoffset:-120px}}.switch-loading[data-v-88dc8f31]{cursor:not-allowed;opacity:.65}.switch-loading .switch-inner[data-v-88dc8f31],.switch-loading .switch-circle[data-v-88dc8f31]{box-shadow:none;cursor:not-allowed}.switch-small[data-v-88dc8f31]{min-width:28px;height:16px;line-height:16px}.switch-small .switch-inner[data-v-88dc8f31]{padding-left:18px;padding-right:6px}.switch-small .switch-inner .inner-checked[data-v-88dc8f31]{font-size:12px;margin-left:calc(-100% - 20px);margin-right:calc(100% + 20px)}.switch-small .switch-inner .inner-unchecked[data-v-88dc8f31]{font-size:12px;margin-top:-16px}.switch-small .switch-circle[data-v-88dc8f31]{width:12px;height:12px}.switch-small .switch-circle .circular[data-v-88dc8f31]{width:10px;height:10px}.switch-small .switch-circle .circular .path[data-v-88dc8f31]{stroke-width:4}.switch-large[data-v-88dc8f31]{min-width:60px;height:28px;line-height:28px}.switch-large .switch-inner[data-v-88dc8f31]{padding-left:30px;padding-right:12px}.switch-large .switch-inner .inner-checked[data-v-88dc8f31]{font-size:18px;margin-left:calc(-100% - 32px);margin-right:calc(100% + 32px)}.switch-large .switch-inner .inner-unchecked[data-v-88dc8f31]{font-size:18px;margin-top:-28px}.switch-large .switch-circle[data-v-88dc8f31]{width:24px;height:24px}.switch-large .switch-circle .circular[data-v-88dc8f31]{width:20px;height:20px}.switch-large .switch-circle .circular .path[data-v-88dc8f31]{stroke-width:6}.switch-checked[data-v-88dc8f31]{background:var(--switch-primary-color)}.switch-checked[data-v-88dc8f31]:hover:not(.switch-disabled){background:var(--switch-primary-color-hover)}.switch-checked .switch-inner[data-v-88dc8f31]{padding-left:9px;padding-right:24px}.switch-checked .switch-inner .inner-checked[data-v-88dc8f31]{margin-left:0;margin-right:0}.switch-checked .switch-inner .inner-unchecked[data-v-88dc8f31]{margin-left:calc(100% + 26px);margin-right:calc(-100% - 26px)}.switch-checked .switch-circle[data-v-88dc8f31]{left:calc(100% - 20px)}.switch-small.switch-checked .switch-inner[data-v-88dc8f31]{padding-left:6px;padding-right:18px}.switch-small.switch-checked .switch-inner .inner-unchecked[data-v-88dc8f31]{margin-left:calc(100% + 20px);margin-right:calc(-100% - 20px)}.switch-small.switch-checked .switch-circle[data-v-88dc8f31]{left:calc(100% - 14px)}.switch-large.switch-checked .switch-inner[data-v-88dc8f31]{padding-left:12px;padding-right:30px}.switch-large.switch-checked .switch-inner .inner-unchecked[data-v-88dc8f31]{margin-left:calc(100% + 32px);margin-right:calc(-100% - 32px)}.switch-large.switch-checked .switch-circle[data-v-88dc8f31]{left:calc(100% - 26px)}.switch-disabled[data-v-88dc8f31]{cursor:not-allowed;opacity:.65}.switch-disabled .switch-circle[data-v-88dc8f31]{cursor:not-allowed}.switch-wave[data-v-88dc8f31]{position:absolute;pointer-events:none;inset:0;animation-iteration-count:1;animation-duration:.6s;animation-timing-function:cubic-bezier(0,0,.2,1),cubic-bezier(0,0,.2,1);border-radius:inherit}.wave-active[data-v-88dc8f31]{z-index:1;animation-name:waveSpread-88dc8f31,waveOpacity-88dc8f31}@keyframes waveSpread-88dc8f31{0%{box-shadow:0 0 .5px 0 var(--switch-ripple-color)}to{box-shadow:0 0 .5px 5px var(--switch-ripple-color)}}@keyframes waveOpacity-88dc8f31{0%{opacity:.6}to{opacity:0}}