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.

220 lines
4.4 KiB

  1. /*
  2. * # Semantic - Popup
  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. Popup
  13. *******************************/
  14. .ui.popup {
  15. display: none;
  16. position: absolute;
  17. top: 0px;
  18. left: 0px;
  19. z-index: 900;
  20. border: 1px solid #DCDDDE;
  21. max-width: 250px;
  22. background-color: #FFFFFF;
  23. padding: 0.8em 1.2em;
  24. font-size: 0.875rem;
  25. font-weight: normal;
  26. font-style: normal;
  27. color: rgba(0, 0, 0, 0.7);
  28. -webkit-border-radius: 0.2em;
  29. -moz-border-radius: 0.2em;
  30. border-radius: 0.2em;
  31. -webkit-box-shadow: 0px 1px 1px #DCDDDE;
  32. -moz-box-shadow: 0px 1px 1px #DCDDDE;
  33. box-shadow: 0px 1px 1px #DCDDDE;
  34. }
  35. .ui.popup .header {
  36. padding: 0em 0em 0.5em;
  37. font-size: 1.125em;
  38. line-height: 1.2;
  39. font-weight: bold;
  40. }
  41. .ui.popup:before {
  42. position: absolute;
  43. content: "";
  44. width: 0.75em;
  45. height: 0.75rem;
  46. background-image: none;
  47. background-color: #FFFFFF;
  48. -webkit-transform: rotate(45deg);
  49. -moz-transform: rotate(45deg);
  50. transform: rotate(45deg);
  51. z-index: 2;
  52. -webkit-box-sizing: border-box;
  53. -moz-box-sizing: border-box;
  54. -ms-box-sizing: border-box;
  55. box-sizing: border-box;
  56. -webkit-box-shadow: 1px 1px 1px #DCDDDE;
  57. -moz-box-shadow: 1px 1px 1px #DCDDDE;
  58. box-shadow: 1px 1px 1px #DCDDDE;
  59. }
  60. .ui.popup .ui.button {
  61. width: 100%;
  62. }
  63. /*******************************
  64. Types
  65. *******************************/
  66. /*--------------
  67. Spacing
  68. ---------------*/
  69. .ui.popup {
  70. margin: 0em;
  71. }
  72. .ui.popup.bottom {
  73. margin: 0.75em 0em 0em;
  74. }
  75. .ui.popup.top {
  76. margin: 0em 0em 0.75em;
  77. }
  78. .ui.popup.left.center {
  79. margin: 0em 0em 0em 0.75em;
  80. }
  81. .ui.popup.right.center {
  82. margin: 0em 0.75em 0em 0em;
  83. }
  84. .ui.popup.center {
  85. margin-right: -1.25em;
  86. }
  87. /*--------------
  88. Pointer
  89. ---------------*/
  90. /*--- Below ---*/
  91. .ui.bottom.center.popup:before {
  92. margin-right: -0.4em;
  93. top: -0.4em;
  94. right: 50%;
  95. left: auto;
  96. bottom: auto;
  97. -webkit-box-shadow: -1px -1px 1px #dcddde;
  98. -moz-box-shadow: -1px -1px 1px #dcddde;
  99. box-shadow: -1px -1px 1px #dcddde;
  100. }
  101. .ui.bottom.left.popup {
  102. margin-left: -0.8em;
  103. }
  104. .ui.bottom.left.popup:before {
  105. top: -0.4em;
  106. left: 1em;
  107. bottom: auto;
  108. right: auto;
  109. margin-right: 0em;
  110. -webkit-box-shadow: -1px -1px 1px #dcddde;
  111. -moz-box-shadow: -1px -1px 1px #dcddde;
  112. box-shadow: -1px -1px 1px #dcddde;
  113. }
  114. .ui.bottom.right.popup {
  115. margin-right: -0.8em;
  116. }
  117. .ui.bottom.right.popup:before {
  118. top: -0.4em;
  119. right: 1em;
  120. left: auto;
  121. bottom: auto;
  122. margin-right: 0em;
  123. -webkit-box-shadow: -1px -1px 1px #dcddde;
  124. -moz-box-shadow: -1px -1px 1px #dcddde;
  125. box-shadow: -1px -1px 1px #dcddde;
  126. }
  127. /*--- Above ---*/
  128. .ui.top.center.popup:before {
  129. top: auto;
  130. left: auto;
  131. bottom: -0.4em;
  132. right: 50%;
  133. margin-right: -0.4em;
  134. }
  135. .ui.top.left.popup {
  136. margin-left: -0.8em;
  137. }
  138. .ui.top.left.popup:before {
  139. bottom: -0.4em;
  140. left: 1em;
  141. top: auto;
  142. right: auto;
  143. margin-right: 0em;
  144. }
  145. .ui.top.right.popup {
  146. margin-right: -0.8em;
  147. }
  148. .ui.top.right.popup:before {
  149. bottom: -0.4em;
  150. right: 1em;
  151. top: auto;
  152. left: auto;
  153. margin-right: 0em;
  154. }
  155. /*--- Left Center ---*/
  156. .ui.left.center.popup:before {
  157. top: 50%;
  158. left: -0.35em;
  159. bottom: auto;
  160. right: auto;
  161. margin-top: -0.4em;
  162. -moz-box-shadow: 1px -1px 1px #dcddde;
  163. -webkit-box-shadow: 1px -1px 1px #dcddde;
  164. box-shadow: 1px -1px 1px #dcddde;
  165. }
  166. /*--- Right Center ---*/
  167. .ui.right.center.popup:before {
  168. top: 50%;
  169. right: -0.35em;
  170. bottom: auto;
  171. left: auto;
  172. margin-top: -0.4em;
  173. -moz-box-shadow: -1px 1px 1px #dcddde;
  174. -webkit-box-shadow: -1px 1px 1px #dcddde;
  175. box-shadow: -1px 1px 1px #dcddde;
  176. }
  177. /*******************************
  178. States
  179. *******************************/
  180. .ui.loading.popup {
  181. display: block;
  182. visibility: hidden;
  183. }
  184. .ui.active.popup {
  185. display: block;
  186. }
  187. /*******************************
  188. Variations
  189. *******************************/
  190. /*--------------
  191. Size
  192. ---------------*/
  193. .ui.small.popup {
  194. font-size: 0.75rem;
  195. }
  196. .ui.large.popup {
  197. font-size: 1rem;
  198. }
  199. /*--------------
  200. Colors
  201. ---------------*/
  202. /* Inverted colors */
  203. .ui.inverted.popup {
  204. background-color: #333333;
  205. border: none;
  206. color: #FFFFFF;
  207. -webkit-box-shadow: none;
  208. -moz-box-shadow: none;
  209. box-shadow: none;
  210. }
  211. .ui.inverted.popup .header {
  212. background-color: rgba(0, 0, 0, 0.2);
  213. color: #FFFFFF;
  214. }
  215. .ui.inverted.popup:before {
  216. background-color: #333333;
  217. -webkit-box-shadow: none;
  218. -moz-box-shadow: none;
  219. box-shadow: none;
  220. }