You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

183 lines
3.5 KiB

  1. /*
  2. * # Semantic - Modal
  3. * http://github.com/jlukic/semantic-ui/
  4. *
  5. *
  6. * Copyright 2013 Contributors
  7. * Released under the MIT license
  8. * http://opensource.org/licenses/MIT
  9. *
  10. */
  11. /*******************************
  12. Modal
  13. *******************************/
  14. .ui.modal {
  15. display: none;
  16. position: fixed;
  17. z-index: 1001;
  18. top: 50%;
  19. right: 50%;
  20. text-align: right;
  21. width: 90%;
  22. margin-right: -45%;
  23. background-color: #FFFFFF;
  24. border: 1px solid #DDDDDD;
  25. -webkit-border-radius: 5px;
  26. -moz-border-radius: 5px;
  27. border-radius: 5px;
  28. }
  29. /*******************************
  30. Content
  31. *******************************/
  32. /*--------------
  33. Close
  34. ---------------*/
  35. .ui.modal > .close {
  36. cursor: pointer;
  37. position: absolute;
  38. opacity: 0.8;
  39. font-size: 1.25em;
  40. top: -1.75em;
  41. left: -1.75em;
  42. color: #FFFFFF;
  43. }
  44. .ui.modal > .close:hover {
  45. opacity: 1;
  46. }
  47. /*--------------
  48. Header
  49. ---------------*/
  50. .ui.modal > .header {
  51. margin: 0em;
  52. padding: 1.5rem 2rem;
  53. font-size: 1.6em;
  54. font-weight: bold;
  55. -webkit-border-radius: 0.325em 0.325em 0px 0px;
  56. -moz-border-radius: 0.325em 0.325em 0px 0px;
  57. border-radius: 0.325em 0.325em 0px 0px;
  58. }
  59. /*--------------
  60. Content
  61. ---------------*/
  62. .ui.modal > .content {
  63. display: table;
  64. width: 100%;
  65. position: relative;
  66. padding: 2em;
  67. background-color: #F4F4F4;
  68. -webkit-box-sizing: border-box;
  69. -moz-box-sizing: border-box;
  70. -ms-box-sizing: border-box;
  71. box-sizing: border-box;
  72. }
  73. .ui.modal > .content > .left {
  74. display: table-cell;
  75. padding-left: 5%;
  76. min-width: 25%;
  77. }
  78. .ui.modal > .content > .right {
  79. display: table-cell;
  80. padding-right: 5%;
  81. vertical-align: top;
  82. min-width: 25%;
  83. }
  84. .ui.modal > .content > .left > .icon {
  85. font-size: 8em;
  86. margin: 0em;
  87. }
  88. .ui.modal > .content p {
  89. line-height: 1.6;
  90. }
  91. /*--------------
  92. Actions
  93. ---------------*/
  94. .ui.modal .actions {
  95. padding: 1rem 2rem;
  96. text-align: left;
  97. }
  98. .ui.modal .actions > .button {
  99. margin-right: 0.75em;
  100. }
  101. /*-------------------
  102. Sizing
  103. --------------------*/
  104. /* Mobile Only */
  105. @media only screen and (max-width: 768px) {
  106. .ui.modal .content .left {
  107. display: block;
  108. padding: 0em 1em 0em 0em;
  109. }
  110. .ui.modal .content .right {
  111. display: block;
  112. padding: 1em 0em 0em 0em;
  113. -webkit-box-shadow: none;
  114. -moz-box-shadow: none;
  115. box-shadow: none;
  116. }
  117. }
  118. /* Tablet and Mobile */
  119. @media only screen and (max-width: 998px) {
  120. .ui.modal {
  121. width: 92%;
  122. margin-right: -46%;
  123. }
  124. .ui.modal > .close {
  125. color: rgba(0, 0, 0, 0.8);
  126. top: 1.5rem;
  127. left: 1rem;
  128. }
  129. }
  130. /* Computer / Responsive */
  131. @media only screen and (min-width: 998px) {
  132. .ui.modal {
  133. width: 74%;
  134. margin-right: -37%;
  135. }
  136. }
  137. @media only screen and (min-width: 1500px) {
  138. .ui.modal {
  139. width: 64%;
  140. margin-right: -32%;
  141. }
  142. }
  143. @media only screen and (min-width: 1750px) {
  144. .ui.modal {
  145. width: 54%;
  146. margin-right: -27%;
  147. }
  148. }
  149. @media only screen and (min-width: 2000px) {
  150. .ui.modal {
  151. width: 44%;
  152. margin-right: -22%;
  153. }
  154. }
  155. /*******************************
  156. Types
  157. *******************************/
  158. .ui.basic.modal {
  159. background-color: transparent;
  160. border: none;
  161. color: #FFFFFF;
  162. }
  163. .ui.basic.modal > .close {
  164. top: 1.5rem;
  165. left: 1rem;
  166. }
  167. .ui.basic.modal .content {
  168. background-color: transparent;
  169. }
  170. /*******************************
  171. Variations
  172. *******************************/
  173. /* A modal that cannot fit on the page */
  174. .ui.modal.scrolling {
  175. position: absolute;
  176. margin-top: 10px;
  177. }
  178. /*******************************
  179. States
  180. *******************************/
  181. .ui.active.modal {
  182. display: block;
  183. }