index.wxss 17 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116
  1. .wux-switch {
  2. display: inline-block;
  3. vertical-align: middle;
  4. box-sizing: border-box;
  5. position: relative;
  6. align-self: center;
  7. cursor: pointer
  8. }
  9. .wux-switch__input {
  10. position: relative;
  11. min-width: 104rpx;
  12. height: 64rpx;
  13. border: 2rpx solid #dfdfdf;
  14. outline: 0;
  15. border-radius: 32rpx;
  16. box-sizing: border-box;
  17. background-color: #dfdfdf;
  18. transition: background-color .1s,border .1s
  19. }
  20. .wux-switch__input::before {
  21. content: " ";
  22. position: absolute;
  23. top: 0;
  24. left: 0;
  25. width: 100%;
  26. height: 60rpx;
  27. border-radius: 30rpx;
  28. background-color: #fdfdfd;
  29. transition: transform .35s cubic-bezier(.45,1,.4,1)
  30. }
  31. .wux-switch__input::after {
  32. content: " ";
  33. position: absolute;
  34. top: 0;
  35. left: 0;
  36. width: 60rpx;
  37. height: 60rpx;
  38. border-radius: 30rpx;
  39. background-color: #fff;
  40. box-shadow: 0 2rpx 6rpx rgba(0,0,0,.4);
  41. transition: left .35s cubic-bezier(.4,.4,.25,1.35)
  42. }
  43. .wux-switch__input--checked {
  44. border-color: #33cd5f;
  45. background-color: #33cd5f
  46. }
  47. .wux-switch__input--checked::before {
  48. transform: scale(0)
  49. }
  50. .wux-switch__input--checked::after {
  51. left: calc(100% - 60rpx - 2rpx / 2)
  52. }
  53. .wux-switch__input--disabled {
  54. opacity: .3
  55. }
  56. .wux-switch__text {
  57. position: relative;
  58. z-index: 10;
  59. display: flex;
  60. justify-content: center;
  61. align-items: center;
  62. height: 100%;
  63. transition: margin .2s;
  64. margin: 0 16rpx 0 calc(70rpx)
  65. }
  66. .wux-switch--checked .wux-switch__text {
  67. color: #fff;
  68. margin: 0 calc(72rpx) 0 20rpx
  69. }
  70. .wux-switch__spin {
  71. position: absolute;
  72. left: 15rpx;
  73. top: 15rpx;
  74. z-index: 10;
  75. width: 30rpx;
  76. height: 30rpx;
  77. background-size: contain;
  78. animation: switch-spin-rotate 1s linear infinite;
  79. background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20width%3D%2228%22%20height%3D%2228%22%20viewBox%3D%220%200%2028%2028%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cg%20stroke%3D%22none%22%20stroke-width%3D%221%22%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%3Cg%20transform%3D%22translate(-137.000000%2C%20-840.000000)%22%20fill%3D%22%2333cd5f%22%3E%3Cg%20transform%3D%22translate(80.000000%2C%20823.000000)%22%3E%3Cg%20transform%3D%22translate(53.000000%2C%2013.000000)%22%3E%3Cpath%20d%3D%22M17.9996753%2C31.5%20C10.5556724%2C31.5%204.5%2C25.4443275%204.5%2C18.0003247%20C4.5%2C10.5563219%2010.5556724%2C4.5%2017.9996753%2C4.5%20C18.5355492%2C4.5%2018.9702974%2C4.93474816%2018.9702974%2C5.47062208%20C18.9702974%2C6.006496%2018.5355492%2C6.44124416%2017.9996753%2C6.44124416%20C11.6261524%2C6.44124416%206.44124416%2C11.6267709%206.44124416%2C18.0002938%20C6.44124416%2C24.3738167%2011.6261524%2C29.5587249%2017.9996753%2C29.5587249%20C24.3731982%2C29.5587249%2029.5587249%2C24.3738167%2029.5587249%2C18.0002938%20C29.5587249%2C14.7964616%2028.2778291%2C11.8169616%2025.9523687%2C9.61220279%20C25.5637302%2C9.24317094%2025.5473089%2C8.62893223%2025.9157222%2C8.23967523%20C26.2841356%2C7.84976878%2026.8989928%2C7.83461537%2027.2882498%2C8.20302872%20C30.0042351%2C10.7787368%2031.5%2C14.2580826%2031.5%2C18.0002938%20C31.5%2C25.4443275%2025.4436781%2C31.5%2017.9996753%2C31.5%20Z%22%3E%3C%2Fpath%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E")
  80. }
  81. .wux-switch--checked .wux-switch__spin {
  82. left: unset;
  83. right: 7.5px
  84. }
  85. .wux-switch--light .wux-switch__spin {
  86. background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20width%3D%2228%22%20height%3D%2228%22%20viewBox%3D%220%200%2028%2028%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cg%20stroke%3D%22none%22%20stroke-width%3D%221%22%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%3Cg%20transform%3D%22translate(-137.000000%2C%20-840.000000)%22%20fill%3D%22%23fff%22%3E%3Cg%20transform%3D%22translate(80.000000%2C%20823.000000)%22%3E%3Cg%20transform%3D%22translate(53.000000%2C%2013.000000)%22%3E%3Cpath%20d%3D%22M17.9996753%2C31.5%20C10.5556724%2C31.5%204.5%2C25.4443275%204.5%2C18.0003247%20C4.5%2C10.5563219%2010.5556724%2C4.5%2017.9996753%2C4.5%20C18.5355492%2C4.5%2018.9702974%2C4.93474816%2018.9702974%2C5.47062208%20C18.9702974%2C6.006496%2018.5355492%2C6.44124416%2017.9996753%2C6.44124416%20C11.6261524%2C6.44124416%206.44124416%2C11.6267709%206.44124416%2C18.0002938%20C6.44124416%2C24.3738167%2011.6261524%2C29.5587249%2017.9996753%2C29.5587249%20C24.3731982%2C29.5587249%2029.5587249%2C24.3738167%2029.5587249%2C18.0002938%20C29.5587249%2C14.7964616%2028.2778291%2C11.8169616%2025.9523687%2C9.61220279%20C25.5637302%2C9.24317094%2025.5473089%2C8.62893223%2025.9157222%2C8.23967523%20C26.2841356%2C7.84976878%2026.8989928%2C7.83461537%2027.2882498%2C8.20302872%20C30.0042351%2C10.7787368%2031.5%2C14.2580826%2031.5%2C18.0002938%20C31.5%2C25.4443275%2025.4436781%2C31.5%2017.9996753%2C31.5%20Z%22%3E%3C%2Fpath%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E")
  87. }
  88. .wux-switch--stable .wux-switch__spin {
  89. background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20width%3D%2228%22%20height%3D%2228%22%20viewBox%3D%220%200%2028%2028%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cg%20stroke%3D%22none%22%20stroke-width%3D%221%22%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%3Cg%20transform%3D%22translate(-137.000000%2C%20-840.000000)%22%20fill%3D%22%23f8f8f8%22%3E%3Cg%20transform%3D%22translate(80.000000%2C%20823.000000)%22%3E%3Cg%20transform%3D%22translate(53.000000%2C%2013.000000)%22%3E%3Cpath%20d%3D%22M17.9996753%2C31.5%20C10.5556724%2C31.5%204.5%2C25.4443275%204.5%2C18.0003247%20C4.5%2C10.5563219%2010.5556724%2C4.5%2017.9996753%2C4.5%20C18.5355492%2C4.5%2018.9702974%2C4.93474816%2018.9702974%2C5.47062208%20C18.9702974%2C6.006496%2018.5355492%2C6.44124416%2017.9996753%2C6.44124416%20C11.6261524%2C6.44124416%206.44124416%2C11.6267709%206.44124416%2C18.0002938%20C6.44124416%2C24.3738167%2011.6261524%2C29.5587249%2017.9996753%2C29.5587249%20C24.3731982%2C29.5587249%2029.5587249%2C24.3738167%2029.5587249%2C18.0002938%20C29.5587249%2C14.7964616%2028.2778291%2C11.8169616%2025.9523687%2C9.61220279%20C25.5637302%2C9.24317094%2025.5473089%2C8.62893223%2025.9157222%2C8.23967523%20C26.2841356%2C7.84976878%2026.8989928%2C7.83461537%2027.2882498%2C8.20302872%20C30.0042351%2C10.7787368%2031.5%2C14.2580826%2031.5%2C18.0002938%20C31.5%2C25.4443275%2025.4436781%2C31.5%2017.9996753%2C31.5%20Z%22%3E%3C%2Fpath%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E")
  90. }
  91. .wux-switch--positive .wux-switch__spin {
  92. background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20width%3D%2228%22%20height%3D%2228%22%20viewBox%3D%220%200%2028%2028%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cg%20stroke%3D%22none%22%20stroke-width%3D%221%22%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%3Cg%20transform%3D%22translate(-137.000000%2C%20-840.000000)%22%20fill%3D%22%23387ef5%22%3E%3Cg%20transform%3D%22translate(80.000000%2C%20823.000000)%22%3E%3Cg%20transform%3D%22translate(53.000000%2C%2013.000000)%22%3E%3Cpath%20d%3D%22M17.9996753%2C31.5%20C10.5556724%2C31.5%204.5%2C25.4443275%204.5%2C18.0003247%20C4.5%2C10.5563219%2010.5556724%2C4.5%2017.9996753%2C4.5%20C18.5355492%2C4.5%2018.9702974%2C4.93474816%2018.9702974%2C5.47062208%20C18.9702974%2C6.006496%2018.5355492%2C6.44124416%2017.9996753%2C6.44124416%20C11.6261524%2C6.44124416%206.44124416%2C11.6267709%206.44124416%2C18.0002938%20C6.44124416%2C24.3738167%2011.6261524%2C29.5587249%2017.9996753%2C29.5587249%20C24.3731982%2C29.5587249%2029.5587249%2C24.3738167%2029.5587249%2C18.0002938%20C29.5587249%2C14.7964616%2028.2778291%2C11.8169616%2025.9523687%2C9.61220279%20C25.5637302%2C9.24317094%2025.5473089%2C8.62893223%2025.9157222%2C8.23967523%20C26.2841356%2C7.84976878%2026.8989928%2C7.83461537%2027.2882498%2C8.20302872%20C30.0042351%2C10.7787368%2031.5%2C14.2580826%2031.5%2C18.0002938%20C31.5%2C25.4443275%2025.4436781%2C31.5%2017.9996753%2C31.5%20Z%22%3E%3C%2Fpath%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E")
  93. }
  94. .wux-switch--calm .wux-switch__spin {
  95. background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20width%3D%2228%22%20height%3D%2228%22%20viewBox%3D%220%200%2028%2028%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cg%20stroke%3D%22none%22%20stroke-width%3D%221%22%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%3Cg%20transform%3D%22translate(-137.000000%2C%20-840.000000)%22%20fill%3D%22%2311c1f3%22%3E%3Cg%20transform%3D%22translate(80.000000%2C%20823.000000)%22%3E%3Cg%20transform%3D%22translate(53.000000%2C%2013.000000)%22%3E%3Cpath%20d%3D%22M17.9996753%2C31.5%20C10.5556724%2C31.5%204.5%2C25.4443275%204.5%2C18.0003247%20C4.5%2C10.5563219%2010.5556724%2C4.5%2017.9996753%2C4.5%20C18.5355492%2C4.5%2018.9702974%2C4.93474816%2018.9702974%2C5.47062208%20C18.9702974%2C6.006496%2018.5355492%2C6.44124416%2017.9996753%2C6.44124416%20C11.6261524%2C6.44124416%206.44124416%2C11.6267709%206.44124416%2C18.0002938%20C6.44124416%2C24.3738167%2011.6261524%2C29.5587249%2017.9996753%2C29.5587249%20C24.3731982%2C29.5587249%2029.5587249%2C24.3738167%2029.5587249%2C18.0002938%20C29.5587249%2C14.7964616%2028.2778291%2C11.8169616%2025.9523687%2C9.61220279%20C25.5637302%2C9.24317094%2025.5473089%2C8.62893223%2025.9157222%2C8.23967523%20C26.2841356%2C7.84976878%2026.8989928%2C7.83461537%2027.2882498%2C8.20302872%20C30.0042351%2C10.7787368%2031.5%2C14.2580826%2031.5%2C18.0002938%20C31.5%2C25.4443275%2025.4436781%2C31.5%2017.9996753%2C31.5%20Z%22%3E%3C%2Fpath%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E")
  96. }
  97. .wux-switch--assertive .wux-switch__spin {
  98. background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20width%3D%2228%22%20height%3D%2228%22%20viewBox%3D%220%200%2028%2028%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cg%20stroke%3D%22none%22%20stroke-width%3D%221%22%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%3Cg%20transform%3D%22translate(-137.000000%2C%20-840.000000)%22%20fill%3D%22%23ef473a%22%3E%3Cg%20transform%3D%22translate(80.000000%2C%20823.000000)%22%3E%3Cg%20transform%3D%22translate(53.000000%2C%2013.000000)%22%3E%3Cpath%20d%3D%22M17.9996753%2C31.5%20C10.5556724%2C31.5%204.5%2C25.4443275%204.5%2C18.0003247%20C4.5%2C10.5563219%2010.5556724%2C4.5%2017.9996753%2C4.5%20C18.5355492%2C4.5%2018.9702974%2C4.93474816%2018.9702974%2C5.47062208%20C18.9702974%2C6.006496%2018.5355492%2C6.44124416%2017.9996753%2C6.44124416%20C11.6261524%2C6.44124416%206.44124416%2C11.6267709%206.44124416%2C18.0002938%20C6.44124416%2C24.3738167%2011.6261524%2C29.5587249%2017.9996753%2C29.5587249%20C24.3731982%2C29.5587249%2029.5587249%2C24.3738167%2029.5587249%2C18.0002938%20C29.5587249%2C14.7964616%2028.2778291%2C11.8169616%2025.9523687%2C9.61220279%20C25.5637302%2C9.24317094%2025.5473089%2C8.62893223%2025.9157222%2C8.23967523%20C26.2841356%2C7.84976878%2026.8989928%2C7.83461537%2027.2882498%2C8.20302872%20C30.0042351%2C10.7787368%2031.5%2C14.2580826%2031.5%2C18.0002938%20C31.5%2C25.4443275%2025.4436781%2C31.5%2017.9996753%2C31.5%20Z%22%3E%3C%2Fpath%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E")
  99. }
  100. .wux-switch--balanced .wux-switch__spin {
  101. background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20width%3D%2228%22%20height%3D%2228%22%20viewBox%3D%220%200%2028%2028%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cg%20stroke%3D%22none%22%20stroke-width%3D%221%22%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%3Cg%20transform%3D%22translate(-137.000000%2C%20-840.000000)%22%20fill%3D%22%2333cd5f%22%3E%3Cg%20transform%3D%22translate(80.000000%2C%20823.000000)%22%3E%3Cg%20transform%3D%22translate(53.000000%2C%2013.000000)%22%3E%3Cpath%20d%3D%22M17.9996753%2C31.5%20C10.5556724%2C31.5%204.5%2C25.4443275%204.5%2C18.0003247%20C4.5%2C10.5563219%2010.5556724%2C4.5%2017.9996753%2C4.5%20C18.5355492%2C4.5%2018.9702974%2C4.93474816%2018.9702974%2C5.47062208%20C18.9702974%2C6.006496%2018.5355492%2C6.44124416%2017.9996753%2C6.44124416%20C11.6261524%2C6.44124416%206.44124416%2C11.6267709%206.44124416%2C18.0002938%20C6.44124416%2C24.3738167%2011.6261524%2C29.5587249%2017.9996753%2C29.5587249%20C24.3731982%2C29.5587249%2029.5587249%2C24.3738167%2029.5587249%2C18.0002938%20C29.5587249%2C14.7964616%2028.2778291%2C11.8169616%2025.9523687%2C9.61220279%20C25.5637302%2C9.24317094%2025.5473089%2C8.62893223%2025.9157222%2C8.23967523%20C26.2841356%2C7.84976878%2026.8989928%2C7.83461537%2027.2882498%2C8.20302872%20C30.0042351%2C10.7787368%2031.5%2C14.2580826%2031.5%2C18.0002938%20C31.5%2C25.4443275%2025.4436781%2C31.5%2017.9996753%2C31.5%20Z%22%3E%3C%2Fpath%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E")
  102. }
  103. .wux-switch--energized .wux-switch__spin {
  104. background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20width%3D%2228%22%20height%3D%2228%22%20viewBox%3D%220%200%2028%2028%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cg%20stroke%3D%22none%22%20stroke-width%3D%221%22%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%3Cg%20transform%3D%22translate(-137.000000%2C%20-840.000000)%22%20fill%3D%22%23ffc900%22%3E%3Cg%20transform%3D%22translate(80.000000%2C%20823.000000)%22%3E%3Cg%20transform%3D%22translate(53.000000%2C%2013.000000)%22%3E%3Cpath%20d%3D%22M17.9996753%2C31.5%20C10.5556724%2C31.5%204.5%2C25.4443275%204.5%2C18.0003247%20C4.5%2C10.5563219%2010.5556724%2C4.5%2017.9996753%2C4.5%20C18.5355492%2C4.5%2018.9702974%2C4.93474816%2018.9702974%2C5.47062208%20C18.9702974%2C6.006496%2018.5355492%2C6.44124416%2017.9996753%2C6.44124416%20C11.6261524%2C6.44124416%206.44124416%2C11.6267709%206.44124416%2C18.0002938%20C6.44124416%2C24.3738167%2011.6261524%2C29.5587249%2017.9996753%2C29.5587249%20C24.3731982%2C29.5587249%2029.5587249%2C24.3738167%2029.5587249%2C18.0002938%20C29.5587249%2C14.7964616%2028.2778291%2C11.8169616%2025.9523687%2C9.61220279%20C25.5637302%2C9.24317094%2025.5473089%2C8.62893223%2025.9157222%2C8.23967523%20C26.2841356%2C7.84976878%2026.8989928%2C7.83461537%2027.2882498%2C8.20302872%20C30.0042351%2C10.7787368%2031.5%2C14.2580826%2031.5%2C18.0002938%20C31.5%2C25.4443275%2025.4436781%2C31.5%2017.9996753%2C31.5%20Z%22%3E%3C%2Fpath%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E")
  105. }
  106. .wux-switch--royal .wux-switch__spin {
  107. background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20width%3D%2228%22%20height%3D%2228%22%20viewBox%3D%220%200%2028%2028%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cg%20stroke%3D%22none%22%20stroke-width%3D%221%22%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%3Cg%20transform%3D%22translate(-137.000000%2C%20-840.000000)%22%20fill%3D%22%23886aea%22%3E%3Cg%20transform%3D%22translate(80.000000%2C%20823.000000)%22%3E%3Cg%20transform%3D%22translate(53.000000%2C%2013.000000)%22%3E%3Cpath%20d%3D%22M17.9996753%2C31.5%20C10.5556724%2C31.5%204.5%2C25.4443275%204.5%2C18.0003247%20C4.5%2C10.5563219%2010.5556724%2C4.5%2017.9996753%2C4.5%20C18.5355492%2C4.5%2018.9702974%2C4.93474816%2018.9702974%2C5.47062208%20C18.9702974%2C6.006496%2018.5355492%2C6.44124416%2017.9996753%2C6.44124416%20C11.6261524%2C6.44124416%206.44124416%2C11.6267709%206.44124416%2C18.0002938%20C6.44124416%2C24.3738167%2011.6261524%2C29.5587249%2017.9996753%2C29.5587249%20C24.3731982%2C29.5587249%2029.5587249%2C24.3738167%2029.5587249%2C18.0002938%20C29.5587249%2C14.7964616%2028.2778291%2C11.8169616%2025.9523687%2C9.61220279%20C25.5637302%2C9.24317094%2025.5473089%2C8.62893223%2025.9157222%2C8.23967523%20C26.2841356%2C7.84976878%2026.8989928%2C7.83461537%2027.2882498%2C8.20302872%20C30.0042351%2C10.7787368%2031.5%2C14.2580826%2031.5%2C18.0002938%20C31.5%2C25.4443275%2025.4436781%2C31.5%2017.9996753%2C31.5%20Z%22%3E%3C%2Fpath%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E")
  108. }
  109. .wux-switch--dark .wux-switch__spin {
  110. background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20width%3D%2228%22%20height%3D%2228%22%20viewBox%3D%220%200%2028%2028%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cg%20stroke%3D%22none%22%20stroke-width%3D%221%22%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%3Cg%20transform%3D%22translate(-137.000000%2C%20-840.000000)%22%20fill%3D%22%23444%22%3E%3Cg%20transform%3D%22translate(80.000000%2C%20823.000000)%22%3E%3Cg%20transform%3D%22translate(53.000000%2C%2013.000000)%22%3E%3Cpath%20d%3D%22M17.9996753%2C31.5%20C10.5556724%2C31.5%204.5%2C25.4443275%204.5%2C18.0003247%20C4.5%2C10.5563219%2010.5556724%2C4.5%2017.9996753%2C4.5%20C18.5355492%2C4.5%2018.9702974%2C4.93474816%2018.9702974%2C5.47062208%20C18.9702974%2C6.006496%2018.5355492%2C6.44124416%2017.9996753%2C6.44124416%20C11.6261524%2C6.44124416%206.44124416%2C11.6267709%206.44124416%2C18.0002938%20C6.44124416%2C24.3738167%2011.6261524%2C29.5587249%2017.9996753%2C29.5587249%20C24.3731982%2C29.5587249%2029.5587249%2C24.3738167%2029.5587249%2C18.0002938%20C29.5587249%2C14.7964616%2028.2778291%2C11.8169616%2025.9523687%2C9.61220279%20C25.5637302%2C9.24317094%2025.5473089%2C8.62893223%2025.9157222%2C8.23967523%20C26.2841356%2C7.84976878%2026.8989928%2C7.83461537%2027.2882498%2C8.20302872%20C30.0042351%2C10.7787368%2031.5%2C14.2580826%2031.5%2C18.0002938%20C31.5%2C25.4443275%2025.4436781%2C31.5%2017.9996753%2C31.5%20Z%22%3E%3C%2Fpath%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E")
  111. }
  112. @keyframes switch-spin-rotate {
  113. to {
  114. transform: rotate(1turn)
  115. }
  116. }