@antmjs/vantui/lib/switch/index.css

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

:root,page{--primary-color:#07c160}.van-switch{position:relative;display:inline-block;box-sizing:content-box;width:124px;width:var(--switch-width,124px);height:64px;height:var(--switch-height,64px);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:64px;border-radius:var(--switch-node-size,64px);-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:64px;width:var(--switch-node-size,64px);height:64px;height:var(--switch-node-size,64px);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:var(--primary-color);background-color:var(--switch-on-background-color,var(--primary-color))}.van-switch--on .van-switch__node{-webkit-transform:translateX(calc(124px - 64px));transform:translateX(calc(124px - 64px));-webkit-transform:translateX(calc(var(--switch-width,124px) - var(--switch-node-size,64px)));transform:translateX(calc(var(--switch-width,124px) - var(--switch-node-size,64px)))}.van-switch--disabled{opacity:.4;opacity:var(--switch-disabled-opacity, .4)}