dialog.css 13 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652
  1. /* BEM support Func
  2. -------------------------- */
  3. /* Element Chalk Variables */
  4. /* Transition
  5. -------------------------- */
  6. /* Color
  7. -------------------------- */
  8. /* 53a8ff */
  9. /* 66b1ff */
  10. /* 79bbff */
  11. /* 8cc5ff */
  12. /* a0cfff */
  13. /* b3d8ff */
  14. /* c6e2ff */
  15. /* d9ecff */
  16. /* ecf5ff */
  17. /* Link
  18. -------------------------- */
  19. /* Border
  20. -------------------------- */
  21. /* Fill
  22. -------------------------- */
  23. /* Typography
  24. -------------------------- */
  25. /* Size
  26. -------------------------- */
  27. /* z-index
  28. -------------------------- */
  29. /* Disable base
  30. -------------------------- */
  31. /* Icon
  32. -------------------------- */
  33. /* Checkbox
  34. -------------------------- */
  35. /* Radio
  36. -------------------------- */
  37. /* Select
  38. -------------------------- */
  39. /* Alert
  40. -------------------------- */
  41. /* MessageBox
  42. -------------------------- */
  43. /* Message
  44. -------------------------- */
  45. /* Notification
  46. -------------------------- */
  47. /* Input
  48. -------------------------- */
  49. /* Cascader
  50. -------------------------- */
  51. /* Group
  52. -------------------------- */
  53. /* Tab
  54. -------------------------- */
  55. /* Button
  56. -------------------------- */
  57. /* cascader
  58. -------------------------- */
  59. /* Switch
  60. -------------------------- */
  61. /* Dialog
  62. -------------------------- */
  63. /* Table
  64. -------------------------- */
  65. /* Pagination
  66. -------------------------- */
  67. /* Popup
  68. -------------------------- */
  69. /* Popover
  70. -------------------------- */
  71. /* Tooltip
  72. -------------------------- */
  73. /* Tag
  74. -------------------------- */
  75. /* Tree
  76. -------------------------- */
  77. /* Dropdown
  78. -------------------------- */
  79. /* Badge
  80. -------------------------- */
  81. /* Card
  82. --------------------------*/
  83. /* Slider
  84. --------------------------*/
  85. /* Steps
  86. --------------------------*/
  87. /* Menu
  88. --------------------------*/
  89. /* Rate
  90. --------------------------*/
  91. /* DatePicker
  92. --------------------------*/
  93. /* Loading
  94. --------------------------*/
  95. /* Scrollbar
  96. --------------------------*/
  97. /* Carousel
  98. --------------------------*/
  99. /* Collapse
  100. --------------------------*/
  101. /* Transfer
  102. --------------------------*/
  103. /* Header
  104. --------------------------*/
  105. /* Footer
  106. --------------------------*/
  107. /* Main
  108. --------------------------*/
  109. /* Timeline
  110. --------------------------*/
  111. /* Backtop
  112. --------------------------*/
  113. /* Link
  114. --------------------------*/
  115. /* Calendar
  116. --------------------------*/
  117. /* Form
  118. -------------------------- */
  119. /* Avatar
  120. --------------------------*/
  121. /* Break-point
  122. --------------------------*/
  123. /* Break-points
  124. -------------------------- */
  125. /* Scrollbar
  126. -------------------------- */
  127. /* Placeholder
  128. -------------------------- */
  129. /* BEM
  130. -------------------------- */
  131. /* Element Chalk Variables */
  132. /* Transition
  133. -------------------------- */
  134. /* Color
  135. -------------------------- */
  136. /* 53a8ff */
  137. /* 66b1ff */
  138. /* 79bbff */
  139. /* 8cc5ff */
  140. /* a0cfff */
  141. /* b3d8ff */
  142. /* c6e2ff */
  143. /* d9ecff */
  144. /* ecf5ff */
  145. /* Link
  146. -------------------------- */
  147. /* Border
  148. -------------------------- */
  149. /* Fill
  150. -------------------------- */
  151. /* Typography
  152. -------------------------- */
  153. /* Size
  154. -------------------------- */
  155. /* z-index
  156. -------------------------- */
  157. /* Disable base
  158. -------------------------- */
  159. /* Icon
  160. -------------------------- */
  161. /* Checkbox
  162. -------------------------- */
  163. /* Radio
  164. -------------------------- */
  165. /* Select
  166. -------------------------- */
  167. /* Alert
  168. -------------------------- */
  169. /* MessageBox
  170. -------------------------- */
  171. /* Message
  172. -------------------------- */
  173. /* Notification
  174. -------------------------- */
  175. /* Input
  176. -------------------------- */
  177. /* Cascader
  178. -------------------------- */
  179. /* Group
  180. -------------------------- */
  181. /* Tab
  182. -------------------------- */
  183. /* Button
  184. -------------------------- */
  185. /* cascader
  186. -------------------------- */
  187. /* Switch
  188. -------------------------- */
  189. /* Dialog
  190. -------------------------- */
  191. /* Table
  192. -------------------------- */
  193. /* Pagination
  194. -------------------------- */
  195. /* Popup
  196. -------------------------- */
  197. /* Popover
  198. -------------------------- */
  199. /* Tooltip
  200. -------------------------- */
  201. /* Tag
  202. -------------------------- */
  203. /* Tree
  204. -------------------------- */
  205. /* Dropdown
  206. -------------------------- */
  207. /* Badge
  208. -------------------------- */
  209. /* Card
  210. --------------------------*/
  211. /* Slider
  212. --------------------------*/
  213. /* Steps
  214. --------------------------*/
  215. /* Menu
  216. --------------------------*/
  217. /* Rate
  218. --------------------------*/
  219. /* DatePicker
  220. --------------------------*/
  221. /* Loading
  222. --------------------------*/
  223. /* Scrollbar
  224. --------------------------*/
  225. /* Carousel
  226. --------------------------*/
  227. /* Collapse
  228. --------------------------*/
  229. /* Transfer
  230. --------------------------*/
  231. /* Header
  232. --------------------------*/
  233. /* Footer
  234. --------------------------*/
  235. /* Main
  236. --------------------------*/
  237. /* Timeline
  238. --------------------------*/
  239. /* Backtop
  240. --------------------------*/
  241. /* Link
  242. --------------------------*/
  243. /* Calendar
  244. --------------------------*/
  245. /* Form
  246. -------------------------- */
  247. /* Avatar
  248. --------------------------*/
  249. /* Break-point
  250. --------------------------*/
  251. /* Element Chalk Variables */
  252. /* Transition
  253. -------------------------- */
  254. /* Color
  255. -------------------------- */
  256. /* 53a8ff */
  257. /* 66b1ff */
  258. /* 79bbff */
  259. /* 8cc5ff */
  260. /* a0cfff */
  261. /* b3d8ff */
  262. /* c6e2ff */
  263. /* d9ecff */
  264. /* ecf5ff */
  265. /* Link
  266. -------------------------- */
  267. /* Border
  268. -------------------------- */
  269. /* Fill
  270. -------------------------- */
  271. /* Typography
  272. -------------------------- */
  273. /* Size
  274. -------------------------- */
  275. /* z-index
  276. -------------------------- */
  277. /* Disable base
  278. -------------------------- */
  279. /* Icon
  280. -------------------------- */
  281. /* Checkbox
  282. -------------------------- */
  283. /* Radio
  284. -------------------------- */
  285. /* Select
  286. -------------------------- */
  287. /* Alert
  288. -------------------------- */
  289. /* MessageBox
  290. -------------------------- */
  291. /* Message
  292. -------------------------- */
  293. /* Notification
  294. -------------------------- */
  295. /* Input
  296. -------------------------- */
  297. /* Cascader
  298. -------------------------- */
  299. /* Group
  300. -------------------------- */
  301. /* Tab
  302. -------------------------- */
  303. /* Button
  304. -------------------------- */
  305. /* cascader
  306. -------------------------- */
  307. /* Switch
  308. -------------------------- */
  309. /* Dialog
  310. -------------------------- */
  311. /* Table
  312. -------------------------- */
  313. /* Pagination
  314. -------------------------- */
  315. /* Popup
  316. -------------------------- */
  317. /* Popover
  318. -------------------------- */
  319. /* Tooltip
  320. -------------------------- */
  321. /* Tag
  322. -------------------------- */
  323. /* Tree
  324. -------------------------- */
  325. /* Dropdown
  326. -------------------------- */
  327. /* Badge
  328. -------------------------- */
  329. /* Card
  330. --------------------------*/
  331. /* Slider
  332. --------------------------*/
  333. /* Steps
  334. --------------------------*/
  335. /* Menu
  336. --------------------------*/
  337. /* Rate
  338. --------------------------*/
  339. /* DatePicker
  340. --------------------------*/
  341. /* Loading
  342. --------------------------*/
  343. /* Scrollbar
  344. --------------------------*/
  345. /* Carousel
  346. --------------------------*/
  347. /* Collapse
  348. --------------------------*/
  349. /* Transfer
  350. --------------------------*/
  351. /* Header
  352. --------------------------*/
  353. /* Footer
  354. --------------------------*/
  355. /* Main
  356. --------------------------*/
  357. /* Timeline
  358. --------------------------*/
  359. /* Backtop
  360. --------------------------*/
  361. /* Link
  362. --------------------------*/
  363. /* Calendar
  364. --------------------------*/
  365. /* Form
  366. -------------------------- */
  367. /* Avatar
  368. --------------------------*/
  369. /* Break-point
  370. --------------------------*/
  371. /* BEM support Func
  372. -------------------------- */
  373. /* Element Chalk Variables */
  374. /* Transition
  375. -------------------------- */
  376. /* Color
  377. -------------------------- */
  378. /* 53a8ff */
  379. /* 66b1ff */
  380. /* 79bbff */
  381. /* 8cc5ff */
  382. /* a0cfff */
  383. /* b3d8ff */
  384. /* c6e2ff */
  385. /* d9ecff */
  386. /* ecf5ff */
  387. /* Link
  388. -------------------------- */
  389. /* Border
  390. -------------------------- */
  391. /* Fill
  392. -------------------------- */
  393. /* Typography
  394. -------------------------- */
  395. /* Size
  396. -------------------------- */
  397. /* z-index
  398. -------------------------- */
  399. /* Disable base
  400. -------------------------- */
  401. /* Icon
  402. -------------------------- */
  403. /* Checkbox
  404. -------------------------- */
  405. /* Radio
  406. -------------------------- */
  407. /* Select
  408. -------------------------- */
  409. /* Alert
  410. -------------------------- */
  411. /* MessageBox
  412. -------------------------- */
  413. /* Message
  414. -------------------------- */
  415. /* Notification
  416. -------------------------- */
  417. /* Input
  418. -------------------------- */
  419. /* Cascader
  420. -------------------------- */
  421. /* Group
  422. -------------------------- */
  423. /* Tab
  424. -------------------------- */
  425. /* Button
  426. -------------------------- */
  427. /* cascader
  428. -------------------------- */
  429. /* Switch
  430. -------------------------- */
  431. /* Dialog
  432. -------------------------- */
  433. /* Table
  434. -------------------------- */
  435. /* Pagination
  436. -------------------------- */
  437. /* Popup
  438. -------------------------- */
  439. /* Popover
  440. -------------------------- */
  441. /* Tooltip
  442. -------------------------- */
  443. /* Tag
  444. -------------------------- */
  445. /* Tree
  446. -------------------------- */
  447. /* Dropdown
  448. -------------------------- */
  449. /* Badge
  450. -------------------------- */
  451. /* Card
  452. --------------------------*/
  453. /* Slider
  454. --------------------------*/
  455. /* Steps
  456. --------------------------*/
  457. /* Menu
  458. --------------------------*/
  459. /* Rate
  460. --------------------------*/
  461. /* DatePicker
  462. --------------------------*/
  463. /* Loading
  464. --------------------------*/
  465. /* Scrollbar
  466. --------------------------*/
  467. /* Carousel
  468. --------------------------*/
  469. /* Collapse
  470. --------------------------*/
  471. /* Transfer
  472. --------------------------*/
  473. /* Header
  474. --------------------------*/
  475. /* Footer
  476. --------------------------*/
  477. /* Main
  478. --------------------------*/
  479. /* Timeline
  480. --------------------------*/
  481. /* Backtop
  482. --------------------------*/
  483. /* Link
  484. --------------------------*/
  485. /* Calendar
  486. --------------------------*/
  487. /* Form
  488. -------------------------- */
  489. /* Avatar
  490. --------------------------*/
  491. /* Break-point
  492. --------------------------*/
  493. /* Break-points
  494. -------------------------- */
  495. /* Scrollbar
  496. -------------------------- */
  497. /* Placeholder
  498. -------------------------- */
  499. /* BEM
  500. -------------------------- */
  501. .v-modal-enter {
  502. -webkit-animation: v-modal-in .2s ease;
  503. animation: v-modal-in .2s ease; }
  504. .v-modal-leave {
  505. -webkit-animation: v-modal-out .2s ease forwards;
  506. animation: v-modal-out .2s ease forwards; }
  507. @-webkit-keyframes v-modal-in {
  508. 0% {
  509. opacity: 0; }
  510. 100% { } }
  511. @keyframes v-modal-in {
  512. 0% {
  513. opacity: 0; }
  514. 100% { } }
  515. @-webkit-keyframes v-modal-out {
  516. 0% { }
  517. 100% {
  518. opacity: 0; } }
  519. @keyframes v-modal-out {
  520. 0% { }
  521. 100% {
  522. opacity: 0; } }
  523. .v-modal {
  524. position: fixed;
  525. left: 0;
  526. top: 0;
  527. width: 100%;
  528. height: 100%;
  529. opacity: 0.5;
  530. background: #000000; }
  531. .el-popup-parent--hidden {
  532. overflow: hidden; }
  533. .el-dialog {
  534. position: relative;
  535. margin: 0 auto 50px;
  536. background: #FFFFFF;
  537. border-radius: 2px;
  538. -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
  539. box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
  540. -webkit-box-sizing: border-box;
  541. box-sizing: border-box;
  542. width: 50%; }
  543. .el-dialog.is-fullscreen {
  544. width: 100%;
  545. margin-top: 0;
  546. margin-bottom: 0;
  547. height: 100%;
  548. overflow: auto; }
  549. .el-dialog__wrapper {
  550. position: fixed;
  551. top: 0;
  552. right: 0;
  553. bottom: 0;
  554. left: 0;
  555. overflow: auto;
  556. margin: 0; }
  557. .el-dialog__header {
  558. padding: 10px;
  559. background: #2D74E7;
  560. padding-bottom: 10px; }
  561. .el-dialog__headerbtn {
  562. position: absolute;
  563. top: 14px;
  564. right: 14px;
  565. padding: 0;
  566. background: transparent;
  567. border: none;
  568. outline: none;
  569. cursor: pointer;
  570. font-size: 16px; }
  571. .el-dialog__headerbtn .el-dialog__close {
  572. color: #fff; }
  573. .el-dialog__headerbtn:focus .el-dialog__close, .el-dialog__headerbtn:hover .el-dialog__close {
  574. color: #fff; }
  575. .el-dialog__title {
  576. line-height: 24px;
  577. font-size: 18px;
  578. color: #fff; }
  579. .el-dialog__body {
  580. padding: 30px 20px;
  581. color: #606266;
  582. font-size: 14px;
  583. word-break: break-all; }
  584. .el-dialog__footer {
  585. padding: 20px;
  586. padding-top: 10px;
  587. text-align: right;
  588. -webkit-box-sizing: border-box;
  589. box-sizing: border-box; }
  590. .el-dialog--center {
  591. text-align: center; }
  592. .el-dialog--center .el-dialog__body {
  593. text-align: initial;
  594. padding: 25px 25px 30px; }
  595. .el-dialog--center .el-dialog__footer {
  596. text-align: inherit; }
  597. .dialog-fade-enter-active {
  598. -webkit-animation: dialog-fade-in .3s;
  599. animation: dialog-fade-in .3s; }
  600. .dialog-fade-leave-active {
  601. -webkit-animation: dialog-fade-out .3s;
  602. animation: dialog-fade-out .3s; }
  603. @-webkit-keyframes dialog-fade-in {
  604. 0% {
  605. -webkit-transform: translate3d(0, -20px, 0);
  606. transform: translate3d(0, -20px, 0);
  607. opacity: 0; }
  608. 100% {
  609. -webkit-transform: translate3d(0, 0, 0);
  610. transform: translate3d(0, 0, 0);
  611. opacity: 1; } }
  612. @keyframes dialog-fade-in {
  613. 0% {
  614. -webkit-transform: translate3d(0, -20px, 0);
  615. transform: translate3d(0, -20px, 0);
  616. opacity: 0; }
  617. 100% {
  618. -webkit-transform: translate3d(0, 0, 0);
  619. transform: translate3d(0, 0, 0);
  620. opacity: 1; } }
  621. @-webkit-keyframes dialog-fade-out {
  622. 0% {
  623. -webkit-transform: translate3d(0, 0, 0);
  624. transform: translate3d(0, 0, 0);
  625. opacity: 1; }
  626. 100% {
  627. -webkit-transform: translate3d(0, -20px, 0);
  628. transform: translate3d(0, -20px, 0);
  629. opacity: 0; } }
  630. @keyframes dialog-fade-out {
  631. 0% {
  632. -webkit-transform: translate3d(0, 0, 0);
  633. transform: translate3d(0, 0, 0);
  634. opacity: 1; }
  635. 100% {
  636. -webkit-transform: translate3d(0, -20px, 0);
  637. transform: translate3d(0, -20px, 0);
  638. opacity: 0; } }