modal.scss 1.5 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061
  1. .ui-drag-modal-box-hide {
  2. display: none;
  3. }
  4. .ui-drag-modal-box {
  5. position: fixed;
  6. top: 0;
  7. left: 0;
  8. opacity: 0;
  9. z-index: -1024;
  10. transition: opacity 0.3s, z-index 0.3s;
  11. .ui-drag-modal-dialog {
  12. position: relative;
  13. min-width: 340px;
  14. min-height: 380px;
  15. background-color: #ffffff;
  16. display: inline-block;
  17. border-radius: 5px;
  18. z-index: 8001;
  19. .ui-drag-modal-dialog-header {
  20. position: relative;
  21. display: flex;
  22. align-items: center;
  23. .ui-drag-modal-dialog-title {
  24. flex: 1;
  25. padding: 15px 20px;
  26. cursor: all-scroll;
  27. user-select: none;
  28. }
  29. .ui-drag-modal-dialog-close {
  30. display: flex;
  31. align-items: center;
  32. justify-content: flex-end;
  33. cursor: pointer;
  34. margin-right: 15px;
  35. transition: opacity 0.3s;
  36. i {
  37. font-size: 20px;
  38. }
  39. &:hover {
  40. opacity: .6;
  41. }
  42. }
  43. }
  44. .ui-drag-modal-dialog-body {
  45. position: relative;
  46. height: calc(100% - 58px);
  47. }
  48. .ui-drag-modal-resize {
  49. position: absolute;
  50. width: 15px;
  51. height: 15px;
  52. right: 0;
  53. bottom: 0;
  54. cursor: se-resize;
  55. }
  56. }
  57. &.ui-drag-modal-show {
  58. opacity: 1;
  59. z-index: 8000;
  60. }
  61. }