1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586 |
- .switch-index {
- display: block;
- height: initial;
- }
- @import "../common/index.acss";
- .switch-index .van-switch {
- position: relative;
- display: inline-block;
- box-sizing: initial;
- 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: 1px solid rgba(0, 0, 0, 0.1);
- border: var(--switch-border, 1px solid rgba(0, 0, 0, 0.1));
- border-radius: 1em;
- border-radius: var(--switch-node-size, 1em);
- transition: background-color 0.3s;
- transition: background-color var(--switch-transition-duration, 0.3s);
- }
- .switch-index .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 3px 1px 0 rgba(0, 0, 0, 0.05), 0 2px 2px 0 rgba(0, 0, 0, 0.1),
- 0 3px 3px 0 rgba(0, 0, 0, 0.05);
- box-shadow: var(
- --switch-node-box-shadow,
- 0 3px 1px 0 rgba(0, 0, 0, 0.05),
- 0 2px 2px 0 rgba(0, 0, 0, 0.1),
- 0 3px 3px 0 rgba(0, 0, 0, 0.05)
- );
- transition: -webkit-transform 0.3s cubic-bezier(0.3, 1.05, 0.4, 1.05);
- transition: transform 0.3s cubic-bezier(0.3, 1.05, 0.4, 1.05);
- transition: transform 0.3s cubic-bezier(0.3, 1.05, 0.4, 1.05),
- -webkit-transform 0.3s cubic-bezier(0.3, 1.05, 0.4, 1.05);
- transition: -webkit-transform var(--switch-transition-duration, 0.3s)
- cubic-bezier(0.3, 1.05, 0.4, 1.05);
- transition: transform var(--switch-transition-duration, 0.3s)
- cubic-bezier(0.3, 1.05, 0.4, 1.05);
- transition: transform var(--switch-transition-duration, 0.3s)
- cubic-bezier(0.3, 1.05, 0.4, 1.05),
- -webkit-transform var(--switch-transition-duration, 0.3s) cubic-bezier(0.3, 1.05, 0.4, 1.05);
- }
- .switch-index .van-switch__loading {
- position: absolute !important;
- top: 25%;
- left: 25%;
- width: 50%;
- height: 50%;
- }
- .switch-index .van-switch--on {
- background-color: #1989fa;
- background-color: var(--switch-on-background-color, #1989fa);
- }
- .switch-index .van-switch--on .van-switch__node {
- -webkit-transform: translateX(1em);
- transform: translateX(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))
- );
- }
- .switch-index .van-switch--disabled {
- opacity: 0.4;
- opacity: var(--switch-disabled-opacity, 0.4);
- }
|