modal.less 2.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136
  1. @dialog-prefix-cls: ~'@{ant-prefix}-modal';
  2. .@{dialog-prefix-cls} {
  3. .reset-component();
  4. .modal-mask();
  5. position: relative;
  6. top: 100px;
  7. width: auto;
  8. max-width: calc(100vw - 32px);
  9. margin: 0 auto;
  10. padding-bottom: 24px;
  11. &-wrap {
  12. z-index: @zindex-modal;
  13. }
  14. &-title {
  15. margin: 0;
  16. color: @modal-heading-color;
  17. font-weight: 500;
  18. font-size: @modal-header-title-font-size;
  19. line-height: @modal-header-title-line-height;
  20. word-wrap: break-word;
  21. }
  22. &-content {
  23. position: relative;
  24. background-color: @modal-content-bg;
  25. background-clip: padding-box;
  26. border: 0;
  27. border-radius: @modal-border-radius;
  28. box-shadow: @shadow-2;
  29. pointer-events: auto;
  30. }
  31. &-close {
  32. position: absolute;
  33. top: 0;
  34. right: 0;
  35. z-index: @zindex-popup-close;
  36. padding: 0;
  37. color: @modal-close-color;
  38. font-weight: 700;
  39. line-height: 1;
  40. text-decoration: none;
  41. background: transparent;
  42. border: 0;
  43. outline: 0;
  44. cursor: pointer;
  45. transition: color 0.3s;
  46. &-x {
  47. display: block;
  48. width: @modal-header-close-size;
  49. height: @modal-header-close-size;
  50. font-size: @font-size-lg;
  51. font-style: normal;
  52. line-height: @modal-header-close-size;
  53. text-align: center;
  54. text-transform: none;
  55. text-rendering: auto;
  56. }
  57. &:focus,
  58. &:hover {
  59. color: @icon-color-hover;
  60. text-decoration: none;
  61. }
  62. }
  63. &-header {
  64. padding: @modal-header-padding;
  65. color: @text-color;
  66. background: @modal-header-bg;
  67. border-bottom: @modal-header-border-width @modal-header-border-style
  68. @modal-header-border-color-split;
  69. border-radius: @modal-border-radius @modal-border-radius 0 0;
  70. }
  71. &-body {
  72. padding: @modal-body-padding;
  73. font-size: @font-size-base;
  74. line-height: @line-height-base;
  75. word-wrap: break-word;
  76. }
  77. &-footer {
  78. padding: @modal-footer-padding-vertical @modal-footer-padding-horizontal;
  79. text-align: right;
  80. background: @modal-footer-bg;
  81. border-top: @modal-footer-border-width @modal-footer-border-style
  82. @modal-footer-border-color-split;
  83. border-radius: 0 0 @modal-border-radius @modal-border-radius;
  84. .@{ant-prefix}-btn + .@{ant-prefix}-btn:not(.@{ant-prefix}-dropdown-trigger) {
  85. margin-bottom: 0;
  86. margin-left: 8px;
  87. }
  88. }
  89. &-open {
  90. overflow: hidden;
  91. }
  92. }
  93. .@{dialog-prefix-cls}-centered {
  94. text-align: center;
  95. &::before {
  96. display: inline-block;
  97. width: 0;
  98. height: 100%;
  99. vertical-align: middle;
  100. content: '';
  101. }
  102. .@{dialog-prefix-cls} {
  103. top: 0;
  104. display: inline-block;
  105. padding-bottom: 0;
  106. text-align: left;
  107. vertical-align: middle;
  108. }
  109. }
  110. @media (max-width: @screen-sm-max) {
  111. .@{dialog-prefix-cls} {
  112. max-width: calc(100vw - 16px);
  113. margin: 8px auto;
  114. }
  115. .@{dialog-prefix-cls}-centered {
  116. .@{dialog-prefix-cls} {
  117. flex: 1;
  118. }
  119. }
  120. }