dialog.css 7.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381
  1. /* BEM support Func
  2. -------------------------- */
  3. /* Element Chalk Variables */
  4. /* Transition
  5. -------------------------- */
  6. /* Colors
  7. -------------------------- */
  8. /* 53a8ff */
  9. /* 66b1ff */
  10. /* 79bbff */
  11. /* 8cc5ff */
  12. /* a0cfff */
  13. /* b3d8ff */
  14. /* c6e2ff */
  15. /* d9ecff */
  16. /* ecf5ff */
  17. /* Link
  18. -------------------------- */
  19. /* Background
  20. -------------------------- */
  21. /* Border
  22. -------------------------- */
  23. /* Box-shadow
  24. -------------------------- */
  25. /* Fill
  26. -------------------------- */
  27. /* Font
  28. -------------------------- */
  29. /* Size
  30. -------------------------- */
  31. /* z-index
  32. -------------------------- */
  33. /* Disable base
  34. -------------------------- */
  35. /* Icon
  36. -------------------------- */
  37. /* Checkbox
  38. -------------------------- */
  39. /* Radio
  40. -------------------------- */
  41. /* Select
  42. -------------------------- */
  43. /* Alert
  44. -------------------------- */
  45. /* Message Box
  46. -------------------------- */
  47. /* Message
  48. -------------------------- */
  49. /* Notification
  50. -------------------------- */
  51. /* Input
  52. -------------------------- */
  53. /* Cascader
  54. -------------------------- */
  55. /* Group
  56. -------------------------- */
  57. /* Tab
  58. -------------------------- */
  59. /* Button
  60. -------------------------- */
  61. /* cascader
  62. -------------------------- */
  63. /* Switch
  64. -------------------------- */
  65. /* Dialog
  66. -------------------------- */
  67. /* Table
  68. -------------------------- */
  69. /* Pagination
  70. -------------------------- */
  71. /* Popover
  72. -------------------------- */
  73. /* Tooltip
  74. -------------------------- */
  75. /* Tag
  76. -------------------------- */
  77. /* Tree
  78. -------------------------- */
  79. /* Dropdown
  80. -------------------------- */
  81. /* Badge
  82. -------------------------- */
  83. /* Card
  84. --------------------------*/
  85. /* Slider
  86. --------------------------*/
  87. /* Steps
  88. --------------------------*/
  89. /* MenuSlide
  90. --------------------------*/
  91. /* Rate
  92. --------------------------*/
  93. /* DatePicker
  94. --------------------------*/
  95. /* Loading
  96. --------------------------*/
  97. /* Scrollbar
  98. --------------------------*/
  99. /* Carousel
  100. --------------------------*/
  101. /* Collapse
  102. --------------------------*/
  103. /* Transfer
  104. --------------------------*/
  105. /* Header
  106. --------------------------*/
  107. /* Footer
  108. --------------------------*/
  109. /* Main
  110. --------------------------*/
  111. /* Break-point
  112. --------------------------*/
  113. /* Break-points
  114. -------------------------- */
  115. /* Scrollbar
  116. -------------------------- */
  117. /* Placeholder
  118. -------------------------- */
  119. /* BEM
  120. -------------------------- */
  121. /* Element Chalk Variables */
  122. /* Transition
  123. -------------------------- */
  124. /* Colors
  125. -------------------------- */
  126. /* 53a8ff */
  127. /* 66b1ff */
  128. /* 79bbff */
  129. /* 8cc5ff */
  130. /* a0cfff */
  131. /* b3d8ff */
  132. /* c6e2ff */
  133. /* d9ecff */
  134. /* ecf5ff */
  135. /* Link
  136. -------------------------- */
  137. /* Background
  138. -------------------------- */
  139. /* Border
  140. -------------------------- */
  141. /* Box-shadow
  142. -------------------------- */
  143. /* Fill
  144. -------------------------- */
  145. /* Font
  146. -------------------------- */
  147. /* Size
  148. -------------------------- */
  149. /* z-index
  150. -------------------------- */
  151. /* Disable base
  152. -------------------------- */
  153. /* Icon
  154. -------------------------- */
  155. /* Checkbox
  156. -------------------------- */
  157. /* Radio
  158. -------------------------- */
  159. /* Select
  160. -------------------------- */
  161. /* Alert
  162. -------------------------- */
  163. /* Message Box
  164. -------------------------- */
  165. /* Message
  166. -------------------------- */
  167. /* Notification
  168. -------------------------- */
  169. /* Input
  170. -------------------------- */
  171. /* Cascader
  172. -------------------------- */
  173. /* Group
  174. -------------------------- */
  175. /* Tab
  176. -------------------------- */
  177. /* Button
  178. -------------------------- */
  179. /* cascader
  180. -------------------------- */
  181. /* Switch
  182. -------------------------- */
  183. /* Dialog
  184. -------------------------- */
  185. /* Table
  186. -------------------------- */
  187. /* Pagination
  188. -------------------------- */
  189. /* Popover
  190. -------------------------- */
  191. /* Tooltip
  192. -------------------------- */
  193. /* Tag
  194. -------------------------- */
  195. /* Tree
  196. -------------------------- */
  197. /* Dropdown
  198. -------------------------- */
  199. /* Badge
  200. -------------------------- */
  201. /* Card
  202. --------------------------*/
  203. /* Slider
  204. --------------------------*/
  205. /* Steps
  206. --------------------------*/
  207. /* MenuSlide
  208. --------------------------*/
  209. /* Rate
  210. --------------------------*/
  211. /* DatePicker
  212. --------------------------*/
  213. /* Loading
  214. --------------------------*/
  215. /* Scrollbar
  216. --------------------------*/
  217. /* Carousel
  218. --------------------------*/
  219. /* Collapse
  220. --------------------------*/
  221. /* Transfer
  222. --------------------------*/
  223. /* Header
  224. --------------------------*/
  225. /* Footer
  226. --------------------------*/
  227. /* Main
  228. --------------------------*/
  229. /* Break-point
  230. --------------------------*/
  231. .v-modal-enter {
  232. -webkit-animation: v-modal-in .2s ease;
  233. animation: v-modal-in .2s ease; }
  234. .v-modal-leave {
  235. -webkit-animation: v-modal-out .2s ease forwards;
  236. animation: v-modal-out .2s ease forwards; }
  237. @-webkit-keyframes v-modal-in {
  238. 0% {
  239. opacity: 0; }
  240. 100% { } }
  241. @keyframes v-modal-in {
  242. 0% {
  243. opacity: 0; }
  244. 100% { } }
  245. @-webkit-keyframes v-modal-out {
  246. 0% { }
  247. 100% {
  248. opacity: 0; } }
  249. @keyframes v-modal-out {
  250. 0% { }
  251. 100% {
  252. opacity: 0; } }
  253. .v-modal {
  254. position: fixed;
  255. left: 0;
  256. top: 0;
  257. width: 100%;
  258. height: 100%;
  259. opacity: 0.5;
  260. background: #000; }
  261. .el-dialog {
  262. position: relative;
  263. margin: 0 auto 50px;
  264. background: #fff;
  265. border-radius: 2px;
  266. -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
  267. box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
  268. -webkit-box-sizing: border-box;
  269. box-sizing: border-box;
  270. width: 50%; }
  271. .el-dialog.is-fullscreen {
  272. width: 100%;
  273. margin-top: 0;
  274. margin-bottom: 0;
  275. height: 100%;
  276. overflow: auto; }
  277. .el-dialog__wrapper {
  278. position: fixed;
  279. top: 0;
  280. right: 0;
  281. bottom: 0;
  282. left: 0;
  283. overflow: auto;
  284. margin: 0; }
  285. .el-dialog__header {
  286. padding: 15px;
  287. padding-bottom: 10px; }
  288. .el-dialog__headerbtn {
  289. position: absolute;
  290. top: 15px;
  291. right: 15px;
  292. padding: 0;
  293. background: transparent;
  294. border: none;
  295. outline: none;
  296. cursor: pointer;
  297. font-size: 16px; }
  298. .el-dialog__headerbtn .el-dialog__close {
  299. color: #777; }
  300. .el-dialog__headerbtn:focus .el-dialog__close, .el-dialog__headerbtn:hover .el-dialog__close {
  301. color: #1b1e24; }
  302. .el-dialog__title {
  303. line-height: 24px;
  304. font-size: 18px;
  305. color: #8b91a0; }
  306. .el-dialog__body {
  307. padding: 30px 20px;
  308. color: #5a5e66;
  309. line-height: 24px;
  310. font-size: 14px; }
  311. .el-dialog__footer {
  312. padding: 15px;
  313. padding-top: 10px;
  314. text-align: right;
  315. -webkit-box-sizing: border-box;
  316. box-sizing: border-box; }
  317. .el-dialog--center {
  318. text-align: center; }
  319. .el-dialog--center .el-dialog__header {
  320. padding-top: 30px; }
  321. .el-dialog--center .el-dialog__body {
  322. text-align: initial;
  323. padding: 25px 27px 30px; }
  324. .el-dialog--center .el-dialog__footer {
  325. text-align: inherit;
  326. padding-bottom: 30px; }
  327. .dialog-fade-enter-active {
  328. -webkit-animation: dialog-fade-in .3s;
  329. animation: dialog-fade-in .3s; }
  330. .dialog-fade-leave-active {
  331. -webkit-animation: dialog-fade-out .3s;
  332. animation: dialog-fade-out .3s; }
  333. @-webkit-keyframes dialog-fade-in {
  334. 0% {
  335. -webkit-transform: translate3d(0, -20px, 0);
  336. transform: translate3d(0, -20px, 0);
  337. opacity: 0; }
  338. 100% {
  339. -webkit-transform: translate3d(0, 0, 0);
  340. transform: translate3d(0, 0, 0);
  341. opacity: 1; } }
  342. @keyframes dialog-fade-in {
  343. 0% {
  344. -webkit-transform: translate3d(0, -20px, 0);
  345. transform: translate3d(0, -20px, 0);
  346. opacity: 0; }
  347. 100% {
  348. -webkit-transform: translate3d(0, 0, 0);
  349. transform: translate3d(0, 0, 0);
  350. opacity: 1; } }
  351. @-webkit-keyframes dialog-fade-out {
  352. 0% {
  353. -webkit-transform: translate3d(0, 0, 0);
  354. transform: translate3d(0, 0, 0);
  355. opacity: 1; }
  356. 100% {
  357. -webkit-transform: translate3d(0, -20px, 0);
  358. transform: translate3d(0, -20px, 0);
  359. opacity: 0; } }
  360. @keyframes dialog-fade-out {
  361. 0% {
  362. -webkit-transform: translate3d(0, 0, 0);
  363. transform: translate3d(0, 0, 0);
  364. opacity: 1; }
  365. 100% {
  366. -webkit-transform: translate3d(0, -20px, 0);
  367. transform: translate3d(0, -20px, 0);
  368. opacity: 0; } }