index.css 6.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266
  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-drawer {
  4. position: fixed;
  5. top: 0;
  6. right: 0;
  7. bottom: 0;
  8. left: 0;
  9. z-index: 1000;
  10. pointer-events: none;
  11. }
  12. .ant-drawer-inline {
  13. position: absolute;
  14. }
  15. .ant-drawer-mask {
  16. position: absolute;
  17. top: 0;
  18. right: 0;
  19. bottom: 0;
  20. left: 0;
  21. z-index: 1000;
  22. background: rgba(0, 0, 0, 0.45);
  23. pointer-events: auto;
  24. }
  25. .ant-drawer-content-wrapper {
  26. position: absolute;
  27. z-index: 1000;
  28. transition: all 0.3s;
  29. }
  30. .ant-drawer-content-wrapper-hidden {
  31. display: none;
  32. }
  33. .ant-drawer-left > .ant-drawer-content-wrapper {
  34. top: 0;
  35. bottom: 0;
  36. left: 0;
  37. box-shadow: 6px 0 16px -8px rgba(0, 0, 0, 0.08), 9px 0 28px 0 rgba(0, 0, 0, 0.05), 12px 0 48px 16px rgba(0, 0, 0, 0.03);
  38. }
  39. .ant-drawer-right > .ant-drawer-content-wrapper {
  40. top: 0;
  41. right: 0;
  42. bottom: 0;
  43. box-shadow: -6px 0 16px -8px rgba(0, 0, 0, 0.08), -9px 0 28px 0 rgba(0, 0, 0, 0.05), -12px 0 48px 16px rgba(0, 0, 0, 0.03);
  44. }
  45. .ant-drawer-top > .ant-drawer-content-wrapper {
  46. top: 0;
  47. right: 0;
  48. left: 0;
  49. box-shadow: 0 6px 16px -8px rgba(0, 0, 0, 0.08), 0 9px 28px 0 rgba(0, 0, 0, 0.05), 0 12px 48px 16px rgba(0, 0, 0, 0.03);
  50. }
  51. .ant-drawer-bottom > .ant-drawer-content-wrapper {
  52. right: 0;
  53. bottom: 0;
  54. left: 0;
  55. box-shadow: 0 -6px 16px -8px rgba(0, 0, 0, 0.08), 0 -9px 28px 0 rgba(0, 0, 0, 0.05), 0 -12px 48px 16px rgba(0, 0, 0, 0.03);
  56. }
  57. .ant-drawer-content {
  58. width: 100%;
  59. height: 100%;
  60. overflow: auto;
  61. background: #fff;
  62. pointer-events: auto;
  63. }
  64. .ant-drawer-wrapper-body {
  65. display: flex;
  66. flex-direction: column;
  67. width: 100%;
  68. height: 100%;
  69. }
  70. .ant-drawer-header {
  71. display: flex;
  72. flex: 0;
  73. align-items: center;
  74. padding: 16px 24px;
  75. font-size: 16px;
  76. line-height: 22px;
  77. border-bottom: 1px solid #f0f0f0;
  78. }
  79. .ant-drawer-header-title {
  80. display: flex;
  81. flex: 1;
  82. align-items: center;
  83. min-width: 0;
  84. min-height: 0;
  85. }
  86. .ant-drawer-extra {
  87. flex: none;
  88. }
  89. .ant-drawer-close {
  90. display: inline-block;
  91. margin-right: 12px;
  92. color: rgba(0, 0, 0, 0.45);
  93. font-weight: 700;
  94. font-size: 16px;
  95. font-style: normal;
  96. line-height: 1;
  97. text-align: center;
  98. text-transform: none;
  99. text-decoration: none;
  100. background: transparent;
  101. border: 0;
  102. outline: 0;
  103. cursor: pointer;
  104. transition: color 0.3s;
  105. text-rendering: auto;
  106. }
  107. .ant-drawer-close:focus,
  108. .ant-drawer-close:hover {
  109. color: rgba(0, 0, 0, 0.75);
  110. text-decoration: none;
  111. }
  112. .ant-drawer-title {
  113. flex: 1;
  114. margin: 0;
  115. color: rgba(0, 0, 0, 0.85);
  116. font-weight: 500;
  117. font-size: 16px;
  118. line-height: 22px;
  119. }
  120. .ant-drawer-body {
  121. flex: 1;
  122. min-width: 0;
  123. min-height: 0;
  124. padding: 24px;
  125. overflow: auto;
  126. }
  127. .ant-drawer-footer {
  128. flex-shrink: 0;
  129. padding: 10px 16px;
  130. border-top: 1px solid #f0f0f0;
  131. }
  132. .panel-motion-enter-start,
  133. .panel-motion-appear-start,
  134. .panel-motion-leave-start {
  135. transition: none;
  136. }
  137. .panel-motion-enter-active,
  138. .panel-motion-appear-active,
  139. .panel-motion-leave-active {
  140. transition: all 0.3s;
  141. }
  142. .ant-drawer-mask-motion-enter-active,
  143. .ant-drawer-mask-motion-appear-active,
  144. .ant-drawer-mask-motion-leave-active {
  145. transition: all 0.3s;
  146. }
  147. .ant-drawer-mask-motion-enter,
  148. .ant-drawer-mask-motion-appear {
  149. opacity: 0;
  150. }
  151. .ant-drawer-mask-motion-enter-active,
  152. .ant-drawer-mask-motion-appear-active {
  153. opacity: 1;
  154. }
  155. .ant-drawer-mask-motion-leave {
  156. opacity: 1;
  157. }
  158. .ant-drawer-mask-motion-leave-active {
  159. opacity: 0;
  160. }
  161. .ant-drawer-panel-motion-left-enter-start,
  162. .ant-drawer-panel-motion-left-appear-start,
  163. .ant-drawer-panel-motion-left-leave-start {
  164. transition: none;
  165. }
  166. .ant-drawer-panel-motion-left-enter-active,
  167. .ant-drawer-panel-motion-left-appear-active,
  168. .ant-drawer-panel-motion-left-leave-active {
  169. transition: all 0.3s;
  170. }
  171. .ant-drawer-panel-motion-left-enter-start,
  172. .ant-drawer-panel-motion-left-appear-start {
  173. transform: translateX(-100%) !important;
  174. }
  175. .ant-drawer-panel-motion-left-enter-active,
  176. .ant-drawer-panel-motion-left-appear-active {
  177. transform: translateX(0);
  178. }
  179. .ant-drawer-panel-motion-left-leave {
  180. transform: translateX(0);
  181. }
  182. .ant-drawer-panel-motion-left-leave-active {
  183. transform: translateX(-100%);
  184. }
  185. .ant-drawer-panel-motion-right-enter-start,
  186. .ant-drawer-panel-motion-right-appear-start,
  187. .ant-drawer-panel-motion-right-leave-start {
  188. transition: none;
  189. }
  190. .ant-drawer-panel-motion-right-enter-active,
  191. .ant-drawer-panel-motion-right-appear-active,
  192. .ant-drawer-panel-motion-right-leave-active {
  193. transition: all 0.3s;
  194. }
  195. .ant-drawer-panel-motion-right-enter-start,
  196. .ant-drawer-panel-motion-right-appear-start {
  197. transform: translateX(100%) !important;
  198. }
  199. .ant-drawer-panel-motion-right-enter-active,
  200. .ant-drawer-panel-motion-right-appear-active {
  201. transform: translateX(0);
  202. }
  203. .ant-drawer-panel-motion-right-leave {
  204. transform: translateX(0);
  205. }
  206. .ant-drawer-panel-motion-right-leave-active {
  207. transform: translateX(100%);
  208. }
  209. .ant-drawer-panel-motion-top-enter-start,
  210. .ant-drawer-panel-motion-top-appear-start,
  211. .ant-drawer-panel-motion-top-leave-start {
  212. transition: none;
  213. }
  214. .ant-drawer-panel-motion-top-enter-active,
  215. .ant-drawer-panel-motion-top-appear-active,
  216. .ant-drawer-panel-motion-top-leave-active {
  217. transition: all 0.3s;
  218. }
  219. .ant-drawer-panel-motion-top-enter-start,
  220. .ant-drawer-panel-motion-top-appear-start {
  221. transform: translateY(-100%) !important;
  222. }
  223. .ant-drawer-panel-motion-top-enter-active,
  224. .ant-drawer-panel-motion-top-appear-active {
  225. transform: translateY(0);
  226. }
  227. .ant-drawer-panel-motion-top-leave {
  228. transform: translateY(0);
  229. }
  230. .ant-drawer-panel-motion-top-leave-active {
  231. transform: translateY(-100%);
  232. }
  233. .ant-drawer-panel-motion-bottom-enter-start,
  234. .ant-drawer-panel-motion-bottom-appear-start,
  235. .ant-drawer-panel-motion-bottom-leave-start {
  236. transition: none;
  237. }
  238. .ant-drawer-panel-motion-bottom-enter-active,
  239. .ant-drawer-panel-motion-bottom-appear-active,
  240. .ant-drawer-panel-motion-bottom-leave-active {
  241. transition: all 0.3s;
  242. }
  243. .ant-drawer-panel-motion-bottom-enter-start,
  244. .ant-drawer-panel-motion-bottom-appear-start {
  245. transform: translateY(100%) !important;
  246. }
  247. .ant-drawer-panel-motion-bottom-enter-active,
  248. .ant-drawer-panel-motion-bottom-appear-active {
  249. transform: translateY(0);
  250. }
  251. .ant-drawer-panel-motion-bottom-leave {
  252. transform: translateY(0);
  253. }
  254. .ant-drawer-panel-motion-bottom-leave-active {
  255. transform: translateY(100%);
  256. }
  257. .ant-drawer-rtl {
  258. direction: rtl;
  259. }
  260. .ant-drawer-rtl .ant-drawer-close {
  261. margin-right: 0;
  262. margin-left: 12px;
  263. }
  264. .ant-drawer:not(.ant-drawer-open) .ant-drawer-content-wrapper {
  265. box-shadow: none;
  266. }