bootstrap.css 3.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177
  1. .rc-dialog {
  2. position: relative;
  3. width: auto;
  4. margin: 10px;
  5. }
  6. .rc-dialog-wrap {
  7. position: fixed;
  8. overflow: auto;
  9. top: 0;
  10. right: 0;
  11. bottom: 0;
  12. left: 0;
  13. z-index: 1050;
  14. -webkit-overflow-scrolling: touch;
  15. outline: 0;
  16. }
  17. .rc-dialog-content {
  18. position: relative;
  19. background-color: #fff;
  20. border: 1px solid #999;
  21. border: 1px solid rgba(0, 0, 0, 0.2);
  22. border-radius: 6px;
  23. box-shadow: 0 3px 9px rgba(0, 0, 0, 0.5);
  24. background-clip: padding-box;
  25. outline: 0;
  26. }
  27. .rc-dialog-header {
  28. padding: 15px;
  29. border-bottom: 1px solid #e5e5e5;
  30. }
  31. .rc-dialog-close {
  32. cursor: pointer;
  33. border: 0;
  34. background: transparent;
  35. font-size: 21px;
  36. position: absolute;
  37. right: 20px;
  38. top: 12px;
  39. font-weight: 700;
  40. line-height: 1;
  41. color: #000;
  42. text-shadow: 0 1px 0 #fff;
  43. filter: alpha(opacity=20);
  44. opacity: 0.2;
  45. text-decoration: none;
  46. }
  47. .rc-dialog-close-x:after {
  48. content: '×';
  49. }
  50. .rc-dialog-close:hover {
  51. opacity: 1;
  52. filter: alpha(opacity=100);
  53. text-decoration: none;
  54. }
  55. .rc-dialog-title {
  56. margin: 0;
  57. line-height: 1.42857143;
  58. }
  59. .rc-dialog-body {
  60. position: relative;
  61. padding: 15px;
  62. }
  63. .rc-dialog-footer {
  64. padding: 15px;
  65. text-align: right;
  66. border-top: 1px solid #e5e5e5;
  67. }
  68. .rc-dialog-footer .btn + .btn {
  69. margin-left: 5px;
  70. margin-bottom: 0;
  71. }
  72. .rc-dialog-footer .btn-group .btn + .btn {
  73. margin-left: -1px;
  74. }
  75. .rc-dialog-footer .btn-block + .btn-block {
  76. margin-left: 0;
  77. }
  78. @media (min-width: 768px) {
  79. .rc-dialog {
  80. width: 600px;
  81. margin: 30px auto;
  82. }
  83. .rc-dialog-content {
  84. box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
  85. }
  86. }
  87. .rc-dialog-slide-fade-enter,
  88. .rc-dialog-slide-fade-appear {
  89. transform: translate(0, -25%);
  90. }
  91. .rc-dialog-slide-fade-enter,
  92. .rc-dialog-slide-fade-appear,
  93. .rc-dialog-slide-fade-leave {
  94. animation-duration: 0.3s;
  95. animation-fill-mode: both;
  96. animation-timing-function: ease-out;
  97. animation-play-state: paused;
  98. }
  99. .rc-dialog-slide-fade-enter.rc-dialog-slide-fade-enter-active,
  100. .rc-dialog-slide-fade-appear.rc-dialog-slide-fade-appear-active {
  101. animation-name: rcDialogSlideFadeIn;
  102. animation-play-state: running;
  103. }
  104. .rc-dialog-slide-fade-leave.rc-dialog-slide-fade-leave-active {
  105. animation-name: rcDialogSlideFadeOut;
  106. animation-play-state: running;
  107. }
  108. @keyframes rcDialogSlideFadeIn {
  109. 0% {
  110. transform: translate(0, -25%);
  111. }
  112. 100% {
  113. transform: translate(0, 0);
  114. }
  115. }
  116. @keyframes rcDialogSlideFadeOut {
  117. 0% {
  118. transform: translate(0, 0);
  119. }
  120. 100% {
  121. transform: translate(0, -25%);
  122. }
  123. }
  124. .rc-dialog-mask {
  125. position: fixed;
  126. top: 0;
  127. right: 0;
  128. left: 0;
  129. bottom: 0;
  130. background-color: #373737;
  131. background-color: rgba(55, 55, 55, 0.6);
  132. height: 100%;
  133. filter: alpha(opacity=50);
  134. z-index: 1050;
  135. }
  136. .rc-dialog-mask-hidden {
  137. display: none;
  138. }
  139. .rc-dialog-fade-enter,
  140. .rc-dialog-fade-appear {
  141. opacity: 0;
  142. animation-duration: 0.3s;
  143. animation-fill-mode: both;
  144. animation-timing-function: cubic-bezier(0.55, 0, 0.55, 0.2);
  145. animation-play-state: paused;
  146. }
  147. .rc-dialog-fade-leave {
  148. animation-duration: 0.3s;
  149. animation-fill-mode: both;
  150. animation-timing-function: cubic-bezier(0.55, 0, 0.55, 0.2);
  151. animation-play-state: paused;
  152. }
  153. .rc-dialog-fade-enter.rc-dialog-fade-enter-active,
  154. .rc-dialog-fade-appear.rc-dialog-fade-appear-active {
  155. animation-name: rcDialogFadeIn;
  156. animation-play-state: running;
  157. }
  158. .rc-dialog-fade-leave.rc-dialog-fade-leave-active {
  159. animation-name: rcDialogFadeOut;
  160. animation-play-state: running;
  161. }
  162. @keyframes rcDialogFadeIn {
  163. 0% {
  164. opacity: 0;
  165. }
  166. 100% {
  167. opacity: 1;
  168. }
  169. }
  170. @keyframes rcDialogFadeOut {
  171. 0% {
  172. opacity: 1;
  173. }
  174. 100% {
  175. opacity: 0;
  176. }
  177. }