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.

214 lines
4.4 KiB

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