modal.scss 1.6 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. display: inline-block;
  16. border-radius: 5px;
  17. z-index: 8001;
  18. background: #f5f6f8;
  19. box-shadow: 0 16px 24px 0 rgba(26,26,26,0.12), 0 2px 12px 0 rgba(26,26,26,0.10);
  20. .ui-drag-modal-dialog-header {
  21. position: relative;
  22. display: flex;
  23. align-items: center;
  24. .ui-drag-modal-dialog-title {
  25. flex: 1;
  26. cursor: all-scroll;
  27. user-select: none;
  28. padding: 15px 14px 2px;
  29. }
  30. .ui-drag-modal-dialog-close {
  31. display: flex;
  32. align-items: center;
  33. justify-content: flex-end;
  34. cursor: pointer;
  35. margin-right: 15px;
  36. font-size: 20px;
  37. transition: opacity 0.3s;
  38. &:hover {
  39. opacity: .6;
  40. }
  41. }
  42. }
  43. .ui-drag-modal-dialog-body {
  44. position: relative;
  45. height: calc(100% - 75px);
  46. margin: 14px;
  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. }