首頁 探索 說明
註冊 登入
zhuliu
/
xiaoshi-wx
1
0
複刻 0
檔案 問題管理 0 合併請求 0 Wiki
分支: master
分支列表 標籤列表
xiaoshi-wx
/
node_modules
/
wux-weapp
/
example
/
dist
/
switch
/
index.wxss

index.wxss 17 KB
永久連結 文件歷史 原始文件

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116 
  1. .wux-switch {
    2. 

  2.   display: inline-block;
    3. 

  3.   vertical-align: middle;
    4. 

  4.   box-sizing: border-box;
    5. 

  5.   position: relative;
    6. 

  6.   align-self: center;
    7. 

  7.   cursor: pointer
    8. 

  8. }
    9. 

  9. .wux-switch__input {
    10. 

  10.   position: relative;
    11. 

  11.   min-width: 104rpx;
    12. 

  12.   height: 64rpx;
    13. 

  13.   border: 2rpx solid #dfdfdf;
    14. 

  14.   outline: 0;
    15. 

  15.   border-radius: 32rpx;
    16. 

  16.   box-sizing: border-box;
    17. 

  17.   background-color: #dfdfdf;
    18. 

  18.   transition: background-color .1s,border .1s
    19. 

  19. }
    20. 

  20. .wux-switch__input::before {
    21. 

  21.   content: " ";
    22. 

  22.   position: absolute;
    23. 

  23.   top: 0;
    24. 

  24.   left: 0;
    25. 

  25.   width: 100%;
    26. 

  26.   height: 60rpx;
    27. 

  27.   border-radius: 30rpx;
    28. 

  28.   background-color: #fdfdfd;
    29. 

  29.   transition: transform .35s cubic-bezier(.45,1,.4,1)
    30. 

  30. }
    31. 

  31. .wux-switch__input::after {
    32. 

  32.   content: " ";
    33. 

  33.   position: absolute;
    34. 

  34.   top: 0;
    35. 

  35.   left: 0;
    36. 

  36.   width: 60rpx;
    37. 

  37.   height: 60rpx;
    38. 

  38.   border-radius: 30rpx;
    39. 

  39.   background-color: #fff;
    40. 

  40.   box-shadow: 0 2rpx 6rpx rgba(0,0,0,.4);
    41. 

  41.   transition: left .35s cubic-bezier(.4,.4,.25,1.35)
    42. 

  42. }
    43. 

  43. .wux-switch__input--checked {
    44. 

  44.   border-color: #33cd5f;
    45. 

  45.   background-color: #33cd5f
    46. 

  46. }
    47. 

  47. .wux-switch__input--checked::before {
    48. 

  48.   transform: scale(0)
    49. 

  49. }
    50. 

  50. .wux-switch__input--checked::after {
    51. 

  51.   left: calc(100% - 60rpx - 2rpx / 2)
    52. 

  52. }
    53. 

  53. .wux-switch__input--disabled {
    54. 

  54.   opacity: .3
    55. 

  55. }
    56. 

  56. .wux-switch__text {
    57. 

  57.   position: relative;
    58. 

  58.   z-index: 10;
    59. 

  59.   display: flex;
    60. 

  60.   justify-content: center;
    61. 

  61.   align-items: center;
    62. 

  62.   height: 100%;
    63. 

  63.   transition: margin .2s;
    64. 

  64.   margin: 0 16rpx 0 calc(70rpx)
    65. 

  65. }
    66. 

  66. .wux-switch--checked .wux-switch__text {
    67. 

  67.   color: #fff;
    68. 

  68.   margin: 0 calc(72rpx) 0 20rpx
    69. 

  69. }
    70. 

  70. .wux-switch__spin {
    71. 

  71.   position: absolute;
    72. 

  72.   left: 15rpx;
    73. 

  73.   top: 15rpx;
    74. 

  74.   z-index: 10;
    75. 

  75.   width: 30rpx;
    76. 

  76.   height: 30rpx;
    77. 

  77.   background-size: contain;
    78. 

  78.   animation: switch-spin-rotate 1s linear infinite;
    79. 

  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. 

  80. }
    81. 

  81. .wux-switch--checked .wux-switch__spin {
    82. 

  82.   left: unset;
    83. 

  83.   right: 7.5px
    84. 

  84. }
    85. 

  85. .wux-switch--light .wux-switch__spin {
    86. 

  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. 

  87. }
    88. 

  88. .wux-switch--stable .wux-switch__spin {
    89. 

  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. 

  90. }
    91. 

  91. .wux-switch--positive .wux-switch__spin {
    92. 

  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. 

  93. }
    94. 

  94. .wux-switch--calm .wux-switch__spin {
    95. 

  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. 

  96. }
    97. 

  97. .wux-switch--assertive .wux-switch__spin {
    98. 

  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. 

  99. }
    100. 

  100. .wux-switch--balanced .wux-switch__spin {
    101. 

  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. 

  102. }
    103. 

  103. .wux-switch--energized .wux-switch__spin {
    104. 

  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. 

  105. }
    106. 

  106. .wux-switch--royal .wux-switch__spin {
    107. 

  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. 

  108. }
    109. 

  109. .wux-switch--dark .wux-switch__spin {
    110. 

  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. 

  111. }
    112. 

  112. @keyframes switch-spin-rotate {
    113. 

  113.   to {
    114. 

  114.     transform: rotate(1turn)
    115. 

  115.   }
    116. 

  116. }
    117.