Guest User

Untitled

a guest
Jun 20th, 2018
75
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 3.04 KB | None | 0 0
  1. /**************************\
  2. Basic Modal Styles
  3. \**************************/
  4.  
  5. .modal {
  6. z-index: 100;
  7. font-family: -apple-system,BlinkMacSystemFont,avenir next,avenir,helvetica neue,helvetica,ubuntu,roboto,noto,segoe ui,arial,sans-serif;
  8. }
  9.  
  10. .modal__overlay {
  11. z-index: 100;
  12. position: fixed;
  13. top: 0;
  14. left: 0;
  15. right: 0;
  16. bottom: 0;
  17. background: rgba(0,0,0,0.6);
  18. display: flex;
  19. justify-content: center;
  20. align-items: center;
  21. }
  22.  
  23. .modal__container {
  24. background-color: #fff;
  25. padding: 30px;
  26. max-width: 500px;
  27. max-height: 100vh;
  28. border-radius: 4px;
  29. overflow-y: auto;
  30. box-sizing: border-box;
  31. }
  32.  
  33. .modal__header {
  34. display: flex;
  35. justify-content: space-between;
  36. align-items: center;
  37. }
  38.  
  39. .modal__title {
  40. margin-top: 0;
  41. margin-bottom: 0;
  42. font-weight: 600;
  43. font-size: 1.25rem;
  44. line-height: 1.25;
  45. color: #00449e;
  46. box-sizing: border-box;
  47. }
  48.  
  49. .modal__close {
  50. background: transparent;
  51. border: 0;
  52. }
  53.  
  54. .modal__header .modal__close:before { content: "\2715"; }
  55.  
  56. .modal__content {
  57. margin-top: 2rem;
  58. margin-bottom: 2rem;
  59. line-height: 1.5;
  60. color: rgba(0,0,0,.8);
  61. }
  62.  
  63. .modal__btn {
  64. font-size: .875rem;
  65. padding-left: 1rem;
  66. padding-right: 1rem;
  67. padding-top: .5rem;
  68. padding-bottom: .5rem;
  69. background-color: #e6e6e6;
  70. color: rgba(0,0,0,.8);
  71. border-radius: .25rem;
  72. border-style: none;
  73. border-width: 0;
  74. cursor: pointer;
  75. -webkit-appearance: button;
  76. text-transform: none;
  77. overflow: visible;
  78. line-height: 1.15;
  79. margin: 0;
  80. will-change: transform;
  81. -moz-osx-font-smoothing: grayscale;
  82. -webkit-backface-visibility: hidden;
  83. backface-visibility: hidden;
  84. -webkit-transform: translateZ(0);
  85. transform: translateZ(0);
  86. transition: -webkit-transform .25s ease-out;
  87. transition: transform .25s ease-out;
  88. transition: transform .25s ease-out,-webkit-transform .25s ease-out;
  89. }
  90.  
  91. .modal__btn:focus, .modal__btn:hover {
  92. -webkit-transform: scale(1.05);
  93. transform: scale(1.05);
  94. }
  95.  
  96. .modal__btn-primary {
  97. background-color: #00449e;
  98. color: #fff;
  99. }
  100.  
  101.  
  102.  
  103. /**************************\
  104. Demo Animation Style
  105. \**************************/
  106. @keyframes mmfadeIn {
  107. from { opacity: 0; }
  108. to { opacity: 1; }
  109. }
  110.  
  111. @keyframes mmfadeOut {
  112. from { opacity: 1; }
  113. to { opacity: 0; }
  114. }
  115.  
  116. @keyframes mmslideIn {
  117. from { transform: translateY(15%); }
  118. to { transform: translateY(0); }
  119. }
  120.  
  121. @keyframes mmslideOut {
  122. from { transform: translateY(0); }
  123. to { transform: translateY(-10%); }
  124. }
  125.  
  126. .micromodal-slide {
  127. display: none;
  128. }
  129.  
  130. .micromodal-slide.is-open {
  131. display: block;
  132. }
  133.  
  134. .micromodal-slide[aria-hidden="false"] .modal__overlay {
  135. animation: mmfadeIn .3s cubic-bezier(0.0, 0.0, 0.2, 1);
  136. }
  137.  
  138. .micromodal-slide[aria-hidden="false"] .modal__container {
  139. animation: mmslideIn .3s cubic-bezier(0, 0, .2, 1);
  140. }
  141.  
  142. .micromodal-slide[aria-hidden="true"] .modal__overlay {
  143. animation: mmfadeOut .3s cubic-bezier(0.0, 0.0, 0.2, 1);
  144. }
  145.  
  146. .micromodal-slide[aria-hidden="true"] .modal__container {
  147. animation: mmslideOut .3s cubic-bezier(0, 0, .2, 1);
  148. }
  149.  
  150. .micromodal-slide .modal__container,
  151. .micromodal-slide .modal__overlay {
  152. will-change: transform;
  153. }
Add Comment
Please, Sign In to add comment