We read every piece of feedback, and take your input very seriously.
To see all available qualifiers, see our documentation.
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
0.13 beta 10
transform: translate(calc(var(--van-switch-width) - var(--van-switch-node-size)));
<!DOCTYPE html> <html> <head> <style> body { background-color: antiquewhite; } :root { --van-base-font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, Segoe UI, Arial, Roboto, "PingFang SC", "miui", "Hiragino Sans GB", "Microsoft Yahei", sans-serif; --van-price-integer-font-family: Avenir-Heavy, PingFang SC, Helvetica Neue, Arial, sans-serif; --van-animation-duration-base: .3s; --van-animation-duration-fast: .2s; --van-animation-timing-function-enter: ease-out; --van-animation-timing-function-leave: ease-in; --van-border-color: var(--van-gray-3); --van-border-width-base: 1px; --van-border-radius-sm: 2px; --van-border-radius-md: 4px; --van-border-radius-lg: 8px; --van-border-radius-max: 999px; --van-black: #000; --van-white: #fff; --van-gray-1: #f7f8fa; --van-gray-2: #f2f3f5; --van-gray-3: #ebedf0; --van-gray-4: #dcdee0; --van-gray-5: #c8c9cc; --van-gray-6: #969799; --van-gray-7: #646566; --van-gray-8: #323233; --van-red: #ee0a24; --van-blue: #1989fa; --van-orange: #ff976a; --van-orange-dark: #ed6a0c; --van-orange-light: #fffbe8; --van-green: #07c160; --van-gradient-red: linear-gradient(to right, #ff6034, #ee0a24); --van-gradient-orange: linear-gradient(to right, #ffd01e, #ff8917); --van-primary-color: var(--van-blue); --van-success-color: var(--van-green); --van-danger-color: var(--van-red); --van-warning-color: var(--van-orange); --van-text-color: var(--van-gray-8); --van-text-color-2: var(--van-gray-6); --van-text-color-3: var(--van-gray-5); --van-text-link-color: #576b95; --van-active-color: var(--van-gray-2); --van-active-opacity: .6; --van-disabled-opacity: .5; --van-background-color: var(--van-gray-1); --van-background-color-light: var(--van-white); --van-switch-size: 30px; --van-switch-width: 2em; --van-switch-height: 1em; --van-switch-node-size: 1em; --van-switch-node-background-color: var(--van-white); --van-switch-node-box-shadow: 0 3px 1px 0 rgba(0, 0, 0, .05), 0 2px 2px 0 rgba(0, 0, 0, .1), 0 3px 3px 0 rgba(0, 0, 0, .05); --van-switch-background-color: var(--van-background-color-light); --van-switch-on-background-color: var(--van-primary-color); --van-switch-transition-duration: var(--van-animation-duration-base); --van-switch-disabled-opacity: var(--van-disabled-opacity); --van-switch-border: var(--van-border-width-base) solid rgba(0, 0, 0, .1) } .van-switch { position: relative; display: inline-block; box-sizing: content-box; width: var(--van-switch-width); height: var(--van-switch-height); font-size: var(--van-switch-size); background: var(--van-switch-background-color); border: var(--van-switch-border); border-radius: var(--van-switch-node-size); cursor: pointer; transition: background-color var(--van-switch-transition-duration) } .van-switch__node { position: absolute; top: 0; left: 0; width: var(--van-switch-node-size); height: var(--van-switch-node-size); font-size: 30px; background: red; border-radius: 100%; box-shadow: var(--van-switch-node-box-shadow); /*transition: transform var(--van-switch-transition-duration) cubic-bezier(.3, 1.05, .4, 1.05)*/ } .van-switch__loading { top: 25%; left: 25%; width: 50%; height: 50%; line-height: 1 } .van-switch--on { background: var(--van-switch-on-background-color) } .van-switch--on .van-switch__node { transform: translate(calc(var(--van-switch-width) - var(--van-switch-node-size))) } .van-switch--on .van-switch__loading { color: var(--van-switch-on-background-color) } .van-switch--disabled { cursor: not-allowed; opacity: var(--van-switch-disabled-opacity) } .van-switch--loading { cursor: default } .root{ width: 200px; height: 200px; } </style> </head> <body> <div class="popup" style="animation-duration: 0s; display: none;"></div> <div> <div class="root"> <div class="van-switch van-switch--on"> <div class="van-switch__node"></div> </div> </div> </div>
The text was updated successfully, but these errors were encountered:
devjiangzhou
suyulin
Successfully merging a pull request may close this issue.
Affected version
0.13 beta 10
No same issues found.
Steps to Reproduce
Code example
Expected results
Actual results
The text was updated successfully, but these errors were encountered: