drip-ui/es/drip-css/switch.css

Lightweight Mobile UI Components built on Vue

.drip-switch--primary{color:#fff;background-color:#409eff}.drip-switch--orange{color:#fff;background-color:#ffab11}.drip-switch--green{color:#fff;background-color:#5fa800}.drip-switch__outer{display:inline-block;font-size:.18667rem}.drip-switch__bkg{min-width:1.2rem;width:100%;margin:0;position:relative;height:.6rem;outline:0;border-radius:.30667rem;box-sizing:border-box;background:#dcdfe6;vertical-align:middle;display:-webkit-box;display:-webkit-flex;display:flex;-webkit-justify-content:space-around;justify-content:space-around;line-height:.6rem}.drip-switch--tip{cursor:pointer;width:50%;min-width:.6rem;color:#333;box-sizing:border-box;font-size:.18667rem;padding:0 .22667rem;border-radius:.30667rem;line-height:.6rem}.drip-switch--button{cursor:pointer;box-sizing:border-box;width:49%;position:absolute;left:0;top:0;border-radius:.30667rem;-webkit-transition:all .3s;transition:all .3s;padding:0 .2rem;height:.6rem;font-size:.18667rem;line-height:.6rem;text-align:center}.drip-switch--is-active{left:50%}.is-disabled{opacity:.6}.is-single .drip-switch__bkg{background:0 0;background:#dcdfe6}.is-single .drip-switch--tip{border-radius:.26667rem;font-size:.32rem;box-sizing:border-box;height:100%;color:#fff;width:100%;height:.6rem;padding-left:.26667rem;padding-right:.66667rem}.is-single .drip-switch--tip:nth-child(2){display:none}.is-single .drip-switch--button{width:.54667rem;left:calc(100% - .54667rem);top:1px;bottom:0;right:0;border-radius:.26667rem;padding:0 .22667rem;height:.54667rem;background:#fff}.is-single .drip-switch--button.is-active{left:.02667rem}.is-single .is-check .drip-switch--tip{width:100%}.is-single .is-check .drip-switch--tip:nth-child(1){display:none}.is-single .is-check .drip-switch--tip:nth-child(2){display:block;padding-left:.66667rem;padding-right:.26667rem}