index.css 2.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134
  1. /* Default state */
  2. .rc-checkbox {
  3. white-space: nowrap;
  4. cursor: pointer;
  5. outline: none;
  6. display: inline-block;
  7. position: relative;
  8. line-height: 1;
  9. vertical-align: middle;
  10. }
  11. .rc-checkbox:hover .rc-checkbox-inner,
  12. .rc-checkbox-input:focus + .rc-checkbox-inner {
  13. border-color: #3dbcf6;
  14. }
  15. .rc-checkbox-inner {
  16. position: relative;
  17. top: 0;
  18. left: 0;
  19. display: inline-block;
  20. width: 14px;
  21. height: 14px;
  22. border-width: 1px;
  23. border-style: solid;
  24. border-radius: 3px;
  25. border-color: #d9d9d9;
  26. background-color: #ffffff;
  27. transition: border-color 0.3s cubic-bezier(0.68, -0.55, 0.27, 1.55), background-color 0.3s cubic-bezier(0.68, -0.55, 0.27, 1.55);
  28. }
  29. .rc-checkbox-inner:after {
  30. -webkit-transform: rotate(45deg);
  31. transform: rotate(45deg);
  32. position: absolute;
  33. left: 4px;
  34. top: 1px;
  35. display: table;
  36. width: 5px;
  37. height: 8px;
  38. border: 2px solid #ffffff;
  39. border-top: 0;
  40. border-left: 0;
  41. content: ' ';
  42. animation-timing-function: cubic-bezier(0.68, -0.55, 0.27, 1.55);
  43. animation-duration: 0.3s;
  44. animation-name: amCheckboxOut;
  45. }
  46. .rc-checkbox-input {
  47. position: absolute;
  48. left: 0;
  49. z-index: 9999;
  50. cursor: pointer;
  51. opacity: 0;
  52. top: 0;
  53. bottom: 0;
  54. right: 0;
  55. }
  56. /* Checked state */
  57. .rc-checkbox-checked:hover .rc-checkbox-inner {
  58. border-color: #3dbcf6;
  59. }
  60. .rc-checkbox-checked .rc-checkbox-inner {
  61. border-color: #3dbcf6;
  62. background-color: #3dbcf6;
  63. }
  64. .rc-checkbox-checked .rc-checkbox-inner:after {
  65. transform: rotate(45deg);
  66. position: absolute;
  67. left: 4px;
  68. top: 1px;
  69. display: table;
  70. width: 5px;
  71. height: 8px;
  72. border: 2px solid #ffffff;
  73. border-top: 0;
  74. border-left: 0;
  75. content: ' ';
  76. animation-timing-function: cubic-bezier(0.68, -0.55, 0.27, 1.55);
  77. animation-duration: 0.3s;
  78. animation-name: amCheckboxOut;
  79. }
  80. @media print {
  81. .rc-checkbox-checked .rc-checkbox-inner {
  82. box-shadow: inset 0 0 0 16px #3dbcf6;
  83. }
  84. }
  85. .rc-checkbox-disabled.rc-checkbox-checked:hover .rc-checkbox-inner {
  86. border-color: #d9d9d9;
  87. }
  88. .rc-checkbox-disabled.rc-checkbox-checked .rc-checkbox-inner {
  89. background-color: #f3f3f3;
  90. border-color: #d9d9d9;
  91. }
  92. .rc-checkbox-disabled.rc-checkbox-checked .rc-checkbox-inner:after {
  93. animation-name: none;
  94. border-color: #cccccc;
  95. }
  96. @media print {
  97. .rc-checkbox-disabled.rc-checkbox-checked .rc-checkbox-inner {
  98. box-shadow: inset 0 0 0 16px #f3f3f3;
  99. }
  100. }
  101. .rc-checkbox-disabled:hover .rc-checkbox-inner {
  102. border-color: #d9d9d9;
  103. }
  104. .rc-checkbox-disabled .rc-checkbox-inner {
  105. border-color: #d9d9d9;
  106. background-color: #f3f3f3;
  107. }
  108. .rc-checkbox-disabled .rc-checkbox-inner:after {
  109. animation-name: none;
  110. border-color: #f3f3f3;
  111. }
  112. .rc-checkbox-disabled .rc-checkbox-input {
  113. cursor: default;
  114. }
  115. @keyframes amCheckboxIn {
  116. 0% {
  117. opacity: 0;
  118. transform-origin: 50% 50%;
  119. transform: scale(0, 0) rotate(45deg);
  120. }
  121. 100% {
  122. opacity: 1;
  123. transform-origin: 50% 50%;
  124. transform: scale(1, 1) rotate(45deg);
  125. }
  126. }
  127. @keyframes amCheckboxOut {
  128. 0% {
  129. opacity: 1;
  130. }
  131. 100% {
  132. opacity: 0;
  133. }
  134. }