index.css 3.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152
  1. /* stylelint-disable at-rule-empty-line-before,at-rule-name-space-after,at-rule-no-unknown */
  2. /* stylelint-disable no-duplicate-selectors */
  3. /* stylelint-disable */
  4. /* stylelint-disable declaration-bang-space-before,no-duplicate-selectors,string-no-newline */
  5. .ant-switch {
  6. margin: 0;
  7. padding: 0;
  8. color: rgba(0, 0, 0, 0.85);
  9. font-size: 14px;
  10. font-variant: tabular-nums;
  11. line-height: 1.5715;
  12. list-style: none;
  13. font-feature-settings: 'tnum';
  14. position: relative;
  15. display: inline-block;
  16. box-sizing: border-box;
  17. min-width: 44px;
  18. height: 22px;
  19. line-height: 22px;
  20. vertical-align: middle;
  21. background-color: rgba(0, 0, 0, 0.25);
  22. border: 0;
  23. border-radius: 100px;
  24. cursor: pointer;
  25. transition: all 0.2s;
  26. -webkit-user-select: none;
  27. -moz-user-select: none;
  28. user-select: none;
  29. }
  30. .ant-switch:focus {
  31. outline: 0;
  32. box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.1);
  33. }
  34. .ant-switch-checked:focus {
  35. box-shadow: 0 0 0 2px #e6f7ff;
  36. }
  37. .ant-switch:focus:hover {
  38. box-shadow: none;
  39. }
  40. .ant-switch-checked {
  41. background-color: #1890ff;
  42. }
  43. .ant-switch-loading,
  44. .ant-switch-disabled {
  45. cursor: not-allowed;
  46. opacity: 0.4;
  47. }
  48. .ant-switch-loading *,
  49. .ant-switch-disabled * {
  50. box-shadow: none;
  51. cursor: not-allowed;
  52. }
  53. .ant-switch-inner {
  54. display: block;
  55. margin: 0 7px 0 25px;
  56. color: #fff;
  57. font-size: 12px;
  58. transition: margin 0.2s;
  59. }
  60. .ant-switch-checked .ant-switch-inner {
  61. margin: 0 25px 0 7px;
  62. }
  63. .ant-switch-handle {
  64. position: absolute;
  65. top: 2px;
  66. left: 2px;
  67. width: 18px;
  68. height: 18px;
  69. transition: all 0.2s ease-in-out;
  70. }
  71. .ant-switch-handle::before {
  72. position: absolute;
  73. top: 0;
  74. right: 0;
  75. bottom: 0;
  76. left: 0;
  77. background-color: #fff;
  78. border-radius: 9px;
  79. box-shadow: 0 2px 4px 0 rgba(0, 35, 11, 0.2);
  80. transition: all 0.2s ease-in-out;
  81. content: '';
  82. }
  83. .ant-switch-checked .ant-switch-handle {
  84. left: calc(100% - 18px - 2px);
  85. }
  86. .ant-switch:not(.ant-switch-disabled):active .ant-switch-handle::before {
  87. right: -30%;
  88. left: 0;
  89. }
  90. .ant-switch:not(.ant-switch-disabled):active.ant-switch-checked .ant-switch-handle::before {
  91. right: 0;
  92. left: -30%;
  93. }
  94. .ant-switch-loading-icon.anticon {
  95. position: relative;
  96. top: 2px;
  97. color: rgba(0, 0, 0, 0.65);
  98. vertical-align: top;
  99. }
  100. .ant-switch-checked .ant-switch-loading-icon {
  101. color: #1890ff;
  102. }
  103. .ant-switch-small {
  104. min-width: 28px;
  105. height: 16px;
  106. line-height: 16px;
  107. }
  108. .ant-switch-small .ant-switch-inner {
  109. margin: 0 5px 0 18px;
  110. font-size: 12px;
  111. }
  112. .ant-switch-small .ant-switch-handle {
  113. width: 12px;
  114. height: 12px;
  115. }
  116. .ant-switch-small .ant-switch-loading-icon {
  117. top: 1.5px;
  118. font-size: 9px;
  119. }
  120. .ant-switch-small.ant-switch-checked .ant-switch-inner {
  121. margin: 0 18px 0 5px;
  122. }
  123. .ant-switch-small.ant-switch-checked .ant-switch-handle {
  124. left: calc(100% - 12px - 2px);
  125. }
  126. .ant-switch-rtl {
  127. direction: rtl;
  128. }
  129. .ant-switch-rtl .ant-switch-inner {
  130. margin: 0 25px 0 7px;
  131. }
  132. .ant-switch-rtl .ant-switch-handle {
  133. right: 2px;
  134. left: auto;
  135. }
  136. .ant-switch-rtl:not(.ant-switch-rtl-disabled):active .ant-switch-handle::before {
  137. right: 0;
  138. left: -30%;
  139. }
  140. .ant-switch-rtl:not(.ant-switch-rtl-disabled):active.ant-switch-checked .ant-switch-handle::before {
  141. right: -30%;
  142. left: 0;
  143. }
  144. .ant-switch-rtl.ant-switch-checked .ant-switch-inner {
  145. margin: 0 7px 0 25px;
  146. }
  147. .ant-switch-rtl.ant-switch-checked .ant-switch-handle {
  148. right: calc(100% - 18px - 2px);
  149. }
  150. .ant-switch-rtl.ant-switch-small.ant-switch-checked .ant-switch-handle {
  151. right: calc(100% - 12px - 2px);
  152. }