wot-design/lib/theme-default/switch.css

Mobile UI components built on vue.js

@charset "UTF-8";.wd-switch{display:inline-block;position:relative;width:51px;height:32px;border-radius:28px;background:linear-gradient(315deg,#f2f2f2 0,#dadada 100%,#668df8 100%);-webkit-transition:all .3s;transition:all .3s;-webkit-tap-highlight-color:transparent}.wd-switch__checkbox{position:absolute;width:0;height:0;opacity:0;margin:0}.wd-switch__circle{-webkit-box-sizing:border-box;box-sizing:border-box;position:absolute;display:inline-block;width:28px;height:28px;top:2px;left:2px;background:#fff;border-radius:50%;-webkit-transition:left .3s ease-out;transition:left .3s ease-out;-webkit-box-shadow:0 2px 4px 0 rgba(155,155,155,.5);box-shadow:0 2px 4px 0 rgba(155,155,155,.5)}.wd-switch__circle::after{position:absolute;content:'';width:calc(200% - 2px);height:calc(200% - 2px);top:50%;left:50%;-webkit-transform:translate(-50%,-50%) scale(.5);transform:translate(-50%,-50%) scale(.5);border:1px solid #e5e5e5;border-radius:50%}.wd-switch.is-checked{background:linear-gradient(315deg,#4f7cf8 0,#668df8 100%);border-color:linear-gradient(315deg,#4f7cf8 0,#668df8 100%)}.wd-switch.is-checked .wd-switch__circle{left:calc(23px - 2px);-webkit-box-shadow:0 2px 4px 0 rgba(0,83,162,.5);box-shadow:0 2px 4px 0 rgba(0,83,162,.5)}.wd-switch.is-disabled{opacity:.5}