switch.css 2.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118
  1. uni-switch {
  2. -webkit-tap-highlight-color: transparent;
  3. display: inline-block;
  4. cursor: pointer;
  5. }
  6. uni-switch[hidden] {
  7. display: none;
  8. }
  9. uni-switch[disabled] {
  10. cursor: not-allowed;
  11. }
  12. uni-switch[disabled] .uni-switch-input {
  13. opacity: 0.7;
  14. }
  15. .uni-switch-wrapper {
  16. display: inline-flex;
  17. align-items: center;
  18. vertical-align: middle;
  19. }
  20. .uni-switch-input {
  21. appearance: none;
  22. position: relative;
  23. width: 52px;
  24. height: 32px;
  25. margin-right: 5px;
  26. border: 2px solid transparent;
  27. outline: 0;
  28. border-radius: 16px;
  29. box-sizing: border-box;
  30. background-color: rgba(0,0,0,.1);
  31. transition: background-color 0.1s, border 0.1s;
  32. }
  33. .uni-switch-input:after {
  34. content: ' ';
  35. position: absolute;
  36. top: 0;
  37. left: 0;
  38. width: 28px;
  39. height: 28px;
  40. border-radius: 15px;
  41. background-color: #ffffff;
  42. box-shadow: 0 2px 3px rgba(0, 0, 0, 0.06);
  43. transition: transform 0.3s;
  44. }
  45. .uni-switch-input.uni-switch-input-checked {
  46. border-color: #007aff;
  47. background-color: #007aff;
  48. }
  49. .uni-switch-input.uni-switch-input-checked:before {
  50. transform: scale(0);
  51. }
  52. .uni-switch-input.uni-switch-input-checked:after {
  53. transform: translateX(20px);
  54. }
  55. uni-switch .uni-checkbox-input {
  56. margin-right: 5px;
  57. appearance: none;
  58. outline: 0;
  59. border: 1px solid #d1d1d1;
  60. background-color: #ffffff;
  61. border-radius: 3px;
  62. width: 22px;
  63. height: 22px;
  64. position: relative;
  65. color: #007aff;
  66. }
  67. uni-switch:not([disabled]) .uni-checkbox-input:hover {
  68. border-color: #007aff;
  69. }
  70. uni-switch .uni-checkbox-input svg {
  71. fill: #007aff;
  72. font-size: 22px;
  73. position: absolute;
  74. top: 50%;
  75. left: 50%;
  76. transform: translate(-50%, -48%) scale(0.73);
  77. }
  78. .uni-checkbox-input.uni-checkbox-input-disabled {
  79. background-color: #e1e1e1;
  80. }
  81. .uni-checkbox-input.uni-checkbox-input-disabled:before {
  82. color: #adadad;
  83. }
  84. @media (prefers-color-scheme: dark) {
  85. uni-switch .uni-switch-input {
  86. border-color: #3b3b3f;
  87. }
  88. uni-switch .uni-switch-input,
  89. uni-switch .uni-switch-input:before {
  90. background-color: #3b3b3f;
  91. }
  92. uni-switch .uni-switch-input:after {
  93. background-color: #fff;
  94. box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
  95. }
  96. uni-switch .uni-checkbox-input {
  97. background-color: #2c2c2c;
  98. border: 1px solid #656565;
  99. }
  100. }