index.acss 2.7 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586
  1. .switch-index {
  2. display: block;
  3. height: initial;
  4. }
  5. @import "../common/index.acss";
  6. .switch-index .van-switch {
  7. position: relative;
  8. display: inline-block;
  9. box-sizing: initial;
  10. width: 2em;
  11. width: var(--switch-width, 2em);
  12. height: 1em;
  13. height: var(--switch-height, 1em);
  14. background-color: #fff;
  15. background-color: var(--switch-background-color, #fff);
  16. border: 1px solid rgba(0, 0, 0, 0.1);
  17. border: var(--switch-border, 1px solid rgba(0, 0, 0, 0.1));
  18. border-radius: 1em;
  19. border-radius: var(--switch-node-size, 1em);
  20. transition: background-color 0.3s;
  21. transition: background-color var(--switch-transition-duration, 0.3s);
  22. }
  23. .switch-index .van-switch__node {
  24. position: absolute;
  25. top: 0;
  26. left: 0;
  27. border-radius: 100%;
  28. z-index: 1;
  29. z-index: var(--switch-node-z-index, 1);
  30. width: 1em;
  31. width: var(--switch-node-size, 1em);
  32. height: 1em;
  33. height: var(--switch-node-size, 1em);
  34. background-color: #fff;
  35. background-color: var(--switch-node-background-color, #fff);
  36. box-shadow: 0 3px 1px 0 rgba(0, 0, 0, 0.05), 0 2px 2px 0 rgba(0, 0, 0, 0.1),
  37. 0 3px 3px 0 rgba(0, 0, 0, 0.05);
  38. box-shadow: var(
  39. --switch-node-box-shadow,
  40. 0 3px 1px 0 rgba(0, 0, 0, 0.05),
  41. 0 2px 2px 0 rgba(0, 0, 0, 0.1),
  42. 0 3px 3px 0 rgba(0, 0, 0, 0.05)
  43. );
  44. transition: -webkit-transform 0.3s cubic-bezier(0.3, 1.05, 0.4, 1.05);
  45. transition: transform 0.3s cubic-bezier(0.3, 1.05, 0.4, 1.05);
  46. transition: transform 0.3s cubic-bezier(0.3, 1.05, 0.4, 1.05),
  47. -webkit-transform 0.3s cubic-bezier(0.3, 1.05, 0.4, 1.05);
  48. transition: -webkit-transform var(--switch-transition-duration, 0.3s)
  49. cubic-bezier(0.3, 1.05, 0.4, 1.05);
  50. transition: transform var(--switch-transition-duration, 0.3s)
  51. cubic-bezier(0.3, 1.05, 0.4, 1.05);
  52. transition: transform var(--switch-transition-duration, 0.3s)
  53. cubic-bezier(0.3, 1.05, 0.4, 1.05),
  54. -webkit-transform var(--switch-transition-duration, 0.3s) cubic-bezier(0.3, 1.05, 0.4, 1.05);
  55. }
  56. .switch-index .van-switch__loading {
  57. position: absolute !important;
  58. top: 25%;
  59. left: 25%;
  60. width: 50%;
  61. height: 50%;
  62. }
  63. .switch-index .van-switch--on {
  64. background-color: #1989fa;
  65. background-color: var(--switch-on-background-color, #1989fa);
  66. }
  67. .switch-index .van-switch--on .van-switch__node {
  68. -webkit-transform: translateX(1em);
  69. transform: translateX(1em);
  70. -webkit-transform: translateX(
  71. calc(var(--switch-width, 2em) - var(--switch-node-size, 1em))
  72. );
  73. transform: translateX(
  74. calc(var(--switch-width, 2em) - var(--switch-node-size, 1em))
  75. );
  76. }
  77. .switch-index .van-switch--disabled {
  78. opacity: 0.4;
  79. opacity: var(--switch-disabled-opacity, 0.4);
  80. }