vantui-edit/lib/switch/index.css

一套适用于Taro3及React的vantui组件库

.van-switch{position:relative;display:inline-block;box-sizing:content-box;width:2em;width:var(--switch-width,2em);height:1em;height:var(--switch-height,1em);background-color:#fff;background-color:var(--switch-background-color,#fff);border:2px solid rgba(0,0,0,.1);border:var(--switch-border,2px solid rgba(0,0,0,.1));border-radius:1em;border-radius:var(--switch-node-size,1em);-webkit-transition:background-color .3s;transition:background-color .3s;-webkit-transition:background-color var(--switch-transition-duration, .3s);transition:background-color var(--switch-transition-duration, .3s)}.van-switch__node{position:absolute;top:0;left:0;border-radius:100%;z-index:1;z-index:var(--switch-node-z-index,1);width:1em;width:var(--switch-node-size,1em);height:1em;height:var(--switch-node-size,1em);background-color:#fff;background-color:var(--switch-node-background-color,#fff);box-shadow:0 6px 2px 0 rgba(0,0,0,.05),0 4px 4px 0 rgba(0,0,0,.1),0 6px 6px 0 rgba(0,0,0,.05);box-shadow:var(--switch-node-box-shadow,0 6px 2px 0 rgba(0,0,0,.05),0 4px 4px 0 rgba(0,0,0,.1),0 6px 6px 0 rgba(0,0,0,.05));-webkit-transition:-webkit-transform .3s cubic-bezier(.3, 1.05, .4, 1.05);transition:-webkit-transform .3s cubic-bezier(.3, 1.05, .4, 1.05);transition:transform .3s cubic-bezier(.3, 1.05, .4, 1.05);transition:transform .3s cubic-bezier(.3, 1.05, .4, 1.05),-webkit-transform .3s cubic-bezier(.3, 1.05, .4, 1.05);-webkit-transition:-webkit-transform var(--switch-transition-duration, .3s) cubic-bezier(.3, 1.05, .4, 1.05);transition:-webkit-transform var(--switch-transition-duration, .3s) cubic-bezier(.3, 1.05, .4, 1.05);transition:transform var(--switch-transition-duration, .3s) cubic-bezier(.3, 1.05, .4, 1.05);transition:transform var(--switch-transition-duration, .3s) cubic-bezier(.3, 1.05, .4, 1.05),-webkit-transform var(--switch-transition-duration, .3s) cubic-bezier(.3, 1.05, .4, 1.05)}.van-switch__loading{position:absolute!important;top:25%;left:25%;width:50%;height:50%}.van-switch--on{background-color:#1989fa;background-color:var(--switch-on-background-color,#1989fa)}.van-switch--on .van-switch__node{-webkit-transform:translateX(calc(2em - 1em));transform:translateX(calc(2em - 1em));-webkit-transform:translateX(calc(var(--switch-width,2em) - var(--switch-node-size,1em)));transform:translateX(calc(var(--switch-width,2em) - var(--switch-node-size,1em)))}.van-switch--disabled{opacity:.4;opacity:var(--switch-disabled-opacity, .4)}