ivue-material-plus/dist/unplugin-vue-components/styles/ivue-switch.css

A high quality UI components Library with Vue.js

:root{--ivue-switch-bg:#858585;--ivue-switch-disabled-emboss-thumb-color:#fafafa;--ivue-switch-disabled-emboss-track-color:rgba(0, 0, 0, 0.12);--ivue-switch-disabled-emboss-track-checked-color:rgba(0, 0, 0, 0.38);--ivue-switch-disabled-bg:#f8f9fd}.ivue-switch{position:relative;display:inline-block;width:44px;height:22px;border-radius:22px;vertical-align:middle;border:1px solid var(--ivue-switch-bg);background:var(--ivue-switch-bg);cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;outline:0;-webkit-transition:var(--ivue-all-transition) 0s;transition:var(--ivue-all-transition) 0s;-webkit-tap-highlight-color:transparent}.ivue-switch:focus{outline:0}.ivue-switch:focus:hover{-webkit-box-shadow:none;box-shadow:none}.ivue-switch:after{content:"";position:absolute;top:1px;left:1px;width:18px;height:18px;border-radius:18px;background:var(--ivue-white-color);cursor:pointer;-webkit-transition:left .2s ease-in-out,width .2s ease-in-out;transition:left .2s ease-in-out,width .2s ease-in-out}.ivue-switch:active:not(.ivue-switch-disabled):after{width:26px}.ivue-switch:before{content:"";position:absolute;top:2px;left:2px;display:none;width:16px;height:16px;border-radius:50%;background-color:transparent;z-index:1;border:1px solid currentColor;border-color:transparent transparent transparent currentColor;-webkit-animation:switch-loading 1s linear;animation:switch-loading 1s linear;-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite}.ivue-switch-input{position:absolute;width:0;height:0;opacity:0;margin:0}.ivue-switch-false{border-color:currentColor;background:currentColor}.ivue-switch-inner{position:absolute;top:0;bottom:0;left:23px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:var(--ivue-white-color);font-size:var(--ivue-font-small-size)}.ivue-switch-inner i{position:relative;width:12px;min-width:auto;height:12px;text-align:center}.ivue-switch-checked{border-color:currentColor;background:currentColor}.ivue-switch-checked .ivue-switch-inner{left:7px}.ivue-switch-checked:after{left:23px}.ivue-switch-checked:before{left:24px}.ivue-switch-checked:active:not(.ivue-switch-disabled):after{left:15px}.ivue-switch-disabled{cursor:var(--ivue-cursor-disabled);border-color:var(--ivue-border-color)!important;background-color:var(--ivue-switch-disabled-bg)!important}.ivue-switch-disabled:after{background:var(--ivue-disabled-color);cursor:var(--ivue-cursor-disabled)}.ivue-switch-disabled .ivue-switch-inner{color:var(--ivue-disabled-color)}.ivue-switch-small{width:28px;height:16px;line-height:14px}.ivue-switch-small:after{width:12px;height:12px;border-radius:12px}.ivue-switch-small:active:not(.ivue-switch-disabled).ivue-switch-checked:after{left:11px}.ivue-switch-small:active:not(.ivue-switch-disabled):after{width:14px}.ivue-switch-small:before{width:10px;height:10px}.ivue-switch-small.ivue-switch-checked:after{left:13px}.ivue-switch-small.ivue-switch-checked:before{left:14px;width:10px;height:10px}.ivue-switch-large{width:56px}.ivue-switch-large.ivue-switch-checked:active:not(.ivue-switch-disabled):after{left:23px}.ivue-switch-large:active:not(.ivue-switch-disabled):after{width:30px}.ivue-switch-large.ivue-switch-checked:after{left:35px}.ivue-switch-large.ivue-switch-checked:before{left:36px}.ivue-switch-loading{opacity:.6}.ivue-switch-loading:before{display:block}.ivue-switch-loading.ivue-switch-checked:active:not(.ivue-switch-disabled):after{left:23px}.ivue-switch-loading:active:not(.ivue-switch-disabled):after{width:18px}.ivue-switch-loading.ivue-switch-large.ivue-switch-checked:after{left:35px!important}.ivue-switch-loading.ivue-switch-large:active:not(.ivue-switch-disabled):after{width:18px}.ivue-switch-loading.ivue-switch-small.ivue-switch-checked:active:not(.ivue-switch-disabled):after{width:12px!important;left:13px!important}.ivue-switch-loading.ivue-switch-small:active:not(.ivue-switch-disabled):after{width:12px!important}.ivue-switch-emboss{position:relative;display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;width:38px;height:22px;-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto}.ivue-switch-emboss--wrapper{position:relative;display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;vertical-align:middle;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;outline:0;cursor:pointer}.ivue-switch-emboss--wrapper .ivue-switch-inner{position:relative;margin-left:8px;left:0;color:var(--ivue-text-color)}.ivue-switch-emboss--loading{position:absolute;top:0;bottom:0;left:0;right:0;margin:auto;width:18px;height:18px;border-radius:50%;border:1px solid currentColor;border-color:transparent transparent transparent currentColor;-webkit-animation:switch-loading 1s linear;animation:switch-loading 1s linear;-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite;background-color:transparent}.ivue-switch-emboss--track{position:absolute;left:1px;right:2px;top:calc(50% - 5.5px);width:36px;height:11px;border-radius:8px;opacity:.6;color:var(--ivue-switch-bg);background-color:currentColor;-webkit-transition:.3s cubic-bezier(.4,0,.2,1);transition:.3s cubic-bezier(.4,0,.2,1);-webkit-transition-property:color,background-color;transition-property:color,background-color}.ivue-switch-emboss--track__checked{color:currentColor}.ivue-switch-emboss--thumb{position:relative;width:22px;height:22px;color:var(--ivue-white-color);border-radius:50%;-webkit-box-shadow:0 2px 4px -1px rgba(0,0,0,.2),0 4px 5px 0 rgba(0,0,0,.14),0 1px 10px 0 rgba(0,0,0,.12);box-shadow:0 2px 4px -1px rgba(0,0,0,.2),0 4px 5px 0 rgba(0,0,0,.14),0 1px 10px 0 rgba(0,0,0,.12);pointer-events:none;background-color:currentColor;-webkit-transition:.3s cubic-bezier(.4,0,.2,1);transition:.3s cubic-bezier(.4,0,.2,1);-webkit-transition-property:color,-webkit-transform;transition-property:color,-webkit-transform;transition-property:color,transform;transition-property:color,transform,-webkit-transform}.ivue-switch-emboss--thumb__checked{color:currentColor;-webkit-transform:translate(16.5px,0);-ms-transform:translate(16.5px,0);transform:translate(16.5px,0)}.ivue-switch-emboss--ripple{position:absolute;top:calc(50% - 25px);left:-14px;width:36px;height:36px;margin:7px;border-radius:50%;-webkit-transition:.3s cubic-bezier(.4,0,.2,1);transition:.3s cubic-bezier(.4,0,.2,1)}.ivue-switch-emboss--ripple__checked{-webkit-transform:translate(16.5px,0);-ms-transform:translate(16.5px,0);transform:translate(16.5px,0)}.ivue-switch-emboss--disabled{cursor:var(--ivue-cursor-disabled)}.ivue-switch-emboss--disabled .ivue-switch-emboss--thumb{color:var(--ivue-switch-disabled-emboss-thumb-color)!important}.ivue-switch-emboss--disabled .ivue-switch-emboss--track{caret-color:var(--ivue-switch-disabled-emboss-track-color)!important;color:var(--ivue-switch-disabled-emboss-track-color)!important}.ivue-switch-emboss--disabled .ivue-switch-emboss--track__checked{caret-color:var(--ivue-switch-disabled-emboss-track-checked-color)!important;color:var(--ivue-switch-disabled-emboss-track-checked-color)!important}.ivue-switch-emboss--small{width:28px;height:16px}.ivue-switch-emboss--small .ivue-switch-emboss--loading{width:12px;height:12px}.ivue-switch-emboss--small .ivue-switch-emboss--track{top:calc(50% - 4px);left:1px;width:26px;height:8px}.ivue-switch-emboss--small .ivue-switch-emboss--thumb{width:16px;height:16px}.ivue-switch-emboss--small .ivue-switch-emboss--thumb__checked{-webkit-transform:translate(12px,0);-ms-transform:translate(12px,0);transform:translate(12px,0)}.ivue-switch-emboss--small .ivue-switch-emboss--ripple{top:calc(50% - 20px);left:-12px;width:26px;height:26px}.ivue-switch-emboss--small .ivue-switch-emboss--ripple__checked{-webkit-transform:translate(12px,0);-ms-transform:translate(12px,0);transform:translate(12px,0)}.ivue-switch-emboss--large{width:60px;height:28px}.ivue-switch-emboss--large .ivue-switch-emboss--loading{width:24px;height:24px}.ivue-switch-emboss--large .ivue-switch-emboss--track{top:calc(50% - 7px);left:3px;width:50px;height:14px}.ivue-switch-emboss--large .ivue-switch-emboss--thumb{width:28px;height:28px}.ivue-switch-emboss--large .ivue-switch-emboss--thumb__checked{-webkit-transform:translate(26px,0);-ms-transform:translate(26px,0);transform:translate(26px,0)}.ivue-switch-emboss--large .ivue-switch-emboss--ripple{top:calc(50% - 32px);left:-19px;width:50px;height:50px}.ivue-switch-emboss--large .ivue-switch-emboss--ripple__checked{-webkit-transform:translate(26px,0);-ms-transform:translate(26px,0);transform:translate(26px,0)}@-webkit-keyframes switch-loading{0%{-webkit-transform:rotate(0);transform:rotate(0)}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes switch-loading{0%{-webkit-transform:rotate(0);transform:rotate(0)}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}