dialog.css 14 KB

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