index.css 3.3 KB

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