dialog.css 3.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117
  1. /*!
  2. * Angular Material Design
  3. * https://github.com/angular/material
  4. * @license MIT
  5. * v0.11.4
  6. */
  7. .md-dialog-is-showing {
  8. max-height: 100%; }
  9. .md-dialog-container {
  10. display: -webkit-flex;
  11. display: -ms-flexbox;
  12. display: flex;
  13. -webkit-justify-content: center;
  14. -ms-flex-pack: center;
  15. justify-content: center;
  16. -webkit-align-items: center;
  17. -ms-flex-align: center;
  18. align-items: center;
  19. position: absolute;
  20. top: 0;
  21. left: 0;
  22. width: 100%;
  23. height: 100%;
  24. z-index: 80;
  25. overflow: hidden; }
  26. md-dialog {
  27. opacity: 0;
  28. min-width: 240px;
  29. max-width: 80%;
  30. max-height: 80%;
  31. position: relative;
  32. overflow: auto;
  33. box-shadow: 0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 13px 19px 2px rgba(0, 0, 0, 0.14), 0px 5px 24px 4px rgba(0, 0, 0, 0.12);
  34. display: -webkit-flex;
  35. display: -ms-flexbox;
  36. display: flex;
  37. -webkit-flex-direction: column;
  38. -ms-flex-direction: column;
  39. flex-direction: column; }
  40. md-dialog.md-transition-in {
  41. opacity: 1;
  42. transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
  43. -webkit-transform: translate3d(0, 0, 0) scale(1);
  44. transform: translate3d(0, 0, 0) scale(1); }
  45. md-dialog.md-transition-out {
  46. opacity: 0;
  47. transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
  48. -webkit-transform: translate3d(0, 100%, 0) scale(0.2);
  49. transform: translate3d(0, 100%, 0) scale(0.2); }
  50. md-dialog > form {
  51. display: -webkit-flex;
  52. display: -ms-flexbox;
  53. display: flex;
  54. -webkit-flex-direction: column;
  55. -ms-flex-direction: column;
  56. flex-direction: column;
  57. overflow: auto; }
  58. md-dialog .md-dialog-content {
  59. padding: 24px; }
  60. md-dialog md-dialog-content {
  61. -webkit-order: 1;
  62. -ms-flex-order: 1;
  63. order: 1;
  64. -webkit-flex-direction: column;
  65. -ms-flex-direction: column;
  66. flex-direction: column;
  67. overflow: auto;
  68. -webkit-overflow-scrolling: touch; }
  69. md-dialog md-dialog-content:not([layout=row]) > *:first-child:not(.md-subheader) {
  70. margin-top: 0; }
  71. md-dialog md-dialog-content:focus {
  72. outline: none; }
  73. md-dialog md-dialog-content .md-subheader {
  74. margin: 0; }
  75. md-dialog md-dialog-content .md-subheader.sticky-clone {
  76. box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.16); }
  77. md-dialog md-dialog-content.sticky-container {
  78. padding: 0; }
  79. md-dialog md-dialog-content.sticky-container > div {
  80. padding: 24px;
  81. padding-top: 0; }
  82. md-dialog md-dialog-content .md-dialog-content-body {
  83. width: 100%; }
  84. md-dialog .md-actions {
  85. display: -webkit-flex;
  86. display: -ms-flexbox;
  87. display: flex;
  88. -webkit-order: 2;
  89. -ms-flex-order: 2;
  90. order: 2;
  91. box-sizing: border-box;
  92. -webkit-align-items: center;
  93. -ms-flex-align: center;
  94. align-items: center;
  95. -webkit-justify-content: flex-end;
  96. -ms-flex-pack: end;
  97. justify-content: flex-end;
  98. margin-bottom: 0;
  99. padding-right: 8px;
  100. padding-left: 16px;
  101. min-height: 52px;
  102. overflow: hidden; }
  103. md-dialog .md-actions .md-button {
  104. margin-bottom: 8px;
  105. margin-left: 8px;
  106. margin-right: 0;
  107. margin-top: 8px; }
  108. md-dialog.md-content-overflow .md-actions {
  109. border-top-width: 1px;
  110. border-top-style: solid; }
  111. @media screen and (-ms-high-contrast: active) {
  112. md-dialog {
  113. border: 1px solid #fff; } }